How to not suck at Photoshop — #5 — Linked Smart Objects and Layer Comps

After the huge success of HTNSAP #4, here comes the fifth part.


There are a few things you can’t say often enough. Drink eleven liters water a day, walk 10000 steps, remember to take breaks, don’t drink and drive and the most important: remember to use Linked Smart Objects and Layer Comps in Photoshop. I’m not going to say anything that Bradee hasn’t already told you already, but I thought it couldn’t hurt to rephrase it in my own words.

Let’s say your workflow is at least a bit like mine. You have a huge project with several files that include different screens and states of those screens. For an iOS app there are most likely a few elements that are the same or nearly the same on every screen:

The tab bar.

The status bar.

Those are the two most common examples. Until earlier this year – when Linked Smart Objects were released – every single PSD of mine would contain all elements these objects needed. Three different PSDs with one and the same tab bar would have three copies of the same tab bar with lets say four icons and one background. Five elements times three. Fifteen. Let’s see if we can get this down to three.

Step 1) Take what you need and get the fuck out.

It’s time for your tab bar to move out. Give it a separate file. As I mentioned before I like to store all my Linked Smart Objects in one folder.

Step 2) States Of the Union.

Chances are you’ll need the same object in a few different states. In our case it’s the different active tabs. So go ahead, build them in a way that allows you to enable and disable them in every possible way.

Step 3) Layer Comps to the rescue.

This one is kind of strange for me. I hated Layer Comps for the longest time. They’ve been a total mess but got an update this summer and are kind of useful and versatile now. We’re using them for something amazing: States. Remember how step 3 told you to build everything so that you can enable every state without problem? That’s what you have to do now. Give every state its own Layer Comp. Done? Fine. Save the PSD in your 00_Linked_Smart_Objects folder. You may call it mylittlemagictabbar.psd.

Step 4) You get a tab bar. And you get a tab bar. EVERYONE gets a tab bar.

Now starts the magic. Open the document that’s in dire need of a tab bar. Now press Alt on your keyboard and drag the mylittlemagictabbar.psd into your just opened document. See that little anchor icon besides your layer name? Good job. This layer will get updated as soon as you change something in your mylittlemagictabbar.psd. And here comes the good stuff: It’ll get updated wherever you put it. You can alt-drag mylittlemagictabbar.psd in 20 PSDs, all of them get updated. Isn’t that amazing? And it gets better.

5) United States Of Photoshop

I’m sure you all know about the “Properties” palette that allows you to change various options of the selected layer? The radius of rounded rectangles can be changed here, for example. This unimpressive palette can do a lot more. Select your Linked Smart Object in the “Layers” palette and open the “Properties” palette.

There they are. Your Layer Comps. Right under that very descriptive path to the Linked Layer Comp on your computer. How’s that? Choose one and it’ll show only those layers the Layer Comp in your Linked Smart Object includes. Every instance of your Linked Smart Object can show a different state and you’ll be able to edit them all in one place. Magic.

That’s it.


Originally published at uarrr.org.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.