Oct 28, 200843

Premium Wordpress Theme Design Part 1 - The Photoshop Mock Up

Making a premium Wordpress theme from scratch is an essential skill for designers to learn and will become increasingly important as Wordpress continues to become the web publishing tool of choice. In this two part tutorial will we cover how to make premium Wordpress themes happen. Part 1, covered below, shows how the photoshop mock up is created, and in Part 2 we’ll outline how to turn the psd into HTML/CSS and wordpress theme files.

I’m Alvaro Guzman and in part 1 I’ll show you how to design a modern web interface from scratch using Photoshop and stock pictures. You can download the finished psd file at the end of this tutorial. Firstly let’s have a look at the finished psd mock up:

The Finished Mock Up

Step 1

Let’s get started, first create a new blank document and draw some guides to delimite your design, 960px width is just fine, then increase your canvas size to see how it looks on wider resolutions, maybe to 1200-1260px. Do the same with the Height, start with 800px then increase the height to 1000px at least.

Step 2

Now paste this image as a background, resize and place it in the bottom of our design. Create a new layer above the image then select two tones of purple-blue as foreground and background colors then go to Filter > Render > Clouds. Next apply "City" layer a Gradient Layer Mask to merge it with the clouds. Then put a black background behind the merged image and to finish the main background add another Gradient Layer Mask to the resultant image.

Step 3

For the header background, draw a Rounded corner rectangle above all the layers, then apply to it a Gradient overlay effect, use the colors shown below.

Step 4

Now paste this image above the rectangle, change the paper layer Blending Mode to Vivid Light and Opacity to 50%. Command (Ctrl) + Click the rectangle layer and by going to Select > Modify > Contract, contract the selection a little bit, hot Command (Ctrl) + Shift + I to inverse the selection and delete all the extra paper. You can also add some layer effects to the rounded rectangle as an Outer Glow or maybe a Stroke effect, it’s up to you.

Step 5

Let’s add the logo, I’m adding the text "Generation X" (Rockwell typeface) because I’m a huge fan of 90’s culture. Then apply to each text layer the Following layer effects, just notice the Stroke color should change depending the text color.

Step 6

Now draw a rounded rectangle as the sidebar background, set the Fill value to 75% and apply a Stroke effect on it.

Step 7

Repeat the previous step with the content background. At this point we have the basic layout.

Step 8

Now let’s add some graphic details and support images, first paste this picture of a nice cassette avobe all the layers of the design, I added some text on it using my tablet. Then select the tiny transparent plastic in the middle of the cassette, cut it and paste it just in the same place but dow its opacity to 50% or 60%. Then, merge both images and place the cassette just above the sidebar.

Step 9

This is a quick trick to create shadows, duplicate the object and put it behind the original, press Command (Ctrl) + U and set the Lightness value to -100, then apply a Gaussian Blur to the copy.

Step 10

Paste this paper image and put it below the header background on layers palette, this will be our navigation bar. Use the Lasso tool to extract the image.

Step 11

Create a new layer above the paper, make an eliptical selection and fill it with black, then apply to it a Gaussian Blur filter and down the layer Opacity to 75%.

Step 12

Duplicate the paper layer and rotate it a little bit, the apply to it a drop shadow to make it pop. Then you can add the text of your links, you can use a grunge or handwritten typeface.

Step 13

Now at the bottom of our sidebar add the RSS icon, I’m using one of these icons. Also add some related text, using "Rockwell condensed" typeface.

Step 14

Following just add the sidebar text, I’m keeping simple this time. "Rockwell" for the titles and "Georgia" for the links.

Step 15

Then add some posts, Combine different typefaces. I’m using "Georgia" for the titles, and "Arial" for the content, also added a tiny paper sheet to put the comments over, and a support image for each post (2px white border).

Also I’m adding the copyright information in this step.

Step 16

Now duplicate the technique of header’s background but this time as a footer background image.

Step 17

