Creating Web 2.0 Car Header
Tutorial in Advanced, Drawing, Web
This is an interesting and well known header in style Web 2.0 for websites.
First you will have to get the picture of your car.
With ((Pen Tool)), cut and eliminate the image of the background.
Now you will have to get the image of a landscape. You can download it from HERE.
Go to the document with the vehicle and press Ctrl + C to copy, then go to the landscape and press Ctrl + V to paste.
As you will see, the background cannot be seen through the car’s glasses, so it doesn’t look real at all.
With ((Pen Tool)), trace the glass contour.
Press Ctrl + Enter to activate the selection.
Go to ((Edit))-((Cut)) and then ((Edit))-((Paste)) to place the glass in an independent layer.
To this layer, reduce the ((Opacity)) to 50%.
Open a new document, 1600×1200px, and transparent background.
Select ((Gradient Tool)), ((Lineal Gradient)) and trace a gradient from bottom to top using these colors: #121212 and #474748
Create a ((New Layer)).
With ((Rectangular Marquee Tool)), draw a rectangle in the superior part of the document and fill it in with white.
With the selection active, select ((Gradient Tool)), ((Linear Gradient)) and trace a gradient from top to bottom using these colors: #66c90d and #a5d51e.
Create another ((New Layer)) and trace a rectangular selection smaller to the other one.
Select ((Gradient Tool)), ((Linear Gradient)) and trace a gradient from top to bottom using: #252525 and #545353.
Then, with ((Rectangular Marquee Tool)), draw a rectangular selection as the one that appears below and go to ((Edit))-((Copy Merged)) and then ((Edit))-((Paste)), you will see this new selection is in an independent layer.
Double click the layer to apply ((Layer Styles)).
((Drop Shadow)).
Accept the changes.
Copy the image you created and the car into this document.
Double click the green bar to apply ((Layer Style)).
((Pattern Overlay)).
Accept the changes and take a look at the image to see the results.
Create a ((New Layer)).
Select ((Line Tool)), 1px, and trace 2 lines, a white and a black one, next to each other as shown in the following image.
Modify the blending mode to ((Soft Light)).
Duplicate this layer (Ctrl + J) until you complete the bar and leave some space to place the titles of the buttons.
Select the font Arial and write the titles of the buttons.
Done, this is it. Now you try!
