It would appear that I didn’t manage to save my old theme when I was trying to sort out my old blog. It’s a massive bummer as I put a lot of effort into making that theme as awesome as it could be.
Still as they say, every cloud has a silver lining and it means I can now start making a new theme and learn from the previous one to make something much better and personalised. I can use technologies I wasn’t aware of before and just experiment.
So I guess it’s time to jump into Photoshop.
Part 1 – the layout
It goes without saying that the most important part of any website is the layout. Without the layout all websites would be an unorganised mess. There are many layouts available, most people tend to go for a centered single column that is then broken into 2 after the header. I decided that I wanted go for a more artistic layout and have it break into 3, though the 3rd column would be left empty for art.
Inspiration
As a Mac fanboy it would be incredibly hard not to be inspired by Panic. Their blog is well thought out , uses just a single column and has different styles for each category of blog post which in my eyes is just genius. I liked the category idea as it helps to break the plain look of sites and also helps to add a personal aspect to each subject. This is certainly going to inspire my design. This will mean that my layout will need to have a lot of padding to make this kind of thing work though.
Another one of my loves is 8-Bit graphics and music. I’d really like to use my site to replicate an old video game of sorts. I’m also thinking that I can use my footer to make a little 8-Bit like village where I can post links to other peoples sites. This would give the user incentive to read all the way to the bottom of each page. Especially if I could use the Trackbacks to the blog posts to populate the single post pages.
Photoshop
I’ll write this out like a To Do list so that everyone can follow it easily.
- Open up Photoshop and create a new Document. I used the web preset of 1024 x 768.
- If your going for a centred layout then first set up your side padding (so that the content always stays in the center, the remaining space will be how wide your wrapper div will be).
- Now set out how long your header will be. I chose 150 pixels as I thought this gave me a fair amount of space to work with.
- Below your header will be where your content will be, set out your navigation where you want it, I chose a small box padded by 10 pixels on each side (which will become a hot air balloon later).
- Next set out your post’s will go. A good thing to remember is that as you blog your posts will be of various sizes so it’s best to design with the shortest post in mind.’m going to make sure that the posts are never shorter than the navigation box (by using CSS)
- Now set out any other boxes (I don’t have any here)
- Finally add your footer (don’t forget the padding). My footer will be 200 pixels high as I want to add my little village.
Once you have followed those steps you should end up with something like this:

The final product
Now the next step is to start adding images to these. Time to get out our crayons me thinks!
Part 2 – Graphics
Adding colour to the layout
Now we’ve got our layout designed it’s time to start making it look pretty. I’m going for a retro 8-Bit feel which means 2 things: Pixel Art and restricted colour palette. I found this awesome NES colour palette on deviant art by Erik the Red which provided me with an accurate colour scheme. I decided to make my pixel art at 2x zoom so that means for each section of the layout I scaled it down by half, did my pixel art magic and then rescaled it up to the original size (make sure when doing so you select the nearest neighbour option). Doing this means that you can see the pixels clearer (essential for pixel art). Below is the finished product and I’ll include the photoshop document as well (I’m using CS4, I’ve compatiblesed it so should be ok on CS2 +).

complete layout for colinwren.com

Download the Template
When you open the photoshop file you’ll see that I divided every element into a separate layer, this is so I can get a better grip on how the space behind each element will be best used. On the complete website if you resize the window you’ll see the clouds behind move and the sun moves aswell. To do this you will need to select each elements inside it’s bounding box and export (transparency is key if you want the awesome effect).
The best part about using an 8-bit style is the fact that your never going to be using loads of colours. I think the most I used was 32, meaning that even with everything in there my 1024 x 768 image was only 20KB when converted into a gif (using the least amount of colours possible and no dither). Most elements were about 2 – 4KB so this will mean my pages load really fast. I tend to use PNG-24 because I find it’s smaller than JPEG and offers better quality images but when dealing with this type of image GIF far out performed anything else. Just goes to show you should never forget about those old technologies.
Part 3 – HTML
Making sure the template works in good ol’ HTML
Once you’ve exported all the various elements it’s time to start making the HTML for us to CSS up. Following my layout I made a basic structure with 6 divs (1 wrap with the over elements inside) naming each div accordingly. //Edit – I decided to break out the header and add top and bottom divs to the post div so that I could make my theme better.
I then created my CSS file. For the basics of the CSS file I made each element the width and height (though don’t define a height for the post as you’ll want these to stretch) of the elements in the photoshop file. I then fired up the awesome CSS Edit by MacRabbit and positioned each element using it’s awesome live editing functions. The wrap is auto centered, this means when you resize the window widthwise the clouds move. The menu uses fixed positioning so that when we scroll down the posts the balloon follows. I’m including the full files below for download.

Download page source

Download page style
Once the HTML file is working how you want it to, it’s time to go onto the next step. Adding WordPress functionality.
Part 4 – WordPress Hooks
Dynamically adding content to the elements on the page
Although I am writing from a WordPress perspective the technique I’m using (of creating a HTML file and then adding the platform hooks to the code) will apply to most CMS / Blogging platforms. The way most of these platforms work is to use special PHP (or whatever language it’s in) commands to pull the content from a database. If you’ve ever gone through a template you’ve downloaded and seen tags like the_content(), these are those hooks.