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!
Icons: Social icons
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!
Anum is Web and Graphic designer. Addicted to Photoshop and crazy for pixel perfection. She is also an active blogger, sharing her passions, skills and creative details on her blog Websoulz. She loves to connect with the community, sharing the latest design gossips and rolling her eyes on boring trends.