Using Photoshop’s smart objects like sprites in larger projects
Sprites are common practice in front-end development. Simply said, a sprite is a huge graphic file containing frequently used images like icons. The idea is to load only one graphic file instead of many to reduce server requests and overall load time on your website. You can even add multiple versions of your graphics for hover-effects or alike (if you don’t use svg graphics, which would be even better).
A lot of my work consists of larger projects with multiple templates and viewports. Many elements are used repeatedly, like logo, navigation, footer and single elements like icons or elements for navigating modules.
What I like to do — and tell you about — is having all these elements in an external psd file (the sprite graphic), embedding it in my layouts and using masks to show only the part that I need.
This comes in really handy when you have all the layouts done and need to change simple things, like the name of a menu item. Instead of having to change this single text in all of my layouts (often spread over several psd files) I only have to change it in one file and let Photoshop’s build in smart object logic do the magic. This is not only way faster but also comes with the advantage of coherent changes. It simply minimizes the risk of forgetting to change something in a template.
Let’s start
If you’re designing multiple viewports like me you may have stumbled over the question of how to start:
- Placing all viewports beside each other and have one psd file for every template/page
- Having one psd file per viewport, with all templates/pages in it
What I use really depends on the project. Personally I like method 1 a bit more because you can see how the template behaves in different viewports. But there are times I use prototype tools for the mobile layouts and have to have them in a separate psd file.
The image above shows a part of one of my last projects. It’s just the 3 viewports beside each other, starting with the desktop viewport. Sorry, no mobile first in this design because I had done wireframes for all templates before starting to use Photoshop.
All the red guides are my grid system (they are cyan by default) and you can already see some elements that are used repeatedly, like the logo and navigation, the small round guides at the bottom of the stage indicating how many stages there are and so on.
And what you see is how the design actually started. Just simple layers and groups. But before I started on the next template I thought about what elements would be smart to have in a separate file for faster maintenance.
So, after this first design was done, I started to copy all these elements to a new psd file which you can see to the left.
At the top are the logo and navigation for all three viewports, followed by the footer for all viewports. I could have added way more elements, but even those few elements will do the trick and help me save time later on.
Hint: It’s smart to save this psd with transparent background and in a folder beside your design. I mostly create a folder called “linked-files” for this purpose.
So, back to the psd with my design: Click on “File” and “Place linked…”. Now select your psd with the elements you just created. Make sure the now shown smart object is scaled to 100% (you can disable automatic scaling for all elements in Settings -> General -> Resize Image During Place).
Now add a mask to the part of the smart object you want to see, like the logo for one viewport). Not duplicate the smart object and change the mask as often as needed.
You can now use you psd file with your layout and the smart object as template for the next page you’re designing.
If you ever have to change the text on a menu item you just have to change it in your sprite-file. Another hint: If you open ALL your layouts containing this sprite in Photoshop and then change something in the sprite, all files are going to be updated automatically.
If you don’t have all layouts open you will see a small hint in the layer palette beside your smart object, indicating that the linked file is out of date. Right click on the layer to update it.
But hey, I need to have a menu item look active, how can I do this?
If it’s a underline, just draw a line on top of the smart object. If it’s a color, just add a layer with the color and apply it as a “Layer mask”. To go a bit further even this layer with just a color could be a linked smart object, so if you want to change a color of all elements in your designs you could do this with the same trick: Place linked smart object and use as layer mask on all elements you want to have the color.
I hope you enjoyed the read. One last hint: Don’t move layers in your sprite graphic ever if you don’t want to update all your masks. And leave a little place for elements that may change it’s size, like the footer getting longer.
