PSD to WordPress Series Part 1

I know there are many developers and normal people who want to know how to design a wordpress theme from scratch. Well today is your lucky day. In this series, PSD to WordPress we will design a Mockup in Photoshop, then code it for wordpress. If everyone likes this tutorial then we will also do a theme option for it. So let’s get this thing started.

Here’s what we’re going to create today! Click image to enlarge
Wordpress Theme

Step 1

Create new document 1170px x 1200px, background pink/redish ( #71434b ).
Open New document

Note: I am using a Photoshop grid system, 100px from left, and 55px from right leaving 970px in the middle.

Step 2

Select color black ( #000) and create a rectangle 50px from the top
10px from top

Note: Arial font, 12px, bold and color#7ecffd is the font used for top menu

Step 3

Select the type tool and create the following ( double click when type tool is preset for header lines )
Type tool

Step 4

Now let’s create a heading. size 60px, color dark purple ( #222226 )

Note: Font I used for heading is headline one( dafont.com )

logo

Note: I will not go through details on post sections considering you should have experience with Photoshop if you’re reading this tutorial

Step 5

Next we will create our post area. ( post area is 660px wide )
post area

Note: Here’s and example of what the post area should look like

Post heading: Arial bold, 24px, color dark gray ( #222226 )
Post information: Arial, 12px color white ( #fff ), Link color ( #b8bab6 )
Post Excerpt: Arial, 12px, color dark gray ( #222226 )
Post Thumbnail: width: 204px x Height: 193px
More Link: Arial, 12px, color white ( #fff )
Post area example

Note: sidebar is 298px wide, leaving 10px between the sidebar and post area

Leave 10 pixels

Step 6

Let’s create a sidebar for our mockup. Select the rectangle tool color black ( #000 ) and create a rectangle from top to bottom
sidebar

Step 7

Select the rectangle tool and create a box like the one below. Then select the type tool and create headings

Note: Sidebar headings : Arial, 31px, bold, color white ( #fff )

sidebar headings

Step 8

Now let’s add some real ads to our mockup. Google search “ad 125×125” and add 4 ads to mockup
ads

Step 9

Ok let’s add some flick photo’s ( 9 pictures, 75px x 75px )
Flickr

Step 10

Now we will add a footer area to the bottom of the page. Press ctrl+alt+c or Image>Canvas size. Select the top arrow and change the height to 1250px
canvas size

Note: You should now have a open space at the bottom of the mockup that has no color. Select your main background layer, then select the paint bucket in fill in the background. color black ( #000 )

footer

Step 11

For the final step we will add some footer text to our mockup, select the type tool and create your footer text. ( copyright 2009 your website.com all rights reserved ) Then you’re done

Joe Granados the author

Joe Granados is the owner of WebDevTuts. He is also a web designer & developer who loves to design and develop websites. If you're looking for him you can find him via @webdevtuts
  1. web design says:

    Wow awesome post. I really love it and I am glad that I found this site. I am been working with the development team converting from psd to wordpress. I will add you anyway in my google feed reader. I hope to hear from you.

Leave a Reply