Contrary to popular
belief, tiling a background
on a web
page can truly be
accomplished with
style. Although most
designers would agree
that tiled backgrounds
are akin to glittery,
flashing, animated
gifs, use the following
tips for creating tiled
web backgrounds or
printed pieces with a
seamless result.
The first item to consider
is continuity. All
sides of your tile are
going to be touching
each other, so
you need to select
or create an image
that, when repeated,
doesn’t appear to
be—but appears as a
single piece of art.
DG art director Sam
Berkes started with a
216 X 216-pixel document.
1. Laying out a
series of guides, he
experimented with
colors, gradients and
shapes to generate a
subtle foundation tile
to use as a repeating
background.
Note: To verify the
consistency of the
newly created background
tile, follow
steps 2-5.
2. Choose Edit >
Define pattern. Name
the pattern “background
image.”
Click OK.
3. Create a new document
in which to test
the background tile.
Berkes chose a 1024
X 768-pixel document—
a typical web
page dimension.
4. With the new page
set, choose Edit > Fill.
In the resulting Fill
dialog box, choose
Use > Pattern. Choose
Custom Pattern >
“background image.”
Click OK.
5. View the pattern
closely to see if your
tile has repeated correctly.
Make any necessary
changes to the
original tile and repeat
the process to test.
Once you have a tile
that works as a seamless
image, save it for
web or print use.
Experiment with a
variety of tiles to
develop a feel for
those patterns that
provide continuity
and give you a unique,
original backdrop.
