Create a Magazine WordPress Theme from Scratch in Photoshop
October 15th, 2009 by ART-D Posted in Adobe Photoshop, Web Layout
This tutorial will guide you through the process and ideas behind the designing a professional WordPress theme from scratch using Photoshop.You can easily use the technique to create your own unique web designs. Let’s review the process!
Final Image Preview
First create a new document (File>New) 1200 pixels by 1650 pixels at RGB 72dpi. Using the Paint Bucket Tool (G), fill the new background layer with color – #3E2E1F
Select for the made layer Filter>Noise>Add Noise
… and for the same layer also Filter>Blur>Gaussian blur
Next we need to represent a pattern. In this case create a new file (File>New) of 27x27px with transparent Background Contents. Take then the Rectangle Tool (U) to draw three small black lines. They must be inclined with the Free Transform.
Now we’ll put together the pattern’s layers. Hold CTRL button, select the layers from Layers panel and then press CTRL+E to Merge Down. Finally define pattern by using Edit>Define Pattern.
Get back to our first document and create a new layer and select Edit>Fill. From Contents section select Use Pattern and from Custom Pattern choose our earlier created pattern.
Set Fill to 10% for the last made layer in Layers panel
We’ll add the main container background, applying the Rounded Rectangle Tool (U) (Radius – 15px). The layer’s color is black.
Set Fill to 25% for this layer.
Using the same tool, try to make the next layer of the color #ECE9E3
Add Layer Style for the last made layer by clicking on this layer on the Layers’ panel and set Inner Shadow:
Add Inner Glow
Represent the logo on the header, I used Sketch Rockwell font.
Then add the Pages link’s text using Sketch Rockwell font:
We’re going to add the Search form of black color on the right side of the Pages link’s, applying the Rounded Rectangle Tool (U) (Radius – 15px)
Set Fill to 50% for this layer, go to Layer Style and add Drop Shadow
Tags: blog, cs4, magazine, Photoshop, theme, Web Layout, web-design, worpdress
Kahve Tozu
16/10/2009
good example thank you
TheWebTuts
16/10/2009
Tutorial added to thewebtuts.com
Koert
19/10/2009
Thanks for the photoshop tutorial. I would like to make my own wordpress theme. But this is just the apparel of the site how are the different parts linked to the actual cms and cut up in the appropriate files ?
disappointed
26/10/2009
Agree with Koert. It’s a pointless tutorial and misleading in the title. What you’ve shown is nothing different to creating ANY website in photoshop.
There should be a follow up about how you actually convert the PSD file – that’s where the real trick lies, and where the most value could be added.
WebxFun
04/11/2009
I like it ,thanks
tuna
05/11/2009
good tutorial, thanks..
Tutorial Lounge
18/11/2009
excellent way of make wordpress theme design, i really like to follow your way for my own tutorial. thanks
hemin
19/11/2009
thanks,I am from china!
谢谢，来至中国的感谢！
Search Bot
02/12/2009
Great tutorial! True, this is not quite a magasin theme
IVAN
05/12/2009
HELLO GUY’S
I HAVE DESIGNED IT. BUT, TO CLEAR THE CONFUSION, I HAVE DONE IT IN PHOTOSHOP. IS THAT RIGHT? OK, NEXT. WHAT DO I SAVE IT AS, TO MAKE THIS WEBSITE WORK. PLEASE HELP, I AM A BEGINNER.
caophamtruongson
06/12/2009
Thank you , i love it . I come from Viet Nam.
magicaltheatres
26/01/2010
Very disappointing. This is a tutorial for an image, not for a website and certainly not for a wordpress theme!
xxx
07/02/2010
LOL, magicaltheatres is right… it’s only for a image.
ravivarma
10/02/2010
thanq this is a good designe.
designing website and coding are 2 different things. creating how the website should look in photoshop is very important. this tutorial shows just that. if u want to make this into a working html. i suggest u lean html and css.
S. Ramelan
03/05/2010
WOW! This is great tutorial. Here is more on creating wordpress theme – http://morzdesign.com/tutorial-how-to-create-a-wordpress-theme-from-scratch/
sufcboy
31/07/2010
A great article. I haven’t found many tutorials about setting the main layout for a website. This has really helped me get my new site designs up and running
nosisme
11/08/2010
Thanks for your Tutorial. Helpful
ilahiler
27/10/2010
I will start to make my theme with this tutorial.. Thank you
patrick
06/12/2010
Nice clean layout with slight grungy feel. Looks Good.
Olivia
01/02/2011
This is great theme design, I will use this tutorial to create my own themes. I will bookmark this article to learn about theme design using photoshop. Thanks for your tutorial
atilla
20/03/2011
tanks vey good
ilahiler
01/04/2011
Thanks for your Tutorial. Helpful
mahmud
04/07/2012
wow!! what a descriptive tutorial. great job done by ART-D. I was looking for some tutorial to make a new theme for my site and here i found every details. but it would be far better if you would have added some css and php tricks.
kedipencesi
06/03/2013
great tıutorial. thanks for share.