Building a Tile-able background using Paint and Photo-Editor

Open Paint. (On my machine I look under Start/Programs/Accessories/Paint.) Then under the Image menu select attributes. You will need to define the size of the image you are going to build to use as a background.

On the Attributes Menu enter the size of the tile you are going to make. It can be any size, but smaller will take up less space on your website and download faster. Keep track of what size you are setting the width and height to. If you don't have an idea go on and use 70 and 70 like I am doing. Then click on OK.

Since the picture you are working on is small zoom in so you can see it well. To do that click on the magnifying glass and select one of the magnifications. 6x works pretty well if your image is 70 by 70.

Now draw a simple picture. I just drew the outlines of squares but you can get as elaborate as you want. However you probably want the edges to be mostly boring for now.

After you have drawn a picture that you are reasonably happy with save it as a bitmap. Use file/save-as and when the file selection menu comes up type in a name and select .bmp as a type.

Now you need to set the image as a tiled background. This will repeat your image over and over again as a background to windows.

Minimize all your open windows so you can see the background clearly. Then use shift/Print Screen to capture an image of the screen

Go back into Paint and paste your image. That is under edit/paste.

Zoom in really close to your picture. Then you need to select a new rectangle to be the tile for your background. It needs to be exactly the same size as your original picture. If you look down in the right corner of the screen it will tell you how big your selection is. You also want it to cross across the blank spot that was the edge of your original picture. This can be tricky but it is easier if you zoom in so your picture is really big.

After you have selected the image copy it using Edit/Copy. Then open a new file. It will ask if you want to save the old one. I do so I can back up if I make a mistake.

Then paste your selection into the new image using Edit/Paste.

Now you have a rectangle that will tile to your original image but has the original edge in the middle. (You can test the tiling by saving it as a bitmap and then setting it as a background if you like.)

Now add some more stuff to the middle of the image. Be careful not to put anything on the edge as that will mess it up.

If you want you can save this as a bitmap and set it as a background and repeat this section again. Eventually though save it as a tiff file. 

After you have an image saved as a tiff file go into Microsoft Photo Editor and open a new file.

That will ask how big a picture you want. Pick a relatively small size that is at least twice as big in each direction as your original tile. (In this example my tile is 70 pixels x 70 pixels and my new image will be coming up 400 pixels in each direction.)

To get the lines in the background use the Chalk and Charcoal effect. That is found under Effects/Chalk and Charcoal.

That will bring up an options menu. Play around till you get a pattern you like. (I was lazy and took the default.)

After you do that, bring up the Texturizer. We will use it to put our pattern in the background. The Texturizer is under Effects/Texturizer.

On the Texturizer panel, select the pulldown next to Type. Then select Tiff file.

That will bring up a file selection box. Pick the tiff file you just created in Paint. (If you forgot and saved it as a bmp, like I always do, go back and save it as a tiff this time.) After you select the file click on Open to open it.

Now you can play with these controls till you get an effect you like. Be aware that changing the scaling to anything but 100% will change the size of your tile.  If you change the scaling instead of the tile being the size it started as it will get multiplied by the scaling. For example if you used a 70 pixel X 70 pixel tile like I did and you change the scaling to 50% your tile will be 35 pixels by 35 pixels. (I avoided the math by using a scaling of 100%.)

That almost gets me to the background I want.

But there are a few problems I want to fix. I want a single tile to use on my web page so it will be really fast and the streaks won't match neatly around the edges. But I can fix this the same way I built the pattern. So I save this as a tiff and then I open it in Paint.

Now I select a square that is exactly my tile size. Remember to take into account scaling if you used it.

Then I make a new file and paste it in. This is just like I did before.

Then I save it and set it as a tiled background.

Then I do a screen capture using shift/Print Screen. In Paint again I open a new file and paste it using Edit/Paste. Then I zoom way in. Can you see the lines from the edges of the old block? I am pointing at them with arrows. I select a section around it making sure that it is the right size. Then I copy it, open a new file and paste it.

Then I use the paintbrush to clean up the lines. Use the eyedropper to pick the color to paint with and paint across the lines. When you are happy that you can't see the lines you are done in Paint.

To set the tile as the background, in your Body statement add a background. It looks like this:

<body background = /E:/Miscellaneous/Talk/Demo%202/version2/squares8.bmp>

It is a little hard to read the text, so I am going to change the color a little bit.

In Photo Editor select Image/Balance. I wanted to make the whole picture brighter so I  raised the brightness. And I wanted the background to be closer to all the same brightness so I lowered the contrast.

Then I decided I would like the whole picture to be blue. So I clicked on the pull down arrow at the bottom of the panel. It lets you choose between three basic colors.

To make the whole picture blue -- select blue on the pull down and raise the brightness. Then you might need to select on red and green and lower their brightness.  If you play with all the different options here you can set your picture to nearly any color. So play with it till you get something you like.

To use your background in a webpage you need to add a background to the body statement. It will look something like the HTML below.

<body background = "jpegs/squares.bmp">