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

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

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 )

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

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

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

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 )

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

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

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 )

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

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

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

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 )

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

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

Related Post

• Create an awesome user friendly button in photoshop

• Create a awsesome images gallery using css3 and jquery

• Highlight Current Page in an HTML Document Using Css

• Create a stunning Droid like mobile cell phone in photoshop

• Freebie: Hoover Wordpress theme-Magazine,Personal and Blog style

• PSD to Wordpress Series Part 3: Final Tutorial

• Create a Retro Design Poster in Photoshop

• Create a fancy neon text effect

Share