Line25

Creating a Stylish Blog Design Layout in Photoshop

Read the full post

One of my current projects is a redesign of my personal blog over at ChrisSpooner.com. The aim is to move away from the current fun and cartoony theme and give it a more sophisticated, minimal and stylish design. I thought this would be the perfect opportunity to create a blog design walkthrough. This tutorial starts with the Photoshop stage of the blog design process, and shows how the design and layout are created to form an initial concept from which the fully coded blog will be based on.

View full size concept

View full size concept

The design I’m working on for ChrisSpooner.com features a slightly retro beige and brown colour scheme with a burgundy red as a highlighting link colour. Subtle textures and patterns like the background noise, chiseled lines and inset text effects all help add the visual details to the design. Being a site that holds a fair few YouTube videos, the content area needs to be wide enough to accommodate at least 640px, which leaves just enough space for a thin sidebar to contain category links and a brief overview of the websites I run.
I wanted the footer to be a place where visitors could find a wealth of additional info about me, so it includes a list of latest posts from my design blogs, insights into the music I’m listening to and latest shots from Flickr.

A new document is created in Photoshop. I use dimensions of 1680px width to give a typical widescreen view, a height of 2000px or more to leave space to design the whole page and a resolution of 72ppi. The background is filled with a light colour from my chosen palette, which is a very light beige #f0efe8.

A little texture is added to the background using the Noise filter. Go to Filter > Noise > Add Noise and move the slider to around 2%. Also check the Monochromatic option.

Guides are used to visualise the layout. Create a mask and transform it to the dimensions of 960px, right click on your mask, then select Transform Selection. Alter the width in the Photoshop header bar.

