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.
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.
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.