1 | page 2 | 3 | 4 | 5 | 6 | 7 | 8
Variation 2: Text with patterns. Instead of using solid colors to fill the surface area of a typeface, a single image or a sequence of tiled images can be used. Seamless textures when used as tiled images can add new dimensions to otherwise a mundane design.

You should consider this design variation if you have a small number of high-quality fonts or if you just want to limit your design to a small number of typefaces. By leveraging the availability of thousands of free background textures and images from the Internet, this variation alone can create a multitude of different designs based upon just a single typeface.

Simple designs with exotic names seen on many Photoshop tutorial sites such as stoned text, leathered text, fossil text, fire text, etc. can easily be reproduced with this variation.

You should pick a seamless design if the image or pattern is small, or a single large pattern to cover the entire text. Photoshop users can generate custom textures using various techniques such as layer effects and filters (for example, noise filter to simulate wood or metal texture, wind and blur filter to simulate motion effects, and spherized filter to make circular patterns).

Tip #1: For best results, the tiled texture should be a small square (having same width and height). The texture should really be seamless so no noticeable lines or breaks can be introduced to the text design when more effects (especially transformations) are applied later. The typeface should have reasonably sufficient surface area to show the details of the texture so that the design can look more realistic and closer to the designer's goal.

This can be accomplished by using a thick non-serif typeface (for example, the commercial typeface Impact) or simply by using a larger point size. If a single image is used, the image should be scaled in such a way that either the width or height of the rectangular enclosure of the text completely encloses the image. It is important that if scaling is performed, the scaling should always be performed downward (towards a smaller size) to prevent pixellation artifacts.

Tip #2: Any graphic file supported by Photoshop can be converted to a pattern via the menu option Edit:Define Pattern. The pattern is stored at \Installed Path\Presets\Patterns where "Installed Path" is your Photoshop installed directory. To add choices and flexibility to your design, you should carefully plan, collect and create a decent number of seamless patterns and images in appropriate organized pattern libraries.

The following illustration shows a text string with different image overlay patterns. This effect looks best if the text is placed on a background having plain color instead of having another pattern. Click the eyedropper tool below to choose your background color.

GIMP Pattern 3D Green

Background:

Display 1-pixel stroke

Choose one of the following 64 patterns:

GIMP Pattern 3D Green (p01.gif) GIMP Pattern Amethyst (p02.gif) GIMP Pattern Big Blue (p03.gif) GIMP Pattern Blue Grid (p04.gif) GIMP Pattern Blue Squares (p05.gif) GIMP Pattern Blue Web (p06.gif) GIMP Pattern Bricks (p07.gif) GIMP Pattern Burlap (p08.gif)
GIMP Pattern Burlwood (p09.gif) GIMP Pattern Chocolate Swirl (p10.gif) GIMP Pattern Cork board (p11.gif) GIMP Pattern Crack (p12.gif) GIMP Pattern Craters (p13.gif) GIMP Pattern Crinkled Paper (p14.gif) GIMP Pattern Dried mud (p15.gif) GIMP Pattern Electric Blue (p16.gif)
GIMP Pattern Fibers (p17.gif) GIMP Pattern Granite #1 (p18.gif) GIMP Pattern Ice (p19.gif) GIMP Pattern Java (p20.gif) GIMP Pattern Leather (p21.gif) GIMP Pattern Leopard (p22.gif) GIMP Pattern Lightning (p23.gif) GIMP Pattern Maple Leaves (p24.gif)
GIMP Pattern Marble #1 (p25.gif) GIMP Pattern Marble #2 (p26.gif) GIMP Pattern Marble #3 (p27.gif) GIMP Pattern Nops (p28.gif) GIMP Pattern One Small Step...  (p29.gif) GIMP Pattern Paper (p30.gif) GIMP Pattern Parque #1 (p31.gif) GIMP Pattern Parque #2 (p32.gif)
GIMP Pattern Parque #3 (p33.gif) GIMP Pattern Pastel Stuff (p34.gif) GIMP Pattern Pine (p35.gif) GIMP Pattern Pine? (p36.gif) GIMP Pattern Pink Marble (p37.gif) GIMP Pattern Pool Bottom (p38.gif) GIMP Pattern Qbert (p39.gif) GIMP Pattern Rain (p40.gif)
GIMP Pattern recessed (p41.gif) GIMP Pattern Red Cubes (p42.gif) GIMP Pattern Rocks (p43.gif) GIMP Pattern Sky (p44.gif) GIMP Pattern Slate (p45.gif) GIMP Pattern Small Squares (p46.gif) GIMP Pattern Starfield (p47.gif) GIMP Pattern Stone (p48.gif)
GIMP Pattern Stripes (p49.gif) GIMP Pattern Stripes Fine (p50.gif) GIMP Pattern Terra (p51.gif) GIMP Pattern Tree Bark (p52.gif) GIMP Pattern Walnut (p53.gif) GIMP Pattern Warning! (p54.gif) GIMP Pattern Wood (p55.gif) GIMP Pattern Wood #1 (p56.gif)
GIMP Pattern Wood #2 (p57.gif) GIMP Pattern Wood of some sort (p58.gif) GIMP Pattern Geometric Tile #1 (p59.gif) GIMP Pattern Geometric Tile #2 (p60.gif) GIMP Pattern Geometric Tile #3 (p61.gif) GIMP Pattern Geometric Tile #4 (p62.gif) GIMP Pattern Geometric Tile #5 (p63.gif) GIMP Pattern Geometric Tile #6 (p64.gif)
Variation 3: Text with border. Stroke or text border also known as outline emphasizes the contours of a typeface. This makes the text string legible on any type of background as long as the border color is not identical to the background color. Most 2D editing software such as Photoshop can create text with border as thin as one pixel.

The text border can be designed as a subtle decoration or as the main feature of the text. A very thin border is more striking when used as a decoration contour with high contrast to contain a tiled pattern or an image covering the font surface. The stroked contour can be placed outside, inside, or center relative to the surface border of the typeface. Design with double-stroked contours can be very effective as decorative outlined fonts.

Photoshop provides the flexibility to keep the border opacity intact, while adjusting only the opacity of the font surface's color or image pattern. This feature gives the designer more design possibilities.
1 | page 2 | 3 | 4 | 5 | 6 | 7 | 8