How to Create a Simple & Sleek Web 2.0 Site Footer

Since Web 2.0 hit the internet, footers have become more important than ever, and there has been some great looking work done downstairs. In this tutorial I'll show you how to produce a sleek looking site footer in Photoshop.

The Footer

Here's the footer we'll be creating, click on the shot below to see the full size version:

Step 1

Along with liquid headers and footers, gradients are a common hallmark of Web 2.0 style design. For our tutorial we will be using a neat package of gradients that simular 3d / materials that you can get from the excellent Deziner Folio site. Click Here to Download the Gradient Package

Step 2

Open your new Photoshop file. I've created mine with large dimensions - 1440 px x 900px (to fit my 17inch notebook screen). Of course your actual footer shouldn't be this large, however it's good to simulate what happens when your browser window is stretched.

Choose a background color, in my case the choice for background is a simple gradient with #b0b0b0 and #e1e1e1. Move your cursor on the screen holding SHIFT to create a vertical gradient down the page.

Step 3

In web design it's very important to decide what kind of layout you are going to be creating. That is to decide between a liquid layout (one that stretches out across your browser) or fixed (in many Web 2.0 style sites fixed layouts are usually centralized). In our footer, we will work with a fixed layout measured out to 760px x 420px. These measurements will ensure that even on an 800px x 600px screen, our footer will still appear properly.

Use guides to delineate the size of your website as shown below. Note that if you want create a layout that is optimized for 1024px x 768px setups, then define your guides to delineate a 955px x 600px area.

Step 4

Although our footer is a fixed width, we still want the footer to stretch out across the page and fill out the remaining area. To do this we will use a pattern made by me in photoshop to simulate a metal plate. To download the pattern click here. Open this image in photoshop and go to Edit > Define Pattern and choose a name for the pattern.

Now open a new file with 1440px for width and 86px for height, and go to Edit > Fill and pick the pattern we just created. Select all (CTRL+A for PC and APPLE+A for Mac), then cut and paste the image into the bottom of our first document. You will get the result shown below.

Step 5

Now it's time to user our beautiful gradient package from Step 1. Create a new layer and create a rectangle using Marquee Tool (M) with 100% of document width and 21px of height. Now select Gradient Tool (G) and select a cool gradient. I selected "Black 5 - Gloss" from the gradient package. Now move the gradient tool vertically over the marquee holding down "SHIFT" to ensure it's exactly vertical.

Move the resulting shape to the top of the shape created in step 4. You should have something that looks similar to the screenshot below.

Step 6

Now we add a drop shadow effect to the layer we created in Step 5.

Step 7

Now set your Foreground Color to #545557 and Background Color to #1e211f. Create new layer below the step 4 layer. Use the Marquee Tool (M) to select the content of the step 4 layer. Select Gradient Tool (G), choose the first gradient (combination of back and foreground colors). Draw a gradient over the marque holding shift to get the vertical gradient. Now go to the step 4 layer and set this layer's blending mode to Multiply.

Step 8

Now create a new layer above all the other layers and draw a rounded rectangle in the middle of our guides, choosing the color to be #dfdfdf. Right click the layer, click on Blending Options and then create a Drop Shadow effect for the rectangle. Then right-click on the effect layer and choose "create layer". This will split the drop shadow on to its own layer.

Now you have the rectangle layer and shadow layer, move and resize the shadow to get the result below. You may wish to press CTRL-T to get the transform tool up, then right-click and choose Perspective, then drag the top two handles in towards each other. Alternately you can move the shadow down and use a soft eraser brush to brush out the top edges.

Step 9

To finish the design add some text, copyright information and your logo to the bottom.

Step 10

To get the footer ready for use in your HTML file, simply remove the text (the text will be added in HTML), flatten the whole file and cut the background of footer as shown below, then paste it in to a new file. As we did in Photoshop, the pattern can be produced using a background property in your CSS document. This is the reason why we have cut the image so small as this leads to better performance with the smaller file size.

To cut the center of footer just select the content inside guides and cut-it and paste into another file.

Save both files using Save > Save For Web & Devices and select JPG with an appropriate quality setting. JPGs and PNGs are good for images like the one shown where there are a lot of graduations of color. GIF images are better for areas of flat color. This is due to the algorithms each uses.

The Footer

And you're done, a lovely footer element! For more great footer ideas, check out Thiuven's 35 Beautiful Footer Designs.

If you enjoyed this post, your vote is always highly appreciated!! Delicious StumbleUpon Float Reddit Mixx

Comments

Add a Comment

Note: We use Gravatars on PSDTUTS, they are little icons that appear next to your name on this site and on many others. You can get a Gravatar account for free and any other site that supports it will show your avatar too!

Trackbacks

Leave a Trackback