|
With this photoshop tutorial you can create a great looking header for your website using simple shadow effects.
1. Press Ctrl+N to open up a new canvas. choose a size for your header, mines is 750x334.
2. Select the rectangle shape tool and draw out a box across your canvas. This will be where the actual banner will appear, for lack of a banner i used a black rectangle in its place. Right click on that layer you just created and select blending options. Select Drop Shadow and use the settings i have. It'll give the rectangle a nice shadow effect, very subtle but very elegant!
 |
| Website Layout |
 |
| Website Layout |
 |
| Website Layout |
|
3. Now make another rectangle across the page but across the top. Use the same drop shadow effect as in the previous steps.
 |
| Website Layout |
|
4. Once again create another rectangle shape, but this time, across the top of the banner rectangle. Use a different color to make it stand out, i used a light grey. once again use the same shadow effect as the previous.
 |
| Website Layout |
|
5. One last rectangle should be added before the banner rectangle. I used a blue-ish grey for this one. Once again using the same shadow effect as the previous.
 |
| Website Layout |
|
6. Now lets add our navigation menu across the top in the white area between our black rectangles. Ii used basic Arial Black for the font. with this, you use the same drop shadow effect that you used for the previous rectangles. It comes out pretty nicely, this is what we have so far.
 |
| Website Layout |
|
7. Lets create a box that overlaps the banner, this can be used for updates or news bulletins. Select the rounded corner rectangle tool. Make it white, with a radius of 20px.
 |
| Website Layout |
|
8. Make this layer 50% opacity and also give it the same shadow effect as the previous steps.
 |
| Website Layout |
|
9. Duplicate that layer and rasterize it. Using the rectangle marquee tool, select the lower portions of the shape and delete it, so we are just left with a header. Give it a title and the same shadow effects as previous steps. Look at my examples.
 |
| Website Layout |
 |
| Website Layout |
 |
| Website Layout |
|
|
10. To give this a more techy-grunge look, i use some grunge brushes and touch up the sides with a couple strokes of the grunge brush, and also added in a flashy graffiti banner. Enjoy!
 |
| Website Layout |
|