A top heading bar is added and filled with a grey-brown (#6a675d). The layer is set to Multiply to allow the noise texture to show through.

A new pattern swatch is created to use as a fill for special elements. Go to File > New and enter dimensions of 5x5px. Using the pencil tool draw a diagonal line across the canvas then go to Edit > Define Pattern.

Switch back to the main document and create a thin selection underneath the header. Grab the fill tool and change the drop down to ‘Pattern’, then fill this selection with the lined Pattern swatch.

My logo file is pasted in and aligned to the centre margin. This particular badge/emblem was created in Adobe Illustrator (see the tutorial). A subtle Drop Shadow is added using the settings 12% opacity, 5px distance and 0px spread & size to seat the badge on the design.

The text tool is used to add a collection of navigation items. These items will be generated as Pages in the final WordPress theme. The Georgia font is used with increased tracking for a touch of style.

The same font is used on the opposite side of the header, but this time small icons are added to give visual clues for the subscription options.

A subtle container is added to the 960px width using two 1px lines. One is filled with a swatch from the colour palette (#dfddd5), and the other line is filled with white. When viewed at 100% it gives the effect of a chiseled line.

A tagline is added underneath the logo to introduce the website. A ‘non web font font’ (Tallys) is used to spice up the design. This will later be replicated using the @font-face CSS rule.

The same chiseled effect is added to the text using the Drop Shadow layer effect by changing the options to Normal blend mode, 100% opacity, white shadow colour at 1px distance and zero in the spread and size fields.

Now the header is complete, the main content is visualised using typical blog elements. The post date, title, category and comments count are all added as a post header. The most important item is the header, so this is given the largest type size. All links are given a contrasting red colour to alllow them to stand out to the viewer.

Videos are popular on my blog, so it’s important to create some kind of styling for them to blend in with the site. The diagonal lines pattern is used to create a background for the embedded video to fill out the whole content width.

Links to previous and next pages are important elements, so they are made large and prominent. Inner Shadow and Drop Shadow layer effects are used to continue the inset appearance used elsewhere in the design.

The same style is also used on the categories list. The list is designed to fill out the width of the sidebar, and is introduced with a header set in the same Tallys font. Displaying the post count is an option in the WordPress list_categories tag, so this will be styled up the match this design concept.

Another important element for my website is to showcase my main blogs. A list is laid out each containing a title accompanied by the website’s favicon and a short description.

The blog design is finished off with a large footer, which is filled with a dark contrasting colour. The layer is set to Multiply to allow the background texture to show through, and the patterned lines added as a border along the top edge to replicate the header.

The footer is used to display all kinds of social information, so the headers and lists are conceptualised in Photoshop. Different colours are required for the dark background, and different fonts are used for the various elements.

Scripts are available to pull in feeds from your Last.fm and Flickr profiles, so these are replicated in Photoshop to test how they would fit into the design. The Tallys font continues the generic heading style throughout the footer, and everything is aligned to the guides and margins.

View full size concept

The final concept gives a clear insight into how the website will look. Next up is to visualise how the inner pages will look, then the next step will involve coding up the design in HTML and converting the design into a fully working WordPress theme. Stay tuned for the next installment.

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

45 Comments

  1. Rehaan says:

    i like your blog design. why dont we use cofon for font replacement i thought its very good technique beside css @font-face.

    :)

  2. Nikita says:

    Thanks for the tutorial.
    But the link to the badge tutorial doesn't work. it says not found!

  3. emre says:

    Tanks. i like your design.

  4. Awesome tutorial. Thanks! The blog design is super slick!

  5. Eko Setiawan says:

    Love your design, simple and clean.
    Thanks for share the tutorial

  6. simplicity always cath many eyes. really good looking design tutorial.

  7. Great design Chris, really!

  8. Thanks for this tut… it's useful :)

  9. naoXens says:

    Nice !!! I share it now !

  10. mark allen says:

    Great Chris, cheers. You are a gooden at sharing your knowledge aren't you mate!

  11. nice Chris, very neat design.

  12. Philip Brown says:

    Another great tutorial Chris!

    Do you always design everything in photoshop? or do you ever design in the browser? I find a mixture of the two helps a lot when I'm looking for something new.

  13. Yoosuf says:

    so the WordPress theme going to be release as a next step?

    nice Quick tutorial :) thumbs up

  14. Great Post. I like your blog very much.

    Thanks

  15. This tutorial couldn't have come at a better time! I'm currently re-designing and re-purposing my personal site chriswardlecousins.com and as part of the re-vamp I plan on turning the site into a wordpress powered blog!

    Nice work Chris ;)

  16. Pedram says:

    Cool, I enjoyed it.
    thanks

  17. Rod says:

    Very nice work. I've been using WordPress more and more, and this might just convince me to make my own theme.

  18. Mits says:

    Did you sketch some thumbnails before opening up Ps

  19. craig says:

    how do you go about turning a design like this into a working blog? I would not know where to begin.

    • Stay tuned for the next couple of stages. Next will be the coding into HTML and CSS, then I'll probably produce a walkthrough of how it was converted into a WordPress theme.

  20. Great walk-through, as usual, and your new design looks great.

    I'm curious though – is there any particular reason why you're moving away from the current style? I quite like the cartoon monster :)

  21. Ruiting says:

    I love ur tutorials!!!!

  22. nawk says:

    love your tutorials
    Thanks a lot : )

  23. pelumini says:

    You're always good.

  24. Jaz says:

    Good case study Chris. Loving the new design, can't wait to see it all finished!

  25. Antonio says:

    It's a little bland, but at least it would be easy to navigate through the site.

  26. matt says:

    Hi Chris,
    I've been your silent reader recently and your design always get me inspired. I love your style.
    I can't wait for the next tutorial since I want make my own blog layout.
    Have a nice day.

  27. Studio 422 says:

    Nice article. I wish I had time to write stuff like this in my blog.

  28. Tech Guy says:

    Very cool. I like the beige tones and its a great logo as well.

  29. Hassan says:

    How to create that mask of 960 px that is a bit confusing can you please tell me how?

  30. Andrew Brown says:

    Nice Blog Written…Overhere….I found BubbleFish Australia for <a href=”http://bubblefish.com.au”>Website Design Sydney</a>. Bubblefish have been involved in website design, web development and graphic design work. our extensive website design, web development and various print and online media advertising portfolio shows.

  31. Lars says:

    great tutorial again! i'm looking forward for the next steps. especially i like your sense for background noise. i don't have photoshop, try to imitate your steps in gimp, but sometimes that's quite hard… but i keep trying

  32. John Loudon says:

    Good post Chris, blogs are wierd things to design, keep it simple seems to be the key, thanks for sharing.

  33. Great tutorial. I loved the final outcome

    Keep it up Chris :)

  34. Excellent! I’ve got this bookmarked for reference. I was searching like this article. It's awesome,
    thanks for the great post

  35. JMLeon says:

    This design is awesome, simple and stylish, I love it!

  36. Vintarah says:

    Wow! Now I'm inspired to re-design my own blog too. Great work! Did you also create the logo using Photoshop? What CS of Photoshop are you using? I'm just curious. Thanks Chris.

  37. Daniel says:

    hey great post. this kind of pictorial presentation made this post worth. because of this post became easy to understand.

Comments are now closed