Award Sites!  ... "Bettering the Internet Experience!"

Home | Articles | Exemplary | Achievement | NovaSite
Resources |
Tutorials | Web Awards | Contact | CureNow
SEARCH | Assembly ||
USA Patriotism! | Poetry Galore

Approved Web Hosting Companies

Gold Stars of Excellence by Award Sites!

GIMP Tutorial

Making a Seamless Background Image

You can make a image and tell the browser to tile an image, but if that image is not made to tile it will not look professional. This will detract from your web site. A correctly made tile will look more like wallpaper on your wall than an image repeated over and over again.. See below to see what a seamless and non seamless tile look like.

The Canvas Size

The first thing is to determine the canvas size. This will usually be determined by the size of your brush that you are using. The canvas needs to be bigger than the largest brush that you will e using. So, if your largest brush is 350 by—350 pixels, you will want a canvas size larger than 500 by—500 pixels. Do not worry if this seems large right now.

For this tutorial I will be making a heart design. It looks like this.

Making the Tile Image

After starting up your copy of the GIMP, determine what will be your foreground and background colors.

Create a new image; File > New. Fill in the dimensions of the images and make the image transparent for now.

Using the Layers, Channels and Path Dialog add another layer to the image. This is done by clicking with the RMB (Right Mouse Button) on the Layers Dialog and selecting New Layer. This will be the background color that you wish. If you wish to have the image with a transparent background do not do this step.

As above create a layer for the image that you wish to use. Make this layer transparent.

Select the brush that you wish to work with from the Brush Dialog. Otherwise, load the image that you wish to use. It is best to give each image a separate layer. This way things can be positioned easily.

Using the brush to put the image on this later, position the pointer over the exact center of the canvas. Press the Left Mouse Button to put the image on this layer.

If an image is too large you can scale the layer by clicking RMB on the Layers Dialog image for that layer and selecting Scale Layer.

Once you have the image how you want it, flatten it. This is done in the Layers Dialog by clicking RMB and selecting Flatten Image. The image must be flattened in order to do the next step.

Making the Tile Seamless

Now we will be making a seamless tile from the image created above. With the mouse over your image, you will click on the RMB and click on Filter > Map > Seamless. This will take a little while and your image will be made seamless. It will look something like the image below.

If the images are overlapping you have not made the canvas size large enough to prodide some space between the image parts. You can add another layer to the image that is filled the the background color and you can scale the image layer by clicking RMB on the Layers Dialog image for that layer and selecting Scale Layer. You want something like the image above and not the image below when you are finished.

Scaling the Image

Now this image is too large for a web page. You will need to scale the image down to something like 128 by—128 or 64 by—64 pixels or even smaller depending on your needs.

Now RMB on the image and select Filter > Map > Tile. Then enter a size in pixels that is a multiple of the image size for the height and width of the image. Look at the created tile and see if you like how it looks or not. If not go back and modify the image. Your tile should look like the image below.

You now have your first background tile image. Save it as tile0001.png and you are done. You can find many brushes for the GIMP at deviantart.com.

Contributor

Lawrence Davis

Lawrence Davis

"Approved" Web Hosting Companies