How to Make an Impressive Blog Layout in Photoshop

Sep 28 2009 by Matthew Heidenreich | 36 Comments

How to Make an Impressive Blog Layout in Photoshop

In this easy to follow web design tutorial, you will learn how to construct a beautiful, sleek, and professional-level weblog design using Adobe Photoshop that you can later use for your very own blog theme.

Final Result

You can see what we’ll be making. Be sure to click on it to see the full-scale version of the blog layout.

Final Result

Setting up the Photoshop document

1 Create a new Photoshop document, File > New (Ctrl + N), with a canvas dimension of 1024px by 1184px.

Setting up the Photoshop document

2 Fill your Background layer using Edit > Fill (Shift + F5) with the color #252424.

Creating the layout’s Header

3 We’re going to create the layout’s Header section first. On a new layer, create a rectangular selection at the top of the canvas using the Rectangular Marquee Tool (M). Use the following figure as a guideline on how to create this selection.

Creating the layout's Header

4 Fill the rectangular selection using Edit > Fill (Shift + F5); use a black fill color #000000.

5 To spice things up a bit, we want to add a Gradient Overlay. Go to your Layers Panel, right-click your newly created layer, choose Blending Options, and Add a Gradient Overlay layer style using the settings below.

Creating the layout's Header

Creating the layout's Header

Creating the layout’s navigation menu