Add the footer’s text, I’m adding two containers for Recent Posts and Pages.

Step 18

Just if you want to, add more graphic details on the footer, like this piece of paper containing a simple slogan.

Step 19

An that’s it! a simple and quick way to mix grunge and modern style to design a inovative blog theme. Try your own!

Downloads

Download the photoshop psd file

In Part 2 we’ll explain how to turn this mock up into a fully functioning premium Wordpress theme. Subscribe to our RSS feed to be notified when Part 2 is published.

If you like this post, subscribe to our RSS feed. Or follow us on Twitter.


Digg This Stumble it!

43 Comments

  • John Joubert
    Oct 28, 2008

    Nice one! I like it quite a lot. It’s pretty unique :)

  • Guy Harwood
    Oct 28, 2008

    One of the best PS tutorials i have read in a while.

  • Pavel Ciorici
    Oct 28, 2008

    This is a great tutorial… thank`s a lot for .psd file :) Great work..

  • wedding singer
    Oct 28, 2008

    You make it look so simple, how long does this kind of thing take? I find I spend a day on this kind of thing and get nowhere.

  • Marcin Kruk
    Oct 28, 2008

    great, great, great - looking forward for the part 2 —> just a quickie - when it will become available ???

  • tresnic
    Oct 28, 2008

    I really like this design a lot. Great, clear step by step instructions too!

  • Susan
    Oct 28, 2008

    You make it look so easy!

  • Navdeep
    Oct 28, 2008

    Good one

  • James
    Oct 28, 2008

    I like the way your mind works this out. Just curious - how long did it take you to develop and actualize it? What’s your thought process behind your decisions?

  • Matt
    Oct 28, 2008

    Sweet, thanks for the tutorial.

  • Alvaro
    Oct 28, 2008

    @wedding singer: it takes around 6-8 hours, but you must add the time of finding the right pictures. The inspiration is up to you :)

    @everyone: Thanks for your comments, any questions?

  • Kay.L
    Oct 28, 2008

    got loss on Step 2. Could you explain more how to merge them.

  • Alvaro
    Oct 28, 2008

    @Kay.L: just select both clouds and city layers (hold shift key and click both layers on layers palette) and hit Command + E. This way you’ll get a merged layer.

  • Thomas
    Oct 28, 2008

    Great, Thanks

  • Max | Design Shard
    Oct 28, 2008

    Nice design and post, should be a good series

  • Webdevlounge Weekly Roundup - Wed Oct 29/08 | WebDevLounge | design, development, SEO and wordpress | articles, discussion and community
    Oct 28, 2008

    [...] first part in a series for producing a premium theme from scratch. This one is about producing a Photoshop mockup. If that’s as far as you get, don’t forget Webdevlounge’s sister site, PSD to [...]

  • Ren
    Oct 29, 2008

    This is one of the best that I have seen so far.

    I am staying tune for the next segment.

    Thumbs Up!

  • WanWP
    Oct 29, 2008

    Very nice post.

  • weblizzer
    Oct 29, 2008

    great tutorial in photoshop, hopefully you will make tutorial on how to apply for wordpress

  • Zach
    Oct 29, 2008

    Very nice tutorial. Very much looking forward to Part II.

    One thing as a front end developer I like to see designers do, is organize the layers into folders. IMO each section should be in it’s own named folder. This makes it easy to find stuff if you need to update it later.

    I took this PSD and orgnized it the way I normally do and was able to shrink it down by 5MBs (by deleting the unnecessary layers). I also like to use layer comps to show what should be text and graphics.

    Alvaro, if this is something you’d like to see let me know and how to get it to you.

  • Craig Farrall
    Oct 29, 2008

    Nice tutorial, I especially love the design, and it is nicely worded and put together, I am definately looking forward to part 2

  • Yoav
    Oct 30, 2008

    Amazing! I can’t wait to read the part 2 of your course!

  • Alvaro
    Oct 30, 2008

    @James: how long did it take you to develop and actualize it? What’s your thought process behind your decisions?

    The time, around 6-7 hours.
    The thought process… umm first you need a concept, I thought a grunge design but with a modern and futuristic style, just like 90’s grunge. so I read about generation-X urban-modern-grunge and tried to express all that into my design.

  • michael soriano
    Oct 30, 2008

    Finally someone tackled a tutorial on a heavy hitter design. You guys are doing a really good job. Can’t wait for the next one.

  • Dainis Graveris
    Oct 31, 2008

    huh, this is great article and tutorial, it always takes a lot more time than 7-8 hours because of all image searching..idea..etc.

  • createmo
    Nov 1, 2008

    Thank you for your site ;-)
    I made on photoshop backgrounds for myspace and youtube and even more
    my backgrounds:http://tinyurl.com/6rbxmr
    have a good day and thank you again!

  • Rachel
    Nov 5, 2008

    Hey, Sweet. This is a great tutorial…I love how you wrote this article with both the designer and the average every-day person. Thank you!!!

  • Tom Ross
    Nov 6, 2008

    Really nice tutorial, I love the outcome.

  • How I Learned To Build Wordpress Themes | Design Reviver
    Nov 10, 2008

    [...] Mocking Up a Theme In Photoshop [...]

  • Carl
    Nov 11, 2008

    Very nice! I’ll be using some of these tricks when I redesign my site.

  • 2tonewarrior
    Nov 14, 2008

    Nice tutorial! waiting for part 2 ^^

  • isabelle newton
    Nov 18, 2008

    Wow! I’ve been looking for a decent tutorial on how to design a professional looking photoshop skin and all I keep coming up with is you tube videos made by kids with dance music in the back ground. Thank you for an easy to follow in depth tutorial. :)

  • Raymond
    Nov 19, 2008

    Thank you so much for this tutorial Alvaro! Learned a lot of new techniques. Thank you for providing the PSD. Thanks for the effort in sharing this knowledge. I really love your design style. I’ll be anticipating the release of your personal website. Good luck.

  • Rahul
    Nov 22, 2008

    Gee.. man u make it look sooooo simple. You’ve made a new theme in just a matter of minutes. The theme is also a unique too.

  • Alvaro
    Nov 25, 2008

    @raymond: Thank you very much :D I’m still working on my personal website hehe, there’s a lot of work over here and I couldn’t find the time to finish it.

    Anyway you can watch some interesting stuff at http://www.southmakers.com

  • Daniel
    Nov 26, 2008

    Absolutely brilliant. What an awesome post!

    Thank you for all you contribute to the Web design community.

  • ericdared
    Nov 27, 2008

    Looks great & thx for the tips, too bad all this is pretty useless as we all know how to sketch sites with photoshop it’s the wordpress side that was interesting,it’s been 2 months now and it isn’t coming.

    let us know if we should stop waiting
    txs

  • EagerNewbie
    Dec 2, 2008

    I am becoming ever so anxious… Please hurry up, it’s been a darn while now.

    Please Alvaro, we need you!

  • Nach
    Dec 3, 2008

    Anybody know if there are going to be a second part?? or anybody know a alternative tutorial of it? thanks. Great tutorial!!

  • Nach
    Dec 4, 2008

    Great tutorial! Anybody know what’s about the second part? There a going to be a second part? Anybody know an alternative of it? Thanks

  • Nacho
    Dec 4, 2008

    Great tutorial! Anybody know what’s about the second part? There a going to be a second part? Anybody know an alternative of it? Thanks

  • tim
    Dec 4, 2008

    Part 2 is coming very shortly, don’t worry, I’m sure when you see it that you’ll agree that it’s worth the wait.

  • Ravi
    Dec 28, 2008

    Hi…
    Thanks for Good tutorial!! I like it quite a lot.You guys are doing a really good job. Can’t waiting for part 2.

Leave a Comment