In this tutorial I’ll design a simple footer for my website. I must say this is one simple and easy for design footer. But everything starts somewhere, somehow and in future I’ll show you more impressive and cool designs in the new templates I am planing.

But look at this video which I thing will be especially useful for the newbie WordPress theme users.

After you’ve watched this video you’ll probably want to know how’ Ive put this design in my web site. Well it’s very easy actually.

You know I have this PHP in my WordPress to work:

<?php get_footer(); ?>

The next I have the file called footer.php, in this file is written this:

<div id=”footer”><p>
Copyright &#169; 2009 <a href=”<?php bloginfo(‘url’); ?>”><?php bloginfo(‘name’); ?></a> powered by <a href=””>WordPress </a></p> 


this footer have a class in my CSS style document which is called footer and here is the CSS I use for this:

This first is for my footer box with this image:


clear: both;
float: left;
width: 950px;

and the next rows of CSS are for the text and his background and borders:

#footer p{
background: #eff5e7;
width: 400px;
padding-bottom: 10px;
border: 1px solid #bababa;

After this I have the design I did make in my video and in the next image:


I hope this tutorial will be in some use for you. If you have any suggesstions, questions or any replies feel free to comment.

VN:F [1.9.22_1171]
Rating: 4.5/10 (2 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)
Design simple footer design for your web site in photoshop., 4.5 out of 10 based on 2 ratings
Graphics designer and web developer from Bulgaria. Working as a freelancer from 2 years I have big experience in graphics design. In my spare time I make tutorials in my web site for tutorials: This is one of my hobbies. I also love Photography, sports and especially martial arts and free runing.

12 Thoughts on “Design simple footer design for your web site in photoshop.”

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge