Don't be stingy, Share this post with others!

• Tweet
• Bookmark this!

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>Canvas 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

Don't be stingy, Share this post with others!

• Tweet
• Bookmark this!

part 1, PSD, psd to wordpress, psd to wp, psd to wp tutorial, Tutorial, Wordpress, wordpress theme development.

13 Responses to PSD to WordPress Series Part 1

1. August 15, 2009 at 7:53 am Corey Freeman

   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. Pingback: How To Convert PSD To Wordpress : Top 9 Useful Tutorials | Devils Workshop


3. September 26, 2009 at 10:40 am Aaron Bilgrad

   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.

4. October 7, 2009 at 8:26 am PSD To WordPress

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

5. January 25, 2010 at 8:10 pm Paint Touch Up System

   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.

6. April 24, 2010 at 7:37 pm web design

   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.

7. June 20, 2010 at 9:10 am @RonaldRanier

   Great Tut! This is just what I’ve been looking for!
   Going to Part II now! A+ Post!

8. Pingback: 45 Resources & Tutorials for designers and developers | Webdevtuts

9. Pingback: Top 10 PSD To WordPress Tutorials « Review PSD to HTML Companies

10. Pingback: CyberAngel's Blog » Come convertire un file PSD in un tema per WordPress: 6 utili tutorial


11. February 13, 2011 at 6:15 pm samad

    Great tutorial! I think this is a great tutorial for me.
    I’m no wordpress expert so i want to see how u can do that.
    
    • February 13, 2011 at 10:45 pm Marcell

      Glad you’ve enjoyed the tutorial!

12. March 23, 2011 at 2:19 pm seo tutorials

    i am very impressed. for the whole series of tutorial and this is a very good tutorial for start. I am mostly interesting for the next step coding the psd.