The Divider

Now that you're done with the border background, let's make a horizontal (left to right) divider bar to go with it, so you can use it to divide the contents of your page.

First of all, open a new image, say...Oh about 400 wide and 50 high in the background color to match your border background. Using the eyedropper, choose a color from your background border image and make it your foreground color. We'll make the divider and crop it to the proper size.

Next, using the rectangle selection tool, make a long thin rectangle in your new image (about 8 pixels high and 350 pixels wide). Choose the flood fill tool, place the crosshairs inside the rectangle and left click to fill it with your foreground color. You can if you like then go to Effects - 3D Effects - Buttonize to give the divider some depth, which is optional. Leave it selected and and add a drop shadow using the same settings you used for the border background.

Once that is done go to Selections > Select None. Again, using the selection tool, make a rectangle around the divider so that you have just the divider with the drop shadow selected, then go to Image > Crop to Selection and then save as a .gif or .jpg. Done!!

Here is our finished horizontal divider bar:

Ok, now what about putting a vertical (up and down) divider bar on the actual bordered background to separate the left side image area of your background, from the right side? Its actually very simple once you have made a divider using the above example.

With the rectangle selection tool, draw a tall skinny rectangle directly on the bordered background where you want the left-side border to end. Make sure you have the areas even on both sides of your image that you are using in your border. Using the Fill Tool, color the rectangle you selected. Next, while the rectangle is still selected, add a drop shadow (using the same settings you used in the horizontal bar, the shadows will face out towards the right side).

You can also add several different colors to the divider by making little color stripes at a time and adding to the divider width as you go. After you have finished your border background, complete with a vertical divider on it, you need to thinly cut off the top and bottom of the entire background. To do this, use the rectangle selection tool to draw around your whole border background image, leaving a little bit all around the outside like this:

Now go up to Image > Crop to Selection, then Save your background. This will allow your border background to repeat smoothly on a web page without having little "breaks" in between.

The Button

First of all, the are all kinds of different button types that you can make. Round ones, square ones, elliptical ones, rectangular ones, and odd shaped ones just to name a few. There is however one thing in common that these buttons are used for and that is for links. In this class we will cover one of the most common of buttons, the rectangular button.

Earlier in this lesson you made a banner and put text on it by using the cutout and chisel effect. You are basically going to be doing the same sort of thing here. The first thing you need to be thinking about is how big do I want to make the button, what color should it be, and what text type and font size do I want to use. Of course you will want them to match the color scheme of your background and be easy to read!

Ok lets go to File > New and set the width to 124, the height to 32 in pixels, then click ok. You can color it anyway you like. Go to Effects - 3D Effects - Buttonize to put on the finishing touch. You should now have a shaped button on your screen. The next thing to do is put the text on it. First find the center of the button. You made the button 124x32, so the center from side to side would be 62. The center up and down would be 16.

Click on the text tool and move your pointer over the image. On the lower left hand corner of the PSP screen, (directly above the Start button of your Windows program if you have the screen maximized) you will see the coordinates change as you move your pointer over the button. Place your pointer on the button and click when the coordinates say (64, 16). Now the text menu is up and you will need to make sure that the alignment button is set to Center.

With this option enabled your text will be centered on the button exactly where you clicked on it to bring up the text menu.

Now just simply choose a font type, size, style and click OK. You may have to start over if your text is to big or to small. Play with the text size until you have it just right. Also if you are making several buttons you should start with the one that has the longest name. You might get ticked off if you make several buttons and the text size is too long for the last button. When you are happy with it just Save As and give it a name.

The content and design of this site are the property of WebTech University
and may not be used without written consent of the owner.
Copyright © 1998-2012 WebTech University. All rights reserved.
Privacy Statement