Modifying fonts for effects

19/12/2008

Some designs look impossible as web to print templates because of the amount of manipulation by hand they need. Using modified fonts may help with turning seemingly custom designs into web to print ones.

Photoshop approach

Click to view PS tutorial
Click to view PS tutorial

In this example the text is placed on a canvas and the stitches are added by hand, one by one. Once the design is complete and there is a typo, sorry, start it all over.

This approach is of no use for web to print designs.

Web to print approach

We look at it from a different point of view: what are the basic elements of the design?

We have the base font, background and stitches. The base font can be a clipping path for the texture to create realistic look of a patch. The stitches form a font with an outline only and no fill. Placing one over the other creates the same effect as doing by hand.

Web-to-print base font Web-to-print stitches font

Web-to-print fonts overlayed

Creating a modified font

The modified font (in our case it’s the stitches) must be of the same dimensions as the base font so that they match exactly when put one on top of the other (read about overlaying texts) The easiest way to achieve this is to use one font to create the other.

Any good font editor should do the trick. We used FontCreator.

Beware that the kerning and spacing for the same glyphs of the two fonts must match exactly. In our stitching example both fonts had to be modified because stitches extended outside the base font, which upset the white space balance and they stopped matching until we modified both fonts.

Stitched font glyphStitching font glyph

Template fields

Web-to-print object manager

/

In the end, the text is comprised of 2 overlapping text frames using different fonts. Both frames should have the same field name to take user input from the same form field. Read Repeating text fields for detailed instructions on using duplicate fields.

/

/

See also: