How to Create Web Layouts in Photoshop

Video Transcript

"Hi, I'm Kelly Karnetsky; website designer with springshosting.com. Today I'm going to show you how to create web layouts in Photoshop. In order to create a web page layout in Photoshop, you're going to need the following software program: Adobe Photoshop. If you do not have Photoshop, you can download a free trial; it's available for both Windows and Mac at adobe.com. Step one; open up Adobe Photoshop. So now that we've got this opened, we need to move onto step two. We need to create a blank document. So file; new; we're going to say web and then we're going to do with 1200 and then the height is also 1200. Step three; we need to create the borders for our website 'cause 1200 X 1200 is very big. The website that we want to create is 960 pixels wide instead of 1200. So we need to create some guidelines so we know where our beginning and end of the website is with this. So we go up to view; new guide; the first guide that we're going to make is vertical. We're going to make it at a 120 pixels. So now that we've got that guide, we need to make the other guide and this one we're going to make at 1080 pixels. So now we've got out width set. So I've added extra guides in the top and the bottom. Now with that four width, we need to actually build our design. So, I need to create a background first. So I've added a gray background instead of plain white. Now I want to do something extra; I'm going to go ahead and add a little bit of a gradient towards the top. So it's a little bit of a, just a brighter little white. It's just a gradient. So, our gradient is right here. Now I need to go ahead and create the basic elements. So, inside my design, I need to fill this area with white. So, I've got a white box here. This white box also has a gray border and this is where my main content is going to be. And then I need a footer. So, I've got my footer right here. So, let's go ahead and start adding my other elements. Let's start with the menu bar. So, I've got my menu. I went to ahead and just took the text tool; type out all of my links that I'm going to have on my menu and then I added a nice square and put like a white gradient in between it, just to give it that web 2.0 feel. Now we've got our logo; but we need a copy at over to our other documents. So, let's go ahead and just say control A and then control C; so it's selecting all and it's copying. Click on our other document, control V which will paste it. So, I've got our logo on there now. And then I want to add some texts down into my, my footer. So, I've just used a different, you know, different styles; Aerial just to make it look very bold and pronounced. Add my logo down into the footer and then I need to add my extra links and my copy right down there. Now this is what our finished product looks like. Now you can take this finished product; you can send it to your coder. They can go ahead and cut it up for you and put it into a website or if you are, you know, how to cut it up and code it yourself, then you can do that yourself. I'm Kelly Karnetsky; website designer for springshosting.com. You just learned how to create web layouts in Photoshop."