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 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 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 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.

  • Rehaan

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


  • Nikita

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

    • Chris Spooner

      Whoops, this post was scheduled to go live an hour before the other tutorial. I should really have posted them the other way around!

  • emre

    Tanks. i like your design.

  • Dallas SEO Web Design

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

  • Eko Setiawan

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

  • Tutorial Lounge

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

  • Antoine Guédès

    Great design Chris, really!

  • ковано желязо

    Thanks for this tut… it's useful :)

  • naoXens

    Nice !!! I share it now !

  • mark allen

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

  • Louis Gubitosi

    nice Chris, very neat design.

  • Philip Brown

    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.

    • Chris Spooner

      I always produce full site concepts in Photoshop, but there might be some elements that I style up in the browser.

  • Yoosuf

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

    nice Quick tutorial :) thumbs up

  • Osenu Technology Solutionz

    Great Post. I like your blog very much.


  • Chris Wardle-Cousins

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

    Nice work Chris ;)

  • Pedram

    Cool, I enjoyed it.

  • Rod

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

  • Mits

    Did you sketch some thumbnails before opening up Ps

    • Chris Spooner

      I created a few brief drawings just to put the idea I had down on paper. I didn't spend too long in the sketch book on this design though.

  • craig

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

    • Chris Spooner

      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.

  • Rochelle Dancel

    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 :)

    • Chris Spooner

      Being just a personal blog it allows me to change the design according to my current mood. I've moved the cartoon style theme onto, so I've been looking forward to creating myself a stylish new look.

  • BSide Graphics


  • Ruiting

    I love ur tutorials!!!!

  • nawk

    love your tutorials
    Thanks a lot : )

  • pelumini

    You're always good.

  • Jaz

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

  • Antonio

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

  • matt

    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.

  • qualitydesign

    great post!!

  • Studio 422

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

  • Tech Guy

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

  • Hassan

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

  • Andrew Brown

    Nice Blog Written…Overhere….I found BubbleFish Australia for <a href=””>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.

  • Lars

    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

  • John Loudon

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

  • Marcell Purham | Webdevtuts

    Great tutorial. I loved the final outcome

    Keep it up Chris :)

  • Denizli WEB TASARIM

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

  • JMLeon

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

  • Amanda

    love this!!

  • Vintarah

    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.

  • Daniel

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