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 #3

Car Layout #3


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.

image 1

With the polygonal lasso tool create a shape like this.

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.

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.

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.

image 5

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.

image 7

image 8

image 9

You should have something that looks like this.

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%.

image 11

Add some navigational text either side of your shape.

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.

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.

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.

image 15

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

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.

image 17

Add these layer styles to your 2 content boxes.

image 18

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.

image 20

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

image 21

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.

image 23

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

image 24

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

image 25

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

image 26

image 27

image 28

Finished

Car Layout #3



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

No comments yet...
Add comments to "Car Layout #3"

Captcha