Join Justin Seeley for an in-depth discussion in this video Simulating pages with layer comps, part of Photoshop CS6 for Web Design (2012).
- View Offline
The final stage of any mockup is to simulate pages in your design. If you've been following along throughout this chapter, you know that we've already got several groups inside of our Layers panel that represent the pages that we are going to be showing. However, what I want to do is simulate the pages actually being their own separate entity. And since Photoshop doesn't have support for individual pages like a program like Indesign or Fireworks or even Illustrator, I have to utilize something called layer comps in order to do that. So what I'm going to do is I'm going to go up to the Window menu and I am going to bring up the Layer Comps panel.
Inside of Layer Comps, basically all I'm going to do is start creating new layer comps based upon the content layouts that I've created over here on the right. So this first page is of course the homepage, so I'll create a new comp called Home. Hit OK. I'll turn off Content Home, turn on Content About, hit New, call this About. And we will turn off Content About, turn on Content Store, hit New, type our Store. Now I'll hit OK, turn off the Store, turn on the Contact Form, hit New, and call this Contact.
Now, I hit OK and I have individual pages ready to show the client, or even the developer, if I'm walking them through how the design works. So now inside of Layer Comps panel, if I was giving a presentation, I would just hit this button here and say, okay. Here's the homepage, here's the About page, here's your Store, and here's what the Contact page will look like. And so I'm utilizing layer comps in order to selectively display content that's inside of my design. It's a great way to simulate pages when you're using application like Photoshop that doesn't necessarily support that feature.
- Customizing a web workspace
- Decoding the mysteries behind screen size and resolution
- Coloring web graphics
- Using layers and layer comps effectively
- Working with transparency
- Creating wireframes on a grid
- Styling text
- Creating image sprites
- Optimizing images as JPEG, GIF, or PNG files
- Integrating with the rest of the Adobe Creative Suite