Tips & Tricks: Generate Backgrounds with FilterFormula

Have you ever had the wish to create background patterns for your homepage or for a nice HTML-email but you always had the problems that every pattern shows a clear terrazzo-like rectangle-structure?

Well, there is a solution with FilterFormula and a Layers-enabled plugin host, such as Photoshop, Paint Shop Pro 5, Corel Photopaint (there you have objects instead of layers), ...

Follow the following steps and you will be able to create your own backgrounds like the one on this page (or many others!!!)

1. In your image editing program, define an empty rectangle image (e.g. 512x512 pixels) and fill it with a solid color as you like (light colors are always better!)
 

2. Create a new empty (transparent) layer above this and set it the active layer (now everything you paint will be done on this - empty - layer).

3. Paint the pattern you like on this upper layer. In PSP, you could use Tubes or you can place objects (important: the background must be transparent!). You should try to paint roughly in the imaginary square half the size of the original image in the middle of the image, e.g.:


 


4. Now generate a FilterFormula filter called "Background" (or you can choose any other name) with the following source:
 

// Generate Seamless background patterns
// Copyright (C) 1999 by ATS/Graphics
// All rights reserverd
// Unauthorized copying forbidden, no commercial use 

init {
  x2=X/2;
  y2=Y/2;
}

sa=da(x2,0)+da(0,y2)+da(x2,y2);

f1=a;
f2=min(255-f1,da(x2,0));
f3=min(255-f1-f2,da(0,y2));
f4=min(255-f1-f2-f3,da(x2,y2));
fs=f1+f2+f3+f4;

A=fs;
R=(r*f1+dr(x2,0)*f2+dr(0,y2)*f3+dr(x2,y2)*f4)/fs;
G=(g*f1+dg(x2,0)*f2+dg(0,y2)*f3+dg(x2,y2)*f4)/fs;
B=(b*f1+db(x2,0)*f2+db(0,y2)*f3+db(x2,y2)*f4)/fs;
 

You do not need any sliders or color selectors.

5. Apply the filter to the upper layer of your image. The result should be maybe like that:


 

5. You can decrease the opacity of the upper layer, so that the reader of your homepage or mail can still read the text written above this background.

6. As a last step, use the function "canvas size" or similar which will crop the image to a the upper left quarter (i.e. 256x256 pixels). Use the documentation of your plugin host for this function. The result should look like that:

Certainly you can do this on several layers, but pay attention that their background is always "transparent".

7. Now you can save this image in a JPEG format (or GIF) and use it as a background in your HTML homepage or email.

Some other examples of backgrounds (all copyrighted by Günter Schuster, ATS/Graphics, but feel free to use it non-commercially):