Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Car Layout #6

Car Layout #6


Lets Get Started

Start off by creating a new document 1200 x 1200 pixels, setup two vertical guides by going to "view > new guide". Set the first guide at 125px and the second guide at 1075px, this should give us a canvas size of 950 pixels to work with.

image 1

Now set the colour #212121 as your foreground and #080808 as your background. Select the gradient tool with a radial gradient then drag the gradient from the top middle part of the canvas to about half way down.

image 2

Creating The Website Title

Select the text type tool then add your website title along with your slogan in the top left corner of the canvas.

image 3

Once you've done that add the following layer styles to your website title (not your slogan).

image 4

image 5

You should now have something like this.

image 6

Creating The Navigation

Select the rounded rectangle tool with the default radius settings (should be 10px). Drag out a rounded rectangle starting from the right guide. Fill the navigation with any colour.

image 7

Now add the following layer styles to your navigation rectangle.

image 8

image 9

You should have something like this.

image 10

Still with the rounded rectangle create another rectangle inside the navigation rectangle.

image 11

Fill the second rectangle with the colour white then set the layer opacity to 4%. Now with the type tool add your text navigation links.

image 12

In-between each link add a simple white ellipse.

image 13

Creating The Featured Area

Underneath your title and navigation create a rectangle with the rounded rectangle tool, the rectangle should span the width of the guides and should be about 320 pixels in height.

image 14

Fill the featured rectangle with a radial gradient in the same way we did our background at the start of this tutorial. Once you've done the radial gradient at a 1 pixel stroke using the settings below.

image 15

You should have something like this.

image 16

Were now going to add a big shine effect over the featured area, so select the pen tool and create a curvy path like the image below.

image 17

Fill your path in white then load a selection around the featured rectangle but keep the shine layer selected. Go to "select > inverse" then hit the delete key, you should be left with a white shape which resides inside the featured rectangle. Set the shine layer's opacity to 2% then add a layer mask, drag a linear gradient from the right of the shine to the left.

image 18

Inside the featured area add some dummy text and title.

image 19

For this next part your going to need an image of a car, im using a car by reiger. Drag your car image onto your canvas, cut away the background using your favourite cutting method. Place the car on the right side of the featured area.

image 20

Create a new layer underneath your car layer, select the polygonal lasso tool and a make selection underneath the car. The way i do it is, i imagine the car's wheels as four corners.

image 21

Fill the selection with the colour black then blur the shadow by around 2-4 pixels using the guassian blur. Now duplicate the car layer and flip it vertically, place the duplicated layer underneath its original. Move the car directly underneath to act as a reflection, you may need to distort the image to get a correct look.

Once you've moved the duplicated layer into place, add a layer mask then blend it in using the linear gradient. You should have something like this.

image 22

Creating The Content Area

Select the rounded rectangle tool and create two rectangles side by side, one big one and one small one. Fill each rectangle in the color #141414 and add a stroke using the settings below.

image 23

You should have something like this.

image 24

At the top of each content box add a smaller rounded rectangle big enough to add a simple content box title. Fill each new rectangle in the colour #080808.

image 25

Now add your content box dummy content, ive just added some lorem ipsum text a small list and an example image.

image 26

Creating The Footer

Underneath all the content add two 1pixel lines, fill the top line in black and the bottom line in white. These two 1pixel lines should span the width of the canvas up to each guide.

image 27

Once you've created your lines set the layer blending mode to "overlay". Now, with the rectangular marquee tool or the rectangle tool create a rectangle underneath the lines, fill the rectangle in the colour #060606.

image 28

Finish the layout by adding your footer information to the footer area.

The Result

Here's my finished layout.

Car Layout



Author's URL: Hv-Designs.co.uk
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials


Like us to: