Create a Magazine Wordpress Theme from Scratch in Photoshop

Create a Magazine Wordpress Theme from Scratch in Photoshop

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!

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

Create a Magazine Wordpress Theme from Scratch in Photoshop

Select for the made layer Filter>Noise>Add Noise

Create a Magazine Wordpress Theme from Scratch in Photoshop
Create a Magazine Wordpress Theme from Scratch in Photoshop

… and for the same layer also Filter>Blur>Gaussian blur

Create a Magazine Wordpress Theme from Scratch in Photoshop
Create a Magazine Wordpress Theme from Scratch in Photoshop

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.

Create a Magazine Wordpress Theme from Scratch in Photoshop

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.

Create a Magazine Wordpress Theme from Scratch in Photoshop

Set Fill to 10% for the last made layer in Layers panel

Create a Magazine Wordpress Theme from Scratch in Photoshop

We’ll add the main container background, applying the Rounded Rectangle Tool (U) (Radius - 15px). The layer’s color is black.

Create a Magazine Wordpress Theme from Scratch in Photoshop

Set Fill to 25% for this layer.

Create a Magazine Wordpress Theme from Scratch in Photoshop

Using the same tool, try to make the next layer of the color #ECE9E3

Create a Magazine Wordpress Theme from Scratch in Photoshop

Add Layer Style for the last made layer by clicking on this layer on the Layers’ panel and set Inner Shadow:

Create a Magazine Wordpress Theme from Scratch in Photoshop

Add Inner Glow

Create a Magazine Wordpress Theme from Scratch in Photoshop
Create a Magazine Wordpress Theme from Scratch in Photoshop

Represent the logo on the header, I used Sketch Rockwell font.

Create a Magazine Wordpress Theme from Scratch in Photoshop
Create a Magazine Wordpress Theme from Scratch in Photoshop
Create a Magazine Wordpress Theme from Scratch in Photoshop
Create a Magazine Wordpress Theme from Scratch in Photoshop

Then add the Pages link’s text using Sketch Rockwell font:

Create a Magazine Wordpress Theme from Scratch in Photoshop
Create a Magazine Wordpress Theme from Scratch in Photoshop

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)

Create a Magazine Wordpress Theme from Scratch in Photoshop

Set Fill to 50% for this layer, go to Layer Style and add Drop Shadow

Create a Magazine Wordpress Theme from Scratch in Photoshop
Create a Magazine Wordpress Theme from Scratch in Photoshop

Using the same tool, let’s represent the search button on the right side of the search form. The button’s color is #F4B103

Create a Magazine Wordpress Theme from Scratch in Photoshop

Go to Layer Style and set Bevel and Emboss

Create a Magazine Wordpress Theme from Scratch in Photoshop
Create a Magazine Wordpress Theme from Scratch in Photoshop

Insert the title on the button:

Create a Magazine Wordpress Theme from Scratch in Photoshop
Create a Magazine Wordpress Theme from Scratch in Photoshop

Now it’s time to add some details. Add some text like “Subscribe to our RSS” above the search form:

Create a Magazine Wordpress Theme from Scratch in Photoshop
Create a Magazine Wordpress Theme from Scratch in Photoshop
Create a Magazine Wordpress Theme from Scratch in Photoshop

Next apply the Rounded Rectangle Tool (U) (radius 10 px) to represent the sidebar boxes. The boxes’ color is #F7F5F2

Create a Magazine Wordpress Theme from Scratch in Photoshop
Create a Magazine Wordpress Theme from Scratch in Photoshop

Insert the text in title area of sidebar sections:

Create a Magazine Wordpress Theme from Scratch in Photoshop
Create a Magazine Wordpress Theme from Scratch in Photoshop
Create a Magazine Wordpress Theme from Scratch in Photoshop

Add some random text, I’m using Georgia:

Create a Magazine Wordpress Theme from Scratch in Photoshop

for news date

Create a Magazine Wordpress Theme from Scratch in Photoshop

for news title

Create a Magazine Wordpress Theme from Scratch in Photoshop

for short news description

Create a Magazine Wordpress Theme from Scratch in Photoshop

For news link

Create a Magazine Wordpress Theme from Scratch in Photoshop
Create a Magazine Wordpress Theme from Scratch in Photoshop

Using the same method, fill the sidebar boxes on the right column, keeping the same parameters for the text.

Create a Magazine Wordpress Theme from Scratch in Photoshop

Next we’ll insert the information in the archive’s section and the categories:

Create a Magazine Wordpress Theme from Scratch in Photoshop
Create a Magazine Wordpress Theme from Scratch in Photoshop
Create a Magazine Wordpress Theme from Scratch in Photoshop

Next we’ll fill the BLOGROLL section:

Create a Magazine Wordpress Theme from Scratch in Photoshop
Create a Magazine Wordpress Theme from Scratch in Photoshop

It’s time to add a single post to our design. Just write some random text as a Title, another line for the date and author.

Create a Magazine Wordpress Theme from Scratch in Photoshop

the post’s title

Create a Magazine Wordpress Theme from Scratch in Photoshop

the post’s date

Create a Magazine Wordpress Theme from Scratch in Photoshop

for text “Posted by”

Create a Magazine Wordpress Theme from Scratch in Photoshop

the post’s author:

Create a Magazine Wordpress Theme from Scratch in Photoshop

We’re going to add a preview image:

Create a Magazine Wordpress Theme from Scratch in Photoshop

On the right side of the thumb we’ll insert some words as the text of the post.

Create a Magazine Wordpress Theme from Scratch in Photoshop
Create a Magazine Wordpress Theme from Scratch in Photoshop

Next we’ll insert for comments number a speech bubble icon from Function Icon Set.

Create a Magazine Wordpress Theme from Scratch in Photoshop

Then add the comments number:

Create a Magazine Wordpress Theme from Scratch in Photoshop
Create a Magazine Wordpress Theme from Scratch in Photoshop

Next we’ll create a pattern. Create in this case a new file (File>New) of 3×1px and 72dpi to apply here the Pencil Tool (B) (brush 1 px) of black color.

Create a Magazine Wordpress Theme from Scratch in Photoshop

Define pattern using Edit>Define Pattern. Go back to our file with theme and draw a divider for the post using the Line Tool (U) (weight 1 px).

Create a Magazine Wordpress Theme from Scratch in Photoshop

Set Fill to 0% and add Layer Style for the last made layer by clicking on it on the Layers’ panel. Set Pattern Overlay using earlier created pattern to represent dotted line.

Create a Magazine Wordpress Theme from Scratch in Photoshop
Create a Magazine Wordpress Theme from Scratch in Photoshop

Next we need to combine in a group all post related layers (Hold Ctrl button to select the necessary layers and drag the selected layers on Create a new group icon on bottom part of the Layers panel). Make four copies of the made group and apply Free Transform option to place the copies the same way demonstrated below:

Create a Magazine Wordpress Theme from Scratch in Photoshop

We’ll place the link under the posts to older entries:

Create a Magazine Wordpress Theme from Scratch in Photoshop
Create a Magazine Wordpress Theme from Scratch in Photoshop

Also add some footer text, like “Powered by” or the copyright information.

Create a Magazine Wordpress Theme from Scratch in Photoshop

Powered by

Create a Magazine Wordpress Theme from Scratch in Photoshop

WordPress

Create a Magazine Wordpress Theme from Scratch in Photoshop
Create a Magazine Wordpress Theme from Scratch in Photoshop

The final result!
View full size here.