Get the "Magic Wand" tool and click any where on the light blue border you just made. Next, choose "Image", then "Effects", and then "Sculpture" (you'll have the same sharp blue which is in your logo). Now, Float your image and "Defringe" by 2, then add a Drop Shadow, and Presto! Your first button! Look something like this?

Behind The Scenes

Now, let's go in and make the other 3 buttons we need. This next one will be the "Highlighted" button.

In PSP Layer Palette, be sure the layer with the gray "tiles" is highlighted. Get the Magic Wand and click the white space. In the menu choose "Selections" then "Invert". You now should have just the gray tiles selected. Click the "Copy" button, then in the menu click "Edit" and "Paste As New Layer". Do this two more times so you end up with a total of 4 gray tile images, all in different layers.

Cool KROW Clue

If you can't see all 4 gray tile images, use your "Mover" tool and click and drag them to different areas of the page. When PSP pastes layers into the same image, it pastes them into the very same place as well.

Deselect your image (menu, "Selections", then "Select None"). Highlight one of the new gray tile images. In the menu choose, "Colors", then "Colorize. A new pop-up window will appear where you can set the Hue and Saturation as you choose. This will change the color of only that one gray tiled image.

The KROW chose a brighter shade of blue remembering this is the "Highlighted" button. Now, go back and follow the same step for the other two gray tile images, but choose different shades of blue.

[ to top of page ]

News Of A Merger!

Now were getting ready to create 4 separate images (buttons) out of this one. (Now's a good time to do an SOS!) By now you have quite a few layers going. In the Layer Palette, "Hide" the three newest tiled images you just made. Next, RIGHT click on any layer and choose "Merge" then "Merge Visible".

Take the Magic Wand, click in the white space and Invert your selection. Now just hit "Copy" and then "Paste" and you have your first separate button.

Now, go back to your layered image. Click "Undo" until you "Undo Merge Layers" (probably about 3 times). Your Layer Palette should show all your layers again.

Now, repeat these same steps for each of the other tiled images. Only, this time, "Hide" the tile you already copy and pasted. Then move the new tile into the blue sculptured frame. If needed, use the "View Grid" (under "View) to ensure you move each tile to the same place as the previous. Copy and paste each different colored tile and you'll end up with 4 different buttons:

Save each of the buttons for later use. Be sure in your PSP to go back and "Undo" the last merger you did and then do another SOS to make sure you have a full template of your buttons.

Quick Additions

For an added touch to the site, we'll make a dividing line and bullets. These are very quick and simple to do. You can even do them on your button template image by creating a new layer and working on it! This keeps ALL your graphics for one website in a single working file! Very convenient!

In your PSP, use your Preset Shapes to make a circle or a small Rounded Rectangle in a light blue. Select the shape and add your current Sculpture and a drop shadow, and that's it! A good size for bullets is something not much bigger than 20x20 or 25x25 pixels.

For a dividing line, use the "Draw" tool to make a line (usually about 5 to 10 pixels) and then apply the same as your bullet and that's all there is to it! You're now done with all the basic graphics you need for a web site!

[ previous step ][ next step ]

[ to top of page ]