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 the complete course.

Create a glassy beveled navigation button

Create an RGB document, 178 x 22px white background. Create a new layer (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' name. Choose Duplicate layer set in the dropdown menu. Name it "button over".

Now you can go over each layer and change colors to create your rollover button. These are the colors I used in my example here:

• button background color: #bfe3ff
• color of glassy bevel: #a5d1f3
• color of the pixel bullet: #e4001b

Download the Photoshop source file of this tutorial.

from http://veerle.duoh.com/