Creating a Photoshop Web Design Layout – Part 3

Step 7 – Taking our general layout further

In designing the Header and Footer we’ve only needed to layout our single base column, which is 920px wide. I specifically picked this width so we could split it up into three columns later. This width works out well because it gives us some flexible layout options. On subpages, we can pick to have a two-column or single-column layout. The two-column layout would consist of a sidebar that is 1/3 the width of the layout with a main column that is 2/3 the width of the layout. Then, we also have the option for a three-column section, which is what the bottom half of our homepage will be.

Now you may be wondering, why 920px? It’s not divisible by three? Well 920px will create three columns that are 300px wide with 10px margins in between. If this is hard to visualize, don’t worry! It’ll all be clear very soon. Just keep following.

Add four more Guides to your layout in the same way we did way back in Part 1. To create a new Guide, go to View > New Guide. Set them up as I have below.

Photoshop Web Design Layout

You’ve just created the three columns.

Photoshop Web Design Layout

Hypothetically, if we wanted, this is how it would work if we wanted to have a two-column layout on other subpages with a main column and a sidebar.

Photoshop Web Design Layout

Now we want to setup our specific homepage areas. So, add five more Guides.

Photoshop Web Design Layout

Here’s what we have now and how these areas will layout later.

Photoshop Web Design Layout

Step 8 – Adding active/hover button to the Menu

We want our layout to to feel like as much like an actual page of the future website as possible. So, we should also add some variation to the Menu. We’re going to add an active button. This could also be used as a CSS hover for later when you code the template.

In the Layers Palette, create a new layer in the Header > Menu group. Name it Active Button. Move the layer so that it’s below your Menu’s sample text.

With the Rectangular Marquee Tool (M), make a selection around the Home button. Leave out the Menu’s dividers in the selection.

Photoshop Web Design Layout

Fill the selection with a dark red (#9f0e0e). Deselect the selection.

Photoshop Web Design Layout

Step 9 – Adding the Homepage Image

This step is totally subjective. Some people just want a quick image with some text on it to save time. It also allows you to put something nice on your homepage with out a lot of complicated coding. That’s what I’m going to do for this tutorial so beginners can utilize the design.

More advanced option might include putting a Flash image rotator, or a jQuery content rotator with possibly items from your Portfolio. There are many options.

You can put in whatever image you want at the top of your homepage. I used this free stock image:

http://www.sxc.hu/photo/864331

Import your image into your Photoshop document. To do this, open up the image and simply drag and drop it onto your PSD web design layout’s canvas.

Photoshop Web Design Layout

In the Layers Palette, make a new layer group at the top and name it Homepage Content. Make another layer group inside of Homepage Content and name it Homepage Image. Put your image into the Homepage Content > Homepage Image group.

Photoshop Web Design Layout

Now we need to scale our image down so it fits within our Homepage Image area. So with the image layer selected in the Layers Palette, hit command+T (ctrl+T on a PC) to enter Free Transform mode.

If your image is so large that you cannot see the bounding box, it may help to zoom out on your canvas in order to resize your image layer. Command- (ctrl- on a PC) will zoom out and command+ (ctrl+ on a PC) will zoom in.

Photoshop Web Design Layout

Scale down your image so that it will fit neatly into your Homepage Image area. Then make a selection around the Homepage Image area with the Rectangular Marquee Tool (M).

Photoshop Web Design Layout

Now we’re going to hide the extra bit of the image. In the Layers Palette, click the Add Layer Mask button to add a layer mask to the current selection. Deselect the selection.

Photoshop Web Design Layout

Now this is optional, but I wanted to add some text to my image. I made a black box and then set that layer’s opacity to 50%. I then added some white text. I put a bigger title with some smaller text. I then gave all of the text a drop shadow in the Blending Options.

Photoshop Web Design Layout

To polish off the image, let’s give it a 1px border. Right-Click the image layer and click Blending Options. Set the layer styles as I have.

Photoshop Web Design Layout

Here is the result so far.

Photoshop Web Design Layout

Step 10 – Adding the Homepage Slogan

Let’s start with creating the background for where we’ll place the slogan.

Make a new layer group named Homepage Slogan and place it in the Homepage Content layer group. Create a new layer and name it Slogan BG. Place it in Homepage Content > Homepage Slogan.

With Slogan BG selected in the Layers Palette, make a selection of the Homepage Slogan area with the Rectangular Marquee Tool (M). Fill in the selection with white (#ffffff). The color doesn’t really matter much because we’ll be filling this layer with layer styles.

Photoshop Web Design Layout

Deselect the selection. Right-Click the Slogan BG layer and click Blending Options. Set the layer styles as I have.

Photoshop Web Design Layout

And here is the result.

Photoshop Web Design Layout

Add some red (#b60d0d) text into the Homepage Slogan area. Size and place it accordingly. On mine, I added an inner shadow. You wouldn’t want to do this if you plan to actually use real text in your final coded website opposed to the text being on an image.

Photoshop Web Design Layout

Step 11 – Making the Homepage Boxes

Create a new layer group and name it Homepage Boxes. Place it within the Homepage Content group. Create a new layer and name it Box BG. Place it in Homepage Content > Homepage Boxes.

Draw out a selection that fills the first Homepage Box area with the Rectangular Marquee Tool (M). Fill it with white (#ffffff). Like the Homepage Slogan, the background color doesn’t really matter because we’re going to be styling the layer.

Photoshop Web Design Layout

Deselect the selection.

Now copy the layer styles from your Slogan BG layer to your Box BG layer. To do this, option-Click (alt-Click on a PC) on the Effects of the Slogan BG layer and drag and drop them on the Box BG layer.

Photoshop Web Design Layout

Now add some red (#b60d0d) text for the title. I used Regular Arial font at 22pt to write out “Our Services”. Position it in the top left corner of the box.

Photoshop Web Design Layout

Now put down some text for the bullets.

Photoshop Web Design Layout

Use the Polygon Tool (U) to make a triangle as the bullet.

Photoshop Web Design Layout

Keep copying the bullet so there is one on each line. To do this, hold shift+option (shift+alt on a PC) and use the Move Tool (V) to drag down a copy of the bullet and put into place. Then, to stay organized, place all of the bullets into their own folder.

Photoshop Web Design Layout

In the Layers Palette, group everything in the Homepage Content > Homepage Boxes layer group into a group called Box 1.

To do this, highlight everything in the Homepage Content > Homepage Boxes group by clicking the first item and then shift-Clicking the last item. Then hit command+G (ctrl+G on a PC) to group them all together.

Then make two copies of the Box 1 group and name them Box 2 and Box 3. Place them accordingly.

Photoshop Web Design Layout

With the Text Tool (T), change the title of the second box to something else. I used “Recent Clients”.

Photoshop Web Design Layout

Change the title of the third box to “Recent Projects” and delete the bullets and text.

Photoshop Web Design Layout

Now create your project thumbnails and import them into your PSD web design layout. The project thumbnails need to be 90px by 90px. Arrange six of them evenly in the third box, Recent Projects.

Photoshop Web Design Layout

And there you have it, your project is complete. Hopefully your canvas looks something like this.

Photoshop Web Design Layout

Final Image

Photoshop Web Design Layout