6 Now, we want to work on our navigational menu.  Using your Rectangle Marquee Tool (M) again to make a selection similar to the following figure, and then fill it with white (#FFFFFF).

Creating the layout's navigation menu

7 In the Tools Panel, choose the Polygonal Lasso Tool and make a selection similar to the following figure, and then choose Edit > Clear to delete the area beneath the lasso selection.

Creating the layout's navigation menu

8 We don’t just want this to stay white, so let’s add a Gradient Overlay layer style onto this layer.

Creating the layout's navigation menu

Creating the layout's navigation menu

Your navigation menu should now look like this:

Creating the layout's navigation menu

9 Next, in the Layers Panel, Ctrl + click on the layer’s thumbnail to make a selection around the navigation menu background. Create a new layer and fill the selection with a white color, #FFFFFF.

Creating the layout's navigation menu

10 While still selected, use your down arrow key to nudge your selection down, and then choose Edit > Clear.  Then, deselect your current selection (Ctrl + D) and nudge your layer down another 1px using the Move Tool (V).  It will look something like this:

Creating the layout's navigation menu

11 Change your layer’s Blending Mode to Soft Light and lower the opacity to 58%. Now, your navigation will look something like the figure below.

Creating the layout's navigation menu

12 All that is left for the navigation is to add some text for links.  I used Helvetica with a white forecolor (#FFFFFF) for all the navigation links. For the "Subscribe RSS" link, I used an orange color (#ED832E).  I then added a nice little feed icon next to it from Feed Icons that you can download and use for free (see the Feed Icon Guidelines on their site for more detail).

Creating the layout's navigation menu

Making the layout’s logo

13 Lets move onto our logo now.  We want to make the glowing colors behind our text first.  Create a new layer and, using your Elliptical Marquee Tool with it’s Feather option set at 18px, make a selection similar to the following and fill it with a pinkish color (#DA4D89).  Change this layer’s Blend Mode to Vivid Light.

Creating the layout's navigation menu

14 Create two more layers using the same technique, but change the fill color to green (#06FA05) and yellow (#FEFB03) and Linear Light for their layer blend modes.  As far as layer ordering, make the pink on the bottom, the green in the middle, and the yellow on top and move them around using the Move Tool (V) until you get something like the following figure.

Creating the layout's navigation menu

15 What we want to do now is group our glows together.  Select those three layers, and then hit Ctrl + G to group them into a folder.  Then make a selection similar to the following figure.

Creating the layout's navigation menu

16 With the selection still active, add a layer mask by clicking on the Add a layer mask icon at the bottom of your Layers Panel.

Creating the layout's navigation menu

What you should end up with now is something like this:

Creating the layout's navigation menu

17 Now, we just need to add the text for our logo.  The font I used for the name is InaiMathi, and for the tagline, I used Helvetica Neue (which you can see in action on the Six Revisions logo).  Lay it out something like the following figure.

Creating the layout's navigation menu

18 Now, add a Drop Shadow and Gradient Overlay layer style onto your "Sleekside Studio’s" (or whatever site name you used) text layer.

Creating the layout's navigation menu

Creating the layout's navigation menu

Creating the layout's navigation menu

19 Then, for the tagline, add an Outer Glow and a Gradient Overlay layer style.

Creating the layout's navigation menu

Creating the layout's navigation menu

Creating the layout's navigation menu

You should now have something like the following image.

Creating the layout's navigation menu

20 The last thing we need to do to our header is add a little 1px-high shine to the bottom.  Make a 1px-high selection using either the Rectangular Marquee Tool (M) or the Single Row Marquee Tool from the Tools Panel across the bottom of your header and fill it with white.

Creating the layout's navigation menu

21 Lower the opacity of the layer to about 64%, and then change its blend mode to Soft Light. You should now have something like the following figure.

Creating the layout's navigation menu

Working on the blog entry’s design

22 Time to move onto how our posts will be displayed.  Using your Rectangle Marquee Tool (M), make a square selection similar to the following, and on its own layer, fill it with white (#FFFFFF). This will hold the thumbnail images of each blog post entry.

Creating the layout's navigation menu

23 Now insert a Gradient Overlay layer style with the settings below.

Creating the layout's navigation menu

Creating the layout's navigation menu

24 Using your Rectangle Marquee Tool again, make a selection beside the thumbnail holder, and on it’s own layer, fill it with white (#FFFFFF). This will contain the blog post entry excerpt text.

Creating the layout's navigation menu

25 Next, we need to make a highlight and a shadow in between the two boxes.  Use the Rectangular Marquee selection and the figure below to make these 1px inset dividers.

Creating the layout's navigation menu

26 Using your Rectangle Marquee Tool again, make a selection similar to the following and fill it with black (#000000).

Creating the layout's navigation menu

27 Now, add a Gradient Overlay layer style onto this layer.

Creating the layout's navigation menu

Creating the layout's navigation menu

Your blog post entry section should now look like the figure below.

Creating the layout's navigation menu

28 Use the Rectangle Marquee tool again to make a 1px-high selection (create a new layer) at the top of the blog post entry excerpt box you created to make a nice little shine. Lower this layer’s opacity to 29% or so.

Creating the layout's navigation menu

29 The last thing we need to do for the blog post entry design is to create the button for the ‘continue reading’ link that will lead the users to the full blog post.  Using your Rectangular Marquee Tool (M), make a selection similar to the following and fill it with black (#000000). Use the Horizontal Type Tool (T) to add the text to the canvas using a foreground color of white (#FFFFFF).

Creating the layout's navigation menu

30 Next, insert a Gradient Overlay layer style to the button’s layer.

Creating the layout's navigation menu

Creating the layout's navigation menu

31 Finally, add some content to make your design look like the following figure. Adding sample content will make the mockup look more realistic for when you show it to your client.

Creating the layout's navigation menu

Designing a pagination blog feature

32 Many weblogs display pagination links at the bottom so that you can easily navigate through older posts. Let’s go ahead and get the simple pagination layout out of the way.  All I did was add some text. For the active page, I used a Gradient Overlay layer style.

Creating the layout's navigation menu

Creating the layout's navigation menu

Designing the Sidebar

33 Time to move onto our sidebar.  Use your Rectangle Marquee Tool to make a selection on the right of the blog post entry area, and fill it with black (#000000).

Creating the layout's navigation menu

34 Next, add an Outer Glow, a Gradient Overlay, and a Stroke layer style.

Creating the layout's navigation menu

Creating the layout's navigation menu

Creating the layout's navigation menu

Creating the layout's navigation menu

35 We’ll reserve 125px x 125px ad banners spots at top part of the sidebar design, so want to leave enough space for them.  We also want to add a little search area.  For the headings, I used the font Helvetica CY. I have set the font weight option to Plain for the "Search" text and Bold for the "Blog" text.  For the dotted lines acting as a divider, just use the Horizontal Type Tool (T) with the Color option set to the value of #79818D and then write "———-".

36 Add some icons beside the headings text.

37 For your Search box, use the same layer style used in Step 30 and add a Stroke layer style with the following settings.

Creating the layout's navigation menu

38 Repeat the above steps to add more sections on the sidebar. Here’s what I ended up with:

Creating the layout's navigation menu

Creating the layout’s Footer section

39 Now, it’s time for the Footer.  Make sure that the layers of the Footer are all under your sidebar layers. Using your Rectangle Marquee Tool (M), make a selection similar to the following, and fill it with #000000.

Creating the layout's Footer section

40 Now add a Gradient Overlay layer style onto the layer from above.

Creating the layout's Footer section

Creating the layout's Footer section

41 Using your Rectangle Marquee again, make a 1px-high selection and fill it with white (#FFFFFF) to make a shine on the top part of your footer.

Creating the layout's Footer section

42 Lower the opacity of the 1px divider/shine to 24%, and set the layer’s blend mode to Soft Light.  All that is left now is to add some sample content in a similar manner as the sidebar.

And… you’re done!

Congratulations, you’ve finished the tutorial. If you followed along, you should have something like the following figure.

Final Result

Download the source file

If you’d like to check your work with mine, you can download the final PSD file below.

Share your work on Flickr!

If you followed along, why don’t you post your work in the Six Revisions User Group on Flickr? We’d love to see what you ended up with!

About the Author

Matthew Heidenreich is a freelance designer from St. Louis, Missouri. He enjoys teaching others how to create interface and web design tutorials. Find his work on his site, EzGraphicStudio. You can get in contact with Matthew by following him on Twitter: @Spicypepper.

36 Comments

Designect.Com

September 28th, 2009

Nice tuts. Thanks!!!

QuickenWebsites

September 28th, 2009

Design is very generic. Why wouldn’t just download free themeforest template? However for beginner designer this is a good starting point.

fondue dave

September 29th, 2009

s/impressive/cliched/g

Greg Johnson

September 29th, 2009

I’m going to feel bad about this, but not too bad because I took the time to look at Matthew’s work and there are some good design principles in use in many of them.

This one however, lacks any cohesion and makes many a user experience faux pas.

The most apparent and consistent issue is with the complete lack of framing. It’s not that there isn’t enough white-space or separation of elements, there isn’t any white-space or separation at all.

The calls-to-action are competing with relatively benign design elements; For instance: The post meta has more draw than the post title itself. Under no circumstance is that a CTA which carries more weight than the title.

Alternating styles are to be reserved for instances where it helps to separate information; making it more readable. It’s a technique used to add definition, not one to decorate at the sake of consistency.

The ‘continue reading’ link and the post meta are both in very similar, contrasting, block elements. Not only is there absolutely no page-wide consistency when it comes to links, links are styled too similarly to info elements. Put simply: Links should look like links and text should look like text.

There’s a problem in the web design industry right now, and that is everyone who can use Photoshop and figure out a little html/css/js/php thinks that’s enough to make a great website, and it’s not. There’s a lot of thought that goes into great design, and that forethought just isn’t present here.

Jamie

September 29th, 2009

I like it, but I think there should be a follow up explaining how to slice it up to a real live webpage or sliced so it can be used in wordpress or another content management system

Ravi Warrier

September 29th, 2009

I have to agree with Greg in a way. I can work my way around in Photoshop, but it’s the conversion of this PSD into a blog template (that includes html, css and maybe jscript) is what I want to know. More specifically, how to convert the PSD into a template that I can directly use in Blogger.

Also, from all the amateur tweaking that I do with my blog site, I know that it involves a lot of widgets and css for various sections. I’d like to know how to get that done. For example, after I create the header/footer section in PS, how do I get Blogger to recognize them as header/footer sections, or to recognize a section for Adwords, etc.

This was not a tutorial in creating a blog template, but to use features of Photoshop. Good, nonetheless, but useless.

I hope you (the author) intends to cover this in some future post of yours.

Ryan

September 29th, 2009

I think it looks very pretty and user friendly. Great job dude. Matthew, can you point out a resource where I can have my blog designs coded for wordpress? Or maybe you can write a tutorial to show us noobs how to do it?

Thanks
Ryan

Blake

September 29th, 2009

This is an awesome tutorial. I would love to get more information on how to import this into a blog layout. Any recommended sites for that?

arnold

September 29th, 2009

nice tutorial but can you provide
a part 2 of this tutorial – “HTML/CSS conversion!”

Greg Johnson

September 29th, 2009

Dave, While I completely agree, something tells me very few people are going to understand that.

Mike

September 29th, 2009

Holy shit. Wish I took the time to read that and try it. Looks awesome man.

Mark

September 30th, 2009

Hey Greg…can you tell us how you really feel?

Web 2.0

September 30th, 2009

This is an excellent tutorial, great work :)

Tutorial Lounge

September 30th, 2009

really professional design which you giving tips and trick for make a beautiful layout for blog designs. thanks

Jason

September 30th, 2009

can we have a coding tut? we havent had a site build for a while :)

Jacob Gube

October 1st, 2009

Hello everyone. At this point in time, there are no plans to provide a coding tutorial follow-up on this one. Things may change though, and I’ll leave a comment on here if we do decide to follow this one up, so if you’re interested in following the status of that, I recommend subscribing to the comments on this article.

tobe

October 1st, 2009

nice layout.. clean and simple

Mahmudur Rahman

October 4th, 2009

Excellent tutorial to create Blog Layout in Photoshop. I have learn lots from this tutorial. Thanks for shearing this nice post.

HO

October 5th, 2009

Holy shit. Wish I took the time to read that and try it. Looks awesome man.

GrafsS

October 5th, 2009

Looks great!

Can I transform this layout in a WordPress theme? Thank!

Flameboy

October 7th, 2009

Nice design: simple, but efficient. Thanks!

Bronson Quick

October 13th, 2009

Fantastic post Matthew. I’m used to getting designs from designers and turning them into working sites but I’m trying to improve my own design skills so this was very helpful. Thanks heaps dude!

mp

December 22nd, 2009

@Greg Johnson, I don’t mean to be a butt; but your site SUCKS! How can criticism/critique this guy when your own work is NOT up to his level. I’m sorry dude you could take lessons from him.

neeraj panwar

January 13th, 2010

one of the best tutorials i’ve seen so far. but where is part 2? from psd to html!

jorge

February 20th, 2010

well, i think the most of the people concern her is true. How can we make this nice looking theme in to a working and usable
page. i ain’t going to lies the tutorials here look pretty good but i think that you need to address the some css/js/php
code here.

Chummy

April 20th, 2010

I’ve a question about steps 10 and 11: “While still selected, use your down arrow key to nudge your selection down, and then choose Edit > Clear. Then, deselect your current selection (Ctrl + D) and nudge your layer down another 1px using the Move Tool (V). It will look something like this:” and

“Change your layer’s Blending Mode to Soft Light and lower the opacity to 58%. Now, your navigation will look something like the figure below.”

This doesn’t work no matter how many times I’ve followed these directions in Photoshop CS3. Would you please offer some additional information on how to accomplish what you show?

Thank you!

PS — I, too, would like to see a follow-up article on coding this. As it’s written the tutorial does not explain “How to Make an Impressive Blog Layout in Photoshop”. It explains how to make something that looks like a blog layout.

celebzluvergarl

June 28th, 2010

Hi! Thanks for sharing but I think yes, quite a lot of people knows how to do that but the problem for newbies like me is to convert it into html and xml and stuff like that. But overall, it was kinda helpful though. =)

jegujelek

August 29th, 2010

thanks for sharing.now I will just learn how to combine it with css & xml

Mohan

March 21st, 2011

Hi, could you please let me know how to upload it to the blogger(.com)

hxtrade98

May 5th, 2011

This doesn’t work no matter how many times I’ve followed these directions in Photoshop CS3. Would you please offer some additional information on how to accomplish what you show?

Thank you!

myra

May 23rd, 2011

I like it.

R.Gunasekar

June 24th, 2011

Hi Matthew Heidenreich,

Thank you very much for the above post. I like your design pattern. Please send your post’s links to my mail Please. Its very helpful for me.

sistem

September 2nd, 2011

When you adjust this gradient, start in the middle of the fold shape, hold Shift, and drag out to the bottom right of the fold at a 45 degree angle.

Leave a Comment

Subscribe to the comments on this article.