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.

Open a new image

Open a new image by clicking File>New image, make it with a transparent background, size 300 x 300 to give ourselves plenty of room to work. We can always (and will) crop the extra canvas off later when we are done. (Fig.bt01) Add a new layer by clicking the new layer icon in the layers palette. Now save your image so incase of a "crash" we don't lose it. Choose File>Save As and then make sure that you save in PSP format so that we retain all the layers. Name your image button.

 




Choose your shape selection tool and set it to rectangle, make sure antialias is checked and the feather is set to 0. Draw out a selection about 90 x 35 or so on the canvas. Don't worry if you can't get the exact size. If you need help knowing what size you are at, if you look at the bottom left hand corner of PSP while you are drawing the selection you will see a bunch of numbers. In the screen shot below you can see where I have circled in red shows how big the current selection is.(Fig-wm02)

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

 

Node edit the center of hat


Now
set the foreground color to the color you want your button to be, it doesn't matter at this point what you set the background color too. If you need more help with the color palette, you can check out my help section for it here. with the background. Choose your Flood Fill Tool and then set the settings in the control palette to match mine, Normal blend mode, match mode to none, Opacity to 100 (or less if you prefer, a lower number will give you a lighter color of the one you chose). Click once inside the selected area of your image to fill with color. (Fig.bt04)

 


Next we apply a simple inner bevel to give the button a more 3D look, Choose Effects>3D>Inner bevel. If you like scroll through the presets and choose one to your liking or you can play around with the settings til you get an effect that you are happy with. I started with the Pillow Preset and then increased the Intensity and Elevation to lighten it a bit since it was so dark, both of this with a high number will lighten the image, if you lower the number it will become darker. You can see my settings here. If you want to save the settings for future use, choose the Save As option just below the presets and then in the pop up box enter a name for your new custom preset, I named mine button <G>lol. (Fig.bt05)

 



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. Set the Foreground (stroke)color to null and the background (fill) color to a color that accents your button, I chose a simple white since I had a blue button. Choose the Text Tool and click once on your button image, the text tool dialog box will appear. (Fig.bt07)

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.

 

Almost there ! hee hee. I applied another drop shadow to the text. Just choose Effects>3D>Drop Shadow again and use the same settings as you did for the button or adjust them accordingly to your taste. Once happy click the OK button to apply the shadow. (Fig.bt08)

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 and set the foreground color to the same color as the background of your page that you are wanting to put the button on. Since all my pages are white I choose white but if you have a different color then set it to the that color. Fill the transparent background layer with that color.

 

Now we need to crop off the extra canvas so choose the crop tool Draw a selection area as close as you can around your button to remove the extra,careful not to get any of your shadow in the crop though. (Fig.bt10)

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?

Tutorials Home Page

Home   | Link Back  Images   | Mask   | Glass   | Tutorials   | News
Links  | Tubes  | Gallery  | Brag  | Store  | Friends  | Credits  | Gifts

 

Click Here!