Car Website Banner/Header Design

This tutorial will teach you how to create a banner/header for a Car modification website.

1. The first thing we need to do is create a new document (file > New) with the size of 800x100.

2. Next, change your background color of your document to black. to do so, just get your paint bucket tool from your tools pallet, and fill your background layer with black (#000000). You should have a document that looks like this:



3. Next, we want to create a nice gradient effect for the background. You can create it directly on the background layer, or create a new layer above it (doesn't really matter).

4. Go to your gradient tool on your tools pallet and fill in the following settings:





5. Now just make a gradient from top to bottom (only drag about half way down the document for the desired effect), and it should look something like this:



6. Now make a selection similar to the following with your polygonal lasso tool:



7. Fill it with black on its own layer above the rest. We now want to put blending options on this layer, so go to your blending options menu and put in the following settings:






8. Hit OK and your image will look like this:



9. Now we want to add some text to the banner. to do so, go get your text tool, and set it to these settings:



10. After you have added some text, it should look like this:



11. Now, we want to put some blending options on this newly created text layer. So please insert the following:









12. Hit OK and it will look a little something like this:



13. We want to give the font a little web 2.0 shine. To do so, get out your elliptical Marquee tool and make a selection like the following:



14. Now, on a layer above your text layer, fill it with white (#ffffff).

15. Go back to your text layer, and while holding CTRL (Command on OS X) Key, click on the layer thumbnail in the layers pallet and it should make a selection like the following:




16. While the selection is still active, go to the layer above your text layer, and hit CTRL + C to copy , and then CTRL + V to paste. (Command+C and Command+ V on OS X)

17. This should create a new layer above your big white blob layer. Delete the layer your created with your elliptical marquee tool, and it should look like this:



18. Now, while on your new Shine layer, use your arrows to move it up slightly to match up with your text layer. Change the layers opacity to something around 33%, and it should look like this:



19. Add some other text in that middle section describing the site, and it should look a little something like this:



20. Next we want to add a little texture to our banner. So go get your pattern stamp tool from your tools pallet.

21. Choose a pattern that you like. I choose a dot pattern i created earlier ( to learn how to make it click here).

22. Now that your ready to use your pattern stamp, create a new layer above your background layer. Make sure your foreground is set to #000000, and brush your whole document.



23. I though that the pattern was a lttle to strong, so i lowered the opacity to 36%, and this is what it should look like:

24. Now we need to add the renders of the cars. A good place to find some car renders is at Planet Renders in their car section. Once i found 2 that i liked, I scaled them down and placed them in appropriate places:



25. Now we are almost finished! The last thing we need to do is add a reflection to cars. To do so, duplicate your car layer (CTRL + C then CTRL + V). Then go to EDIT>TRANSFORM>FLIP VERTICAL. Move it under your car and lower the opacity to something that looks good. I used 65%:



26. Just repeat step 25 for any other cars you place on your banner, and your final result should look like this:



If you have any questions about this tutorial, please use the contact form to ask us. Also remember, if you have a site with tutorials on it, please visit our submit page to add them to our tutorial indexing system!