Part 3 – The Footer

And now we come to the final piece of the design process – the Footer. I enjoy designing footers because they represent completion; they’re also the most overlooked section of a page that I feel that it deserves the same attention as the other parts.

The height of the footer is approximately 375 pixels. If you haven’t already done so – extend your canvas size to an additional 375 pixels – but be sure to click the anchor all the way to the top.

Create 3 new horizontal guides: first is where the “Below the Fold” background ends, then approximately 35 pixels below, and third – another 30 pixels down (this is where the footer background layer starts). Make a selection from the first guide to the next one down, make sure you’re on the “Below the fold” background layer, and do a gradient fill: primary color #e3e0d2, secondary #f3f2ed. Next, create a new layer for the footer background and add a gradient fill: primary color is #361f01 and secondary #493215. Do 80 percent for the primary fill. Finally, create 3 horizontal lines with the line tool at 1 pixel each with the following fills (in the following order): #ffffff, #000000 and #624825. Line them according the last guide you’ve created (see below).

Duplicate the text layer for the slogan (The Fold), change the content to say “Hire me for professional work”, drag downwards to the footer, and place on the left half of the footer area. Add another text area, use Verdana, 12px #ffffff, enter some dummy text, and place directly below the large text.

On the right half of the footer, we’re placing a rounded rectangle for the background of the contact form. Using the Rounded Rectangle tool – create a rectangle, center between 6 columns in the grid. Add a drop shadow and stroke effect as shown below:

Create a new layer and make 3 rectangles inside the rounded rectangle we’ve just created. These will act as the form fields. Note that these are just as markers which will not really be used in the output. We’re using real form fields in the code. Fill these rectangles with #ffffff using the paint bucket tool.

What’s a contact form without a pretty submit button? Using the rounded rectangle tool – create a button and add an inner shadow (66 percent opacity) and a 1px inner stroke – #85827e. Add the text “Submit” on top of this button using “Rockwell” at 14px.

Finally, remember I said the footer should have the same detail as the other parts of the page? We’re going to add a nice glow in the background which will highlight our large text and the contact form. Select the footer background with the selection tool. Next, pick a soft round brush at 500 pixels, select color #ffffff and decrease the opacity of the brush to 10 percent. Center the brush horizontally and halfway above the footer – click once and Voila – instant glow in the background!

And there you have it. We’ve just created a full page mockup in Photoshop. Next will be coding the HMTL and CSS – so stay tuned!

You can download the .psd from this link