Start by creating a blank canvas 900px width and 600px height and give is a background color, I used a very light green – #f7f8f2.
As I said in Developing a WordPress Theme, the elements we will include in the theme are: a banner, a navigation, a sidebar, a content area and a footer. To the left is how I’ve blocked in my elements.
We are now ready to start on the specifics of the design – we’ll start with the banner. For the background of the banner I will be using a landscape photo from Deviant Art. To set the photo as the background of the banner: copy the image and paste onto your canvas, select the photo layer, make a selection of the banner area with the marquee tool, click Layer>Layer Mask>Reveal Selection and finally un-link the photo from its layer mask in the layers panel. Now you can make the photo freely until it is positioned correctly.
Since the layout is for a WordPress theme, the title must be plain text with no Photoshop styles so the title can be changed through the HTML. The changes you can make to the text include: size, color, bold, italic and font (although you’re limited to default fonts).
For my title text I chose: Trebuchet MS font, 28px tall and color #4c880b.
For the navigation I will make tabbed buttons. Start by creating a new layer above the background layer but below the banner layer, now create a rectangle with its starting 20px above the banner but ending behind the banner. Now add a style to the rectangle – stroke: 1px #333333. gradient: linear #C8E193 – #E5F8C0. Finally add some text to it, I used Verdana 10px #167323. Now duplicate the button several times and spread them evenly.
Now for the main content I want a main column and sidebar, I simply added a gray rectangle for the sidebar and added a 1px line to separate the columns. To finish the theme I’ll add some WordPress style content to the content area, the sidebar and the footer. Here is the finished design –