How to Create a WordPress Theme in Photoshop

This tutorial will explain designing a WordPress theme in Photoshop with unique layout to you step by step. The tutorial features some great colors, effects, layer styles and UI design in which you can use over and over for future projects. In this tutorial, you can pick up the technique and see how you can advance from there. If you don’t understand or need to explain more detail, please drop a comment. Let’s get started!

Tutorial Details

• Program: Adobe Photoshop CS5
• Difficulty: Intermediate
• Estimated Completion Time: 60-120 Minutes
• Download psd file: wp-webdesign14 (14)

Step 1: First of all, create a new document. Mine is 1260px wide x 1200px high. This is so that I can create a Web site made for 1024px wide, but still have space to decide what is going to happen outside the viewable area so that it degrades nicely even on larger screens.

Step 2: Now our first task is to create a background color. To do this we’ll use colors: #603913 and then press ALT+Backspace to fill background color with the foreground color.

Step 3: Now we create your document were going to setup two guides which will aid in keeping the layout 960 pixels wide.

To create the guides we need to go to View > New Guide, in the box that pops open select vertical and enter 150px.

Go to View > New Guide once more only this time enter 1110px, again make sure the guide is set to vertical.

Step 4: Create a new layer above background layer with name is top-gradient. Starting from the left drag out your rectangle, the height of the rectangle should be roughly 250px. Once you’ve dragged out your rectangle right-click inside it and go to Make Selection.

Add these layer styles to your new rectangle layer. Righ-click on top-gradient layer choose blending options>gradient overlay.

Step 5: Create a new group and call it “basic line”. Add horizontal guide, which is 35px from top, 39px from top, 138px from top, 142px from top. We will add some basic line to follow horizontal guide. Grab line tool, and drag a similar line. we have this dimension (px): 1260px X 1px with using color:#97581b.

Here’s our result:

Step 6: Select Custom Shape Tool (U), and find Ornament 5, add. If you haven’t got such shape, click on little arrow button and load all shapes – you should see now arrow shape as well!

Drag out us Ornament 5 with color #f7941d at 490px from the left guide 122px from the top.

Step 7: Now we going to setup five line guides:

To create the guides we need to go to View > New Guide, in the box that pops open select vertical and enter 569px(595px).

Go to View > New Guide once more only this time enter 206px(556px, 700px), again make sure the guide is set Horizontal.

Step 8: Add video images and some dummy content.

Step 9: Let’s create a new layer, call it “button″ and take Rectangular Marquee Tool with Style=Fixed size, width=121px and high=33px. We create selection near line guide. Then press ALT+Backspace to fill color with the foreground color.

Add these layer styles to your new button layer. Righ-click on button layer choose blending options>gradient overlay.

Step 10: Righ-click on button layer then choose blending options>Drop Shadow.

Step 11: We add stroke to make it lighter. Righ-click on button layer  then choose blending options>Stroke

Step 12: Now let’s move on to the slide boxes. Select the Rounded Rectangle tool. Drag out a rectangle about 222px in width and 145px in height. Fill the rectangle with any color for the time being, then repeat it 3 times.

Step 13: Add these layer styles to your new slide rectangle box. Righ-click on button layer then choose blending options>Drop Shadow.

Step 14: Righ-click on button layer then choose blending options>Stroke.

Step 15 : After we arranged slide rectangle box. We add some nice picture on it.

Step 16: Select the Rounded Rectangle tool. Drag out a rectangle about 50px in width and 120px in height. Fill the rectangle with any color for the time being.

Step 17: We add 1 node  to center of rectangle and drag it  so look like a ribbon. We use anchor point and direct tool to drag this ribbon.

Step 18: To make it same real ribbon. we choose suitable color in order to make it look so puffed out. Add these layer styles to your new slide rectangle box. Righ-click on button layer then choose blending options>Gradient overlay.

Step 19: We add a shadow to emerge from the background. Righ-click on button layer then choose blending options>Drop Shadow.

Step 20: Web add a layer of black as accents to appear behind the darkened layer

Step 21: In order to reduce boredom, I added a thin layer (10% opacity) with background classical motifs because it appropriate tone brown

Step 22: Finally we add the contents of text and illustrations and adjust the thickness of the decorative lines.