Creating a Photoshop Web Design Layout – Part 1

At the end of this tutorial series, you will have a Photoshop web design layout that looks like this:

photoshop web design
For a larger preview, click the above image and you’ll be taken to my Flickr account where you’ll have the option to view the image at its native size, 1100 x 800.

Step 1 – Setting up your document

In this step we want to setup our document by laying out Guides to show us where to put all of the elements of our web layout. There are many ways to do this.

Open up a Photoshop document and set it up as I have.

photoshop web design

Also, make sure your rulers are visible and set to pixels. Hitting command+R (ctrl+R on a PC) will show and hide the rulers. Right-Clicking the ruler area will bring up the option to change to pixels.

photoshop web design

Now we’re going to put in many Guides to create the foundation for our layout. To create a new Guide and place it exactly where we want it, you need to go to View > New Guide.

You are going to create a total of 8 Guides in this step. Create them as I have.

photoshop web design

This is what your canvas should look like now.

photoshop web design

If you don’t see your Guides, you may have them hidden. Hitting command+H (ctrl+H on a PC) will show and hide your Guides. This is a very useful command because obviously sometimes you want to see your Guides and sometimes you don’t.

In order to create a more clear visualization of what we’re doing here, this is what the Guides look like in relation to what we’ll be creating later. Take note of I what call each section in the image below. I’m going to use those names to reference the different sections in the next step.

photoshop web design

Step 2 – Putting down the basic elements

Now, we’re going to set up the main elements that will layout the Header and Footer. In this step, we’ll be working with solid color blocks. This way you can see the transition in the next step when we start applying subtle gradients and shading.

Using the Rectangular Marquee Tool (M), make a selection the entire width of the canvas in the Header section. Create a new layer in the Layers Palette. Set your foreground color to a dark grey (#2c2c2c). Hit option+backspace (alt+backspace on a PC) to fill in the selection with dark grey on the new layer.

photoshop web design

Do the same thing for the Menu. Make a selection the height of the menu and the width of the canvas. Create a new layer and fill in the Menu with red (#b60d0d).

photoshop web design

Create a selection of the Menu Shadow area that’s the width of the canvas, create a new layer, and fill it with white (#ffffff). Obviously, it won’t show on our white background, but we’re going to come back to it later.

photoshop web design

Next, we’re going to use the same concept for filling in the footer sections. Remember to put each element on its own layer. Fill in the Footer Shadow with white (#ffffff). Fill in the Footer Top Border with red (#b60d0d). Fill in the Footer with dark grey (#2c2c2c).

As this lengthy tutorial moves forward, your Layers Palette will become very full. Remember to practice keeping all of your layers extremely organized in the Layers Palette. For clarity in this tutorial it might be a good idea to try and keep your Layers Palette organized exactly how I do, and that’s why in most of the screenshots from here on I’ll include the Layers Palette.

Here is what you should have now.

photoshop web design

Now, let’s organize our Layers Palette a little more in order to get ready for the upcoming steps. We’re going to create some folders in the Layers Palette and move some of the layers around.

If you’ve never organized your layers before, it’s really easy. You simply click the little folder icon at the bottom of the Layers Palette to create a new layer group. Then you can drag layers and other layer groups into that layer group. To rename a layer or a layer group, you simply double click the text and it will become editable.

Organize your layers like I did below.

photoshop web design

In the next part, Part 2, we’ll be continuing on to polish up the Header, Menu, and Footer.