Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Web design with Photoshop part 10/10 – Footer

Wednesday, May 11th, 2016 by Servage

photoshopThis is the last article which concludes the example template design, and here at the end you will learn how to add a footer-section to the PSD template. It will consume the remaining area of the canvas below the other content.

Start by drawing a rectangular background with the help of the rectangle tool, filling the remaining space. Then select the line tool to draw a line with the dimensions of 940 by 1 pixel. Here the fill of the layer has been set to a darker color so it gives a nice contrast to the white background.


Open your logo in Photoshop and press ctrl and T to resize it to fit in the footer. You can add different types of effects for the logo if you want to. Here it is kept colored, believing that the logo of the website should really stand out well, so it makes the footer appear visually attractive.


Copyright notice

After this, a copyright notice is added below the logo. Select the text tool and write down the desired statement. Here Maiandra GD font with 14 pixels font and black color has been used for the text. Select the text layer and place it just below the logo. Now press shift plus down key four times to create a distance of 40 pixels. Working with the shift key plus arrows like this has been useful throughout this series of tutorials and really makes spacing objects on the canvas a breeze.

Social media

At the very bottom of the footer, we intend to include some links to social media resources for the example company. This is a common location for such links and where visitors are likely to look for them. Also, having scrolled to the bottom of the page, this is a way to keep the visitor’s engagement high by moving them to one of your social media pages, instead of maybe losing the visitor to another page. Find social media icons online or use an icon font of your preference. Download all the different icons and open them in Photoshop. Select all the icons and press CTRL+T to transform the icons and adapt the size to fit in relation to the other footer content.


In this case the used icons are very red, but we wish to change them to grey. This could of course be done if the logos were created in a vector format by yourself, or if you use an icon font. However, in this example we assume some fixed icon image files, so we need to manually process the graphics to achieve this effect. Therefore, copy all the icons to a group and name it “Social media icons”. Now make a copy of the icon group and add a layer to it. Press ctrl and e to merge them, and the go to Images > Adjustments > Desaturate. With this effect you can remove the colors from the images and make them greyscale.


Hopefully this series of Photoshop web design tutorials has given you some more insight into web design, and how you can use Photoshop or similar graphics software to build designs from scratch.


Web design with Photoshop part 10/10 - Footer, 2.6 out of 5 based on 5 ratings
Categories: Guides & Tutorials

Keywords: ,

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.