[Part 3 of 8]
4 Coloring the button icons. With the selection active, the next step is to add Layer Effects to the layer with the isolated icons, to define the "rest" state for the buttons. Once this is done, duplicating the layer twice and changing the Layer Effects for each of the two copies will define the rollover and mouse-down states. If you're working in version 5.5, you can take advantage of Color Fill again, as explained next. But if you're working in Photoshop 5, at this point you'll need to choose a new Web-safe Foreground color that contrasts with your button faces and press Alt/Option-Delete to fill the icons with color.
You can get a head start on the Effects for the icons layer by copying the Effects from the buttons layer: Right-click/Control- click the "f" icon on the buttons layer and choose Copy Effects from the context-sensitive menu that pops out. Then right-click/Control- click on the name (not the thumbnail) of the icons layer and choose Paste Effects from the context-sensitive menu. If you're using Photoshop 5.5, change the color by choosing Color Fill in the Effects dialog box, clicking the color swatch, and choosing a new color.
For the Drop Shadow and Inner Shadow effects, leave the settings as they are. But make changes to the Outer Glow and Bevel And Emboss: For the Outer Glow choose a darker shade of the button color (not the icon color) and reduce the Opacity and Intensity. For the Inner Bevel set both Highlight and Shadow modes to Screen so the icons seem to be internally lit, and increase the Depth setting to help make the icons look raised above the button surfaces.