In this simple tutorial you will learn how to create a navigational bar for the top or bottom of your page. It is simple three buttons that you can use to link together to form a bar.
Step #1
- Open a new image with the Width=100, Height=50, Background=White and 16.7 Million colors. These size are designed for this tutorial only, you will need to set the size that you will need once you are ready to make the button for you page. This will depend on the text you will add to the button. One thing to keep in mind is that you will want the complete bar to fit on the page without wrapping.
- From the Tool Menu choose the Selection Tool
- Set the Tools Control Box select Ellipse, Feather=0 and check antialias.
- Place the mouse cursor in the center of the image box (50 in 25 down). Hold the mouse button down and drag it to the front and down of the image box till the readings in the lower corner (second group) read 5,40. You should now have and image looking like this.
- Go back to the Selection Tool again only this time select the Rectangle Tool.
- This time while holding the Shift Key down, place the cursor at 50,10 (you should have the pointer in the center top of the ellipse). Now drag the mouse down and back till the readings in the lower left corner are 40,100,and release the mouse button and the Shift Key. You should now have an image like the one below.
Step #2
- It is now time to add the color and special effects. Select the color you want the bar to be. For best results use a solid color.
- Now select the Fill Tool it looks like the paint bucket. On the Control Box make sure the Fill Style is set to Solid Color, Match Mode None.
- Place the cursor inside the image and click the button once to fill the button image.
- From the Menu Bar select Image, Effects, Cutout
- Make sure that Fill the interior with color is NOT checked. Set the Shadow Color=Black, Opacity=100, Blur=3, Vertical=0, Horizontal=-2 (negative 2). This will give you a little rounded effect where the buttons meet.
- Now we will added a drop shadow. Again from the Menu Bar select Image, Effects, Drop Shadow. Set the Color=Black, Opacity=100, Blur=10, Vertical=4 and Horizontal=0
Step #3
- We now have to fix the dropped shadow at the end of the button. Paint Shop Pro 5 leaves a small area of the shadow fading at the end of images, and if you don't do this next step your finished bare will have little open spots where each button comes together.
- Select the Zoom Tool
and click on the image two times. Deselect the image at this point. Go to the Menu Bar, Selections, Select None.
- We need the Selections tool again set at Rectangle.
- Place your cursor about the bottom middle of the button. You want it to just be touching the color of the button (this might take a little practice). Now click and drag down and to the left to form a small rectangle (see below).
- Now from the Menu Bar select Edit, Copy. This will send the selected area to the clip board.
- Go back to the Menu Bar and again select Edit, now Paste, As New Selection. Place the new selection to the right at the end of the button to fill in the gap. Again this takes a little practice to get it to lineup properly.
- You should now have the pasted section like the image below.
- Go up to the Menu Bar and pick Selection, Select None.
- Pick the Zoom Tool again and click on the image twice to return it to the normal size.
- Now we need to save the finished button as it is now in either a PSP format or JPG. That way you will be able to open it later to add text to it.
Step #4
- Now is the time to add the text to the button and get it to the final size.
- Select the Text Tool
- Simple type in the name of the page you want to link to.
- Now deselect the text by either right clicking the mouse or go to the Menu Bar and use Selection, Select None.
- This is the final operation. Go to the Menu Bar select Image, Resize and set it to Width=75, Height=50.
- Now from the Menu Bar select File, Save As, and save the finished button with a new name. This way the first button is still able to be used at a later time with out any text on it.
- Well that takes care of the first button.
