Category: Tools

GameDev Photoshop workflow Tips – Smart Objects

One of the new steps in my workflow lately has been creating Smart Objects for each art element in the Photoshop files for my games.  Smart Objects are a lot like prefabs if you have an understanding of the Unity game engine.

Smart Objects are like child Photoshop documents nested inside of a parent Photoshop document. You can turn any layer, selection of multiple layers,  or group into a smart object by right-clicking it in the layers menu and selecting “Convert to Smart Object”.

Photoshop gamedev workflow smart object
How to create a Smart Object from any layer, layers, or group in Photoshop CC

 

To edit the contents of a smart object you simply double click the layer, it will open up what looks like another photoshop file and you can make your edits.

When you are editing a smart object; saving will update the parent document.

You can close the smart object you are editing (be sure to save if you need to) and you will see the changes instantly in the parent document.

The great thing about this workflow allows me to make duplicates of a spike or a wall piece for example and repeat it to create a simulated screenshot of my game, then when I edit the Smart Object all the other copies update as well.

Simulated screenshot of Kick Bot DX by Two Scoop Games in Photoshop
Simulated screenshot of Kick Bot DX by Two Scoop Games in Photoshop

In the screenshot above of  Kick Bot DX, the walls were created using duplicate smart objects that will all update if one of them is edited.

Smart Objects act like their own Photoshop files but are stored int he parent .psd file so there are no extra files to manage.

Smart Objects can also have their own Smart Objects inside of them, BUT I recently tried to share a child of a child of two children of a parent and it unlinked them. This means Smart Objects inside of children cannot be shared.

If you would like to learn more about Smart Objects here are some great resources:

Webfonts, why hassle with ’em?

On our beloved web It used to be that if you wanted to have a cool custom font you would have to create a document in PhotoShop, save an image containing your text and add it to your site as an img tag. You might remember a time when fonts didn’t even matter because your site would be a ton of image slices generated by PhotoShop, Golive, or maybe you have been creating websites long enough to remember Adobe ImageReady!
Since those days things have evolved, next you might have used a transparent png file so you could have more options when it came to background color and what the text/image could be floating over.

But what is the present-day solution for fonts on the web?

You might use Photoshop and desire your code to look more like your mockup PSD, or you might be like me and design from the start in code, in which case you might have gone though a period of reling on basic webfonts, or you might have checked into a paid webfont service, or used Google Web Fonts and seen some the open source fonts which are now available.

All are great options, but what if you want something to look exactly how you want it to?

To get custom fonts on your site you can now use the @font-face property of CSS3, but will it work cross-browser?
Yes and No,
The fact of the matter is you can do it yourself,  but what about formats? There’s .woff, .ttf, .svg, eot, .ot, etc, which ones do you need? Will you remember to add the right fixes for IE?

Why waste your time when you can use ForntSquirrel!

Font Squirrel Webfont Generator

Simply upload the font you wish to use, in pretty much any format, and let the site do the rest. It will generate a zip archive with all of the files you need, including the font in various formats, and a css file containing the cross-browser compatible versions of @font-face.

Screen Shot 2013-05-15 at 10.35.10 PM
I usually copy the css out of the file it provides and add it to my current css file for the project, drop the font files in a folder called /font or /fonts, change the paths to the font files in the css to be correct for my application, and that’s it! You can just change the “font-family:” property of to what you want to call the font, and add it to whatever css selectors you wish to use it on, and you have your custom font ready to go, wherever you need it.

Screen Shot 2013-05-15 at 10.34.07 PM

I hope this helps you as much as it helped me, and lets you make better design decisions based on having more options!

-Alex