Creating a Clean and Elegant Blog Design with Photoshop, Part 2

November 11, 2009 · 14 comments

by Lars


This post pick up on the previous and first part of a very detailed tutorial for Creating a Clean and Elegant Blog Design with Photoshop, Part 1. This is part 2 and it will be covering steps required in Photoshop to create the Blog Front Page Post Section.


AdvertisementWe pick up just where part 1 ended and the result of part 2 will be looking like this.


This tutorial now consists of:

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.

Lets get started…

Step 10: First thing you need to do is to load up the PSD you created in part one or get the one available for download above. Web designs tend to become messy and complex in Photoshop because of the many elements put into separate layers. One way to keep an overview of the layers is to use groups. Lets start creating a Group called “PART 1 – Header” by clicking on the folder icon as shown below. Add your layers to the group simply by pulling them onto it. Add another group called PART 1 – Content background and put only the content layer into it. Close both PART 1 groups by clicking the arrow next to it. Then create a group called PART 2 to be used for new layers. Generally it is a good idea to use sub-groups simplify even further. Part one layers have been divided into MENU, LOGO and HEADER groups in “design – par2.psd” to show this. Simple but very effective and key to reusing design elements like fx. “Continue reading…” buttons consisting of more than one layer in multiple location.


Find more info on layers in this great article on Photoshop Layer Effects Explained

Content and sidebar Background

Step 11: Next thing you have to do is clearing the guides from part 1. Do this in the View menu. Then you have to create new guides to help aligning the elements we are adding. To add guides on exact locations use the View->New Guide… feature. Add horizontal guides at 25px, 50px, 338px, 625px, 650px, 670px, 690px and vertical at 120px, 650px, 670px….


Then create layers called “Featured Content back”, “Content list back” and “Sidebar back”. You may group these layers into a group called “BACKGROUND CONTENT AREAS”. Fill the content areas with white color on separate layers as shown here and add same drop shadow as used for header in part 1.


Step 12: Add featured article/post layout. I will use content that is related to design and development subjects  but really use something that match your blogging niche. First add group for all post content elements called “CONTENT AREA CONTENT”. Then add group called “FEATURED POST”. Add any title you may want using Arial, regular, 22pt and color #444444. Location shown below. Then add post meta info below title as shown below using  Arial, regular, 12pt and color #797979 and #cc9900. Then add any good looking featured post image with dimensions 575x260px.


Below the image add some dummy text Arial, regular, 12pt and color black. You can use text generators for this fx. Don’t let the text be to long and make it end just over 570px from the top. You should now hide (NOT CLEAR!) the guide to see how the design looks. Use [Ctrl]-H or view menu for this. Then finally lets add a grey inside stroke on the image.


Step 13: We will now add a button to allow readers to continue reading the post. First add group called “CONTINUE BUTTON” inside “FEATURED POST”. Add guides as shown on image below and text using Arial, regular, 12pt and color #797979.


Then add layer called “continue-reading button”. Select the area between the guides and fill it with color #eeeeee. Then apply gradient style as shown below.


In the final implemented theme it would make sense to allow the blog owner to configure to have zero to fx. 3 featured posts. To keep this design simple only one is shown.

Step 14: Using same techniques as used for the featured articles now add list of posts below the featured post as shown below. Images are 100x100px and have stroke as used above. Reuse articles to keep workload down and copy “CONTINUE BUTTON” created earlier. Also make sure the articles are all created in groups inside “CONTENT AREA CONTENT”. Download PSD for further details on this part if needed. In the final theme implemantation I would expect 8-10 posts in the lists but to keep it manageable here in Photoshop I have limited the number to 4.


Step 15: As the last step in part 2, now lets add some page navigation. Add some guides as shown below to guide placement of navigation buttons. Each button is 25px with 1px internal black stroke. Colors used are #bdbdbd, #797979 and white. Space between buttons is 10px.

The result

We have now added the blog front page content area. This is the result you should have by now (see layers screenshot as well below final result image). Part 2 of the tutorial will end here and the next part will focus on completing the design for sidebar and footer.


Your layers panel should look more or less like this.


{ 7 comments… read them below or add one }

Ronald August 17, 2010 at 2:59 pm

Erg goede tutorial leuk om te gaan doen is weer eens wat anders


Danang Sukma May 2, 2010 at 11:17 am

Iam a new comer in web design. I like this tutorial, i get new inspiration for this tutorial. Thanks for your great job… :)


marisha058 April 11, 2010 at 8:26 am

Thank u for good post. I like it and I’ll try it myself. Thank you!


Maksim Shaihalov April 10, 2010 at 2:07 pm

Nice tutorial! Thanks


Zavrab November 26, 2009 at 11:31 am

good tutorial, i want to do this design in photoshop


Tutorial Lounge November 3, 2009 at 10:00 am

really easy process for make professional blog design.


designfollow November 3, 2009 at 4:23 am

thanks for this great tutorial.


Leave a Reply

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

{ 7 trackbacks }

Previous post:

Next post:

Web Analytics