Web Graphics Tutorials Services Contact Us
Concept Visionz
  www.conceptvisionz.net

Adobe Photoshop Tutorial #19: Website Layout

With this photoshop tutorial you can create a great looking header for your website using simple shadow effects.


-sponsor- -sponsor-

STEPS CLICK TO ENLARGE SCREENSHOTS

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!









3. now make another rectangle across the page but across the top. use the same drop shadow effect as in the previous steps.



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.



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.



6. now lets add our navigation menu across the top in the white area between our black rectangles. i 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.



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.



8. make this layer 50% opacity and also give it the same shadow effect as the previous steps.



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.







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!



Tutorial by: CVS
Visit Parent Company: ConceptVisionZ.net

All rights reserved. © 2002-2009
Concept Visionz