Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
Join Justin Seeley as he reveals how designers can create vibrant web graphics, wireframes, and complete web site mockups in Adobe Photoshop. The course covers creating a custom web workspace for maximum efficiency; drawing, coloring, and optimizing web graphics; creating vector shapes and text that scale seamlessly; mastering transparency; building navigation bars and buttons; and speeding up these tasks with the Photoshop automation tools.
One of my favorite features of Photoshop has got to be layer comps. Layer comps are really underused in the design world though. I think it's because a lot of people don't really understand what layer comps are and how you can utilize them to enhance the designs and the presentations that you give to your clients. In this movie, I will be exploring how to use layer comps effectively to showcase multiple versions of a design that you might be working on inside of Photoshop. First of all, let's break down exactly what a layer comp is. A layer comp is simply a group or collection of layers that are displayed in different ways in Photoshop.
Photoshop basically takes a snapshot of your document at any given time using the layer Comps panel to showcase different layouts, arrangements, and even color choices. Let's take a look at how that works. I am going to go to the Window menu and I am going to choose Layer Comps. Once Layer Comps opens, I will drag it into the window so you can see it. By default, the only thing I have inside the Layer Comps panel is the Last Document State. That's currently what I am looking at right now. If I wanted to create a new layer comp from the design that I'm looking at here, I just come down and click New Layer Comp.
When I do that, I can name this Blue Background, and I can also choose to apply the layer's Visibility, Position, and Appearance. In this case, I will hit OK. So there's my first layer comp. Now, let's go over to the Layers panel, and you see inside the Backgrounds folder of this layer_comps.psd file I have three different choices: Red, Green, and Blue. If I turn off the blue background, and turn on the green background, I can then create a new layer comp called Green Background--again, remembering the visibility, position, and appearance. Hit OK.
Let's turn off the green and turn on the red, and we'll create another new layer comp there, and we'll call this Red Background. Hit OK. So now, anytime I want to show these to a client, I can simply come in here and click the eyeball next to blue background, and it turns blue; green background, turns green; red background, turns red. I can also use these little navigation icons right here. So I can cycle through all of my layer comps just by clicking. If I make a change to a layer comp, I can always update the layer comp by clicking this icon right here.
So for instance, if I wanted to, while I am working on the blue background, let's say for instance that I wanted to move something around, perhaps the buttons. Maybe those need to be a little bit farther down on the page. So I will select the Buttons group and I will just nudge those down using the arrow keys on my keyboard. Then I'll come over and I'll click the Update button. When I click Update, the icon switches back to Blue and now watch what happens when I switch: here's Green and Red. Watch the buttons when I switch back to Blue. They shift down the page, just as they should have.
So you can utilize layer comps to do all sorts of things, and change the configuration and layout of your design without having to create separate files. It's Photoshop's answer to multiple pages or artboards like you would have inside of Fireworks or Illustrator. It's not much, but it's all we have, and it's a great way to help keep your files organized and present a multifaceted design to your clients.
There are currently no FAQs about Photoshop for Web Design.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.