Download Source Files
- Source files for this tutorial are available to Premium members.
Get a Premium Membership
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.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Daniel Lopes
Premium Members
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription. Join Now
Related Posts
Premium Membership
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription
Justo Resto Las Lomitas - Tipografia 3D - More
Photoshop Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Other Plus Sites ...
aetuts+ audiotuts+ vectortuts+ tuts+ phototuts+ cgtuts+ nettuts+ psdtuts+ activetuts+Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Psdtuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Next good tutorials on PSDtuts. This site rocks.
Just discovered this website yesterday but I’m all ready best friends with the content
Keep up the good work!
Loving your tutorials. You are the reason I finally requested a paypal account (which I never dared taking out of selfprotection). So just need to wait for the security measures of paypal to arrive and I’ll sign up with you guys!
tnx for the great stuff! Very much appreciated!
Great tutorial and very useful. I’ll use this technique for my sites.
Thanks for sharing
Nice tut, but I get lost at step 3.
What is the correct measurements for placing the guides on a design of 1024×768?
goooood, i will use this idea:)
STUMBLED!
Awesome post. Keep them coming.
VOTED for this post at:
http://www.newsdots.com/tutorials/how-to-create-a-simple-sleek-web-2-0-site-footer/
Very nice tutorial. Great implementation of the gradient tool. And nice colors.
Gr8 tuts as usual i hv no issues 4 this tut………..! really Awesome
4 collis: Can u post some good tutorials on ” How to achieve glass effect in Photoshop?”
I hv nice concept in mind but don’t knw how to achieve glass effect..so pls post some nice and good tuts
thnz in advance
I’ve got to try this one out!
This is a great! Very slick. I like it better used as a header though
Thanks!
Hello
Looks nice!
thnx!
very nice tutorial! cool result!
Nice tutorial
I like & love it////
Cool nice & lovely
Keep Such stuffs comming. Thanks man.
“Hello. Thanks for Feedback, and I’m glad that have liked. In the next tutorial I will make something more advanced. About the problem with PNG (which is not the case of the tutorial), I use this javascript code (http://youngpup.net/projects/sleight/) to fix the problem in IE5 and IE6, is really easy to use… IE7,FF,Opera and Safari already has the support of PNG.”
I hate how people say PNG is fine, use this JS hack here… Im using IE6.0 and it doesnt work, plain and simple. If you want an actual hack, have GIF backups made for older browsers and replace with them. No filter effect has worked and I dont feel any ever will.
Thanks!
Lautus Design
Thanks for featuring our Gradient set in the article…
Nice, I like it! I learned something
I like the footer too, pretty original. Well done.
Thanks for the nice tutorial. I have a question how did you come with the values 955px x 600px for a layout that is optimized for 1024px x 768px ?
Nice collection of web 2.0 footer, thanks for great effort.
It is really helpful for me to design a web 2.0 footer, thanks for good post.
Awesome work. Very clean and user friendly. Muinto Bom!!!
what a impressive article. last days I didn’ t read post like that. I am now your blog’ s follower thanks for this useful blog. you are now in my bookmarks.
Hey Daniel, great tutorial. Didn’t know I could right-click an effects layer to get that effect into its own layer. I’ve added my results to my blog and given you credit of course!
psd tuts rocks!!!!!!!!!!
Guys you are making the internet evolve in terms of look and feels. No longer programmers rule. If there isn’t a good design, good bye website. No matter how good the programming is
Nice tut. Thanks for the gradient pack, will save me loads of time doing my photo retouching and I can spend more time surfing the web and finding great tuts like yours!
very helpfull
hey, what to you mean with “Then right-click on the effect layer and choose “create layer”. This will split the drop shadow on to its own layer.”
can you show a screen please? i dont understand this ..
Bom ver que brasileiros mandam bem também no design, só pecou nas setinhas dos print, ta bem à moda brasileira mesmo!
obrigado por compartilhar conhecimento!
great tutorial. Didn’t know I could right-click an effects layer to get that effect into its own layer.
cool.web 2.0 is great.
Real nice tutorial, Thank you for posting this, however, there are a few things that you assumed.Overall real nice.
Great Work…
很喜欢这种风格！学习了！呵呵~
I like it very much !