Create a modern blog layout

In this tutorial, you’ll learn to create a modern, clean and classy blog layout in Adobe Photoshop using some basic techniques. If you have any questions about this tutorial be sure to ask in the comments.

Create a modern blog layout in Adobe Photoshop

Author:

Jean-Baptiste Jung

Category:

Photoshop

This is how the final result will look like:

Create a modern blog layout in Adobe Photoshop

1 – Let’s start by importing the 960 grid template into Photoshop. The 960 grid template is a very usefull tool for designers, which can be downloaded for free here.

2 – Time to create our background. Pick the paint bucket tool and fill the background with #27343C.
Create a modern blog layout in Adobe Photoshop

3 – Now, let’s tracing our website main content area. Pick the rectangular marquee tool and create a square of 960px wide for approximately 725px height. Create a new layer, and fill it with light grey (#EEEEEE)
Create a modern blog layout in Adobe Photoshop

4 – Create a new layer, pick the rectangular marquee tool and create a rectangle of 420 px wide, starting at the 6th red column from the 960 grid template. Fill the rectangle white white (#FFFFFF).
Create a modern blog layout in Adobe Photoshop

5 – On the layers window, right click on the last created layer and select “Blending options”. Apply the “Drop Shadow” effect with the following parameters:
Create a modern blog layout in Adobe Photoshop

6 – Let’s create our main navigation menu: Simply create a new layer, and create a 960px wide squareon the top of the page. Fill it with light grey (#EEEEEE).

7 – Pick the text tool and select the Arial font. Select #27343C as text color, and type your menu items (Should be “Home”, “About us”, etc. Use the grid template to align the menu items.
Create a modern blog layout in Adobe Photoshop

8 – Our design starts to look great, don’t you think? It’s now time to fill up the main content space.
Create a new layer set and name it “Post”.
For the post titles, I chose a 24pt, bold Georgia font. Color is #27343C.
The thumbnail size is 180*180 pixels. It is inclued in the resource pack of this tutorial.
The excerpt text is italic, 12pt arial with a #555555 color.
Create a modern blog layout in Adobe Photoshop

9 – Let’s take some time to add fancy details to our post display. Pick up the rectangular marquee tool and create a 269px wide rectangle. Fill it with background color (#27343C). Once done, Type your text using 12pt bold arial font, color #EEEEEE.
Create a modern blog layout in Adobe Photoshop

10 – Make sure that all designs elements of the “post” content area are in the “Post” layer set. Then, duplicate the layer set (Cmd + J) to fill the content space as shown in the screenshot below:
Create a modern blog layout in Adobe Photoshop

11 – Now, let’s populate the right sidebar. Due to its small size, it is particulary great for 125*125px ads. Create a new layer set, name it “right sidebar”, then pick up some advertisment images and insert it in the design.
Create a modern blog layout in Adobe Photoshop

12 – We now have a great looking right sidebar! Time to fill up the white space on left sidebar with useful information that you can find on any good blog: author info, recent posts, etc.
Create a new layer set and call it “Left sidebar” for left sidebar content. When using WordPress, sidebar info is often contained within widgets, so I kept widgets in mind when designing.

13 – I chose to first add author information. The first thing to do is to add your picture (90*128px). Once you added the picture to the design, right click on the picture layer in the layers window, and select “blending options” in the menu. Go to “Stroke” and add a 5px #DDDDDD stroke. Then, add some text to tell the reader a bit more about yourself. I have used Georgia font, italic, with a size of 14pt.
Create a modern blog layout in Adobe Photoshop

14 – For the title, I have choosen 18pt Arial Black font with #27343C color.

15 – For the “Read more about Jean” text, create a new layer, pick the rectangular marquee tool and create a rectangular shape of 180*27 pixels. Fill it with #27343C. For the text, the font used is bold Arial, 12pt.

16 – To finish our widget, we have to create a separator. To do so, pick up the line tool and draw a horizontal line below the text. Color used is #CCCCCC. Once the line is created, right click on its layer in the layers windows, and select “Rasterize layer”.
Create a modern blog layout in Adobe Photoshop

17 – Left sidebar is starting to look great! Repeat steps 13 to 16 as necessary to fill up sidebar’s space with the information useful to you.

18 – We’re almost done. Let’s add some information on the footer. Simply pick up the text tool, the #FFFFFF Georgia italic font, and add your footer info.
Create a modern blog layout in Adobe Photoshop

19 – The final step is to create and add a logo to our design. Let’s start by writing some text, like for example “A Webdesigner Weblog”. I have used the Santa Fe LET font. Once the text is written, we can add some style. Right click on the text layer on the layers window and select “Blending options”.
Select “Stroke” and add a 4 pixel stroke. Then, select “Color overlay” and fill the text with background color (#27343C).
To inclinate the text layer, make sure the layer is selected, hit Cmd+T (Ctrl+T for Windows users) and then rotate the layer a bit. To make the logo looks a bit better, we should definitely add an icon; I got that nice painting palette icon on Iconfinder.[Icon has been removed due to copyright issues. Sorry.]
Create a modern blog layout in Adobe Photoshop

20 – Work’s done! Look what we created together:
Create a modern blog layout in Adobe Photoshop


Get a commercial/public use licence for this PSD (More info)

Show Some Love
Thank you for your support

45 Responses

  • Jacob

    Wow amazing tutorial Jean!

    Very complete, I love how you took the time to put so many screenshots.

    I also like the effect of the middle column in the design, I like it better than the actual design :P

  • Jean-Baptiste Jung

    Glad you enjoyed it :) Screenshots are very important in webdesign tutorials!

  • life4hire

    great tutorial…now i have subscribed two of your blogs…looking forward for more interesting tutorials from you..i’m bad at designs.. :)

  • Jean-Baptiste Jung

    @life4hire: Thanks for the comments! No one is bad, we all have to learn ;) Stay tuned for more tutorials!

  • bebopdesigner

    Nicely done! Thanks for posting!

  • T-Law

    Amazing tutorial, big thanks.

  • Murray

    Hey Jean!

    At first I didn’t know what to expect the other day with the change up of ownership, but now everything is excellent.

    Enjoyed doing the layout, keep up the good work!

  • Jean-Baptiste Jung

    @Murray: Glad you enjoyed the tutorial! I understand that when a blog change of owner, sometimes it may lead to a global loss of quality because the new owner only cares about money…
    Don’t worry, I want to take Psdvibe to a higher level and continue to provide excellent quality tutorials.

  • Web Design Quote

    Nice to see the tutorial about how we create a modern blog. Thanks for the sharing this information. I hope visitor getting inspiration and implementing this idea in to their blog. Keep up the good work.

  • Toronto Wedding Photographer

    Great tutorial!
    Thank you for sharing!

  • christopher robin

    once you have created the website how do you get it on the web? just use a word press template or?

  • MorayWeb

    Nice to see a tut that shows how to design using a grid – top stuff!

  • Jean-Baptiste Jung

    @Christopher Robin: This tutorial show how to design a blog layout. Once the layout is designed in Photoshop, you have to slice it into xhtml before you can use it on the web.
    There are several psd to xhtml tutorials on PsdVibe, you may want to have a look at them :)

  • Jean-Baptiste Jung

    @Martin Leblanc: Thanks! I see you own iconfinder.net, thanks for the great site!

  • CgBaran Tuts

    Great tutorial thanks

  • web

    Splendid, thanks!

  • trikkky

    liked it i like the grid system it makes life easier. and your design was good too

  • Hassan

    Hey Jean! How you doing ? We’ll it’s great to see you taking hold of this site… I like how you keep replying back to the commenter… if you keep that up i am sure the commenter will support you! As you know everyone likes appreciation :) thanks a lot for this tutorial

    Take care buddy

  • hadi060

    Excellent! I like your tutorials very much..
    Thanks for this great work..

  • eBook Covers

    This is very cool. Thanks for the help with this layout- I hope to be able to use some of these elements in my new blog I’m looking to create shortly.
    It was very easy to follow, I’ll be back!

  • Serge Van Lippeloy

    I’m working on a website for my self, maybe I use this desingn for inspiration.
    Great job.
    O by the way, I try to make it with the gimp.

  • Matt Bertulli

    It’s always refreshing to see a tutorial where the writer takes the time to insert a ton of great screen shots.

    Lots of people are visual learners and this always helps.

    Keep up the good work!

  • Mitko Yanakiev

    Honestly , i dont like this tutorial the old were much better but we will see the next one .

  • Jean-Baptiste Jung

    @Mitko: If you can say why you didn’t liked this tutorial, it will help me for the next ones.

  • Mitko Yanakiev

    Because the previous deisgns had more details( effects ) i learned something with everyone of them , this tutorial is not like them. Nothing personal , just this is my opinion

  • Jean-Baptiste Jung

    @Mitko Yanakiev: No problem! Thanks for telling me, I’ll work in this direction for upcomming tutorials.

  • Ramen

    wow awesome tutorial!

    any tutorial on how to code layout to wordpress / blogger?

    im new at this :)

  • Majed

    Thanks alot, that was really helpful,

    I am confused about one thing, I have my blog on blogger (me-vs-myself.blogspot.com), and I don’t know how can I change the design into something that I make, like what you did, instead of their templates?
    i’m a noobie designer, sorry if the question is stupid ^_^

  • Jean-Baptiste Jung

    @Majed: Glad you enjoyed the tutorial!
    To create a blogger template, you have to slice the psd into html (See our coding tutorials) and then create a blogger template.
    Don’t remeber that our psd can’t be used for commercial or public use. If you’d like to use one of our designs for commercial or public use, you have to purchase a license (See the TOS)

  • LisaStratus

    It is remarkable, very valuable idea

  • Juan

    Hey! I seem to be a bit slow… so, I get how to design the bigh design, but how do I insert it into blogger and make it show up ‘active’ or ‘interactively’?
    Do I upload the “template”?

  • Jean-Baptiste Jung

    @Juan: YOu have to slice the PSD into xhtml/css. Remember that you need a licence to use this design publicly.

  • Ryan v.

    Wow simply awesome tutorial. The fact that anyone can go online today and learn anything they want is completely awesome.

    Keep up the great post and you’ve got a new follower.

    Thank you!

    Ryan v.

  • AB Web Design, LLC

    Thank you for the great tut. But do you prefer to use PS for web-layouts as opposed to Fw?

  • Bowenk√§mper

    Wow, i just found the download for this tutorial and i will get in right now.
    Thanks a lot.

  • Corporate Identity

    Thanks for another great tutorial, this is very nice blog layout not to keen on the colours though, but it is still a great design.

  • vincent

    hey! great tutorials… I’m impressed. Anyway, i have a question. I have a fashion blog and i was just wondering can you do a tutorial on how to create a layout for fashion blog?

  • EC

    Hi great design and tutorial, on step 4 it says “Fill the rectangle white white (#FFFFFF).”

    I assume you misspelled WITH (WHITE as above) :P

  • Tom

    This post is delicious I like this tutorials must.

  • zeddy

    hey!! gud stuff there. i would lyk to learn how to do this but i have absolutely no idea how to do ths. i dont know any thing about comps. HELP!!

  • tutorial blog

    Great tutorial. thank…

  • Do Hoang Loc

    Can you show me how to dowload Santa Fe LET font ? I don’t know where to dowload it.

  • Jim

    This tutorial is very helpful. I appreciate the fact that you provide a lot of screenshots. In this way, we won’t get lost while we follow your instructions. Thanks for sharing!

Leave a Comment

Name (required)

Mail (required)

Website

Message

 

Sponsors