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

Author: Marcell Purham

Hey there! My name is Marcell Purham and I am a 18 year old web & Graphic 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're looking for me you can probably find me via @marcellpurham

Related Post

• Create a clean elegant glass like typography wallpaper in photoshop

• Create a simple logo in photoshop

• FREE: WordPress Theme Hoover Blog (Theme Options Page)

Share

• Share