Psdbase - Adobe Photoshop Tutorials

Create A Unique Wordpress Layout

On 02.11.10, In Web Layouts, by admin

In this tutorial we will Create A Unique Wordpress Layout. The aim of this tutorial is to show different ways and techniques of creating shapes and using layer styles to create smooth effects.

Preview:

Resources:

Create a new photoshop document

1 Open up Photoshop, create a new document that is 1000px by 1000px, with a background color of #ffffff.

Creating the header

2 Select the Rectangular Marquee Tool (M) and create a rectangle section across the top part of the canvas, its height should be 60px-70px.

3 Set the Foreground color to #383838 and the Background color #212121. Select the Gradient Tool (G) with the Linear Gradient option. Drag the gradient from the top of the selection downwards, this will create a linear gradient in the selection.

4 Select the Rectangular Marquee Tool (M) and create a 1px section across the top part of the canvas.

5 Set the Foreground color to #ffffff then fill the layer (shift+f5). Set the layers blending options to Overlay.

6 Select the Rectangular Marquee Tool (M) and create a rectangle section across the top part of the canvas, its height should be 60px-70px

7 Set the foreground color to #ffffff and the background color #dedede. Select the Gradient Tool (G) with the Linear Gradient option. Drag the gradient from the top of the selection downwards, this will create a linear gredient in the selection.

8 Select the Rectangular Marquee Tool (M) and create a 1px section across the bottom part of the canvas fill the layer #b9b9b9 Crtl+f5

9

Creating the logo area

10 Select the Rounded Rectangle Tool (U), Create a rectangle with a width of 280px and hieght of 100px its color does not matter.

11 Double click the layer to open the layer style dialouge box, use the settings in the following picture

Creating the sidebar

12 Select the Rectangle Tool (U), create a rectangle 315px by 200px its color does not matter. Open the layer style’s dilouge box and enter the settings in the below image.

13 Select the Rounded Rectangle Tool (U), create a grey (#dbdbdb) its width should be 315px make its height will be determined later in the tutorial.

Creating the Searchbar

14 Select the Rounded Rectangle Tool (U), create a white (#ffffff) its width should be 250px and height 30px.

15 Double click the layer and open the layer style’s dialogue box, use the settings in the image below:

Creating the Footer

16 Select the Rectangular Marquee Tool (M) and create a rectangle section across the bottom part of the canvas, fill the selection
#dbdbdb, Double click the layer to open the layer styles dialouge box and use the settings in the following image:

Adding content

17 I added a logo into the top left hand logo area.

18 For the search area I added an icon, I found the icon over at iconfinder.net

19 For the navigation I added some text, the font used is rockwell set to bold ittalic with a font size of 12px.

20 I added a subscribe button to the orange sidebar block.

21 I added four 125px by 125px banners to the bottom of the sidebar.

21 For the thumbnail i added a bordered thumbnail and some infomation about the wordpress post.

You have now finished the tutorials here is a preview:

Thank you for reading our tutorial, don’t forget to follow us on Twitter or subscribe via RSS.