tripwire magazine

This post pick up on the previous two parts of a very detailed tutorial for “Creating a Clean and Elegant Blog Design with Photoshop, Part 1 + 2“. This is part3 and it will be covering last steps required to finish the design by adding the Side Bar and Footer Sections. We pick up just where part 2 ended and the result of part 3 and final Blog Design will be looking like this:

Download full size here.

This tutorial now consists of:

• Part 1 – covering the Theme Header Section
• Part 2 – covering the Blog Front Page Post Section
• Part 3 – covering the Side Bar and the Footer Sections

Download the source file

Make sure you get a copy of the PDS source file before you start working on the tutorial. License: Creative Commons License.

• design – par1.psd
• design – par2.psd (2.4MB)
• design – par3.psd (2.9MB)
• palette.psd

Lets get started…

Step 16: First thing you need to do is to load up the PSD you created in part 2 or get the one available for download above. We need more space in the bottom for the Footer Section and will start with adding this. Use Canvas Size tool in the Image menu to add 160px like this. Make sure the Anchor is selected as shown to add space at the bottom.

Then locate content layer in Group “PART 1 – content background” and select the filled area. Use Transform Tool [Ctrl]+T to do this or simply select everything with [Ctrl]+A and fill the entire area with the color #797979. Then add a guide at 1250px from the top and use Transform Tool to make white fill in layers “Sidebar back” and  “Content list back” in group “BACKGROUND CONTENT AREAS” end at this new guide like this.

Step 17: Add a guide at 1270px from the top where the Footer Section will start. Add a Group called PART 3 above PART 2. In PART 3 add first a Group called FOOTER CONTENT and one called SIDEBAR CONTENT. In FOOTER CONTENT add a layer and call it “footer-background”. Select the area from the bottom up to the guide just added and fill it with white. Then add drop shadow using the Layer style window with setting used earlier.One thing that can make using Photoshop faster and more flexible is Styles and if you create new styles when you know the current settings will be reused it will be even better. The drop shadow have been used several times and could be a candidate for this – so lets try it.

You can always go back and save a set of styles you created earlier if you want to reuse them. We are going to do just that. Find the layer called header created in Part 1. We want to create a new style for the gradient used earlier and apply it to the Footer.Call the style header-footer-gradient. After saving the new style you can apply it to footer-background layer by opening the Layer style window, clicking on Styles and clicking on the style you just created.

Step 18: In this step you will add a bit of decoration to the Footer. Make a copy of the LOGO Group from Part 1 and move it to Group FOOTER CONTENT. Then drag it to the right location in the footer and scale it down in size using the Transform Tool. Then add copyright text and if you like a backlink to Wordpress and your favorite hosting provider.

You should now have this partial result.

Step 19: Different bloggers tend to like different widgets in the sidebar. You may put whatever you like in it of cause and because it is such a flexible area of a blog I will just add a few examples of what could fit well. Just using screenshots of the well know google custom search and the Advertise Here signs I have material for the top part of the sidebar.

Since we have no categories in the top menu it would make sense to have a widget listing Blog Content Categories. What you do to create the layout shown below is simply creating layers for the white and grey boxes. Fill them with the color you want and apply a layer style 1px stroke. Colors used here are:  Stroke: #bebebe, background #eeeeee. The boxes should be 50px and 25px in height. The space on both sides of the boxes is 20px. Add one px space between the boxes.

Use the same steps to create a popular posts widget like this. The small images are 40×40px.

Step 20: To make the design consistent I decided to use the same box type to separate the articles created in Part 2. It looks like this. I had to move the articles a bit to make it fit but it was easy because moving elements in a group can be done by selecting the group.

This is the last step in this  Photoshop Blog Design Tutorial. I plan to continue this tutorial and implement the design as a Wordpress Theme later on so stay tuned.

The Final Result

Download full size here.

Related posts

1. Creating a Clean and Elegant Blog Design with Photoshop, Part 2 This post pick up on the previous and first...
2. Creating a Clean and Elegant Blog Design with Photoshop, Part 1 Creating a great looking blog design isn’t as hard...
3. Using Photoshop Styles to create awesome web2.0 effects in no time What is a Photoshop Style? A Style in Photoshop...
4. 20+ Highest Quality Photoshop Typography Effect Tutorials With Photoshop you can turn plain text into awesome...
5. Release of Free CSS Theme, Dark & Elegant Blog Today tripwire magazine released our first Free CSS Theme....

Please remember to share this post!