Design & UX
Article

Design an Amazing Blog Layout In Photoshop

By Anum Khan

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!

  • Dennis

    After the design process is complete how does one transform the design into a WordPress compatible system?

  • Rosie

    yeah do you have a tutorial on how to turn this into a WordPress compatible system?

  • Art

    Great article. Thanks for the simplistic approach on creating a basic site with Photo Shop.

    Something I am trying to figure out is once a design is created in Photo Shop how is it converted to WordPress or an HTML site.

    Where can I get further instructions on building a site in Photo Shop or editing a WordPress template?

    Keep up the good work, Anum.

  • http://www.gniven.com Geoff

    Great post. As commented above, it would be great to see how to take it to the next level and turn it into a WordPress site.

  • Hasan Sahoglu

    Just few things to add to your nice article,

    I think you could use Layer Styles for most of the things you do here. Which lets you achieve the same results with less layers and be able to tweak the colours / styles much easier.

    An example: for solid fills I always use Color Overlay layer style instead of ‘painting’ the whole selection.

    Another example, category heading boxes, (green and black) could use a single rectangle and use solid drop shadow style for the green bit.

    Also I always prefer to use shapes instead of ‘marquee select + paint’ method as you described. it lets you change the shape add curves etc. if need be.

    Thought I should share.

    Article does explain the basic methods of web layout design pretty well though!

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Design, once a week, for free.