Step 1 | Open a new image which is the width and height of both the button and associated text. 100 x 150 usually works for me. |
Step 2 | Begin adding your layers, now. Mardi of Webgraphics on a Budget is right .... layers, layers, layers. The following are the one's I know I will need + background:- Fill (Just do it. Allows you to change your mind about the background color.)
- Shadow (Means you can turn it on and off at will.)
- Glass (This is the layer which gives the contour to the "on" button.)
- Texture (In my case this is Stone since that is the texture I used.)
- Frame (Where I create the outline from the dingbat and then Blade it.)
|
Step 3 | Flood fill the Fill layer with your background color. |
Step 4 | Move to the Frame layer and lay down your dingbat off to the LHS. I did it in a tan and used the octagon from the ButtonButton font. Floating and anti-aliased checked. Save the selection to the Alpha channel (octagon). You'll use it later. |
Step 5 | Modify the selection by contracting it. I did it by 6 pixels for the small frame. Save this selection to the Alpha channel (octagon small). Now, cut out the selection. |
Step 6 | Use the magic wand to select the tan octagon. Save this selection to the Alpha channel (octagon outline). (I will admit that I didn't use this selection again, but it you wanted to try different frames, it would be there for you. For the sake of a few mouse clicks, its worth it.) Apply the BladePro preset of your choice to this selection. I used a modified version of the "old brass" preset. |
Step 7 | Move to the Texture layer and load the "octagon" selection. Flood fill this with your texture. I used a limestone pattern. Duplicate this layer. |
Step 8 | Move to the Glass layer. Load the "octagon small" selection. Flood fill this with a color darker than the over all color of your texture. With Blade Pro, apply a glass preset with no texturing. You need to play with the radius, height, lighting, etc. until you get a nice looking button. Make sure there is a good bevel and that it is not too bright or too dark. This just takes some practice and playing with it. |
Step 9 | Go to the Texture layer and modify the blend mode. For the buttons on this page, I used "Hard Light". For those on the Visual Sonnets page, I used "Screen". "Soft Light" and "Overlay" also gave good effects. This is just something you have to play with. You may also need to go back to Step 8 and get a glass that looks better. A bit of "black magic" and serendipity, here. |
Step 10 | Go to the Shadow layer and load the "octagon" selection. Use this to apply a drop shadow. |
Step 11 | Now create additional layers for whatever lettering you might want to add to the side of the button. I used a darker tan and the Matisse font. |
Step 12 | Save this off in PSP format. What you have is a master which holds your nav buttons and can be added to, as needed. Also, you have a button which can be cropped down. Also, you have all of those selections, so that if you come back and want a different background, frame or texture, you don't need to redo all of the work. |
Step 13 | Begin turning layers on and off with the associated lettering. Make the Copy of the Texture layer visible for the off button save it off as a JPEG. Now, turn that layer off, and the "glowing" button is visible. Save this off as another JPEG, etc. |
Notes | You can struggle with the Javascript for the rollovers, or just use the Mighty Mouseover Machine. I like the way she's structured the script for the MMM, so I use that for my prototype. Just look as the source for this page, if you want to see it in use. Also, Picture Dicer can be handy for rollovers. I used that for my splash page "whimsy". Thanks to Jaguarwoman (aka Dana) for the lead on those helpers. |