WordPress: Design a professional theme

In this tutorial, you will learn how to design a clean and professional-looking WordPress theme in Photoshop. The design used in this tutorial is an actual theme from Themify.me called Bizco. The theme is targeted at business and product-based websites. The homepage features a slider where you can display call of action content. Under the slider, there is a list of icons with text where you can display highlighted content. Then there are several widget columns where users can display latest blog posts, Twitter feeds, recent comments, and text content. This tutorial will provide detailed instructions on how to design a professional Photoshop mockup based on a wireframe sketch. You will also learn several useful design and Photoshop techniques such as creating grids and guides, deining background patterns, organising layers, and using layer styles.

Download tutorial files here

01. Wireframe sketch

Before you jump into Photoshop, it is always best to do a wireframe first. The wireframe doesn’t have to be detailed, it can just be a rough sketch on paper. A wireframe provides a general guideline of the design and it helps to speed up the design process.

02. Custom grid generator

The grid we use in this tutorial is a custom grid created from a generator. Go to http://bit.ly/grid_gen, enter column width 54px, 12 columns, and 30px gutter width. It will give you a total 978px content width, which
is optimised for 1024px displays.

03. Photoshop guides

Run Photoshop and create a new document: 1300px x 1770px. Create a screen capture of the grid and paste it in the middle. Turn on the document Rulers (View>Rulers). Based on the grid image, drag from the vertical ruler to create a three-column and four-column grid.

04. Build the foundation

Fill the first layer with a brown colour (#4a3f31). Add a new layer, make a selection across the document at 395px height, and fill it with a tan colour (#bd915f). Add a new layer, create another full-width selection and fill it with #f8f2e8. Add another layer and fill the bottom portion with a darker brown colour (#423628).

05. Noise background

Follow the technique column for detailed steps on how to create a noise pattern. Double-click on the base
background layer to activate the Layer Style, apply Pattern Overlay with the noise pattern that you’ve created, set the Blend Mode to Multiply and Opacity to 10%. This will create a subtle background.

06. Site logo

Use the Type tool to create a text layer for the site logo and description in white. Our logo text is 30pt bold Arial and the description text is 14pt Italic Times. Apply a light drop shadow to the logo text. Set the description text layer Opacity to 70% so it appears lighter than the logo.

07. Main navigation

Use the Type tool to create the sample navigation text buttons. In our design, we used a rounded box behind the text button to highlight the active state. To create the rounded shape, use the Rounded Rectangle tool with 7px radius. Then apply a light drop shadow and inner shadow to add depth to it.

08. RSS and social buttons

Now we need to add some social media buttons above the main navigation. Use the Type tool to create the text buttons: Twitter, Facebook, Flickr, and RSS. In our design, we only include the RSS icon graphic. If you want to add an icon for the other social media links, go to http://bit.ly/social_btns to download the icons.

09. Slider background

Open the cork_bg.psd file from the CD. Define a new pattern with the cork image. Go back to the Bizco PSD, apply a Pattern Overlay layer style to the slider background layer. Create a new layer, colour #dec3a8, with the Gradient tool select Foreground to Transparent, and drag from the bottom to top. Set the Blending Mode to Multiply.

10. Feature image

Since our theme is about WordPress design, we have chosen two screenshots of our themes as the feature
image. You may use any image you want (including samples of your own work). To create cast shadows behind the image, first create a flat oval shape and then apply Gaussian Blur (Filter>Blur>Gaussian Blur).

11. Text and button

Create a sample heading and text block with the Type tool. In our design, the heading font is 32pt bold Arial and the text block is 15pt Arial. Draw a rounded button shape with the Rounded Rectangle tool (8px radius). Add Gradient Overlay and Drop Shadow layer style to the button. Then use the Type tool to add the button text.

12. Slide indicator

Now we are going to create some buttons to indicate the active slide. Use the Ellipse tool and draw three small circle shapes below the feature image. Fill the shape with a grey colour and 2px stroke layer style. We need to create three different states: the darker colour is for active state, the middle tone for the hover state, and the lighter colour is the normal state.

13. Navigation arrows

For the slide arrows, it is easier to create the shape in Adobe Illustrator (or you may use Photoshop Pen tool). In Illustrator, create the arrow stroke, select Round Cap and Round Join in the Stroke palette. Expand the shape (Object>Expand) and paste the arrow shape in Photoshop as a layer shape and apply a Gradient Overlay and 20% black 3px stroke.

14. Content area background

Now it is time to work on the content area. Double-click on the content area background layer to activate the Layer Style and apply drop shadow with the following settings: 50% Opacity, 90-degree Angle, 1px Distance, and 6px Size. Add a new layer, use the Gradient tool to create a white gradient to highlight the top portion.

15. Welcome message

With the Type tool selected, create a 870px text box in the middle. You may type in a welcome message or use
Lorem Ipsum as a sample text if you wish. Set the font style to 24pt Italic Times with a central alignment. Then create a 1px stroke below the welcome message in order to slightly divide the content.

16. Highlight items

Turn on the guides, these will help you structure your page. Follow the three-column grid, put an icon along with the text box in each highlight item. You may use your own icons or the sample icons that have been supplied on the cover disc. Repeat this step to create six highlight items. Then create a 1px stroke below the
highlight items as a divider.

17. Latest blog widget

Now you need to design a widget mockup for the latest blog posts. Turn on the guides. Follow the four-column grid, have the latest blog widget spanning two columns. Use the Type tool to create the headings and text boxes. Create a 1px stroke to separate each item.

18. Twitter widget

Next to the latest blog widget, you are going to create a one-column grid to display the Twitter feeds. Follow
the guides, use the Type tool to create the sample tweets. You may use Lorem Ipsum as you want. Again, separate each item with a 1px stroke.

19. Text widgets

On the last column, you want to use it to display some short text content. Create two text blocks as shown in the screenshot above. After you have done that, you should have: two-column span latest blog widget, one-column Twitter widget, and one-column of text widgets.

20. Footer background

Select the footer background layer and apply the same noise pattern as you did earlier in the base background. A simple shortcut would be: right-click on the base background layer and select Copy Layer Style, then right-click on the footer background layer and Paste Layer Style.

21. Wrapping up

Since the steps are very repetitive, we are not going to go through the details on designing the footer widgets. In the footer, you should have three columns of widgets: Recent Posts, Recent Comments, and About Us text widget. Feel free of course to go your own way and be inspired to produce more unique variations.

Author: Nick La