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 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 27×27px 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

Post Pages: 1 2 3

Tags: blog, cs4, magazine, Photoshop, theme, Web Layout, web-design, worpdress

If you enjoyed this article, please consider sharing it!