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.
Now that we've got all of our guides in place on our blank blog design that we're creating here inside of Photoshop, it's time to start utilizing shape layers to quickly mock up the rest of this design. Now I've also got my sketch document open here, and inside of the sketch I have basically a blueprint for exactly what I need. I need a header, a content slider, two rows of thumbnails, some text, an image, and a footer, and that's exactly what we're going to put in place. So let's go back over into my blank blog here, and I am just going to start working with the shape tools. So I'll back down here and select the Rectangle tool. And by the way, the Rectangle tool is the main tool that I use when I'm mocking things up.
I'm also going to make sure that the Rectangle tool is set to create shape layers and not paths or pixels. I'm going to select the fill color of a dark neutral gray and then I am just going to come out I am going to start clicking and designing shapes. So I'll click, and in this case I know the header needs to be 100 pixels tall because I set up my guides to be that way, and I also need it to be the full width of the template, which is 1200 pixels wide. So I'll do 1200 pixels by 100 pixels and I'll hit OK. That creates a brand-new shape layer exactly the height that I needed to be.
I'll grab my Move tool, and I'm just going to throw it up at the top. If it doesn't line up perfectly, that is okay, because we can always come back in and make what I call pixel-perfect adjustments a little bit later on. I am now going to grab the Shape tool again. I'll click. I want this to be 960 pixels wide by about 350 pixels tall and I'll hit OK. And again, I'll just kind of move this up in the area of where I think I want it to go, the content slider is going to go up there. Then I'm going to grab my Rectangular tool again.
I am going to start adding in the thumbnails for the little video rows that I have. So I'll just click and I want this to be about 300 pixels wide, and let's make them 200 pixels tall and hit OK. That creates 1, and let's go ahead and create two other copies. And then I'll just kind of move these in place. Select that one, move it over, select that one, and move it over. Again, it does not matter if these don't line up properly. That's okay. We can make adjustments on that later. Again, remember, this is just a rapid prototype.
Now if I want to create a second a row, the easiest way to do that is to select all three layers right here and then hit Command+J or Ctrl+J. Once I do that, it duplicates all the layers and then I can use my Move tool to just drag them down, something like that. Pretty simple. Now I'll grab my Text tool, because I do have a bit of text according to my sketch that goes underneath here. So I'll go back. And I am just going to click, draw out a box, something kind of like this. I want to make sure I'm using just a regular font, like Helvetica. I'm going to choose Regular.
I'll set it to 14 points is okay. And I'm going up to Type > Paste Loren Ipsum. That just pastes in some text for me. And if I need to increase the size of that, I can. In this case I am just going to shrink up the size of the box a little bit to match it. Switch to my Move tool. We will move it down just a little. I'll grab my Shape tool again, and I need an image over on the right-hand side, so I'll move that in and draw out, just like that. And again, we can always make adjustments to this if we need to later. Final thing that I need to include in here is going to be my footer.
That's the only other required thing that I need according to my design, so I'll just come down. And instead of clicking and typing in numbers, I'll just click and drag out a box, something kind of like this, that fits at the very bottom. And so just in a few short minutes, I have actually put together a full mockup of this blog design. So you see, I started off with the plan, which was just a hand-drawn sketch just like this and moved over into Photoshop, and I put together some guides, threw together some shapes, and now I've a pretty nice-looking mockup. It's messy, but I can always fix that later on.
So as you continue to evolve your workflow, try to get in the habit of going from one phase to the other throughout your design process. And it is going to make things a lot more streamlined and a lot easier for you to understand everything that's going on inside your file.
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.