Create Professional Blog Layout Design Using Photoshop

Anupama Rao Posted on 04. Oct, 2010 | Comment in!

Learn how to design a Create Professional Blog Layout Design Using Photoshop, we using some modern techniques in this beautiful photoshop tutorial. we creating an professional design related blog website design, hope you all really like and give some positive feedback on it.

Resources Used

Search Icon
http://www.iconfinder.com/icondetails/36563/128/find_green_search_zoom_icon

Friends Icon
http://www.iconfinder.com/icondetails/43430/48/friends_icon

Latest Comments Icon
http://www.iconfinder.com/icondetails/34641/48/comments_icon

Company Information Icon
http://www.iconfinder.com/icondetails/22169/48/card_customer_info_user_icon

Step 1: Create Canvas

So first we’ll start a new document, this canvas is 1200px wide x 1400px high. Next we fill the background layer with a white color #ffffff.

Step 2: Fill Colors on Canvas

Fill the top area 450px high of your canvas with color #555552, and the area beneath this with color #ebe9e1.

Step 3: Gradient Fill Colors on Canvas

Now create a layer called ‘gradient rectangle’ and create a linear gradient at the top of your canvas, with color #555552 and color #777777.

Step 4: Add Text Logo with Shedow

Type out some logo text in the top left of your canvas, I used the font Helvetica size: 40pt.
Then I added a drop shadow blending option (35% opacity, distance: 1px, size: 0px), then add below slogon as “Where Color Lives”.

Step 5: Add Search bar

draw an rectangle with 325px wide and 30px high, you can download search icon for make more professional look.

Step 6: Add Content Area

Now we need some guides for create content area, draw vertical guides as you can see in sample image below, Create a white rounded rectangle (10px radius) within these guides, and apply a stroke blending option (settings below):

Step 7: Create top Navigation Bar

Let create top navigation bar for my professional blog layout design. The easiest way to create top navigation that will fit the rounded corner top of my main content area is to create a rounded rectangle with the same 10px radius with color #dedcd3, and then rasterize this layer, and cut off the bottom rounded area, you can see below sample image:

Step 8: Add Top Navigation Links

Now we want to apply top navigation format with font name Myriad Pro size 16pt and color #484845.

Also, I wanted to apply an active menu state with an shape “sign 3″, demonstrating which page the blog was currently on. just click on “custom shape tool” and select share which you want to draw for show your active menu link with color #dedcd3.

Step 9: Top Banner Area

Now create a new layer below top navigation area, this is because we’re about to create the area directly beneath our menu, and we want our active menu arrow to be visible above this banner area, now fill your selection with color #000000.

Step 10: Top Banner Sideshow Area

Top banner area we are using as featured post area, we need a post thumbnail. I took one from a recent smashingbuzz.com article, and pasted it over the black area. Then after write all article detail from link and place these required area using Font for heading Myriad Pro color #dedcd3, post detail with font Arial and color #c6c061 and description text with font Aria, color #ffffff.

Step 11: Create Sidebar

Create a new layer called ’sidebar layer’ and create a yellow left column for your layout. Your column should be 275px wide, 750px high with color #dedcd3 and should fit the bottom left rounded corner of your content area (use the same technique for this as for your menu shape).

Step 12: Subscribe us area

Create a heading ‘Subscribe Us’ at the top of your gray area color #cbcbcb with white bottom line, also using color #4a4a47, for my heading text. Then I laid out various social networking icons beneath this header area.

Step 13: Advertisement area

Create a heading ‘Advertise Here’ because all famous blogs have advertising place holder, so I added some basic ad blocks to my site for make an growing blog website.

Step 14: Popular Articles Section (Sidebar)

To complete my sidebar with the heading text to ‘Popular Articles’, and added some relevant text beneath this.

Step 15: Content Area (Articles)

Let’s move forward for create content area where we want to show posted articles with following details:
1. Article Heading with font Arial and text color #535350
2. Coments and Posted Area with font Arial and text color #990000
3. paste an existing article image from Link
4. paste text from above link with font Arial, font size 14pt and color #000000
5. Read More click area for read further all article

we are sharing sample image below:

Step 16: Footer Area

Now add some content to your footer. Creating 3 headings as we need as professional blogger

Friends (icon download here)
Latest Comments (icon download here)
Company Info (icon download here)

The headings should be Font Arial, Size 16pt, Color #4a4a47, bold and add an separator using Rectangle tool and
background color #d3d1ca.

Step 17: Footer Area with Details

In Friend section: font Arial, Size 13pt, color #a5a5a5
In Latest Comments section: comment text font Arial, Size 10pt, color #a5a5a5, comment URL text font Arial, Size 11pt, color #a5a5a5,
In Company Information section: font Arial, Size 13pt, color #a5a5a5

you can see below example image:

Conclusion

Finally below you can see the final result of this Professional Blog Layout Design tutorial. Click on the image to see the full-size version, we also sharing our source file for our respected visitors and readers. I hope you enjoyed it and hope you will leave you comments.

Author: Anupama Rao

34 Arcticles posted by Anupama Rao