Welcome ... I'm glad you stopped by for
Graphic + Internet related tutorials . . . Make a seamless tile background
from an image, drawing, or whatever!


This was created in Paint Shop Pro© version 5. Version 6.x, and 7.x are similar enough so that you can use this tutorial, and, a lot of the steps would be the same in other graphics programs. I've written this using terminology that, hopefully, is familiar to you, as you should be familiar with using PSP (or any graphic program) before attemping this seamless tile background tutorial.


Using PSP 5, 6, or 7; lets me create items on a transparent background, which is helpful in a lot of situations. If you're using something else, you might be able to use the color-picker to set your background color on the various "steps" and copy an item, then paste it into your work "as a transparent selection". I know you can do that in PSP 4.X versions.

For this seamless tile example,
I used the glass balls tube from Hoods (site is gone now). You can pretend these "things" are whatever item (or group of items) you want to make a seamless tile out of. To make it easy, I started with an image that's 200 pixels by 200 pixels. I know that it will have 4 'quarters' that are 50 pixels by 50 pixels each.

Place your items as you wish in the image. Once you're at a point that you feel you're happy with the arrangement, and just need to "fill in" the edges ... stop and "re-arrange".
I call this ... "stop, chop and switch".

seamless tile step 1 img seamless tile step 2 img

  • Opened a new image the exact same size as my original, and color the bottom layer blue (or other color that is not in your background).
     
  • On your semi-done background tile image, use the selection tool, choose 1/4 of the tile, then choose "image | cut".
     
  • Click on the new (blue background) image to activate it, and do a "image | paste as a new layer" positioning my top corner piece on the bottom, in the opposite corner.

seamless tile step 3 img

Continue cutting the other 3 areas, placing them as layers in your new image.
Position them so you will switch all the corners, in an X pattern.

seamless tile step 4 img


The reason I choose a background color different than my original image, is so that when I'm positioning the pieces, I can make sure I have not left any gaps that would throw the outside matching edges off-kilter.

 seamless tile step 5 img

 
Now you know your outside edges will match up perfectly ... you can finish off the inside as you like. Be careful not to go over any outside edge!

When you're done, you can flatten the image (layers | merge all) and save as a .gif format or .jpg format image.
 

seamless tile step 6 img   seamless tile step 7 img

That's all there is to it. Granted it is some work,
but, you will be rewarded with a seamless tile every time!

Now that you understand the concept done by hand (flipping around the four corners of the graphic) I'll tell you about a filter that does that very same thing for you !

It's one of Sandy Blair's Simple Filters. Go to Sandy's site, and download the "Half Wrap" filter. Apply the filter to your graphic (it switches the 4 corners), make your adjustments down the center, and across the center to blend in all four pieces, then apply the filter again, to put your image back the way it was originally!

You can install that filter in PSP, PhotoImpact, Photoshop, or other graphic program that uses filters, and the job of making seamless tiles will be a lot easier! If you'd like more filters, a website that has links to tons of filters is here.

Here's four of the finished tiles in a block ... so you can see that they blend seamlessly.
(also the 2 backgrounds shown/used on this page is the same method)

seamless background tileseamless background tile
seamless background tileseamless background tile




Tutorial © 1999 Roxy Flanagan
These copyrighted graphics are for free use, for this tutorial purposes only.
The tutorial graphics shown on these pages may NOT be placed in any collection or sold,
or copied and placed on ANY web site, or distributed in any way.
If you want to share this information with others, send this URL (web page address) to them!
Floral tile background © 1998 Roxy M. Flanagan.

Tube Use + Graphic Creation Tutorials:

Using TubesSeamless BorderSeamless TileVector Text on a Path using PSP
Combining Graphics and HTML
Fancy HTML tutorial:Triple Table HTML Page Layout

Webmasters, see the "Web Page Help" section for LOTS of information!

Internet Users Tutorials:
Downloading
from the Internet
Using WS_FTPUsing WinzipInstalling both
pIRCh and mIRC
Popups
+ fancy IRC text

Tutorial List Page (+ links to more tutorial websites) ... Tutorial Rings Page

www.AutumnWeb.com SITEMAP


... total site menu @ Roxy's : Terms Of Use : Privacy Policy : Questions?
Copyright © 1997- by Roxy M. Flanagan + licensors; All Rights Reserved.
Links to MORE free graphics sites, Roxy Recommended!
Back to entrance + webrings @ Tutorials : Web Page Help : Tubes :
Roxy's Renditions™ @ http://www.autumnweb.com/Roxys/
Web Site Copyright © 1997- by Roxanne M. Flanagan, Autumn Web www.autumnweb.com

Roxy Recommends:
Autumn Web
Web Development

Personal+Business
Custom Web Graphics