website promotion banner
eturnkeys
Your Ad Here
Photoshop  Home Photoshop Web Layout Good Looking Web 2.0 Car Header
rss

Good Looking Web 2.0 Car Header

Author: UBL Designes More by this author


Step 1

Get an image of a car which you like. i have chosen this one as i like audi's

Audi S5

Step 2

Press p for the pen tool and cut out the car as shown below

Audi S3 Cut Out

Step 3

find a picture of a good background you would like to see in your background, i have chosen this picture as i like the scenic look.

Mountain View

Step 4

import this and put behind the car you have chosen like i have.

Audi with a view

Step 5

now to make it more realistic where the windows do not match we press p and get the pen tool and go round the windows like shown and then right click and click make selection and press ok.
Then press Ctrl and c together and once you have done that press delete. Now press Ctrl and v and on the layer 2 name change it to window 1 and opacity at 80%. Do this for all windows necessery to this Untill done like shown below.

Window Cuttouts

Step 6

now press p and draw around the sky and mountains like shown and then right click and click make selection and press ok.Now begin a new layer and name is skylight.

Cutting sky view

Step 7

Now select colour #4271fc for the forground and #9da6fb for the background, now press g (Gradienttool) and make sure that both colours you chose are in the graduant tool and start from bottom of the sky to the top. Now change the opacity to 95%.

Graduating sky

Step 8

Now drop that down and start a new one at 1600px by 600px. The reason for using a 1600px is some new screens are now 1600 width.

New page

Step 9

Now for makeing the background colour, i have used colour #121212 for the forground and colour #474748 for the background. Now press the g button and go from bottom to top

Step 10

Press m and do a small thin line across the top, start a new layer and call it topborder. choose the colour #027b08 as the background colour and press ctrl and the backspace button.
Now under that do a bigger rectangle and choose the colour #ffffff as your background colour and start a new layer called menutab and press ctrl and backspace again.
now click layer style and goto gradient, use the gradientcolours #66c90d to the left and #a5d51e to the right and make sure it is reversed.
now do a new layer and name it headerbot and press m and do a small rectangle as shown across the bottom and press ctrl and backspace again, go to layer style/graduants/ left colour is #252525 and the right is#545353.

Prepairing background

Step 11

now press m and make a big rectangle like shown

Marqueing

now goto edit/copy merged and now press ctrl v and name the layer main header, goto layer style/dropshadow and use the settings shown

Main header shadowing

Step 12

Bring in the car images you made earlier and fit them in the main header like shown.

Car into header

Step 13

Now we have the main structure of the header its time to ad detail. Bring up themenutab layer and duplicate it and then press ctrl and click on both layers (menutab and menutab copy), right click and and select merge layers.
now click on layerstyle/patterns ive used a stripe look and put the blend opacity at 20%. Plus ive added 6 lines in header as you can see

Stripes and lines

Step 14

I've some writing and all is done. Have a try and see what you can do!

Good Looking Web 2.0 Car Header Tutorial: Final Result



Author's URL: ubldesignes.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 "Good Looking Web 2.0 Car Header"