In this tutorial we are going to create a minimal WordPress theme in Photoshop. Don’t worry if you are new with using Photoshop, any skill level will do. I’ll try my best for you to follow this tutorial from start to finish. Also, you will learn how to create simple patterns to add more touch to our WordPress theme.

This is a simple design created in Photoshop. The working demo will soon follow, which will involve converting the PSD file to a working HTML/CSS. So, are you excited? Open your Photoshop now and let’s get started!

Here is what we will be making, click on the image for full preview:

Resources for this tutorial

• Social Icons
• Navigation Icons

Step 1: Setting up the Document

Open up Photoshop and create a 1200 px x 1850 px document.

Make sure that you have turn on Rulers and Guides

• Rulers: Ctrl + R
• Guides: Ctrl + ;

This is 960 grid base layout for this tutorial we will not download it. Let’s simply create our own guide. Go to View – New Guide 120px Vertical Repeat the step and change the value to 1080px.

Step 2: Working with Background

Duplicate the the background layer and fill it with #f8f8f8. Next we will create a simple dotted parttern. Create a new document 15px x 15px. Zoom in by pressing Ctrl + +. Uncheck the background layer and create another layer, using Pencil Tool create a dot at the top left of our canvas.

Go to Edit – Define Pattern name it dotted. Now back to our layout create new layer above the background using Paint Bucket Tool switch from Foregroundto Pattern select the dotted pattern and make the layer Opacity to 15%. Group all the layer we have just create and name it Background.

Using Rectangle Tool with a fill color of #363636 create a rectangular with a height of 10px starting from the top left of the canvas to the right.

Step 3: Working with Logo

Start by placing a 38pxx 38px using Rounded Rectangle Tool with a fill of #f7941d. Using Text Tool select Myriad Pro Bold font with a size of 36pt. Place it as shown in the screenshot below.

Add a Layer Mask to the shape we have just created by pressing the button beside the fx button in the layers panel.

Select the Layer Mask then Ctrl + Click to the Text layer to make a selection, fill it with #000000. This will be applied to the layer mask and make the selection transparent into the shape.

Using Text Tool select Myriad Pro.

• Myriad Pro: Font Size 24pt, Color #363636
• Best choice of font: Font Size 12pt, Color #959595

Step 4: Working with Social Icons

Open up the social icons, change the image size to 19px x 19px by pressing Ctrl + Ctrl + I and change the values of height and width. Place the icons in our canvas with in a new folder named, Social Icons, Refer to the screenshot below for the positioning and colors.

Step 5: Working with Navigation

Create a new folder and name it Navigation. As you can see in the screenshot above there is a rectangular shape with a stroke, start by using Rectangle Tool with a height of 90px.

Add this Blending Option:

• Gradient Overlay: #f8f8f8, #fcfcfc

• Stroke: #c2c2c2

Open up the Navigation Icons and re size in a 22px x 22px. Make a new folder inside the navigation folder, name it to Icons and place it there. Now that we have our icons time to put up our navigation links follow the screen shot below for the formatting and color of the text.

Merge all the lines you have made by pressing Ctrl + E. Duplicate the merge layer and move it 1px to the right by pressing the right arrow key on the keyboard.

Step 6: Working with Search

Create a new folder above Navigation and name it Search. Using Rectangle Tool color #ffffff create a shape as shown in the screenshot below.

Add this Blending Option:

• Stroke: #c2c2c2

Let’s create a search button, using Rectangular Marquee Tool create 40px x 35px and fill it with any color.

Add this Blending Option:

• Gradient Overlay: #f8f8f8, #fcfcfc

• Stroke: #ffffff

Add this line with a color #c2c2c2, then place the icon 19 px x 19px.

Using Text Tool add this text in the search field area.

Step 7: Working with Slider

Select Rectangle Tool with a fill color #ffffff, create a shape 630px x 340px.

Add this Blending Option:

• Stroke: #c2c2c2

Make a selection to the shape by pressing Ctrl + Click to shape layer. Go to Select – Modify – Contract 10px.

Fill the selection with any color and place a smaple image with a the same size.

Below the shape layer create a new layer and name it Shadow. Using Pen Tool create a shape as shown in the screenshot below and fill it with #000000.

