Design an Amazing Blog Layout In Photoshop

It’s a sad but well-known reality that people judge each other based on their looks, and on the web, face-to-face interaction is often replaced with digital equivalents. Instead of meeting you in person, visitors look to your personal website as a basis for their first impression of you. If you combine this layer of abstraction with the heightened sense of anonymity provided by web-based interaction, you can end up with surprisingly strong personal critiques and serious scrutiny of your personal online presence. This makes it even more important to have a personal website that you can truly be proud of. We all know that content is king, but we also understand the importance of first impressions.

So, today we’re going to design an impressive blog layout in Photoshop. We are going to use some useful and effective techniques to create this amazing design, so let’s get started!

Resources:

Images :   Olga Mosina  –  Toormix

Icons:  Social icons
Download the complete, layered PSD file.

Final Result:

Step 1: New File

Open Photoshop and create a new file with a 1200px width and a 1700px height.

Step 2: Fill the Background

Select the paint bucket tool and fill the background with color #f3f5f5.

Step 3: Add Noise

Add some noise to the background, so click on “Filter” > “Noise” > “Add Noise.”

Step 4: Header Background

Now let’s start with the top area. So select the area using the rectangular marquee tool and fill it with color #262626.

Step 5: Navigation Bar

Now, select the navigation area and fill it with color #222222.

Step 6: Navigation Text

Select the text tool and add the navigation text using colors #ffffff and #969696.

Step 7: Text Separators

Now select the line tool and use it between the text, with a 1px weight and color #2f2f2f.

Step 8: Placing Your Logo

Create another 1px line on top of the navigation bar with color #363636 and add your desired logo.

Step 9: Search Bar

Now, for the search bar select the rectangle tool and create a small rectangle with color #222222. Then, add a 1px stroke to it using color #353535. Finally, select a small area using the rectangular marquee tool and fill it with color #26b5b0.

Now, add the search icon and text.

Step 10: Color Strip

Select the rectangular marquee tool again, select a thin strip under the navigation bar, and fill it with color #b55826.

Step 11: Featured Post

Now, we are going to add some feature posts. So, first paste the image and add a 2px stroke.

Then, add text and an arrow under the image.

Step 12: More Posts

Repeat the same process and add some more feature posts.

Step 13: Divider

Select the line tool and create a horizontal line with a 4px weight and color #464646.

Step 14: Feature Image

For the posts paste, add the featured image and add some stroke.

Step 15: Category Tag

Select the rectangle tool and create two small rectangles with colors #26b5b0 and #101010. Move the black rectangle slightly to the right. Then add category text with color #DEEDED.

Step 16: Post Text

Select the type tool to add text, and create a small “read more” button using the rectangle tool using color #252525.

Step 17: Some More Posts

Repeat the same process and create additional posts.

Step 18: Dividers

Select the line tool and create vertical lines in between the posts with a 2px weight and color #d9d9d9.

Step 19: Sidebar

Now, we will create some sidebar widgets. For widget title area, select the rectangle tool and create two rectangles same way that we did for the category tags. However, this time move the black rectangle to the left instead of the right.

Step 20: Widget Content

Now, add the widget content. Simply paste the social icons that I’ve included above.

Step 21: Small Line

Select the line tool and add a small horizontal line with a 3px weight and color #9a9a9a.

Step 22: Add More Widgets

Repeat the same process and create some more widgets.

Step 23: Footer Area

Select a rectangle using the rectangular marquee tool and fill it with color #222222.

Step 24: Adding Content

Now let’s add some widgets using the type tool. For the titles, we will use color #b55826, and for the rest of the text it will be #515151.

Step 25: Copyright and Social Icons 

Select the type tool once again and add the copyright text with color #414141. Then, add some social icon on the left side.

That’s it, our blog layout is done. Hope you guys enjoyed it!