Make your own free website on Tripod.com

Backgrounds

People use lots of different types of backgrounds on their homepages. Most work well, adding depth and color to the page. But many pages have textures that detract from the overall appearance, that make it virtually impossible to read the text written on the page. These backgrounds either have too much detail, or have poor contrast with the webpage author's chosen text color. This effect gives simple pastel color backgrounds that provide good contrast with most text colors, but which still have interesting variations of shading to enhance a page.

For this technique, start with a photographic quality picture. You can use one that you've found on the Web, in a clipart collection, or even one that you've scanned yourself. Using the Area Select tool, pick out a small section - about 150 x 150 pixels will do - and copy it to the clipboard (Edit:Copy.) Pick an area with lots of color and texture variations. The small section that I use here is from an imagefile called "img0064.pcx" that came with my copy of Paintshop Pro. After you copy your chosen section to the clipboard, Go again to the Edit menu, and paste it as a new image. You can now close your original photo.

To make this into a suitable background, first we have to remove any detail, and create a file that contains only some subtle shading. A number of deformation filters could be used to do this, but I like to use the Wind filter. Go to the Image menu, Deformations:Wind. I used a setting of 20 for this picture coming from the Left.

This is a good start, but still contains too much detail to make a good background. To give a more subtly shaded area, rotate the image by 90 degrees, and again hit it with the Wind filter. Here I've used the same settings as I did for the first deformation.

Now the image has the right lack of detail, but let's face it, the color is disgusting - much too muddy. Luckily, this can easily be improved. Go to the Color Menu, Adjust: RGB. A wide variety of settings here can give beautiful results. for the first image below I used settings of 100% Red, 0% Green, 100% Blue. The second file was created using Red 70%, Green 20%, Blue 0%. Just change the percentages until you get a color that pleases you.

So now we have an image that has the right colors and detail for a background, but we still have to make sure that it will tile well on a page.there are several different ways to do this. We could use the Seamless Tiler Filter found in the Special Effects Menu. Just select an area in the center of the image, at least 30 pixels from the edges, and go to Image, Special Effects: Seamless Tile.

I like to have a little more control of how my final image comes out. It takes a little more work, but I like the final results much better. Using the Area Select tool, choose a small part of your texture. pick an area with small color variations. Copy this area to the clipboard.

Now open a new file, about 150 x 150 pixels should do, 16 million colors, with a white background. Paste the small area you chose as a new selection. This is the first section that we're going to use to build an image that has what's called "four-fold symmetry."

Repeat the paste process, and with the selection still highlighted, go to Image:Mirror. Move the new image and place it next to the right or left edge of the last one. It's important to make these match perfectly.

Next, select an area that contains the two sections you've pasted, and copy it to the clipboard. Change your Background color to white, and paste the new image as a Transparent Selection. You should get an exact copy of what you already have. To make it match up with the last two section, Go to Image :Rotate. Rotate the selection by 180 degrees. Now paste your selection right above the other two. Again, make sure the edges match exactly.

Now we have an image that should tile perfectly, but it has all that white space around it. To fix that, select an area around your image, and again copy it to the clipboard. Paste the new image as a Transparent selection. Copy this new image - without the white space - to the clipboard, and then paste it as a new image.