SEND E-MAIL      HOME : TUTORIALS :  Seamless Backgrounds     SCENIC-ROUTE


    

Note: If the backgrounds seem to interfere with the text, then use the controls on the front of your monitor to adjust as: these images are basically designed and viewed, on a good quality graphics monitor, no backlight behind the monitor, no overhead, and with the brightness at about 50% and the contrast maybe up as high as 80% or more. It would be best to set gamma at around 2.0, more or less - it's a separate control from contrast and brightness, maybe in the control panel for your video card. Gamma affects the way you see midtones.

[Note: My own images are free for non-commercial use, as described here. Please contact the artists mentioned if someone else was the designer.]

 

As mentioned elsewhere, here, there are a few ways to produce seamlessly tiled backgrounds:

1.
 

(emphasize the borders, so that you shamelessly tile as tiles/blocks - not really what's meant by 'seamless', though - or see the forest.bmp in the Win95 desktop wallpapers),


2.
 

use some sort of mirror/reflection, such as a kaleidoscope, as I do quite frequently for the non-photographic, synthetic tiles, using FF Gallery A Kaleidoscope II,


3.
 

fade/blend the borders to try and create a seamless image when tiled. Most paint programs have these 'seamless' blend filters built in. Sometimes they work, and sometimes it looks worse. This example was created, however, with a speciality program, called - xFader.


4.

 

wrap the edges, maybe using my filter, and then by hand, manually, paint over, clone over, patch over, whatever seams so that no matter how you wrap it, afterward, you can't spot edges, again. Probably the most time consuming method, but also necessary for photo-realistic seamless textures or backgrounds.


5.
 

wrap the edges using a distortion wrap, which brings the edges pushed off screen back around the other side as it were; used quite frequently in some of the more recent backgrounds and textures, here. You can still have a prominent border even, but it might be rotated to an angle. As long as the eye doesn't see obviously rectangularly tiled blocks.


    

 
    

 Light or Dark ?

Once you get the basic image created, then it's a question of whether to darken it, or lighten it up. The darker backgrounds are generally easier to create, and tend to allow for more detail than the light backgrounds, as well. The light backgrounds often have to be generally quite faded, that is, particularly if it's an image, or photo, rather than a more geometric pattern.

The light range tends to be from average medium gray to white. Adding some color might tend to help, and generally you want the background to be a bit fuzzy or blurry, with rather low contrast, if it doesn't look too bad that way: e.g. a 1890s and photo example. I like to

  1. lower the contrast first, not too much though,
  2. then try a slightly higher luminance and color boost,
  3. then maybe some gamma correction to make it lighter,
  4. then repeat again, with the lowered contrast, gamma,

until it looks good underneath even fairly small text, and even tends to draw your eye to the text, rather than the background. But it's a matter of taste. And, admittedly, if you want to retain a fair amount of detail, it might make it difficult to read small, normal text, even if the image is pretty faded out.

Another method of lightening up the background might be to modify opacity and then boost color, in PSP 4:

  1. capture the whole image and modify opacity to 40 or 50,
  2. cut and paste, probably tending to get something of a monocolor result,
  3. then try boosting the colors equally, to brighten,
  4. along with increasing luminance and gamma, as above.

Darker backgrounds, again, are easier to create because they allow for more detail, even in the shadows. The idea is still to emphasize the text on top, so that if one has to edge the gamma a bit darker, then it should be darkened. As with the light backgrounds, the contrast should be pretty low - the shadows shouldn't be so much darker than the highlights, and vis-versa. So if you have to use the retouch brush to alternately darken or lighten small areas to help even the whole thing out, then by all means do so.

There's the possibility, as well, that a monitor is not adjusted to a normal brightness, or is just otherwise 'kinda funky'. Some kiosk monitors might be very dark, for ex., so that even bright backgrounds will seem dark, and dark backgrounds will just pretty much be black. Whether one tries to allow for these really awful displays is a personal decision (frankly, I wouldn't). But if you want a 'kiosk compatible' page, you might have to use either the very brightest backgrounds, or else go dark (realizing that the dark background will fade literally to black on a monitor with such low brightness). At any rate, as a general rule of thumb, it might not hurt to use larger text sizes or slightly higher contrast between text colors and background than you might even ideally prefer. And it might not hurt, as well, to switch between various screen resolutions and color depths, if 'just to see' how the page holds up.

 

 

As for the programs one might use to do this stuff, in general, there are, of course, the standard full graphics programs, like PSP, like Photoshop, like various others, that are used to produce seamless tiles. But there are also a few programs designed just for this purpose, some shareware, but at least three freeware:

One is Reptile, from Sausage Software. It provides built in animation of shapes as they are transformed, and can begin with any image, or a random pattern. Care might be used, though, to make sure the pattern at a particular stage of animation/transformation is really seamless, and that it doesn't tend to look like all the other patterns generated by Reptile. (See also the animated backgrounds at this site - generated with Reptile.)

Then there is Harm's Tile, which I highly recommend. It seems to use many of the same filters as the program mentioned just below, but in a trimmed down way. Perhaps that design makes it actually easier to concentrate on just certain particularly useful filters. I don't know. I have hundred of backgrounds, bumps and textures either wholely generated by this program, or just modified by it. Aside from PSP, itself, this is the program I most tend to use. I use it constantly. Great program!

Thirdly, there is Texture Maker from Teralogic. This is really a full on, feature rich program, which runs scripts, has many, many filters, and like the two above is, free. It was a come-on for a commercial version, which is now being sold. You will probably be surprized at how much stuff there is to play with in this program.

The idea is to mix and match, basically, run an image through some PSP or Photoshop filters, move over to Harm's, see what more can be done. Maybe one can then run it through Reptile to see what can be found. Or take a Reptile texture, and try to smooth it, change it, lighten it, whatever, using PSP. Or take that texture and transform it with Harm's. Wherever the imagination takes you.