Dynamic Graphics+Create Magazine
HOME   |   MAKEOVERS  |   ARCHIVE  |   EDUCATION  |   JOBS  |   ADVERTISE
Topics
Tutorials
Create a halftone border in Photoshop.
Add a halftone drop shadow using Photoshop.
Tutorials
How'd They Do That? - Repeating Backgrounds
In Photoshop, make your background work with you, not against you. 
February/March 2007
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.

Events & Courses

WebMediaBrands
mediabistro learnnetwork freelanceconnect SemanticWeb
Jobs | Events | News
Copyright 2009 WebMediaBrands Inc. All rights reserved.
Advertise | Terms of Use | Privacy Policy