How to Create a Simple & Sleek Web 2.0 Site Footer
Mar 7th in Interface by Daniel Lopes 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.Related Posts
Keep reading with more great tutorials and articles!
Enjoy this Post?
We'd love your vote!
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
User Comments
( ADD YOURS )Colin March 7th
again with the lil details! nice!
by the way i’m loving these updates! it’s like clockwork damn! ::claps::
( )Adam March 7th
Great stuff! That site for the gradients is a great resource. The link for the sample pattern does not work though
( )chandan March 7th
cool
( )Collis March 7th
Hey Adam, that pattern link is fixed now, sorry about that!
( )Mankaran Bedi March 7th
@ Collis-the god
( )If i had money ….. i would definitely join the psdtuts plus . but i am an indian and 9$ for me is nearly 410$ which is very high…. So sorry
Keep the great tuts coming up……..
Dallas J Clark March 7th
very very nice, good details
( )Adam March 7th
Wow that was fast fixing the link. It took you guys all of 5 minutes?
( )Markus March 7th
Looks great!
Style 
( )Keep it up!
Collis March 7th
@Adam: hehe, yep i’m on the ball today!! About to finish up and go have dinner though, it’s getting dark here!
( )kuldeep March 7th
I must say not useful tutorial and learnt very less from this one. The gradients you provided are good, though.
I’ll suggest you to target more generalized tuts.
Thanks anyways and keep it up!!
( )Shane March 7th
Another nice tutorial – I’m in the process of redesigning my personal site, and the footer area is something I need to think about. Nicely timed work.
It also never ceases to amaze me as to how much free stuff there is out there – those gradients will prove useful no doubt.
Great stuff – many thanks!
( )giackop March 7th
That was nice.. It could be useful..
( )Lamin Barrow March 7th
That is very cool.
( )ramsesoriginal March 7th
Very nice footer indeed. I read tutorials here since the site exists, and i never felt like correcting anything, …. ’til now. I must say that the method to prepare the pieces for the web is not what I would recommend: I would rather cut out a small bit of the pattern (as you did), and then hide all the layers except the white rounded rectangle and its shadow, and export that one as a transparent png. In my opinion that would allow to work more easilly with the whole thing.
But I repeat: the footer created Is really beautiful!
( )Alberto March 7th
Useful! Thank you!
@ Ramsesoriginal: I think that transparent pngs are not supported by Internet Explorer. You can use PNG Behavior for that, but imho I don’t think this is the case.
http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html
( )ramsesoriginal March 7th
transparent png’s are supported by IE7 and above, For IE6, there’s a neat little javascript that can applay the alpha layer to every png in the site, also background ones. There is also the possibility to define with color should be used when there is no transparency aviable, so you can minimize the eventual problems. And if that is all not an option for jou, a greyscale gif should also be fine for the rounded rectangle and its drop shadow..
Using the “not-Transparent” method has some major drawbacks: you have to align everything properly, and even a 1px deviation seems really odd. You must recreate both pictures each time you change the pattern. If you want to move something, you don’t have to export all again. And so on..
but as I already said, that’s only my opinion.
(sorry for my bad english, I’m not a native speaker)
( )BogDinamita March 7th
I agree with kuldeep, this tut is great, but as a suggestion, maybe you should add exclusively web-design-related stuff into a different category, such as this tut and the previous one with the yellow helmet icon thingy and so on.. I suppose you might’ve already thought of this going through all these changes. Well anyway, just wanted to say, I consider them improvements not changes, you’re doing a great job all of you!
( )Ben March 7th
“Using the “not-Transparent†method has some major drawbacks: you have to align everything properly, and even a 1px deviation seems really odd. You must recreate both pictures each time you change the pattern. If you want to move something, you don’t have to export all again. And so on..”
If your coding in valid html, that should never be an issue.
Great tutorial, keep it up
( )ramsesoriginal March 7th
even coding in valid html, you can have the pattern 1px futher left or right, depending on browser/user settings/system. And if the Footer is though for a cms (or some other kind of system with user-made content, as most web2.0-sites are), then the problems increase due to the possibility of “wrong” codes from the users..
( )Cain March 7th
Awesome. I really like the spiderman-ish texture.
( )Daniel Lopes March 7th
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.
( )VectorCars March 7th
Cooool. Very cool. I like Web 2.0 Style
( )b00m March 7th
gradients are good
( )Tânia Azze March 7th
Muito bom!!! Parabéns amor!
( )Andrei Constantin March 7th
That’s a footer almost every webpage should have.
( )Markus March 8th
Looks nice!
Nice effect 
( )Andrew D March 8th
Great tutorial, I love these web layout ones, I cant wait to see more
( )Martin March 8th
Collis
we want to see some tutorial such as these.
cheak out his work here.
please get him tom do us some tutarial. thank you very much
http://www.tomasz-opasinski.com/
( )Hanna March 8th
Thanks, I really enjoyed that tutorial. That’s a nice, slick footer. Like Andrew, I too love the layout and interface tutorials and can’t wait for more.
( )JoelG March 8th
Pretty good.
I hate to be a critic on something so small – but in most design circles it’s not “Apple-A” on a Mac. That’s the command button. So command-a or Cmd-A would be more accurate. Esp. since Apple has removed the “apple” graphic from the key on their newer keyboards.
Other than that, this is a great tutorial.
( )米直哥 January 7th
很好很不错
( )Lukas March 8th
Great tips. Everyone concentrates on headers these days, but footers need attention too
( )You got my del.icio.us bookmark!
Tom March 8th
Could somebody do a tutorial that shows how to convert your work into an actual web page? I’ve learned SO much photoshop and design tips mostly from this site and have a feeling I could now design an entire site in a .PSD file. However, I have no idea how to convert it to an actual site! I don’t know html, wordpress, or even the best way to go about finding a host.
So, that type of tutorial would be awesome on here.
( )Ana March 8th
Muito legal!!!! =D
( )mrpiano.org March 8th
As a newbie to PSD, I really am glad I found this site. Its really helped me understand the basics. Thanks so much.
( )sean March 8th
Nice tutorial…
( )But if you do not know CSS why are you giving tutorials for transparent .pngs.
Why not use IE6 as a benchmark. Then css for better browsers.
Again I like your tutorials.
Reading the comments now I know why the web is getting samey.
s
Thiago CODU March 8th
Muito legal esse tutorial, merecia um comentário em português já que somos compatriotas!
( )Continue sempre assim… Pra frente Brasil!
Valeu Daniel!
Tânia Azze March 8th
congratulations!!!! i love it.
( )Judy March 8th
WOW, You really make it easy for the new kids. I am beginning my journey into the internet world. It is huge? Anything to make it an easy trip and not get lost, is very much appreciated. I am going to use this as I begin the social network world. It’s like Star Trek, the 2.0 Adventure!
( )Judy, BHC
Tânia Azze March 8th
Brasilll!!!!! Você tem razão Thiago! Mereçe em português!!! Parabéns Daniel!!!
( )Cain March 8th
O btw, thanks for showing the free gradients, they’re awesome.
( )Pan March 8th
What the shit does “web 2.0″ mean exactly? does it entail something beyond glossy buttons?
( )daniel lopes March 8th
Hello Pan, web 2.0 is new way to create web-applications and websites. This term was invented by Tim O’reilly and cover web more focused on the user, where they can create content, basically is this. “web 2.0″ looks much like Ajax, Flex, usability, etc … to much to explain in comment. Along with this new way of developing apps for Web emerged a different way to create layout too. Normally layouts are liquid, with large text and legible and well easy to navigate and use. I don’t know why (i think is apple and yahoo influence) gradient and glossy buttons and backgrounds are common in this kind of website, but i like. An example of this type of application is the basecamp of 37signals (http://www.basecamphq.com/).
( )Raido March 8th
awesome. really nice tutorial and the gradient pack comes in handy too!
i just love thist place:D
( )potato March 9th
japanese sorry
arigatougozaimasu
masani motometeita tip desu!!
thanks
( )Dan Crum March 9th
While the tweaking bits were nice, a tutorial on how to use some downloaded gradients and a downloaded pattern seems a bit useless. Why not show people how to create these things themselves rather than rely on others to do it?
( )Corbin March 10th
some retard is trying to sell this over at tf.
( )http://www.talkfreelance.com/showthread.php?t=51516
Bradley March 10th
Wow, you guys have been consistently pushing out great tutorials lately — we all appreciate it!
( )Sam March 12th
GREAT Tutorial. I like it.
( )Jennifer Lee March 15th
I just stumbled upon this website today! Awesome tutorials! I will definitely have to catch up with all the information you have put up here!
( )Diogo March 18th
Is there a way to get this pattern in a better resolution ?
( )Katalog Stron March 19th
Next good tutorials on PSDtuts. This site rocks.
( )Wouter Van den Neste March 21st
Just discovered this website yesterday but I’m all ready best friends with the content
( )Keep up the good work!
david March 27th
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!
( )budhi March 28th
Great tutorial and very useful. I’ll use this technique for my sites.
Thanks for sharing
( )Chris April 18th
Nice tut, but I get lost at step 3.
What is the correct measurements for placing the guides on a design of 1024×768?
( )Tanie Projektowanie April 21st
goooood, i will use this idea:)
( )Geoserv April 22nd
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/
Alex May 11th
Very nice tutorial. Great implementation of the gradient tool. And nice colors.
( )sart May 16th
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
( )Danny May 25th
I’ve got to try this one out!
( )polyrhythm May 31st
This is a great! Very slick. I like it better used as a header though
Thanks!
( )cambodia June 2nd
Hello
( )MD June 4th
Looks nice!
thnx!
( )Daniel July 29th
very nice tutorial! cool result!
( )raees September 13th
Nice tutorial
( )I like & love it////
junaid September 13th
Cool nice & lovely
( )Spyece September 25th
Keep Such stuffs comming. Thanks man.
( )ryan October 2nd
“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.
( )Peter Schaefer December 15th
Thanks!
( )Lautus Design
Navdeep December 23rd
Thanks for featuring our Gradient set in the article…
( )Martin December 28th
Nice, I like it! I learned something
( )reader January 4th
I like the footer too, pretty original. Well done.
( )alphaTester January 14th
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 ?
( )mindxstudio January 29th
Nice collection of web 2.0 footer, thanks for great effort.
( )semanticflow January 29th
It is really helpful for me to design a web 2.0 footer, thanks for good post.
( )Travis February 3rd
Awesome work. Very clean and user friendly. Muinto Bom!!!
( )turkish kitchen February 10th
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.
( )Flash Buddy February 17th
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!
( )Danilo DaVinci April 11th
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
photo retouching May 11th
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!
( )jason July 14th
very helpfull
( )Chris July 27th
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 ..
wryel August 19th
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!
( )pawel October 4th
great tutorial. Didn’t know I could right-click an effects layer to get that effect into its own layer.
( )Muthu November 16th
cool.web 2.0 is great.
( )PlanetZero December 6th
Real nice tutorial, Thank you for posting this, however, there are a few things that you assumed.Overall real nice.
( )Upender December 29th
Great Work…
( )keyqin February 5th
很喜欢这种风格！学习了！呵呵~
( )I like it very much !