Emily Nakkash

Sharing some art + copy with the world

Layer comp menu tutorial

Everyone works differently, but when I'm designing in Photoshop, I like to use Layer Comps to expedite and automate all sorts of functions. In this brief tutorial, I'll show you how to create simple menu states by using smart objects and layer comps together. Level: Intermediate.


Click on image to expand

Step 1

Start with your layout organized by screen. Here I have a folder with the top nav elements, one for the bottom nav (will get to that), and my four main sections: Home, Products, About, and Contact. Right now each icon at the bottom looks the same, but I want to create one element that I can easily use to show the user where they are. 


Click on image to expand

Step 2

Apply the style you want to your menu icons. You can see I've added a layer style to each icon, but the effect is turned off. A simple yellow color overlay works for me, but I have them all hidden for now. You can choose any number of active state styles, but keep things simple.


Click on image to expand

Step 3

Right click on your menu folder and convert it to a smart object. Then right click again and select "Convert to Linked..."—this is an optional step that will allow you to save your menu file externally so you can reference it across multiple PSDs. Make sure you keep the folder structure in tact throughout your process, or the link will break and you will have to re-link manually. Save your linked smart object, and you'll see that the layer icon now looks like a chain link.


Click on image to expand

Step 4

This is the tricky/fun part. Double click on your new linked smart object to begin editing it. We're going to create a Layer Comp for each section, within this new file. Since I created a layer style (color overlay) to differentiate my icons, I'm going to select "Visibility" AND "Appearance". Normally I only keep "Visibility" on because I don't want my file to give me any surprises when I navigate through it, but in this case it's useful. One by one, I turn on the "Color Overlay" layer style visibility (while leaving the other ones turned off) and save a new Layer Comp with these settings. Once I'm done, I have four Layer Comps with the same titles as my pages. Save and close the file to go back to your main document.

Click on image to expand


Click on image to expand

Step 5

Back in our PSD, we want to structure our folders a bit better. Go ahead and move your bottom nav folder into the first page's main folder. We're going to duplicate the same exact folder into each page. Before we do that, select the menu icon layer, and then open the Properties panel. (You can find it under Window if it's not visible.) You will see a dropdown menu that says "Don't Apply Layer Comp." From there you can select any of the Layer Comps you just created and saved into your smart object. Handy! Go ahead and select the first layer comp you created for the home page. Now this layer will always show the last saved version for that layer comp. Duplicate the bottom nav folder into each section folder, and select the appropriate layer comp from the properties panel for each. See the other three sections formatted below:


Click on image to expand

Step 6

Now we have the same layer duplicated across our screen designs, and the only difference is the layer comp you created to show/hide what the icons should look like. Awesome! Your last step is to save out each section. Turn on each folder one at a time and create a new layer comp for each, keeping only "Visibility" checked. Trust me, you will save yourself many headaches by keeping the other two items unchecked throughout your design process. They're useful in very specific situations, such as creating a universal menu, but can be a pain when you forget to update a layer comp and you suddenly have elements in all the wrong places. 

Click on image to expand

When you're done saving your layer comps, go to "File > Export > Layer Comps to Files..." in Photoshop CC 2015. (If you're still on 2014 or before, it's under "Scripts.) Select your destination and image settings, and you've got your screens ready to share with the world! 


The finished product!