
Start by opening a new file, around 300 x 300 pixels will do, with 16million colors and a transparent background. Next click on the ShapesTool
and in the Tool Options menu (first tab) select Rectangle for the shape,Stroked and Filled for the Style, Line Width of 8-12 pixels, and checkthe antialias and Vector boxes. Now go to the second tab and select thesecond button in the Join choices. This will give a nice rounded cornerto your button. If you like straight or flattened corners, use oneof the other settings.
![]() |
Now draw a good sized rectangle, whatever size you want your buttonto be. You'll see a blue outline figure. The outline shows you thesize of your rectangle and the width of your edges.
![]() |
Release the mouse and your rectangular shape will appear. It will havean edge corresponding to your current foreground color and a filled interiorthat matches your background color. Here I've used two shades of blue.Note the deformation control box around your graphic, a feature of thenew vector shapes and text. If you don't like the shape of your buttonyou can deform it now by pulling at the control boxes on the sides andcorners., rotating it with the middle handle, or apply other deformationsby clicking on the side handles while holding down the shift or controlkeys. If you want to resize your button without changes the aspectratio, right click on a corner and move in or out. The great thingabout these vector shapes is that no matter how much you deform them theykeep their nice crisp edges.
![]() |
Now to start creating that 3 D effect. First we duplicate our rectangleon another layer. Go to the Layers menu and scroll down to Duplicate. Orif your a palette lover, right click on the vector layer
in the palette and choose Duplicate there. Now we are going to play withsome colors. Look at your Layers palette. There should be two vector layersand a background raster (RGB) layer. Next to the top vector layer, clickthe little plus. Your menu should expand slightly and there should be anotation for your rectangle.
![]() |
Double click where it says rectangle and all of the properties of thevector object will be displayed in the popup box. From this box you canchange the colors, line width, join pattern, and style of your object.We are going to just change the colors. Click on the Fill Style color swatch.A standard PSP color selection menu will pop up. Change the color to white.
![]() |
Now click on the Line Style Color box. In the color selection menu,choose the lightest gray color, and then slide the color to an even lightervalue. Be sure that you don't make it white though. I may have overdoneit just a bit here, but you want a light gray color.
![]() |
You should now have a graphic that looks pretty much like teh one below.A light gray edge and a white interior.
![]() |
We need to apply some effects to this rectangle, but we can't do thatwhile it is a vector object. We can easily convert it to a normal rasterlayer by going to the layers menu and choosing Convert to Raster, or byright clicking the layer in the Layers Palette and choosing that command.The little control handles around the graphic should disappear.
![]() |
Choose your Magic Wand from the toolbar and click on the interior ofthe rectangle. if you don't get a clean selection, turn your Tolerancedown in the Tool Options palette. A setting of 10 should work, but occasionallyyou may need to get lower. If you still can't get a good selestion youmay need to back up a few steps with the Edit:Undo option and make theedge color on the rectangle a bit darker. After you have your selection,expand it by 2 pixels to get the whole inner area (Selections, Modify:Expand). Now go to the new Effects section of PSP 6. You'll see a bunchof stuff that wasn't there in PSP 5. For this tutorial, you wantto select Inner Bevel. The control menu that pops up has lots ofoptions, but we are just going to use a preset. In the Presets drop downbox, choose Pillow. Now you may want to try some of the other presets,like Round or Metallic. I just happened to think that pillow gave a niceeffect. Your inner section should now have a 3D effect to it.
![]() |
Use your Magic Wand again to choose the edge color. Again, you may needto adjust your tolerance to get a clean selection. There is a little trickI learned that will work, however, even if the colros are really close.Change your layer opacity to 0 (in the Properties section of the Layersmenu) and set the Magic Wand to Sample Merged and you'll get a clean selectionbased on the colors underneath. Turn the opacity back up to 100 and applyan inner bevel to your edge. You should now have a nice two area 3D button.
![]() |
Here's where we start using that vector rectangle that we left on thelast layer. Deselect your edge if you haven't already (Selections: None),check the Layers Palette to make sure the top raster layer is still theselected one. Now change the Blend Mode of the layer to Darken You cando this by accessing the Properties Dialogue box from the layers menu orfrom the menu obtained by right clicking the layer in the Layers Palette.Choose Darken in the Blend Mode drop down menu. You might also want totry Multiply as a blend mode for a slightly different effect. What youshould see is that the colors from the lower vector shape now show through,but the 3 D effect is still there.
![]() |
Right now you're saying to yourself "So what??? It's just anotherbutton." But THIS button has easily editable color options. Click on the+ next to your vector layer with the rectangle and then double click onthe Rectangle entry. Again you get the Vector properties box. Here'sthe fun part. Change the colors of the line and fill. here I've useda purple and red.
![]() |
Lo and Behold, you now have a completely different color scheme foryour button, and you didn't even have to start from scratch. You can storethis button as a .PSP file on your drive and make new buttons anytime youwant. Give them as gifts, trade them with your friends, or zip them upfor download on your graphics site. (Okay, I'm dreaming.)
Now again you may be thinking something along the lines of "Why notjust use a normal Raster rectangle for the lower layer and change the colorswith the flood fill tool?" Well, the reason is simple. Your vector rectangleis fully Antialiased, at the edge and at the interface between the filland the line. Using the flood fill tool to change the colors would leavejagged artifacts along the edges. Using the vector color options makesthe change clean and hassle free. To use the buttons you've made on a webpage,simply merge the visible layers (in the Layers menu, choose Merge: MergeVisible), Copy (Edit Copy), paste onto a new graphic with a backgroundcolor similar to the color of your page (and different from the button'scolors), and save as a transparent GIF.
![]() |
If you really must have a gradient or other color scheme on your button,rasterize the bottom vector layer (Layers: Convert to Raster), select theinterior with the Magic Wand, and expand the selection by two pixels (Selections,Modify: Expand). Before you add your gradient I would suggest coloringin the whole area with the Air Brush tool to remove any antialiasing artifactsat the edges. below I've used a purple tor red gradient.
![]() |
Dont't forget that there are other effect that can be applied to yourbutton after you have merged the layers. These two buttons were done usingthe Weave and Twirl effects with the button shape selected.
![]() |
Also, don't limit yourself to squares, rectangles, or even circles.The penant shape below was done with the point to point line tool and someNode editing (Hint, to close your figure using the point to point tool,right click on the last node (box), move down to Edit in the popup menu,and then choose Close.) With something like this you can change the colorsto match your favorite team.
![]() |
Email me at
![]()
![]()
![]()
| . |
| XML sitemap is generated with XML sitemap generator Web tool by Emergency Soft |