
PSP Version 7-
Tools Used-
- Selection Tools
- Flood Fill Tool
- Layers
- Text Tool
- Inner bevel
- Drop Shadow
- Crop Tool
Something you don't see a lot of recent tutorials for are creating simple buttons for a web page for beginners, several times on the newbies list the beginners have asked how to make simple buttons for a web page, well there are a TON of ways to do it but for a good basic button here is a real simple way.
|
|
|
Once you are happy with the selection, release the mouse and you should see your marching ants around your selection size that you made. If you DO NOT see marching ants for some reason then you have your marquee turned off, just go to SELECTIONS and then remove the check beside the HIDE MARQUEE option. (Fig.bt03)
Did you SAVE your image ? Choose File>Save |
|
|
|
|
|
|
|
Let's add a small drop shadow so that we have an even better 3D look, Choose Effects>3D>Drop Shadow. Play with the settings til you get a shadow you are happy with or you can set them to match mine if you like. I made mine black, if you want a different color, click the color swatch to expose the color wheel and select the color from it. (Fig.bt06)
Once you are happy with the shadow, click ok to apply. |
|
Let's add some text and then we are
almost done ! Choose Selections>Select None to deselect the button
since we are done with it. Then add a new layer by clicking the new layer
icon in the layers palette.
Choose the font you want to use, depending on the font you need to set the size so that it will fit on your button. I chose the Broadway Font and set it to 14. Make sure that antialias and floating are checked in the lower right corner, the antialias will unsure you smooth edges on your text. For this case I left eh kerning and leading both set to zero (0). Once happy with the text click OK to apply the text. If the text is not positioned correctly on your button place your mouse over the "floating text" and it will change to the mover tool and you can move the text to any position you want on your button. |
|
Now we are pretty much done except
for adding a background color behind our button, that was the reason for
starting with a transparent image. In your layers palette you should have
3 layers, the transparent bg layer, the button layer and then the text
layer. Deselect all by choosing Selections>select none. Click on the
tranparent bg layer to make it the active layer. Choose the Flood fill
tool
|
|
Once happy with the selection just double click to crop the image down. All the extra whie around the image should disappear from your image and you should be left with you button and a lot less extra white canvas. (Fig.bt11)
All you have left now to do is to merge your layers by choosing- Layers>Merge All Flatten. You should then only have one layer in the layers palette and are ready to save your button. Since this is a solid color button it will save best as a gif image. And here is our finsihed button! Simple Simple Simple eh?
|