Making Full-Page Backgrounds from Scratch

In your drawing program, open a new file that is sized 100 x 100 pixels. Next, use the freehand tool and make some random lines - some that cross others, some that do not. It doesn't really matter if they're curved or straight, but curved ones get fun later.

Now, go get the paint bucket and pick a color. Fill one of the open spaces between the lines. Continue choosing different colors and filling the open spaces until you have a collage of color. Save the file.

Resize the canvas to 200 x 200, but do not stretch your existing image to fill the space. Using the selection tool, select the 100 x 100 square you have colored, then select "copy" from the edit menu. You will now paste the image three times: the first time, move it to the right of the original image, then select "mirror"; the second time, below the original image, then select "flip"; the final time, to the lower right corner of the square, then select "mirror" and "flip." You now have a background that will flow continually when used in your home page. Save the file.

The 200 x 200 image is really too large for comfort; resize the image to 100 x 100, but this time, be sure to stretch your existing image to the resize area. Save the file again, and you're done! If you want to have some real fun, now is the time to view some of the special effects available with your drawing package, such as reverse colors (sometimes referred to as "negative image"), embossing, softening, etc. Be sure to save the file when you have something you like - you may never get it just that way again!

Making Full-Page Backgrounds from an Existing Image

PaintShop Pro has an absolutely divine seamless pattern creator, so we will stick to that in this mini-lesson. Every seamless background I've ever made from an existing image I have done with PaintShop Pro!

Open the image in PSP, and, with the rectangular selection tool, select an area inside the existing image. On the PSP menu, select "Selections", "Convert to Seamless Pattern". Chances are, you'll receive a pop-up error that you are too close to the edges. I just *hate* when that happens, but it happens invariably. So now you need to make your rectangle smaller inside the image, but chances are, that will cut out more of the original image than you care to cut out! Here's how to deal with it:

1. Increase the canvas size by at least 100 pixels vertically and horizontally (perhaps 200, adding 100 pixels to all sides).


2. Depending on the image you are working with, you now will do one of the following:
1. With your paintbrush, color in around the outside, matching colors with what already exists, until the new area is all covered, -or-


2. Carefully select an area of the existing pattern (let's start with the left side) equal to the amount of space you need to fill, then copy that, paste it in the new blank area to the left, and flip it horizontally. Repeat this procedure with the right side, then with the top, then with the bottom (except, of course, you'll be flipping vertically on the top and bottom pieces).

3. NOW select an area, still inside the original image somewhat, and select "Selections", "Convert to Seamless Pattern". You should be successful, if not; make that rectangular selection a bit smaller and try again.

NOTE: I have an alternate method to the "seamless pattern" that I use from time to time; please see the Specific Tutorial for a working example of that method.

Making Bordered Backgrounds

Prepare the border the same way you would prepare an image for a full-page background. When you are finished, resize the canvas to 1020 (width) x 100 (height), being sure not to stretch your existing image to fill the space. Voile! You're done! If you don't like the background color that your text will show up on, pick one of the colors from the available palette and fill the 700 x 100 area with the paint bucket. When you're satisfied, save the image, and use in your page with exactly the same commands you would use for a full-page background.

Note: You are not limited to the 100 pixel height - you can have any height you wish. Just remember, the taller the image (which is a variable you choose), the larger the filesize and the longer the loading time!

Using Bordered Backgrounds

I've used bordered backgrounds four different ways. One of the most successful uses comes with the HTML "blockquote" command (which is used on several Land of Enchantment pages); the only drawback with this command is that the right margin of your text is indented along with the left margin.

The HTML "list" command may also be used; however, exercise caution if you accomplish your left indent in this manner. The list indentation appears to be based on the resolution set at the receiving end, and if you have a high resolution monitor & graphics card, the appropriate indentation for you is not the same as the indentation for someone viewing your page with a lower resolution monitor & graphics card.

The third use is with the HTML "table" command (two columns and one row); however, you must put something in the first of the two columns. I have successfully put links to other pages in a site in the first column (complete with bullets) and achieved two goals for the price of one. The links, of course, print over the left-hand border, so you must choose a font color that will show up over all colors used in your border.

The fourth use, and the one I now use exclusively, also uses the HTML "table" command, but puts an invisible .gif file in the first column set to a width=120 (allowing for the 100 or 108 border plus a little margin area); the text for the page goes in the second column. In case you don't happen to have an invisible .gif handy, I am providing one for you to pick up below (gee, it looks kinda stupid down there, doesn't it???).

.gif, .jpg, and File Size

I keep reading about the differences between .gif and .jpg, trying to discern which is better and faster (and to complicate matters, we now have the .png format, but I'll avoid trying to speak on that subject, as I'm still quite ignorant about it!). They each use a different method of file compression, and I suppose if you know all the "in's" and "out's" of graphic design in each, you won't be reading this page in the first place!

