In Illustrator you select the type tool and set some type. The result is, well, ordinary type. In this article we look at some things we can do with the standard basic character of type. The objective is to explore the concepts of painting our fills and strokes to achieve interesting typographic effects. The possibilities are almost endless with this very complex program. Although this article is written for Illustrator, there seems to be no reason why the techniques shouldn't work with Freehand as well since we are dealing with the basic concepts of type, stroke, fill and layers.
Basic type
One way to create type is to select the type tool, click anyplace on the work screen to set the location and establish, in memory, the mechanics for a type block. Then you type. Now all this sounds very simple and obvious, but what happens as you type is the most important part of our discussion. Each time you press a key, the computer fetches the character from memory. From the font, the vector outlines are drawn on screen and maintained in a format compatible with the font information. The artwork you see on screen is actually a representation of a character of type. Shown at left is a single word typed and then selected, not with the type selection method, but with the pointer tool.
But in illustrator, this character is the very same type of artwork, vector, that we naturally use to create our artwork. Therefore, instead of being static characters that you can do very little with in other programs, it is possible in Illustrator to access the character shapes and manipulate them as Illustrator (or Freehand) artwork. So what can you do with the characters if you consider them as potential artwork shapes? Just about anything you can do with artwork shapes you create with any of the vector drawing or shaping tools.
Type characters can exist in either one of two ways; as font information (shown above) or as outlines if you choose Create Outlines (left). Converting the type to outlines strips away the font information giving you access to the very same anchor points and handles that were used to create the character shape in the first place. Be warned that when you create outlines, the characters are no longer associated with the font and cannot be adjusted, edited, modified with he standard typesetting functions. Nor can you change the font. The artwork is no longer type, it is now artwork. Be sure to spell check and proofread before converting to outlines!
Outline type
Whether the type is converted to outline or left as font information you do have the option of using the Fill and Stroke features just as you do with any other Illustrator or Freehand artwork. Shown at left is the bottom of the Illustrator 7 toolbox. The two large squares allows access to one of the two modes of painting, Fill or Stroke. Whichever box is on top of the other is the active painting mode; in this case the solid black square, being in front of the double-box square for the stroke, means that you are in the Fill mode. If you would like to be in the Stroke mode, click on any part of the lower right box for the Stroke. It will then go to the front and block out part of the Fill box. Clicking on that double-ended arrow on the upper right of the two squares reverses the painting settings putting whatever is in the Fill as the Stroke and the stroke setting will then become the Fill. On the opposite corner is a very small double-square icon that resets the artwork to the default settings with a fill of white and a stroke of black.
Under these two large squares is a row of three smaller ones. They indicate the type of Fill/Stroke you may apply to whatever large square is active at the moment. Above left, selected, is the icon for color. With this, you can select black, white or any special mix color you wish to mix using the Color Palette (left). If you wish to use the same color over and over, you may wish to write the formula down and input it manually. It is also possible to copy the color definition from existing artwork.
The middle icon, above, allows access to Illustrator's Gradient mode allowing you to place blends inside your artwork as fills. Illustrator 7 does not allow you to use Gradients as a stroke option.
The right icon, above, is the international symbol for "None" indicating that you do not wish a fill or stroke on your artwork. In the Toolbox above, we have a Stroke of None set. We may also have a Stroke of None, if we wish. A Stroke and Fill of None may be useful for shapes that are organizational being used for such tasks as guides and other construction functions. They will not print.
Now back to our outline type. At default, we have a Fill or Black and a Stroke of None. But we can change that by assigning a Fill of None and a one point Stroke of Black. The results is shown for normal type (far left) and Outline converted (near left). Notice that there really isn't much of a difference. That's all there is to creating outline type in Illustrator!
But there is a problem. If we increase the stroke weight to three points, out type starts to fill in. At four points most of it is missing and does not look very attractive. You see, when you apply a stroke to Illustrator artwork (type in either form is artwork), half the stroke value extends beyond the limit of the outline and the other half extends inward. This then forms a limitation to how much stroke you can add to your type before you obliterate the white inside.
Best outline type
No solution is known offhand that will allow the stroke to be applied only to the inside or outside of the path. Strokes are designed to go both ways at the same time. But there is a way of preserving our white inline and still have a nice black outline. We will create a duplicate layer above the outline type. On the lower layer we make the stroke as fat as we wish. On the upper layer, we have a stroke of None and a Fill of White. This returns the inside of the type to white and whatever is outlining is outside this area.
At left is the Illustrator 7 Layers Palette where a second layer (Layer 2) is created. The artwork from Layer 1 is selected and then copied to Layer 2 merely by dragging the blue square at the far right up to the zone of Layer 2 where it turns red. Be sure and hold the Option key through the operation (Mac shortcut for Copy) as you click and drag or else you will simply be moving the artwork from Layer 1 to Layer 2! To verify that you have a copy on both layers, click on the eyeball icons at far left. They Show and Hide the layer. Do so one at a time and you will see type on each layer with the other hidden (no eyeball showing).
Now you paint each layer one at a time. The best thing to do is to Lock one of the two layers and work on the other. This ensures you don't accidentally change the settings for the wrong layer. At left we adjust the lower layer applying a Stroke of 8 points. Far too much for our basic outline!
Next, then Lock Layer 1, Unlock Layer 2 and then select all the artwork. Then apply a Stroke of None and a Fill of White. Do not apply a Fill of None as that would be transparent and our finished type will look like the illustration immediately above. White is used here as a masking color; that means it blocks out all image placed beneath.
The results of viewing both layers together is shown at left. A much more appealing outline type than the one several illustrations above. We are not limited by the decreasing inside of the type character of the simple outline type where some of the shape is give to form half the outline. We apply a White Fill on top to preserve the actual shape of the character in white.
With a fill of white we can extend our black outline as much as we wish and even merge the characters together as in this example. But what if we wanted a heavy black outline but not have the characters merge together? We can increase the Tracking so that the type characters spread apart. This is easily done to the example at left for that was not converted to outline.
But wait! We forgot to select the artwork on both layers! Be sure that you remember that our type now occupies two separate layers and that artwork from both layers must be selected at the same time to make the changes apply on both layers. Otherwise, as shown at left, only one layer receives the tracking and is now out of alignment with the top layer.
In Illustrator if you use the Type tool to add the tracking you can only do so on one layer at a time. You would have to repeat the same operation with the very same value for the other layer. If you want to adjust both at the same time be sure and select them both with the Pointer tool. Then they will both respond to the tracking change at the same time. Kerning? That must be done with the Type tool. Be sure and write down, on paper, the final adjustments character per character. Then activate the other layer and mechanically input the results one character space at a time. If the kerning is really critical it may even be easier to delete the top layer and optically adjust the bottom layer for proper spacing between the black characters. Then, when you are satisfied, copy a new second layer and give it a white fill, no stroke.
As for the version that was converted to outline, you will have to move each character, one at a time, until it looks visually pleasing. You do not have access to tracking or kerning because the type is no longer in font format. Select the rightmost character and move it to the right using the Cursor Keys. Stop when the space between this character and the one immediately to the left looks nice. Then select the two rightmost characters and adjust them. Continue until you are finished. Tedious, isn't it? Well, you should have anticipated this extra space before you converted the type. First apply tracking until the type is stretched out way too much leaving room for the outline. The best solution would be to create the outline effect entirely as font type and then convert at the very end (assuming you even have a reason to convert to outline. If not, leave the type as outline!). Shown at left is the result of moving the two rightmost characters. If you like, you may work from left to right or right to left. If you wanted to adjust only a middle pair of characters, be sure and select all characters from that point to the left or right of the point of adjustments. Never, never, never adjust just one single character in the middle of a word for that will throw it off balance with the rest of the characters.
By the way, if you are creating web graphics, you can easily spice up your type by applying a Fill color other than White to Layer 2. At left is a possible combination with each fill in a different color. The possibilities are unlimited.
It is even possible to experiment with Gradients placing blends in each of the characters. However, you must first convert them to outlines. It is even possible to have a different gradient definition in each character if you wish to go through that much trouble!
Quick Shadow Effect
It is possible to create a quick illusion of shadow effect merely by moving the upper layer slightly out of register with the lower layer. In the example at left the top layer (Layer 2) is moved to the left and top several cursor key clicks. Be sure and keep track of these movements by writing them down in case you have to make more matching type. Each layer is still independent of each other and can be manipulated together or separately. At left, to improve clarity, the Stroke on Layer 1 was reduced opening up the inside of the "e".
Inline/outline type
With two layers in the example above, we can paint both Stroke and Fill as we wish. At far left we apply a Stroke of White (a masking color) to Layer 2 and a Fill of Red. The results is shown. But again we are facing the problem of reducing the actual size of our type, now represented by red. Further, to keep the illusion in balance, the black stroke on the lower layer had to be reduced. The effect is interesting but limited in possible solutions. This is about as good as it gets keeping everything in balance.
At left we add a third layer with the top layer (Layer 3) painted with a Fill of Red and a Stroke of None. Now we apply a Stroke of White (masking color) to Layer 2 and Stroke of Black to Layer 1. It makes little difference what the Fills are set to because they will be overprinted with the Red from Layer 3. Warning: do not apply any complicated fills such as Gradients or Patterns to these lower layers because they will be imaged and then un-imaged when the upper layers are drawn on your imagesetter or laser printer! This will result in an unnecessary increase to your printing times a bit for absolutely no visual gain. White or None is probably best. A special color combination will have to be separated during printing with percentages of each applied to each process color. After this work is done it will be replaced with the colors from Layer 3. Again, a big waste of time!
With this three layer combination we can now set the strokes of the bottom two balancing them visually to get the effect we want. We have more possible combinations that produce pleasing results. Experiment with the settings until you are satisfied!
More inline/outlines
How complicated do we want the type? At left we create the illusion of a gradient by adding more layers for a total of nine. The bottom layer has a Stroke of 16 points with 10% Black. The second layer, next one up, has 14 point Stroke with 20% Black. Each layer up reduces the Stroke by 2 points and 10%. The top layer has a Stroke of None and a Fill of Blue.
Using this technique you can create any combination of outline and inlines but beware, the process is tedious. You must calculate each of the increment changes from layer to layer to keep everything even. It is best to plan the special effect on paper making a chart of each layer and the stroke and color specifications for each. Realize that if one layer is off, a lot of others will probably have to be adjusted to bring them back into the desired progression. Errors will stick out demanding they be corrected!
Our finished graphic (above), screen captured from Illustrator, shows a definite banding problem. To solve this, a Gaussian Blur was added to reduce this effect. An even better solution would have been to create the entire effect with about 18 or even 36 layers with less tone change between layers. This change was in increments of 10% and that is noticeable. The closer to zero you can get the better the results will look.
For our final demonstration, we suddenly realize we have a slight typographic error and that the word should have been "Types". Since we didn't convert the type to outlines this should be an easy task to add the "s" on the end. But surprise! The "s" must be added one at a time to each layer. Shown at left is the first few layers done working from top to bottom. It is not necessary to change the shade and stroke settings but each layer must be done one at a time. Be sure and lock all the other layers you are not working on to make sure you work methodically and keep the changes under control.
Conclusion
Today, when creating graphics for the web, we have more flexibility than ever before on what we can do with our type. No longer do we need the plain standard black type. Web graphics can be as wild as we dare allowing us to be as creative as we possibly can in our typographic art. With Illustrator there is an almost unlimited amount of power that can be channeled into our type. Experiment with layers, colors, and just about anything you can possibly imagine.For print, however, we must be more cautious. Multicolor type is difficult to print where we have to deal with trapping problems. Worse still, shades of gray do not print and are reduced to halftone dots. If they are small enough (a high halftone screen ruling) we may get away with our special effects. But with a low screen ruling, such as the ones used for newsprint work, our viewer will not see the same magic we create on screen but instead a pile of very noticeable dots.
The world of typography is changing. With today's computer and programs such as Illustrator there is no reason why we must contend with plain type. It is an exciting age filled with possibilities; many things that could never before have been imagined with yesterday's handcut rubylith! As we progress in this exciting age, watch carefully how we use our type. Many new standards and techniques are being experimented with today and there is a very good chance they will be standard typographic treatments in the future!
