文档介绍：* The Ebook starts from the next page : Enjoy !
(http://veerle./?id=208_0_2_5_C)
Designing a CSS based template - part I
This is the start of a step-by-step based tutorial about how to
create a CSS based template page. This will be a tutorial
consisting of several parts: part 1 covers the creation of the
navigation buttons in Photoshop CS*, the 2nd part will be the
creation of the background, next on the list is the header and
layout of the page and finally the implementation in CSS and XHTML.
Now some of you may wonder why in God's name I start with the creation of the navigation
buttons, but my initial intention was to give a small tutorial about the creation of these simple
buttons. But once I was on the roll the thought came to my mind, why not do plete
course.
Create a glassy beveled navigation button
Create an RGB document, 178 x 22px white background. Create a new lager (call it "button")
and fill it with gray #ececec. Add a new layer (call it "highlight") and draw a 1px white
highlight line on top and on the left (using the pencil tool, 1px width). Fade out the pixel line
on the left bottom a bit using the Erase Tool (select brush, 20px, 50% opacity).
Create a new layer (call it "bullet"). Draw the pixel bullet using the Pencil Tool (1px,
#727272). You can of course choose your own fantasy pixel bullet.
Create the glassy bevel effect by drawing a path (#d6d6d6) using the Pen Tool.
There you go! You have your button, now that wasn't so bad was it?
Creating the rollover effect.
To create the rollover effect we simply duplicate our layers and change the colors. First we
link the layers together in the Layer Palette. Then we choose "New Set From Linked" in the
Layer's Palette dropdown menu. Now duplicate that layer set by right clicking and holding
down mouse button (or click hold down mouse + control for Mac users with a one button
mouse) next to the layers'