Type Tricks
by Heather Champ
Last week I touched briefly on set type while discussing the issue of text
set in HTML. It's become old hat to set type within graphics as a way to
avoid the current limitations of HTML, but this process can be tiresome and
time-consuming given the limitations of graphics packages. I've come up with
a few tricks to simplify and expedite design and production.
While you are designing and formulating the look and feel of text set within
a graphics application, take notes so that you can create a type
specification sheet. Even if you create all the type for a job at one time
and maintain a master document from which to copy the text from, you may
find that there are times when changes or additions need to be made. It's
impossible to edit text within a Photoshop document as in Quark or
Pagemaker, and you will have to create type from scratch that will match
your existing design. There have been times when I've neglected scratch down
the information and have had to waste valuable time trying to match
type.
What to record: Font name, any special effects added through the "style"
menu, size, leading, letter "spacing" or kerning and color. Additionally,
even if you are using sampled "Internet safe" rather than custom colors, the
easiest way to select colors is to create a separate document with a palette
from which you can sample color.
I've sampled color from my working document below and created small squares in a separate document. I can then use them to ensure that the colors remain true for subsequent updates to existing documents.
If you need to create a number of headers with the same specifications for a site, you should consider a template to make things easier. A multilayered Photoshop document will speed creation and make it easier for additional updates later on. It will also speed document creation if all of your header treatments are the same size as you won't have to fiddle with height and width specification in your HTML.
Once you've determined the look and feel of your headers, create a large document that will eventually be cropped. Arrange the type on individual layers above the background. You can create keyline layers that you can use to aid in the alignment. Once you've created all the layers and the type lines, you should be able to determine a size for your graphics. You can crop down to reduce the eventual file size--remember to leave room for descenders for subsequent file changes if none of your type currently includes them.
Save this document as a multilayered Photoshop document. When you've
finished and it comes time to create your GIFs, hide layers that you don't
want in the graphic and index. Photoshop will discard layers that are not
visible. If you use the same header treatment on different background
colors, you can paint the background for the creation of the GIF for that
file. Don't save the indexed document, but "save as" something else. You can
then open up the original file and repeat the procedure until all your
graphics are created.
This Photoshop document would have five layers including the background. The green line represents the keyline that would be hidden when the document is indexed. This keyline makes it easy to align text. The blue line is decorative pinstriping for the headers.
