Psdbase - Adobe Photoshop Tutorials

Create A Clean Cobalt Blue Wordpress Layout

On 02.21.10, In Web Layouts, by admin

In this tutorial we will Create A Clean Cobalt Blue Wordpress Layout, this layout teaches you how to create clean looking effects in the easiest way possible

Preview:

Create a new photoshop document

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

Creating the header

2 Select the rectangular marquee tool (M) and create a rectangular section across the top part of the canvas,
its height should be 80px

3 Set the foreground color to #0062b1 and the background color #004cb1. 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) again, create a rectangular section across the bottom part of the blue area,
its height should be 50px

5 Set the foreground color to #0062b1 and the background color #004cb1. 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

6 Select the rectangular marquee tool (M) and create a 1px section across the top part of the second blue area

7 Set the foreground color to #ffffff then fill the layer (shift+f5). Set the layers blending options to Overlay it’s opacity should be 25%

Creating the search bar

8 Select the rounded rectangle tool (U), create a white (#ffffff) rectangle with the width of 260px and height of 30px

9 I found a nice icon on Iconfinder.net to use as the search button and placed it on the right side of the input

Creating the post area

10 Select the rectangular tool (U), Create a white (#ffffff) rectangle a width of 630px and height of 250px

11 Double click the layer to open the layer styles dialouge box, use the settings below

Creating the image area

12 Select the rectangular tool (U), create a white (#ffffff) rectangle with a width of 220px and height of 180px

13 Double click the layer to open the layer styles dialouge box, use the settings below

14 I added a picture of my Vibrant Layout Tutorial in the image area

Creating the image area

15 Select the rectangular marquee tool (M) and create a rectangular section with a width of 222px
its height should be 32px

16 Set the foreground color to #0062b1 and the background color #004cb1. 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 Sidebar

17 Select the rectangular tool (U), Create a white (#ffffff) rectangle a width of 293px and height of 431px

18 Double click the layer to open the layer styles dialouge box, use the settings below

19 Repeat step 17-18 and create another sidebar box, its height should be 180px

Creating the footer

20 Select the rectangular marquee tool (M) and create a rectangular section across the bottom part of the canvas,
its height should be 125px

21 Fill the layer black (#000000), move the selection 1px downwards, fill the selection white (#ffffff), Again move the selection 1px downwards, Fill the layer black (#000000),

22 Drop the layer’s opacity to 15%

Adding Content

23 For the logo I used simple Myriad Pro font

24 For the navigation i added some Ariel font

25 For post area I added a Iconfinder.net icon for the comment’s, I added some a blue bar for the post details (author, time, and categories) and finished it off with some nice readable text for the excert

26 For the sidebar I added 6 ad banners (125px by 125px), then underneath that I added a information area

27 For the footer I added a simple copyright

Congradulations

you have now completed the tutorial

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