Paint Shop Pro Tutorials -- 3D-Button Tutorial |
Creating a 3D-Button with Paint Shop Pro
This tutorial will show you how to construct a set of 3D looking buttons using a bitmap drawing program.
Okay, let's get started. First open a new file and give it 100 as the width and 30 as the height. Also make sure you use 16.7 million as the color depth. This is so that we can use the softening effect later.
Now, on the select window (as shown below) double click on the foreground color square.
 |
| figure 1.1 |
It's the light gray square in the diagram above. (The black square behind it shows the current background color.) This will bring up the "color" window shown below...
 |
| figure 1.2 |
Choosing the black rectangle color (the lower left choice of the "BASIC COLORS") shows a graduated scale along the right hand side of this window. Next to this scale is a small black triangle. This indicates the current shade. What we'll do as we progress through this graphic is keep the same color but use different shades. So to start off we'll choose a fairly light shade. Now from the paint window...
 |
| figure 1.3 |
we'll choose the line tool (it's the eighth one down on the right side.) Now we're ready to begin drawing the button. First draw two lines about a third of the way down from the top like this.
 |
| figure 1.4 |
Now double click the foreground color in the select window again and this time when you get the color window just move the little arrow down about two graduations on the color scale. This will give us a little darker shade. Now draw two lines above and below the lines you already have. Now our graphic should look like this...
 |
| figure 1.5 |
Continue like this until the graphic resembles this one.
 |
| figure 1.6 |
At this point we continue using darker shades for lines that are two pixels wide but only filling in the bottom. After this the graphic should look like this.
 |
| figure 1.7 |
Now change to the pencil tool (the fourth down on the left side of the paint window.) At this point, using the darkest shade we've chosen, we'll draw and fill in a semi-circle shape on the right side of the graphic. Then, using the eye-dropper tool from the upper right corner of the select window, we'll change the foreground color to the lightest shade we used by positioning the eye-dropper on the first lines we drew and clicking the left mouse button. Now change back to the pencil tool and draw and fill in a semi circle shape on the left side of the graphic. It should now look like this.
 |
| figure 1.8 |
Now with the power of Paint Shop Pro (and some mathematics) we'll smooth the whole graphic. Under the menu selection "IMAGE" choose "NORMAL FILTERS" then choose "SOFTEN MORE". Do this twice and your graphic should resemble this.
 |
| figure 1.9 |
Finally we'll apply some text. We already have the lightest shade as the foreground color and we'll set the background color as the darkest shade. Select the eye-dropper again and move it over the darkest shade on the graphic. This time, though, click the right mouse button. The result will be that the background color gets set to the shade under the eye-dropper. (Remember we clicked the left mouse button to pick up the foreground color.) Now choose the text tool from the paint window. It's the one next to the line tool we used and it has a capitol T in it.. Move the mouse onto the graphic and click the left button. This will bring up the text dialog box. Choose a sans serif font and set it to about 16 points. Make sure the "SHADOW" radio button is checked. Type in the text you want and hit the Enter key. Now position the text in the center of your graphic and click the left mouse button. VOILA!!! Your finished button should look like this...
 |
| figure 1.10 |
At this point you should save the graphic. You'll want to save it as a GIF file. To do this you'll first need to decrease the color depth (remember this graphic started out at 16.7 million colors). From the menu choose "COLORS" then choose "DECREASE COLOR DEPTH". Finally, choose "256 COLORS". On the dialog box that pops up choose "OK". You're now ready to save your new button. From the "FILE" menu choose "SAVE AS" and select GIF as the image type. This will make your new button Web-ready!
TIP: Save a copy of the button before applying the text. Now all you have to do to create another button is call up the one without text and add the text you want!
That's it.... Be sure to check out some of our other Paint Shop Pro tutorials.
High Quality video-based tutorials |
| ...with over 300 different titles, all taught by professionals. Learn any application in a
fraction of the time right from your own desktop. This unique method offers accelerated learning and a high
retention rate. Here are a couple of topics that you might find interesting. View free demos of the
courses using one of the links listed below. |
| Corel Paint Shop Pro
X Essentials |
Paint Shop Pro 7
Tutorials |
|
|
|
We'd like to hear from you... If there are any Paint Shop Pro techniques you'd like to see covered, send us an e-mail.
|
