This lesson is going to cover making two kinds of backgrounds: the seamless tiled background and the bordered background.

The seamless tiled background is essentially using one tile and with your html body background code - you will have it tile throughout your entire web page. If your tiled background is made properly, there should be no evidence of any seams showing.

Another favorite type of background is the bordered background. This background has a specified area (margin) usually with an image that is repeated all the way down the left side of your web page. The remaining portion of the border is solid and is the area the narrative and other graphic elements can be placed. Many side borders also have some type of dividing line to separate the border from the solid background. We will first do the seamless tile background and then bordered background.






SEAMLESS TILED BACKGROUNDS


(1) Open an image (graphic) you have saved. To do this choose file, then open from the pop-up menu, and find your graphic. For this lesson, save the graphic below in your My Documents file, and open it. You will see that when you bring this graphic up on the Paint Shop Pro desktop, it will have a background surrounding it even though you don't see it here. This is a transparent gif.



(2) Make sure it has enough border (background color) around it and that the image is placed in the middle of the background color (borders).

Make sure the image has 16 million color depth. If it does not � then do the following:

Go to colors
Increase color depth
Choose 16 million





(3) Resize the graphic to approx 200 length and width or no more than 200. For this example you will need to add more border (background color around the image).



(4) Go to image � resize and put in dimensions and hit ok. If border (background color) is needed - add it first then resize. Directions for adding more border are below:

(5) If you need to add more border:

You need to make sure that the extended border color you will be adding to your image is the same color. To do that, left click eyedropper then right click eyedropper on background.


On the right side of the PSP desktop are two color squares. When you left click, you choose the foreground color which is displayed in the top box and when you right click, you choose the background color displayed in the bottom box. � the bottom square will take on the color of the border better known as your background color.



Go to image on the top of your Paint Shop Pro desktop and then add borders � leave symmetric checked and add the amount you will need.

6) Now go to layers then click on properties and a drop down menu will open - go to opacity and make the opacity a number between 20 and 25. Leave everything else as is and hit ok.

<
This is from PSP 6. PSP 5 is a little different but just fill in the exact same data for this exercise and you will get the same result.

(7) The image will have squares covering it. Then go to layers �merge � merge all flattened.

(8) Then go to file � save as � name it and make sure it has a jpg extension.

Remember images work best if they are placed with a large portion of borders surrounding it.



MAKING SEAMLESS TILED BACKGROUNDS WITH TEXT


Do steps 1 � 5 as above

Go to the text tool on the left side of the Paint Shop desktop and there you will choose font and text size. In Paint Shop Pro 6 be sure that floating and antialias is checked off.

Go to image and write text in blank area. If you want text to be rotated to the left or right go to Image rotate � and choose free and type 15 � and choose left or right to rotate depending how you want it. Then hit okay. Your text will be moving like ants - to place your text - left click on the magic wand tool and bring it over to your text and right click it. Your text should now be in place and the ants will have stopped moving.


Magic Wand Tool

Follow steps 6 through 8.


MAKING BORDER BACKGROUNDS
For this exercise download this cat:





Open a new image width 1600 x height 150 and for this exercise we will choose white as the background color and leave the image at 16 million color.

Get your graphic and size it to 150 x 150

Take your arrow key and left click it on your graphic and then go to edit copy and then take your arrow and left click it on your new image of 1600 x 150 and hit edit paste as new selection � take your graphic and move it all the way over to the upper left side flush with the left top corner. Then left click on your magic wand at the right side of the desktop (8 down) and bring it to your image and right click it. Your image is now at the left top corner of the border graphic.

If you need to fix the graphic because it just doesn't look right, you can use the Undo Key (it looks like an arched arrow and faces left located on the top portion of the Paint Shop Pro desktop under image or in PSP 6 under edit. Click it twice and it will remove the graphic - then hit edit paste as new selection. Or you can click on your mover tool - two crossed arrows on the right side of your Paint Shop Pro desktop (five down from the top). Click it on your graphic and move the graphic over.

Now we will make a separator Line next to it.



Open a new image � width 10 height 160, foreground color orange. To make the foreground color, take your mouse to the color chart on the right side of your Paint Shop Pro desktop and and left click on a color. The mouse cursor will turn into an eyedropper and the top color box will become that color. To choose a background color, you right click the color chart and the bottom box will become the background color. For this exercise, choose orange for your foreground color. You will now go to file then a drop down menu will appear, choose new. See illustation below.



Now fill in the image information as on the illustration below. Put in the width as 10 and the height as 160 and the background color as foreground color and hit okay.

You will see that your separator line will now be filled with the orange color (the same color as in the top color box). You should now have a graphic with a line of 10 width and 160 height and the color orange.

Take your arrow key and left click it on your graphic (line) and then go to edit copy and then take your arrow and left click on your new image of 10 x 160 and hit edit paste as new selection. Bring the line as close to your graphic as possible and as close to the top of the border as possible. Then left click on your magic wand at the right side of the desktop (8 down) and bring it to your image (separator line) and right click it. Your border line image is now pasted beside your graphic. And there you have a border background.



ASSIGNMENT: Find a graphic on the net where the image is placed with surrounding background area and make a tiled background and a bordered background with the same image. Add an additional vertical line to the bordered background as a separator. Just to clarify - when you complete your first lesson on backgrounds and borders - please send the urls (2) of your assignment showing how the tiled background and how the border background looks on an entire web page! What I mean is, do not send the tile you made or a sample of your border background. Instead, I would like to see how the entire tiled background and the border background looks on your web page so I can get a feel of how it would work when you put narrative there too.


The lessons should be done in this order:


Introduction to Paint Shop Pro Classes

Backgrounds

Transparency

Flood Fill

Text Effects

Tubes

Snowglobe

Navigational Buttons