Step 3 – Creating the Header

We’re going to put some light on the background of the Header section.

In your Layers Palette, create a new layer in the Header > Header BG folder. Name it Header Light. Next, draw out a pretty big oval in the middle of your canvas with the Elliptical Marquee Tool (M) and feather the selection 50px. To feather the selection, you simply right-Click the selection and hit feather. Enter 50px.

With the Header Light layer selected fill the oval with white (#ffffff). To do this, set white as your foreground color and hit option+backspace (alt+backspace on a PC). Then hit command+D (ctrl+D on a PC) to deselect the selection.

Move the white oval up so it’s mostly off the canvas but the bottom of it is barely showing onto the top left of the Header. This will create some shining backlight where we’ll be inserting our logo.

Assuming you don’t have a logo yet, let’s get one started. Select the text tool and type out the name of your website. I used the font, Eras Demi ITC, at 50pt size. The color of the text doesn’t really matter. With the Move Tool (V), position the logo so it’s in the top left corner of your template.

In the layers palette, create a new folder and name it Logo. Place the Logo folder within the Header folder, and then place your logo text layer in Header > Logo.

For the slogan, create a new piece of text. I used the same font as the logo and made it 15pt in size. Position it as I did.

Now we’re going to add some layer styles to the logo to make it pop. In the Layers Palette, right-Click the logo layer and go to blending options.

Set the layer styles as I have.

And here is the result.

Now let’s finish off the Header with a nice 1px finishing line. Remember, web design is all about the subtle gradients and 1px lines. It’s all about the little things!

In the Tools Palette select the Single Row Marquee Tool and set your foreground color to a very dark grey that’s not quite black (#191919).

In your Layers Palette, create a new layer in your Header > Header BG group and name it Header Bottom Divider. Make a single row selection that overlaps the very bottom of your Header. Fill it in with the dark grey (#191919) by hitting option+backspace (alt+backspace on a PC).

Step 4 – Creating the Menu

Now, we want to start off by creating another 1px line just below the Header Bottom Divider that overlaps the top of the Menu.

So, in the Layer Palette, create a new layer in the Header > Menu group and name it Menu Top Divider. Set your foreground color to a light red (#ce3030). Use the Single Row Marquee Tool to make a single row selection just below the Header Bottom Divider. Hit option+backspace (alt+backspace on a PC) to fill the selection with the light red (#ce3030).

Also add another 1px line in the same way at overlaps the bottom of the menu. Name this layer Menu Bottom Divider. Also place it in the Header > Menu group in the Layers Palette. Use the Single Row Marquee Tool and fill it in with a darker shade of red (#ad3232).

Next, we’re going to add a gradient to the Menu layer. Right-Click the Menu layer and click Blending Options.

Set the layer styles as I have.

And this is what you should have now.

In order to make this more presentable to a client or whomever, we want to make our PSD layout look as much like a website as possible to create a clear visualization. So, add some text to your menu.

Come up with some button text that’s logical for your website. Many times at this stage in the web design process, you’ve already come up with a sitemap with your client. In this case, it’s important to reflect these ideas in your Photoshop web design layout you submit.

In this example, I just wrote out some text and spaced the buttons out evenly. I also added a slight drop shadow to the text layer.

In order to make these look more like buttons, we’re going to add some dividers in between each. Each divider will be 2px in width. It will consist of a 1px line that is a darker red and a 1px line that is a lighter red. This will give the illusion of divots being sort of “carved” into our menu.

To do this, create a new layer in your Header > Menu layer group in the Layers Palette. With the Rectangular Marquee Tool (M) draw out a line that is the height of the menu (minus 1px on the top and 1px on the bottom) and 1px in width. Fill it with a dark red (#8c0b0b). Then move the selection 1px over to the right and fill it with a light red (#c72525).

To complete this task it will very useful to really zoom into your canvas.

Next, copy your divider and make sure they’re all placed in between your buttons.

An easy way to do this is to hold option+shift (alt+shift on a PC) and drag out a copy of your divider to the desired location. Option/alt tells Photoshop to make a copy, and shift tells Photoshop to keep the object symmetrically placed as your drag it across the canvas.

To keep our Photoshop document looking neat, let’s take all of our divider layers and group them together.

An easy way to do this is to click the top most divider layer in the Layers Palette and then shift-Click the bottom most divider layer. This will highlight these layers and all layers in between. Then hit command+G (ctrl+G on a PC) to group them all together. Rename the group, Menu Dividers.

Step 5 – Adding the Menu Shadow

Let’s add the finishing touch to our entire Header section by adding a subtle shadow underneath the Menu. You already created the layer we’re going to edit back in Part 1.

In the Layers Palette, find the layer named Menu Shadow located in Header > Header BG. Right-Click this layer and select Blending Options.

Set the layer styles as I have.

Here is the result.

Create a new layer in the Header > Header BG group in your Layers Palette. Name it Menu Shadow Top Divider. Use the Single Row Marquee Tool to make a 1px line selection that overlaps the top of the Menu Shadow. Fill in the selection with white (#ffffff).

Step 6 – Creating the Footer

Start the Footer by dragging down a copy of Logo and placing it as I did. You can do this easily by clicking your logo layer in the Layers Palette. Then go back to your canvas, and while pressing option (alt on a PC), drag out a copy of your logo down to the footer.

Also, remember to go back to the Layers Palette and move this new layer into your Footer group to stay organized.

With the Text Tool (T) selected highlight the footer logo’s text and change it to 35pt, making it smaller. Then with the Move Tool (V), reposition the footer logo so it’s in the top left corner of the Footer.

In order to really paint a visual picture for our client, let’s make sure to fill the Footer with realistic content.

Add some copyright text below the footer logo.

Then add some text to simulate footer links on the right side of the Footer. I used the same text I used in the layout’s main menu. I again added a subtle drop shadow.

We won’t be adding any gradients to the Footer (other than the Footer Shadow), but we will polish it off with some 1px lines similar to what we did with the Header. To do this we’ll be creating two more layers in the Footer group. Put each 1px line on its own layer to stay organized. To make your selections, use the Single Row Marquee Tool.

Add a dark grey (#191919) 1px line that overlaps the top of the Footer.

Add a light red (#c13131) 1px line that overlaps the bottom of the Footer Top Border.

We’ll now create the Footer Shadow. In your Layers Palette, find the layer you created in Part 1 named Footer Shadow located in Footer > Footer BG. We want to give the Footer Shadow the same gradient as the Menu Shadow from the Header, except for reversed.

An easy way to do this is to go to the Layers Palette and adjust the window so that the Menu Shadow and the Footer Shadow layers are both in sight on your screen. Option-Click (alt-Click on a PC) the Gradient Overlay from the Menu Shadow and drag it onto the Footer Shadow layer.

Reverse the gradient. Right-Click the Footer Shadow layer and click Blending Options. Under Gradient Overlay, check the box that says “reverse”.

Create a new layer in the Footer > Footer BG group in your Layers Palette. Name it Footer Shadow Bottom Divider. Use the Single Row Marquee Tool to make a 1px line selection that overlaps the bottom of the Footer Shadow layer. Fill in the selection with white (#ffffff).

That finishes up the Header, Menu, and Footer areas. Here is what you should have now.

In this small image preview, it’s difficult to see all of your gradients and shading, but trust me, in the end when you’re viewing your website in the browser you’ll be thankful you took the time to fix the small details. It will look that much more professional.

In the next part, Part 3, we’ll be continuing to make our Photoshop web design layout into an actual layout specifically for your homepage. So, we’ll be adding homepage content.

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

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.

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.