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.
Setting up the Photoshop document
1 Create a new Photoshop document, File > New (Ctrl + N), with a canvas dimension of 1024px by 1184px.
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.
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 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).
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.
8 We don’t just want this to stay white, so let’s add a Gradient Overlay layer style onto this layer.
Your navigation menu should now look like this:
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.
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:
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.
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).
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.
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.
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.
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.
What you should end up with now is something like this:
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.
18 Now, add a Drop Shadow and Gradient Overlay layer style onto your "Sleekside Studio’s" (or whatever site name you used) text layer.
19 Then, for the tagline, add an Outer Glow and a Gradient Overlay layer style.
You should now have something like the following image.
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.
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.
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.
23 Now insert a Gradient Overlay layer style with the settings below.
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.
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.
26 Using your Rectangle Marquee Tool again, make a selection similar to the following and fill it with black (#000000).
27 Now, add a Gradient Overlay layer style onto this layer.
Your blog post entry section should now look like the figure below.
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.
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).
30 Next, insert a Gradient Overlay layer style to the button’s layer.
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.
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.
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).
34 Next, add an Outer Glow, a Gradient Overlay, and a Stroke layer style.
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.
38 Repeat the above steps to add more sections on the sidebar. Here’s what I ended up with:
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.
40 Now add a Gradient Overlay layer style onto the layer from above.
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.
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.
Download the source file
If you’d like to check your work with mine, you can download the final PSD file below.
- impressive-blog-layout.zip (ZIP, 0.97 MB)
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
36 Comments
Designect.Com
September 28th, 2009
Nice tuts. Thanks!!!
DDamir
September 28th, 2009
Nice.
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.
Bendesign
September 29th, 2009
Nice. Thank you
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
Soner Gönül
September 29th, 2009
Great!
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