The bottom line appears to be this: if your graphic has a LOT of colors in it, .jpg is most likely the best choice for you. If your graphic has minimal colors in it, then .gif is most likely the choice for you. These days, I use Paint Shop Pro 6 for ALL my graphics compressions. Back in 1996 and 1997, even in early 1998, there were several really good places to go on the internet that offered totally FREE online graphics compression. All such services that I once used have since turned to "paid subscription" services, and although some new ones pop up from time to time, I get all I want with PaintShop Pro, and the quality is exceptional.

If you are unsure whether your file should be saved in .gif or .jpg format to provide the cleanest resolution with the lowest filesize, then you can take any existing image in PSP and try reduction as either format - the resulting filesize appears on the right window, along with the appearance of the reduced image, and the original image appears in the left window for comparison purposes!

Graduating to more Expensive Graphics Programs

Did I say more expensive? I should have left that word out... I have used, since I began this wonderful internet endeavor in late December 1996, Corel Draw, Corel Paint, and Adobe Photo Shop, in addition to the MGI PhotoSuite and Paint Shop Pro I was using during the first month or two. Being either simple minded or extremely lazy, I found the Corel Draw an almost impossible situation, though I used it quite a bit! Corel Paint is a bit easier (strange - same people, should have the same ease...) to use, though I don't think I actually used it more than the Draw program.

Adobe Photo Shop, on the other hand, is an absolute delight for anyone wanting to create something that looks like they know what they're doing when they actually don't! The glory of this program lies in the many filters that come with it, which transform the little box you've colored into a work of art! (Some of the filters can transform an empty box into a work of art!) And if that's not enough to tickle your fancy, additional filters may be picked up in freeware and shareware versions at the Filter Factory Compendium. These filters, as I understand it, will work also with Paint Shop Pro, so just perhaps you don't have to spend your car payment on a program to get these wonderful effects!!!

Making Matching Buttons, Bars, etc. - Beginner Level

I have had a request for information on the making of the buttons and bars, so I will attempt to explain what I do to you. Again, I am not an expert in any of this stuff, and I may be jumping through strange and unusual hoops to end up with the effect I want! I'll tell you what I do, then, hopefully, your own expertise will take you in the direction of an easier way!

These directions assume you are using a bordered background. If you are using a full-page background, you'll just have to use your imagination to fill in the blanks! Now, take the existing bordered background and resize it to 100 x 100 pixels while not stretching the image to fit the new space (however your particular program does that...). This is the basis for all the buttons, balls, and lines.

To make a line, I resize the image (this time you must stretch the image to fit the new space) to 500 wide x 8 high pixels and 400 wide x 6 high pixels. Most people that use my work seem to go for the 500 wide x 8 high (if that gives you a clue). When the image is resized, save it to a new file name. Then, if you have a program that will let you "undo", take it back to 100 x 100. Note: if you don't have a program that will let you undo, then save it under some temp filename at the 100 x 100 size!

Now, take the image and resize, stretching the image to fit, to 25 x 25 pixels. Again, save to a new name, and undo. This gives you the larger square button seen on my pages, and is the basis for the larger ball button used on my pages. Then, resize, stretching the image to fit, to 15 x 15 pixels. Save to a new name, and undo. This gives you the smaller square button, and the basis for the smaller ball button. Finally, resize, stretching the image to fit, to 110 wide x 50 high pixels. This will give you the "big" button that you can write things on (like "Home", "e-Mail", etc.).

If you didn't accomplish the above steps in PaintShop Pro, it's time to sign off and go there! Pay close attention to why I go there next, because you may just have some kind of fancy way of bypassing the program! When at first you arrive, you call up the first .gif, then do colors, increase color depth, 16 million colors. Now go to image, special effects, buttonize. When you're there, you may adjust the depth as you see fit to accomplish your need - I usually use a depth of 13 and select the "transparent" radio button. Having accomplished this with the bars and the 110 x 50 large button, I save each back to 256 color .gifs, then move on to the small squares.

Open the 25 x 25 square and complete the steps above, including saving. Then, again go to colors, increase, 16 million. Now, go to image, deformations, circle. This will give you the sphere (ball) look. When saving, be sure to select "save as" so you can give the file a different name from the square! Also, when in the first "save" screen, select "options", then set the transparency to the background color, and select "OK". Repeat these same steps with the 15 x 15 square, and your work here is finished!

While you now have perfectly acceptable and attractive bars and buttons, I normally go one step further from here into Adobe PhotoShop and use a plug-in filter I picked up at the Filter Factory Compendium to further buttonize everything except the balls. As mentioned above, I understand these plugins work with PaintShop Pro, so I suppose you can use them from there!