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.
Latest Comments Icon
Company Information 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:
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.