Aug 11th

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! <b>Click image to enlarge</b>

Part1

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

Tip! I am using a photoshop grid system, 100px from left, and 55px from right leaving 970px in the middle.

2. Select color black ( #000) and create a rectangle 50px from the top
%0px from top

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

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

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

Tip: 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

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

Tip: 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

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

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

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

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

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

11. 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
canavas 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

12. 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

title

Tags: , ,

Author: Marcell Purham

Hey there! My name is Marcell Purham and I am a 17 year old web developer/ designer from Chicago IL. When I'm not designing or coding things up I'm probably skateboarding, or gaming, or just being the average human. If you would like to stalk me just follow me @marcellpurham


Share


5 Responses


  1. 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. :)

  2. 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.

  3. What an amazing list! I’m trying out the finetune right now

  4. 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.


Leave a Reply

CommentLuv Enabled