Psd to css to wp

MAKING THE PSD FILE Good evening welcome to the first part of my PSD to wordpress tutorial. In these series of tutorials we'll be creating a wordpress theme called "mywordpress" the first part of the tutorial will be mocking up the layout in photoshop. Part two will involve converting the PSD file into a working CSS website, then the third part will be converting the CSS template over towordpress. Each part will be released within a week of each other and the good thing is you can download the PSD, CSS template and wordpress theme ALL for free. Right lets get cracking with part #1, open up photoshop and create a new document 900x1150 pixels select the colors #e5e5e3 and #FFFFFF, set #e5e5e3 as your forground color then drag a linear gradient over your canvas. Select the rectangularmarquee tool and create a rectangle at the top of your canvas.

Add these layer styles to your top bar.

Your top bar should now be identical to mine, using the rectangular marquee tool again create a bigger rectangle underneath your top bar.

Add this layer style to your bigger rectangle.

Add to the top bar some items you'd want in your wordpress theme, then add your website title andslogan, swap the colors on your website title so you have a nice white and then a blue, the color code for the blue is #309dcf.

Next were going to mimic our search field for the header, select the rectangle marquee tool and create a rectangle for our search field, fill the rectangle with the color #494949 then add a 1 pixel stroke using the color #666666. Do the same for the "go" button, just makethe rectangle square.

With the rectangular marquee tool once more create another rectangle the width of your canvas underneath your header.

Add these layer styles to your navigation rectangle.

Directly underneath your navigation bar add a 1 pixel white line, spanning the width of the canvas.

Add some dummy navigation text onto your navigation bar, inbetween each link add a smalldivider. The small divider is made up of two 1pixel lines next to each other, then a layer mask is applied. Using a reflected gradient start from the middle of the divider and drag upwards to the top of the divider. Make sure your forground color is set to white and background is set to black.

Now were going to create a dummy post, select the rectangular marquee tool and create a rectangle exactly600 pixels wide. You can create exact sizes by changing the settings of the rectangular marquee tool to "fixed size" you can then enter the values in the width and height fields. If you want to be exact to mine the height of my rectangle is 223pixels.

Fill your rectangle with any color than add these layer styles.

You should have a nice box like this.

Inside your small content box,which will represent out post on wordpress, add your thumbnail image, example post title, post content and some meta data. Then duplicate the box and there contents about 3 times moving them down equally as you go along.

Next create your sidebar using the same layer styles as your post boxes. Only this time stretch the sidebar box all the way down to the bottom of your last post. Then fill yoursidebar with some example content like ads, titles and text. Just to get a feel for the sidebar would be like. This will help us visualize what the theme should look like. Although you dont need to be precise on postioning etc... as this will come later when were coding it into CSS.

Finally lets create our footer, duplicate your top bar and header. Move the duplicated top bar and header down tothe bottom of your canvas.

On your top bar in the footer add your website title and slogan, then in the black area add your copyright text. Thats it all done, heres our finished peice.

The layout doesnt look like much at the moment but once coded into CSS it will look good. Just to give you a taster on what it will look like "CLICK HERE". We'll be coding the PSD into a CSS template in...