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.
Once I have my wireframe open inside of Photoshop, the first thing I do is I start to create page structure. I know that I'm going to be mocking up more than one page because inevitably my web sites have more than one page. So the first thing I do is start to setup some layer groups so I can start placing content in there, which makes it easier for me to turn page content on and off as I work, and also serves me well later when I start to create layer comps to simulate the page functionality. So let's go ahead and start to create some page groups now and also some content groups that will serve as what I call master objects.
So the first thing I'm going to do is create a new group in the Layers panel. So I'll select the Background layer here, so I can start the bottom, and I'm just going to click the New Group icon. When I click that, it's going to create a new group called Group1. And I can double-click that name and I can call this Header. I'm going to go back down and I'll create another new group, double-click, and I'll name this one Footer, because I know those are two areas that I have to have. I'll create another new group. This one is going to be Content Home.
This is for everything that goes on the homepage. I'll create another new group. This one is going to be Content About for my About Me page. And I'll do Content Store, because we are going to build little storefront. And then the last group will be Content Contact. Now I'm going to start ordering these logistically, so I'm going to drag Header to the top because that's the topmost thing in the design.
I'm also going to take the Logo Placeholder and I'm going to drop it inside of the Header, because that's one of my master elements that's always going to be in Header. And I'll collapse that up, close that down. My Page Background here, that can go down underneath the Footer because that's always going to be in the background. My Footer is going to be staying right there, and I'm just going to put the rest of these in order of how they're going to appear in my navigational structure. I know Home is going to be first, so I'll drag it up. About Me, I'm going to put that second, so I'll drag that up. And then we'll have the Store come right before the Contact.
Now I'm just going to close these groups up for now, and as you can see, I have a much cleaner Layers panel now, with an organized structure fit for me to add content to each individual page as I go along. And so now all I have to do is save my work, and I can keep going and start adding content to my web site.
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.