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.
During the course of your rapid prototyping session, you may find that your mockups tend to get a little bit messy, and that's because we're just simply drawing out some shapes to give you an idea of exactly what the web site is going to look like. I didn't worry about what I call pixel precision in any case. But now I have opened this mockup that I've done quickly inside of Photoshop, and I want to actually refine this so that it looks exactly like it's supposed to. And in order to do that, I am going to have to make "pixel perfect adjustments." So let's take a look at how we can do that now.
As you can see, if I zoom in on this file, I have several of these elements that aren't really fitting in between the guides that I have created, some of which go off the page, some of which aren't inside the margins, and so I need to fix these so that they flow exactly as they are supposed to. So in order to do that, I need to start targeting those individual elements and moving them around. It's actually pretty easy to do. The first thing I am going to do is work on the header, so I will select the Header layer over here on the Layers panel and I am just going to just nudging it over to the left. As long as I have the Move tool selected, I can use my arrow keys to do this.
So I will just nudge it to the left until it lines up. You could also use Command+A or Ctrl+A on the keyboard to select everything and then use your Alignment tools up here. So I could align it flush to the left and then align it to the top, and it should fit right there in that window that I have created. Command+D or Ctrl+D to deselect. The Content Slider. The Content Slider needs to be centered directly in between both of these guides that I have right here. That's easy enough. All I have to do is just click and drag and it will snap right to those guides, or at least it should.
I can also zoom in to see if it's matching up exactly with the edges of the guides, which it seems to be. So that's all good. I may want to space this out a little bit more precise from the bottom of the header though, so in order to do that, what I need to do is drag out another guide. So I am going to come up to the top, click, and drag. I will find out where the other guide stops, which is right at about 100 pixels. Let's say I want to make this a 15-pixel margin, so I will drag that down to about an 115 and let it go.
If I find that's too close, I can always expand. Maybe 30 pixels will look better. So take that to 130. T here we go. Now I take the Content Slider and just move it up. It should snap right to the guide. I will do the same thing at the bottom of the Content Slider. Drag out of guide, let that snap to the bottom of the Content slider, and then we will drag out of guide and take it 30 pixels down beneath it. So from right there, 480, I need to go to 510. And if you won't go exactly to 510, that's okay; you can zoom in a few times and it should make it a little easier to get there. 510. There we go. Zoom back out.
Now I will take the row 1 thumbnails and I will drag those up, snap those to that guide, drag them over, snap them to that guide. You notice this square over here on the right exceeds the margin over here. So what I need to do is open up that group. I need to target that one, which is Rectangle 3 copy 2, and I will just move it over until it snaps. Then I can select all three of these and distribute them across the centers to center it up. Then I will close that.
I can do the same thing to Row 2 or I could simply delete Row 2 entirely by dragging it to the trashcan and then select Row 1 and hit Command+J or Ctrl+J. That's going to duplicate the entire group. I will double-click and rename this Row 2, and then I will just drag this down. I will snap it to the bottom and see exactly where it is. I will move it down 30 pixels, just like that.
Now I can drag out guides to snap to these if I need to. I will drag this out, like that. Snap there, snap there. I am just dragging out these guides so if I ever need to use this again, I already have them in place. Now I am going to take the Text/Image and I am going to drag those up a little bit. I need to make sure I have a guide in place though, so I will drag that out. And so this is about 940, so that means it needs to go about 970. Here we go, and I will drag these up, until they hit that.
I need to open up that group because this image should be flushed to the right, so I will do that: grab that and move it over. I also want it to be a little bit taller. It needs to match the height of the text, so I will do Command+T or Ctrl+T and I will drag it down until it snaps to the bottom of that text, just like so. I'll drag out a guide, have it snap to the bottom of that image, drag out another guide, and make that 30 pixels from there, so 1160.
It needs to go about 1190, something like that. There we go. The Bottom Banner, it's already in the middle. I just need to drag it up. There we go. And then towards the bottom, we have our Footer. I'll select the Footer. And you can see when I select it, it's actually way off the page and not aligned with the bottom. So I am going to Command+T or Ctrl+T to bring up Free Transform. I will drag it down till it matches all the guides and it should just snap right to them.
And then once I am finished, I will hit Enter to commit to my change. Now I will zoom back out and we can see the entire layout as it should be. So there we go, pixel perfection all the way across the board. I've got my Header inline, my Content Slider, all of my thumbnails, my text and image are in the right place, my banner is now centered and 30 pixels beneath everything, and my Footer now fully fits within a window of which I have defined. So it's going to take a little bit of time, but getting this mockup as close to perfect as you can is a great way to jump-start the other portion of this, which is then bringing in the content that you've aggregated to make this a real web site design where we add in images, buttons, navigation, UI elements, and all that kind of stuff.
This is just a skeleton, something to give us an idea of where everything goes. Now it's time to take this one step further and start adding the real content to make it a true working web design composition.
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.