Psdbase - Adobe Photoshop Tutorials

Create A Killer Chrome Weblayout

On 02.23.10, In Web Layouts, by admin

In this tutorial I will guide you through the process of creating a real chrome effect which will be used throughout this template

Preview:

Create a new photoshop document

1 Open up Photoshop, create a new document that is 1000px by 1200px, 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 400px

3 Set the foreground color to #be6440 and the background color #be8940. 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 Create a large radial gradient in the middle of the header

5 Set the layers blending options to overlay and opacity to 75%

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

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

6 Drag a 100px transparent black (#000000) gradient downwards, lower its opacity to 75%

7 Select the rectangular marquee tool (M) and create a rectangular section across the bottom part of the header,
its height should be 90px

8 Set the foreground color to #343434 and the background color #000000. 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

9 Select the rectangular marquee tool (M) and create a 1px section across the top part of the Grey bar

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

Creating the image rotator

11 Select the rounded rectangle tool (U) create a rectangle with a width of 919px and height 311px

12 Double click the layer to open the layer styles dialogue box, enter the settings below

Adding a divider

13 Create two 1px selections with a width of 919px fill (shift+F5) one white and the other black

14 Set the layers blending options to overlay and reduce its opacity to 75%

Creating the navigation

15 Create a brown (#542f1f) rounded rectangle, its width should be 340px and height 35px

15 double click the layer to open the layer styles dialogue box, use the settings below

16 Duplicate the layer. Using hue and saturation, raise the lightness to 100%. Put the duplicate behind the original layer lowering it by 1px, set the layers blending options to overlay and lower it’s opacity to 75%

Creating the footer

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

18 Set the foreground color to #292929 and the background color #000000. 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 content

For the logo I have used Planet Kosmos font, I used the same layer style’s as the image below

For the navigation I added some simple links and used the Ariel font

The completed header

for the main content I added 4 icons each with its own title, underneath each title  I added some dummy text

for the footer I added a contact form using the same technique as I used  in step 15 I also added an area to the left, which is a large disclaimer

Congratulations

you have now completed the tutorial

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