CSS Tricks: Creating that header graphic
by Tony Hung on April 19, 2006
Requires a bunch of programs/ skill sets:
A background graphic — need to use Photoshop
A header/logo graphics — ditto
A navigation scheme — Photoshop or CSS, your pick
And CSS to wrap it all together.
To create that header graphic, we use Photoshop.
There are excellent tutorials on how to create, like the one at Zymic.
Basically:
Create a rectangle
Create a layer underneath it with a nice complementary color
“Cut out” parts of the rectangle with the Polygonal Lasso tool … this creates a selection that is easily “deleted”.
Then, alter the layer settings of the original triangle to look cool: embossed, drop shadowed etc.
With cut outs, you can create asymmetrical headers that look cool.