website promotion banner
eturnkeys
Your Ad Here
Photoshop  Home Photoshop Web Layout Car Layout #3
rss

Car Layout #3

Author: Hv-Designs.co.uk More by this author


Create a new document 850 x 1000 pixels, fill your background layer with the color #1e1e1e. Select the rectangular marquee tool and create a rectangle the width of your canvas, place the rectangle at the top of your canvas, fill using the gradient tool, using the radial gradient and a light shade of gray. You should have something like this.

Car Layout #3 image 1

With the polygonal lasso tool create a shape like this.

Car Layout #3 image 2

Fill with the color white, but leave the selection still selected. While its still selected head over to the channels palette and click save selection as channel.

Car Layout #3 image 3

Once you have clicked the save selection as channel button you should have a another layer called "alpha1″ select it, press ctrl + D to deselect the selection, then goto filter > blur > gaussian blur, blur by 10 pixels. You should be left with this.

Car Layout #3 image 4

Press Ctrl + L to open the levels panel, drag the 3 triangular points into the middle, you will notice the blurred shape sharpens and becomes more rounded.

Car Layout #3 image 5

Car Layout #3 image 6

Click your "alpha1″ layer whilst holding down the ctrl key on the keyboard to load a new selection. Click back to your layers palette create a new layer then fill the selection with the color white. Delete your other layer you created previously with the polygonal lasso tool. Add these layer styles to your new shape.

Car Layout #3 image 7

Car Layout #3 image 8

Car Layout #3 image 9

You should have something that looks like this.

Car Layout #3 image 10

With the rectangle marquee tool add a small rectangle over the top of your shape, fill with the color white and set layer opacity to 5%.

Car Layout #3 image 11

Add some navigational text either side of your shape.

Car Layout #3 image 12

Now with the rectangle marquee tool, or the pencil tool add two 1 pixel lines side by side to create a divider, place the divider inbetween your navigation text.

Car Layout #3 image 13

For this step your going to need a separate image of a car of your choice, I'm using an image from digimods (full credit going to the author "norder"). Remove the background from your car image, scale it down with the transform tool and place in the middle of your navigation.

Car Layout #3 image 14

Duplicate your car image and flip it vertically, align the image below the original then add a layer mask, drag a linear gradient over the top to produce a reflection. Lower the opacity to suit yourself.

Car Layout #3 image 15

Add some additional text, logo and website title to complete the header.

Car Layout #3 image 16

Using the same method as we did for the navigation create a further 2 boxes either side under our navigation. Don't forget to blur by 10pixels and move the levels.

Car Layout #3 image 17

Add these layer styles to your 2 content boxes.

Car Layout #3 image 18

Car Layout #3 image 19

At the top of your content boxes where the tab is, add your content box title text and a logo of your choice, I'm using the arrow from the custom shapes library within photoshop.

Car Layout #3 image 20

Create a selection like in the image below, fill with the color white and lower the opacity.

Car Layout #3 image 21

Car Layout #3 image 22

Fill your content boxes with your content, and place a divider underneath your content box titles, the dividers are the same as the ones created in the navigation.

Car Layout #3 image 23

Create a further two boxes underneath your main boxes, add a simple stroke to each box to give it some detail.

Car Layout #3 image 24

Add your footer content by duplicating your header text and logo. Add some content to fill your other content box.

Car Layout #3 image 25

To create the buttons select the rounded rectangle tool, draw out a black rounded rectangle then add these layer styles.

Car Layout #3 image 26

Car Layout #3 image 27

Car Layout #3 image 28

Finished

Car Layout #3 Tutorial: Final Result



Author's URL: www.hv-designs.co.uk

Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Add comments to "Car Layout #3"