This tutorial explores the features and uses of Photoshop 5.5’s type tool. Photoshop 6 uses a different type tool which we shall cover in a future tutorial, though a lot of the techniques mentioned here will work in Photoshop 6.
The type tool dialog box
Select the type tool by clicking on the big ‘T‘ in the Tools palette. Move the cursor over your document and it will turn into an I-bar. The type will appear wherever you click. Click somewhere in the image and the Type Tool dialog box appears:
Let’s start by looking at some of the options in the dialog box.
Lets you choose the font to use for this piece of type from all of the fonts installed on your computer.
Underline / Faux Bold / Faux Italic
When any of these boxes are checked, that style is applied to your current text or selection.
Lets you select the (vertical) size of the text. You can use the drop-down box to specify the height in points, which are 72nds of an inch (useful for print work), or pixels (useful for web work).
The Color box below the Size box allows you to change your text’s colour. Note that this only applies to the entire text; you can’t apply different colours to different parts of your text (unfortunately!).
Controls the amount of vertical space between lines (in points). Pronounced as in the metal. The name refers to the strips of lead used to add space between lines on printing presses. For example, if you’re using a 12-point font and specify a leading of 14, there will be a 2-point gap between lines.
If you leave this value blank, the default value for the font will be used. If you specify a leading value less than the height of the font, the lines will overlap, which may or may not be what you wanted!
Controls the amount of horizonal space between the letters of your selected text. (NOTE: You have to select some or all of your text first!) Useful for stretching a word to fill a whole line.
Applies a baseline shift to your text, or to the selected area of your text. Values can be positive (superscript) or negative (subscript). This allows you to produce arty effects such as starting a paragraph with a big drop capital.
The three buttons on the right-hand side of the Type Tool dialog allow you to left-align, centre or right-align the paragraph.
Placing the type
When you’re happy with the type, hit OK to place the type in a new type layer in your document. If the type didn’t appear exactly where you wanted it, hold down the Control key and drag the type around with the mouse.
Re-editing the type
If you decide you want to change the text, font, colour or anything else about the type after you’ve placed it, find the type layer in your Layers palette and double-click on the big ‘T’ at the right of the layer. This will reopen the Type Tool dialog and allow you to make your changes.
Solid vs. Outlined Type
If you hold the mouse button down on the ‘T‘ type tool in the palette, you will see a dotted ‘T’ appear to the right of it (the Type Mask tool). Select this, then click in your document and add some type. The type will now appear as a selection rather than as solid pixels. This is useful if you want to fill the type with a gradient or other pattern, or if you want to use the type as a mask to obscure or cut out another layer in the image.
With Photoshop 5.5, you can easily create type that goes up and down the page as well as left to right. Hold the mouse button on the ‘T‘ type tool in the palette, and select the ‘T’ with the downward arrow next to it (the Vertical Type tool). Then click in your document to add some type. The Vertical Type Tool’s dialog is similar to the standard Type Tool’s, except the alignment buttons work top-to-bottom rather than left-to-right, and you can’t underline. Also, you can rotate the letters themselves through 90 degrees by clicking the Rotate checkbox. Cool!
Tip: Avoiding jagged type
Yes, it’s the bane of webmasters everywhere – those little jagged edges around text. You see it everywhere – on banners, headings and navigation bars – yet it’s surprisingly easy to avoid, if you know how to avoid it!
The jagged edges are called aliasing and are a feature of bitmap devices such as your computer screen. Luckily, Photoshop gives you the option of smoothing, or anti-aliasing, text by blurring the edge pixels slightly so that the aliasing effect becomes unnoticeable. Just make sure you select one of the anti-aliasing options in the Anti-Alias box in the Type Tool dialog (Crisp works well for most needs).
Note that anti-aliasing will NOT work on indexed colour images. This means that if you’re working on a GIF image, make sure you convert it to RGB colour first, using Image > Mode > RGB Color. Then convert it back to Indexed Colour again when you save the GIF. Simple!
Tip: Making your type stand out
Often you’ll want to overlay your type on a background image or pattern. If the type is of a similar brightness level to the background, it will often be hard to read:
A good trick is to create an outline around the text to offset the background. In this case the background is light, so let’s build a black outline around it. Right-click on your type layer in the Layers palette and select Effects… from the pop-up menu. Un-check the Apply box next to the Drop Shadow box, then select Drop Shadow and change it to Outer Glow. Check the Apply box next to Outer Glow
Change the Mode from Screen to Normal, and click on the yellow colour box and change it to black (000000). Change the Intensity to 200%. Notice how much easier the text is to read?
Tip: Choosing a font
Choosing the right font can make the difference between a professional-looking website and an amateurish one. Make sure you don’t use more than 2 or 3 fonts in a page, and be consistent in their usage. For example, if you use Arial for headings, don’t create one heading using Times!
As a general rule, non-serif fonts such as Arial and Helvetica are great for large type, while serif fonts such as Times and Bookman are better when you have lots of small type (as in body text).