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

Car Sales/Club Layout


Create a new document 900 x 1130, fill the background with the color #343436. Now your going to need an image of a car of some sort, I've chose a vector image i seen while browsing google images, best to find one with a simple background. Copy/Paste your car image onto your canvas, resize down to fit into the top right hand corner of the canvas.

image 1
Click to enlarge

Select the first few pixels of the car image using the rectangle marquee tool.

image 2

Now press "ctrl + T" and drag the middle anchor point on the left right the way across the canvas.

image 3
Click to enlarge

Now select the rounded rectangle tool, draw out a number plate type shape, press ctrl+t and rotate it slightly like the image below.

image 4
Click to enlarge

Now add these layer styles to match mine.

image 5

image 6

image 7

On a new layer above your number plate shape select the circle tool and create a selection like the image below.

image 8

Fill with the color white and set layer opacity to 10%, Now while the white circle layer is selected press ctrl and click on the number plate layer to make a selection of the number plate, now go to "select > inverse" and hit the delete key. You should be left with this.

image 9

Do the same again only this time change the white circle to.

image 10

Set the 2nd white circle layers opacity to 7%, you should end up with something like this.

image 11

Now on your number plate shape add your website title and slogan, also create 4 really small circles for each corner of the number plate and add these layer styles.

image 12

image 7

You should have something like this.

image 14
Click to enlarge

Now underneath your header create a rectangle the width of your canvas, this will be our navigation bar.

image 15
Click to enlarge

Add these layer styles to your navigation.

image 16

image 17

image 18

image 19

Now add your navigation text, and add a shine in the same way you did before on the number plate only this time use a rectangle the width of the navigation. Your navigation should now look like this.

image 20
Click to enlarge

Draw a box using the rounded rectangle tool underneath your navigation, leaving a gap in between the two items. Right click your navigation and go to "copy layer styles" now right click your content box and go to "paste layer styles" you should have a navigation box like this.

image 21

Create a small circle inside your content box this will be our little orb icon, copy and paste your navigation layer styles to your circle, and add 2 shines to it like we did on the number plate in the header. Go to your photoshop custom shapes and select a shape to go into your orb.

image 22

Now add your content box title and some content.

image 23

Now follow the steps above to create more content boxes.

image 24
Click to enlarge

Now finally duplicate all your navigation elements, drag to the bottom of your canvas, change the navigation text items to your copyright information. Your layout should look like this.

Car Sales/Club Layout
Click to enlarge


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 Sales/Club Layout"

Captcha