Psdbase - Adobe Photoshop Tutorials

Create A Killer Wordpress Portfolio Site

On 03.17.10, In Web Layouts, by admin

In today’s tutorial we will create a killer wordpress layout, you will learn how to create transparent areas and also how to create cool looking boxes using just 2 steps, not to mention the entire template!

Preview:

Create a new photoshop document

1 Open up Photoshop, create a new document that is 1000px by 1400px, with a background color of #35373d

Creating the background

2 Set the foreground color to #b1c3cd and the background color #606a76. Select the Gradient Tool (G) with the Linear Gradient option. Drag the gradient from the top the canvas downwards to the bottom, this will fill the layer

Creating the logo

3 Select the horizontal type tool (T) place the text on the top left part of the canvas. Use the settings below

4 Double click the layer to open the layer styles dialogue box. Use the settings below

Creating the content background

5 Select the rounded rectangle tool (U) create a white (#ffffff) rounded rectangle with a radius of 4px. Its width should be 940px and height 1120px

6 Set the layers blending option to overlay and opacity to 20%

Creating the navigation

7 Select the rounded rectangle tool (U) create a rounded rectangle (color does not matter) with a radius of 4px. Its width should be 920px and height 48px

8 Double click the layer to open the layer styles dialogue box. Use the settings below

Creating the main content

9 Select the rectangle tool (U) create a white (#ffffff) rectangle with a width of 940px and height of 660px

Creating the content boxes

10 Select the rectangle tool (U) create a Grey (#e2e2e2) rectangle with a width of 470px and height of 590px

11 Double click the layer to open the layer styles dialogue box. Use the settings below

12 Select the rectangle tool (U) create a white (#ffffff) rectangle inside the Grey one with a width of 455px and height 570px

13 Repeat steps 10-12 to create another box

Creating the footer

14 Select the rectangular marquee tool (M) and create a rectangular section across the bottom part of the main content area,
its width should be 940px and should have a height of 150px

15 Set the foreground color to #363636 and the background color #292929. 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

Adding details

Creating content details

16 I lowered the content boxes to leave enough room to add titles

17 Select the rectangular marquee tool (M) and create a rectangular section across the bottom top part of each content box
its width should be the same as the content box and should have a height of 50px

18 Set the foreground color to #566479 and the background color #3d4b60. 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

Creating a footer details

19 Duplicate the logo and place it on the left of the footer area

20 Create a 1px Grey (#545454) vertical line with a height of 120px place it to the right of the footer logo

Adding Content

Creating navigation content

21 Select the horizontal type tool, place it to the left of the navigation area. Use the settings below

Creating the rotator

22 the rotator is just a simple image. I used an image from deviant art created by kir-tat

Adding title content

23 Select the horizontal type tool, place it to the left of the title area. Use the settings below

Adding project thumbs and content

23 We will start by creating the thumbnail boxes. Select the rectangle tool (U) create a white (#ffffff) rectangle with a width and height of 159px double click the layer to open the layer styles dialogue box and use the settings below

24 I added a picture into the middle of the thumbnail holder

25 To the right of the thumbnail I added text about the thumbnail. I used the same settings as I did in step 21

26 I repeated steps 23 – 25 twice to fill the first box

Adding content to the other box

27 In the second content box I added 6 advertisement banners

Adding footer content

27 For the footer content I added the same text settings I used in step21 and created simple lists which gives it a nice look

Congratulations

you have now completed the tutorial

Don’t forget you can follow us on twitter and rss