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