In Freebies, Tutorials 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.
43 Comments
Oct 28, 2008
Nice one! I like it quite a lot. It’s pretty unique
Oct 28, 2008
One of the best PS tutorials i have read in a while.
Oct 28, 2008
This is a great tutorial… thank`s a lot for .psd file
Great work..
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.
Oct 28, 2008
great, great, great - looking forward for the part 2 —> just a quickie - when it will become available ???
Oct 28, 2008
I really like this design a lot. Great, clear step by step instructions too!
Oct 28, 2008
You make it look so easy!
Oct 28, 2008
Good one
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?
Oct 28, 2008
Sweet, thanks for the tutorial.
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?
Oct 28, 2008
got loss on Step 2. Could you explain more how to merge them.
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.
Oct 28, 2008
Great, Thanks
Oct 28, 2008
Nice design and post, should be a good series
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 [...]
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!
Oct 29, 2008
Very nice post.
Oct 29, 2008
great tutorial in photoshop, hopefully you will make tutorial on how to apply for wordpress
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.
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
Oct 30, 2008
Amazing! I can’t wait to read the part 2 of your course!
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.
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.
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.
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!
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!!!
Nov 6, 2008
Really nice tutorial, I love the outcome.
Nov 10, 2008
[...] Mocking Up a Theme In Photoshop [...]
Nov 11, 2008
Very nice! I’ll be using some of these tricks when I redesign my site.
Nov 14, 2008
Nice tutorial! waiting for part 2 ^^
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.
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.
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.
Nov 25, 2008
@raymond: Thank you very much
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
Nov 26, 2008
Absolutely brilliant. What an awesome post!
Thank you for all you contribute to the Web design community.
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
Dec 2, 2008
I am becoming ever so anxious… Please hurry up, it’s been a darn while now.
Please Alvaro, we need you!
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!!
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
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
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.
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