Apply a Gaussian Blur with a Radius of 2px. Set the Layer Opacity to 40%.

Using Ellipse Tool create four shapes as shown in the screenshot below. Make sure it is aligned to the center.

Add this Blending Option:

• Color Overlay: #c2c2c2

• Inner Shadow: #000000

The color #c2c2c2 will serve as the normal state of our slider, for our active state change the color to #f7941d

Step 8: Working with Posts

To start create new folder and name it Posts. Using Rectangle Tool with a fill color of #ffffff create a 630px x 300px.

Add this Blending Option:

• Stroke: #c2c2c2

Create another 200px x 200px shape using Rectangle Tool and add the same blending option.

Ctrl + Click to the layer to make a selection. Go to Select – Modify – Contract 10px

Fill the selection with any color and place a sample thumbnail image. Using Text Tool put up the Title of the post, content, author etc.

Lets make a read more button for our post. Create a new folder inside Posts and name it more. Using Rectangle Tool create a 88px x 30px shape.

Add this Blending Option:

• Inner Glow: #ffffff

• Gradient Overlay: #f1f1f1, #fbf9f9

• Stroke: #c2c2c2

I just took a screenshot of Digg, Tweet and Facebook and paste it in the bottom left side of the post.

Duplicate Posts folder and place it as shown in the screenshot below.

Step 9: Working with Pages

Create a new folder and name it Pages. Create a 26px x 26px shape using Rectangle Tool. For the inactive pages apply a blending option with a Stroke of #c2c2c2. For the active page just copy the layer styles we applied on read more button and apply it to the shape.

Step 10: Working with Advertisement

Create a new folder and name it to Sidebar. Create another folder inside Sidebar folder and name it to Advertisement. Using Rectangle Tool with a fill color of #ebebeb create a 145px x 145px shape. Then set the Layer Opacity to 50%.

Ctrl + Click to the layer to make a selection. Go to Select – Modify – Contract 20px. Fill it with #ffffff and add a 1px #c2c2c2 stroke.

Duplicate it four times as shown in the screenshot below.

Step 11: Working with Tabs

Create new folder inside Sidebar and name it Tabs. Now select Rectangle Tool with a fill color of #ebebeb create a 300px x 500 box with a distance 35px below advertisement. Set the layer Opacity to 50%.

This part is just the same as we did in our advertisement, just refer to Step 10.

Create a tabs using Line Tool and Text Tool.

Create a new layer below the tabs layers. Using Rectangle Tool create a shape as shown in the screenshot below.

Add this Blending Option:

• Gradient Overlay: #f1f1f1, fbf9f9

Time to create sample post. Start by grabbing a 60px x 60px sample thumbnail. Also, we will add title of the post, when it is published and in what category.

Group all the layers we have created in our sample post and duplicate it four times.

I also added a sample 300px x 300px advertisement.

Step 12: Working with Footer

Create new folder and name it Footer. Using Rectangle Tool with a fill color of #363636 create a 1200px x 485px shape.

Lets create a new pattern. Create a 6px x 6px file. Unlock the background layer and create a new layer. Set the foreground color to #363636, using Pencil Tool create a pattern as shown in the screenshot below.

Using Rectangular Marquee Tool make a selection about 3px height starting from left to right and fill it with the pattern we made.

Lets create another pattern. Create a 12px x 12px file. Change the foreground color to #303030. Using Pencil Tool create a pattern as shown in the screenshot below.

In a new layer fill the whole footer with the pattern we have made.

In our footer we will be placing here our tweets, popular posts and about, so Create a folder each of it. First we will work on in tweets, using Text Tool fill in with text the same as shown in the screenshot below.

Next in popular just duplicate the sample posts we have made in our tabs, then we will match the color as we did in our tweets.

Lets proceed to about. Grab some Lorem Ipsum text and place it as shown in the screenshot below. Also I merge the layers of our logo and add a color overlay with a fill color of #6d6e71.

For our final step using Rectangle Tool with a fill color of #252525 create a 40px height shape, then using Text Tool add a copyright text color #616264.

Finally were done! I really hope that you followed and learned something from this tutorial. If you have questions feel free to drop it below. Cheers to all!