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

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

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

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 )

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 )

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 )

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 )

Note: sidebar is 298px wide, leaving 10px between the sidebar and post area
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

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 )

Step 8
Now let’s add some real ads to our mockup. Google search “ad 125×125″ and add 4 ads to mockup
Step 9
Ok let’s add some flick photo’s ( 9 pictures, 75px x 75px )

Step 10
Now we will add a footer area to the bottom of the page. Press ctrl+alt+c or Image>Canavas size. Select the top arrow and change the height to 1250px
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 )

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
Tags: PSD, Tutorial, Wordpress
9 Responses
Leave a Comment




Hey! Your design is looking top-notch. Great job! I’m interested in seeing the next part of the tutorial when you move beyond the .psd file. Good luck with the new blog.
[...] PSD to WordPress Series [...]
Great tutorial! Theme is kinda simple but I think this is a great tutorial for me. I’m no wordpress expert so I am very interested to see how you incorporate this mockup into a wordpress theme.
What an amazing list! I’m trying out the finetune right now
It’s a difficult problem. I understand both sides of the debate because of how fairly you have presented them here. I look forward to your updates on the subject.
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.
Great Tut! This is just what I’ve been looking for!
Going to Part II now! A+ Post!
@RonaldRanier“s last blog ..GENIUS ARTWORK BY CHRISTOPHER UMINGA
[...] 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. [...]
[...] 10 PSD To WordPress Tutorials 1. PSD to WordPress Series July 15, 2010 // Uncategorized // No Comments [...]