At the end of this tutorial series, you will have a Photoshop web design layout that looks like this:
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.
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.
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.
This is what your canvas should look like now.
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.
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.
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).
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.
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.
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.
In the next part, Part 2, we’ll be continuing on to polish up the Header, Menu, and Footer.