Create A Website Layout On Photoshop – Part 1

Any good web designer will tell you that one of the first steps in designing your site, is creating a layout. Before Photoshop caught on for web design, most designers did this with a pencil and paper. But with Photoshop, you have to tools, to not only create a layout, but pretty much preview what you want your entire site to look like.

Step 1 – First you’ll want to create a new document. You can choose any size you want, but remember to keep the proportions around the same size your site is going to be. I used a 600×600 size for my site layout.

Step 2 – Next you will want to decide what you want your background color to be. Then click on the Paint Bucket Tool (G) , and click inside the design window. You can also use a patterned background, but for this demonstration, and what I’m wanting to design, I chose black.

Step 3 – For the third step, you need to decide what the layout of your site is going to look like. The easiest way to do this, is to put down some Guides.

You can select either a horizontal guide or vertical. Don’t worry about putting in a measurement, as you can drag them once you put in a measurement. Once you put a guide down, select the Move Tool (V)
, and now you can drag your guides wherever you want them to go. For beginners here is a labeled example of what my layout looks like…

Step 4 – Next you’ll want to create a new layer, and call it “Border”.

Step 5 – This is where the true excitement begins, as this is where you begin to make your big design choices. I find that when I’m doing a layout it’s best to work from the outside-in, much like a jigsaw puzzle. First select the Rectangle Marquee Tool (M) . Once selected, find the area that lies between the bottom of your document, and the bottom guideline of the footer. Drag the Rectangle Marquee Tool (M) from one end of the area down to the other.

Once the area is selected, grab the Gradient Tool (G)
. Once the Gradient Tool is selected, there should be a gradient toolbar at the top of your screen. Click inside that box where there should an option for two colors to select.

For my colors I chose #7A171A and #FFFFFF

After selecting your colors you’ll need to make a path inside the selected area. This step is another design decision, so feel free to do something different. But I started my path on the left side and ended it on the right side.

Make sure that you stay on the “Borders” layer when completing all sides of your border. If you don’t stay on the “Borders” layer then your colors won’t coordinate properly and turn out sloppy. The next portion, you’ll be repeating alot of steps.

Next, select your Rectangle Marquee Tool (M) again, and create a selection on the top border section. Then select the Gradient Tool (G) , once again and make a path from the bottom to top.

For the top border section, do everything like on the bottom, except start you gradient path on the right side and end it on the left.

Now, finish up your border, by doing another gradient on the right side, starting from the top and ending at the bottom.

If everything went according to plan, then your final product should look something like this…

The next part of the series, we will be working on the header and nav menu, so hope you come back next week to see the project through.

Leave a comment