Basics of the Type Tool
I try to set as little type as possible in Photoshop
(that's what HTML is for! Duh!). But most of the time I
have to integrate my type with an image, and Photoshop
just can't be avoided. Before Photoshop 3 came along with
its lovely layers, placing type on a picture was a real
pain in the ass. Either you had to create a zillion
backups that documented every single step of the process,
or you simply started over. Just thinking about those
primitive days makes me queasy. But now, whenever you use
the text tool, a separate layer is created automatically,
making it next to impossible to stick two things in one
layer unless you deliberately merge the layers together
yourself.
To get started, click on the text tool. You'll see two
tool options. The first option is the default tool, which
you'll use all the time - it puts your text in a new
layer, using the foreground color (from your tool
palette). The other option, which I discovered only while
writing this, creates a selection path outlining the
letters in the active layer. Just the thing for filling
your words with a pattern or picture (versus a solid
color) - say, putting a glowing sunset in the scripting,
bitchin' letters of "Hawaii." Since I never use the path
mode, it seems a bit over-zealous to make it an actual
tool, but whatever ... I'm an ol' grump.
Select the text tool that meets your needs, and you'll
get a cursor. Click on your open file - just about where
you want to set the type - and you'll get a popup menu
that lets you specify the attributes of your text.
What's Your Type?
Start by selecting the font (be sure to pick an ugly
one), then indicate the size of the letter (make it nice
and big). You can specify type size in two ways: by
points, which is a print standard (just remember that
there are 72 points to the inch), or pixels. If you use
pixels, remember that the size of the type will be
relative to the resolution of the file: If the resolution
is 72 pixels to the inch, and you make a letter 72 pixels
high, it'll be an inch high in the finished file; if the
file resolution is 144 pixels per inch, that same
72-pixel-high letter will only be half an inch tall.
The next input field is for leading, which specifies
how much vertical space you want between lines of text. A
good place to start is with the same number you have set
for text size. The last field is for letter spacing, which
is the space between each letter - try "0" (zip, zero,
nada) here for starters.
You can also set the type alignment and select a
variety of different type styles. Alignment is pretty
simple: Line stuff up on the left, the right, or center
it. The style stuff is pretty simple too. Make your type
bold, underlined, or italic. All
falling-off-a-word-processor easy. The only style
selection that isn't a no-brainer is the box marked
"anti-aliased."
Pro Anti-Aliasing
Anti-aliasing makes the edges of your type look nice
and smooth instead of all jagged. Square pixels appear
round because the color at the edge of your type is
gradually changed to the color of the background, creating
a more blended effect. This tricks your brain into
thinking that the rounded and diagonal parts of letters
aren't actually made of little squares, even though they
are.
If you're working with large type, you'll definitely
want to make sure "anti-aliased" is selected. But if
you're setting small type - font sizes in the 6- to
9-point range (at 72 pixels per inch) - aliased type is
usually easier to read than the anti-aliased type. But
anything above 10 points looks better anti-aliased.
Note that all this size and spacing stuff can be really
hit or miss. I always need to change the font, size,
leading, and spacing a bunch of times before I get it
exactly how I want it. That's the great thing about
layers: You can set the type a bunch of different ways,
put each try on a separate layer, and then just see which
you like later. Layers: they're what America's all about
(right up there with freedom and apple pie).
Peel Back the Layers
So you've got all your type and pictures on separate
layers and now you're ready to put everything together.
This is where layers get really good. First the basic
stuff. You can only edit the layer you have selected
(indicated by the little paintbrush icon). You can make
layers visible and invisible by clicking on the eyeball
next to the layer name. If you want, you can link two or
more layers together, which is useful if you're using the
"move" tool to reposition more than one thing at a time.
To link layers, click in the "empty" box (where the
paintbrush icon would be if the layer were selected), and
a chain icon will appear, indicating this layer is now
linked to the selected layer.
At the top of the layers palette, you'll find the
opacity slider. This lets you make a layer translucent,
which is a great, great feature. Use it to ghost back type
or layer images over one another. The slider goes from 1
percent (barely visible) to 99 percent (barely
translucent).
Next to the opacity slider is a pulldown menu that
defaults to "normal." Though normal may be the ideal for
many, go ahead and pull it down anyway. Below hides all
the amazing compositing controls. As with filters, this is
an area where experimentation is really the only way to
see how powerful these controls can be. Use them in
conjunction with the opacity slider and you can create
some really interesting effects. My favorites of the bunch
are "multiple" and "divide." These settings give you a
color that's the direct result of a mathematical
multiplication or division involving the color in your
working layer and the layers below it. The results can be
quite the pleasant surprise. Who said math was useless and
boring?
Now Flatten Up Those Layers
So you've set your type, tweaked the positioning of the
type over your picture, adjusted the transparency, and
fiddled with the compositing controls. Now you're ready to
make that image into a GIF. Before you do anything, save a
file with all your layers intact, in all their glory - you
never know when a typo or a last-minute change is going to
make you regret prematurely flattening those layers.
Once you've saved the layered file in a warm, safe,
easy-to-find place, you can make that GIF. To do so, you
need to flatten the file. If you set your type using Web-safe colors (so
they'll match all the font colors specified in the HTML),
you'll want them to stay that way, which involves one more
step. You see, when you told Photoshop to make the file an
index color, it dithered stuff so all your colors are
probably a few digits off, numerically speaking. Bad, bad
software! So, after you've converted your file to an index
color, and before you use the .gif-89 export function, go
back to the Image pulldown, over to Mode, and then down to
the bottom of the menu to Color Table.
Here you can double-click any color in the file and
edit it. You really only need to adjust the main color of
your type or any big fields of color. Make sure the RGB
values for that color are the same as the Web-safe color
you started with. If they're not (and they probably won't
be), you can edit the RGB values by double-clicking on the
little squares to get the color pop-up window. Check the
colors, make any necessary adjustments, close the
colorable window, and your colors will once again be
Web-safe. I admit this step is a little anal, but if you
really care (or someone's paying you to care) about things
looking as they should on everyone's browser, it's an
important step.
Area 51 - The Secret to Web-Safe Colors
How do you know if a color is Web safe? It's as easy as
dividing by 51. The RGB value will be a number between 0
and 255 for each color - red, green and blue. You know
your color is safe if each of these numbers is: 0, 51,
102, 153, 204, or 255 (which are all multiples of 51). So
pull up the color picker (by double-clicking on the color
swatches on the tool palette) and input some of these
numbers into the RGB boxes. You should be able to find
something close to the color you want by typing in
combinations of these "safe" numbers.
You can make your GIF's RGB value match the hexadecimal
colors that you're using in HTML (for a font or background
color) by remembering the hex equivalents to your RGB
values. Again, this is less complicated than it sounds.
Your hex number has six digits. The first two are for red,
the next two are for green, and the last two are for blue;
and ff = 255, cc = 204, 99 = 153, 66 = 102, 33 = 51, and
00 = 0. So if the color you want is red, the RGB values
would be 255 red, 0 green, 0 blue, with a hex value of
ff0000.
The homework for today is to get a picture you like and
write a headline for it. Set the type in a Web-safe color,
play around with layers, opacity, and compositing
controls. Change it to index colors, check everything in
the color table to make sure it's all still Web safe, then
export it as a GIF. Sounds like a lot of work, but it's
all pretty easy (and sometimes even fun).
|
advertisment
advertisement
Host With Us: HostingHelper.co.uk From Only $5.00p/m
