BlogmyQuery – BMQ

Sometimes the most appealing products are not those that are priced the most reasonably, but the ones whose packaging goes beyond functionality and crosses over to the artistic. Alberto Alessi said it best when he described his reason for his own aesthetic designs:

“More and more people buy objects for intellectual and spiritual nourishment. People do not buy my coffee makers, kettles and lemon squeezers because they need to make coffee, to boil water, or to squeeze lemons, but for other reasons.”

Some of the most aestheically pleasing packages and products rely heavily on excellent typography. At times, the perfect font is all that is needed to take a design beyond the ordinary, and very often a great font can stand alone with no other graphics or design gimmicks added to it.

The following collection of products and packages all have one design element in common: they all boast the use of fantastic typography. Take a look at some of the methods and reasoning behind these designer’s packaging projects and let each one inspire you to excellence in your own product and packaging designs.

Bzzz (Custom Font)

This packaging for Natural Armenian Honey not only includes a box shaped like a honeycomb, but the custom-made font for the title stunningly combines the flight of bees and a honey dipper. Bzzz packaging was designed by Backbone Creative, a design company from Armenia.

Indian Stretchable Time, the “Ish Watch”

Designed by Hyphen Brands from India, this packaging for the “Ish Watch” was designed with the Indian culture’s view of time. In India, when someone says to arrive at 3:00pm, they expect the arrival at any time after 3:00, hence “3-ish.” The typography includes several different Italic font versions. In another humorous twist, the three hour marks are listed as “12-ish”, “3-ish”, and so on with no other numbers included.

Acushla Organic Olive Oil

The custom-made font used for the title of this olive oil package at the same time matches and contrasts the logo graphic. Like the graphic, the letters have an organic flow to them, which fits nicely with an organic brand. The green color of the font is reminiscent of green vines as well. Yet unlike the graphic which flows together seamlessly, the tags and flags of the letters point in different directions, almost like wild branches of vines that someone attempted somewhat unsuccessfully to prune into perfection.

Parish Brewing Co.

The idea behind this captivating package design by Cargo Collective was to capture the southern feel of the Louisiana start-up brand. The custom font gives the bottles an authentic vintage look and feel. Notice how the text on the box and labels appears partially faded, imitating painted letters on a weathered wooden sign.

Proof – Scotch complimentary kit

This label for the complimentary kit of the scotch tasting app were each hand-stamped (both the label and the app were designed by Zeus Jones). The fonts are a blend of the custom designed Proof typography as well as a script logo taken from the Zeus Jones cycling jerseys. The % on the lids were created by hand-dipping each one in wax and stamping the wax using the stamp from the Proof typography.

Adams & Harlow

Designers Anonymous created the identity, website, and packaging for the Adams & Harlow brand of pork pies. Adams and Harlow is owned by two sisters and they named the company in keeping with the rivalry between their grandfathers’ pork pie companies in the early 1900s. The typography is based on a sans-serif font from the 1900s with some unique touches added in. For instance, the designers created the “S” to look like a butcher’s hook.

The Cloud Factory

This whimsical wine label designed by Alastair Duckworth and Ross Hamilton, both of Biles Inc., needed to stand out on shelves while also representing the unique story of this New Zealand brand. To create a look that reflected the “land of the long white cloud,” the designers created a hand-rendered typography with cleverly original lettering. The “T”, “C”, and “F” have a very old-fashioned feel to them, and almost remind one of the typography from the posters for the World’s Fair events in the early 1900s.

Selva Pasta

Kayhan Baspinar created an entire font design specifically for this brand. The lettering is both sophisticated and indicative of the shape of pasta at the same time. The extended lines of the letters and the dramatic shape of the upper curves of a few of the letters, such as the “C” and lowercase “m” and “n” are just a few of the unique touches that make this font stand out.

The Manual Co.

If you peruse the popular package design submission sites, then you may remember this one from the past. Created by Peter Gregson, this packaging for boots, bags, and other accessories has custom white hand-lettering set on a black background. The unique typography looks a bit like artistic chalk typography on a chalkboard and really gives it a high-end, artistic look and feel.

Jacques Prevert, CHOSES ET AUTRES

This beautiful font was created specifically for the cover of Jacques Prevert’s book, CHOSES ET AUTRES. Marijana Zaric did an excellent job of designing this typeface full of bold lettering and rounded edges. The hand-colored look gives it even more depth and character.

Fizzy Lizzy

The custom font designed for these fruit flavored carbonated beverages looks “fizzy” and fun, and leaps off of the label. The bubbles rising from the two “i”s in the logo and the evaporating lettering makes it appear as if the text is floating underwater.

Melt

This custom designed font seems like a cross between the Ark Doomsday Light font and the Priori Sans OT Regular font. The best part of this font design? Along with the dripping chocolate graphics , it looks delicious enough to make anyone crave chocolate, even if chocolate isn’t your forte.

Askul Garbage Bag

An amazingly creative design for such a common household item, this garbage bag packaging was designed by Stockholm Design Lab. The letters falling into a “trash pile” at the bottom of the box are all from the good ole’ font family Helvetica.

Peter Wetzer Wines

Wetzer commissioned designer Laszlo Mihaly Naske to create a calligraphic label for his wine collection, in keeping with a “homemade” theme. Naske explains that his original idea was to go with a more bold approach in the design of the hand-crafted letters, but Wetzer wanted something more simple, traditional, and straightforward. The winemaker chose well – the handwritten font is quite stunning alone and may have been overlooked if too much more was included in the design.

Billington’s Sugar

This redesign by jkr of Billington’s sugar packaging adds much more personality than the previous design. The colorful font graphic front and center capture attention quickly, and the faded font used for the company name adds to the traditional look and feel, an element of the design that was very important to the client. The main font used looks similar to Bebas Neae or a popular Gothic font family.

Fyne Ale

Look closely and you’ll see that Good Creative designed the headlines/titles of the different types of ales each with a different font that matches the name. The Maverick font includes only flags and tags on certain letters – the “A”, “R”, and “K”. In contrast, the Piper’s Gold font is very fancy with a decidedly western look and feel.

IQ

Another great design by Good Creative, this redesign for IQ, a hair product brand, is quite staggering when you see the before and after pictures together. The idea from the brand letters came from strands of hair, especially on the hook of the “Q”.

Before

After

Backyard

This illustrated font was created by Fabien Barral, a phenomenal illustrator and graphic designer. The shape of the font looks similar to Helvetica or another type of simple sans serif font, which gave Barral lots of room for creativity within the illustrations themselves.

Nagging Doubt

Designed by Brand Ever with the label illustrated by Dana Tanamachi, this wine brand was started by a corporate man with a long-time dream he never could ignore, hence the name Nagging Doubt. Tanamachi drew the entire label by hand on a chalkboard, in a font style similar to grape vines for the Voigner label. The Pull label still resembles branches a bit with the “pulled” lines of the letters “N” and “G” but is much more crisp and clean of a font. Each label comes with a QR code that leads to the Nagging Doubt website on which visiters can view a stop motion film of Tanamachi’s illustration process.

Stave and Hoop

Force & Form created the labels for this brand of strong wines, keeping in mind that this wine is intended to be a gentleman’s alternative to whiskey or beer. The typography layout and fonts look similar to the labels found on tonics from the days of the wild west.

Typocolate

This simply delicious typographical project was created by Dynamo to use as Christmas gifts for clients, friends, and family. Each chocolate bar is engraved with a different daily mantra written with a completely original font design. Decorative font styles grace the face of most of the bars, but one also includes a light sans serif font design.

Princess Bride Custom Wine for Alamo Drafthouse Cinema

Every year, the Helms Workshop creates a new design for the Alamo Drafthouse Cinema’s wine collection, always with a certain movie in mind. This year, they chose The Princess Bride in honor of the film’s 25th anniversary. The brand name is Bottle of Wits done appropriately in a bold sans serif font. On the side of the box packaging are phrases from the movie on which various font styles (all sans serif) are combined with graphics to illustrate the term. In this design, a more plain font was certainly the better choice as it allowed for more creativity with graphics, font layout, and other stylistic features that illustrate favorites from the film.

Angioletta

This simple yet elegant design for a sweet, white wine from Wein-Bauer, Inc was created by Kaleidoscope. Obviously, the target audience is younger women, and the font certainly portrays this focus. The light, script font similar to a Vivaldi or Edwardian Style Script typeface is airy, flowing, and feminine.

Sepp Moser

Each one of these quite original wine labels were created by Hans Renzler along with Brace.at on an actual typewriter. Each wine bottle number is handwritten by the winemaker himself, giving these wine bottles a very “collector’s item” sense.

Artisan

The typography on these wine bottles created by Public Creative look like the font stamps from an old letterpress printing press. The title of the wine is in silver while the rest of the letters are charcoal black, which makes the title stand out but also gives the “stamps” for the title a never-been-used appearance.

Tucumen

This Argentinian wine from Budeguer was designed by Guillo Milia. The designers tried to keep the wide variety of cultures in mind in this design, blending a variation of bright colors and font styles to give this impression. The main heading font style is similar to a calligraphic font such as Zocalo. In fact, various script fonts are used but so is a plain serif font, along with a very stylized, medieval-like font used for the brand name.

Cuboid

The font style of the brand name fits perfectly for this boxed wine aimed at millenials and designed by Force & Form. The packages have a video game look with the 8-bit characters, limited colors, cubed font, and tagline “Surrender your corkscrew.” One side of the box invites interaction with a list on which customers can write their favorite wines, done with a mixture of a clean sans serif font and a script font to emphasize a single word in each line of text.

All For Now

But that doesn’t mean that the discussion is done. Quite the opposite, it is just getting started. Now it is your turn. What were some of your favorites from the showcase? Do you know any other products and packages that have that fantastic typography touch? Take a moment and tell us about them in the comment section.

(rb)

For drawing and painting digital illustrations, Adobe Illustrator is a favorite among designers for many reasons. One of the reasons is some of the amazing time-saving features that come with it. The Symbols feature in Illustrator does just this: it saves valuable time by creating a “symbol,� or copy, of an object. This means that all of the time you have spent creating a minutely detailed flower does not have to be repeated. Instead, simply save the flower as a symbol for future use. Plus, symbols greatly reduce the size of image files.

Illustrator makes it easy to use symbols multiple times within a document as well. With the Symbols tools, you can add and alter several symbols at once. And in CS5, you can now change the settings for a symbol while editing. Another benefit of symbols in Illustrator CS5 is that you can change a symbol to a movie clip, making it easy to export to Adobe Flash. You can also make sure that the symbol scales correctly for your interface design by choosing 9-Slice Scaling while still in Illustrator.

CS5 makes working with symbols even easier by adding a few new features, explained below. If you are working in an earlier version of Illustrator, you will still be able to follow along and become as much a master of symbols in Illustrator as the next guy.

The topics covered in this article are:

1. Basic Symbol Use
   • Symbols panel 101
   • Creating symbols
   • Symbol libraries
   • Placing symbols
   • Breaking links
   • Changing symbol options
   • Adding or duplicating symbols
   • Deleting symbols
   • Redefine a symbol
   • Swap/replace a symbol
2. Advanced Symbol Use
   • Control window
   • Editing as a graphic
   • Registration point edits
   • 9-Slice Scaling edits
   • Sub-layer for symbols
3. Symbolism Tools
   • Symbol sets
   • Symbol Sprayer tool
   • Symbol Shifter tool
   • Symbol Scruncher tool
   • Symbol Sizer tool
   • Symbol Spinner tool
   • Symbol Stainer tool
   • Symbol Screener tool
   • Symbol Styler tool
4. Symbolism Tools Advanced Options
   • Options available to all symbol tools
   • Symbol Sprayer options
   • Symbol Sizer options
5. Make Symbols Your Best Friend
   • More resources

Basic Symbol Use

Some of the actions for Symbols are quite easy to figure out just by playing around with them, while others take some explanation. Below is an overview of how to use symbols, but remember that you can move, scale, rotate, reflect and skew (shear) symbols just like other objects.

Symbols Panel 101

To open the Symbols panel, click on the button that looks like a clover, located in the menu on the right side of the Illustrator screen. Or go to Window → Symbols. As always the case with Adobe software, there are several ways to complete a task with Symbols.

The drop-down menu in the upper-right corner of the Symbols panel offers access to nearly every action for the panel, including creating a symbol, editing a symbol, breaking links, changing the view in the panel and more. To save you time, along the bottom of the Symbols panel are a few shortcuts to the most commons actions. You can also use the options in the Control window at the top of the screen.

To select a symbol in the panel, click on the icon. With a symbol selected, you can now edit it, place it on your artboard, delete it and more.

You can also organize the symbols in the panel by clicking and dragging them around. Or choose “Sort by Name� to change the view of the icons from within the drop-down menu.

Creating Symbols

Nearly any object can be made into a symbol. A couple of exceptions are art that is not linked and groups of graphics. Make sure the Symbols panel is open.

Click on the “New Symbols� icon (it looks like two white squares, one smaller than the other) at the bottom of the Symbols window, or drag an object directly into the Symbols panel. Illustrator will automatically turn the object you have selected into a symbol and also add the object to the Symbols window.

If you do not want your original object to become a symbol, then hold down Shift while creating the new symbol. This allows you to quickly create a symbol while retaining editable work on your artboard.

In the Symbols dialog box that appears, first specify a name, one that you will easily remember later.

Next, select the “Type� of symbol you want to create: a graphic or movie clip. If you will be using the symbol only in Illustrator, it does not matter which you select. The only reason why the two options are available is if you want to use the symbol in Adobe Flash: a movie-clip symbol in Flash can be manipulated for animation purposes, while a graphic symbol in Flash will remain static.

Symbol Libraries

The Symbol Libraries provide a clean way to organize the symbols that you acquire. To open them, click on the Symbols Library menu in the far left of your Symbols tools, or go to Window → Symbol Libraries → [symbol]. The library that you select will open in a new window. When you choose a symbol from an open library, it is automatically added to the Symbols panel.

Remember that you can change the symbol once it is in your panel, but the original symbol in the library will never change.

Adding symbols from the panel to your library is easy but can be confusing at first. Begin by deleting any symbols that you do not want to add. (To quickly remove unused symbols, choose “Select All Unusedâ€� from the Symbols panel menu.) Then choose “Save Symbolsâ€� from the Symbols Library menu button, or go to the Symbols panel menu and select “Save Symbol Library.â€� Name your symbol library, and save it to the default Symbols folder. You can now find your new library folder in Symbols Library Menu → User Defined → [symbol].

Note: You can create a new library from any symbols, whether default Illustrator symbols or your own. Just drag the desired symbols into the Symbols panel, and follow the steps above to create a new library.

Saving symbol libraries in locations other than the default library folder enables you to more easily share your created symbols with other designers. First, create your library as explained in the section above. When you get to the step where Illustrator asks you to choose a name and location for your library, choose a location other than the default folder (such as the desktop or “My Documents�). Remember that you can always access the symbols in this alternate location when working in Illustrator by choosing “Other Library� from the Symbols Library menu.

Placing Symbols

To place a symbol on your artboard, simply click on the icon in the panel and drag the symbol onto your board, or select the Symbol icon in the panel and then click the “Place Symbol Instance� button. Dragging the symbol is helpful if you have a specific place for it, whereas the “Place Symbol Instance� button works well when you want to place several on the board but are not yet sure where.

Breaking Links

The “Break Link to Symbol� button simply turns the symbol that you’ve placed on your artboard back into a regular graphic. While changes such as move, scale, rotate, reflect and skew (shear) can be made to a symbol’s instance on the artboard without changing the original symbol in the panel, more advanced edits will affect both the instance and the symbol if they are linked. By clicking on the “Break Link to Symbol� button, you can now modify the symbol in the panel without affecting the graphic on your artboard. The opposite is also true: edits made to an instance with a broken link will no longer affect the symbol.

Changing Symbol Options

The “Symbol Options� button opens the Options dialog box, where you can change the symbol to “Graphic� or “Movie Clip,� change it to 9-Slice Scaling, and make the symbol automatically align to a grid. See the section above on “Creating Symbols� for more explanation. You can also change the name, which is helpful if you duplicate a symbol.

Adding or Duplicating Symbols

The “New Symbol� button allows you to change a selected object into a symbol. Or, to quickly duplicate a symbol, just select it in the panel and drag it onto the “New Symbol� button. Illustrator will automatically name it the original symbol’s name plus a number, such as “Cube 1,� but you can change the name with the Options button.

Drag the symbol to the “New Symbol� button.

A new symbol will appear with a numbered name.

Deleting Symbols

Drag a symbol onto the Delete button to delete it from the panel. This will not delete it from your library, so if you need to use it again, just open the library and drag it back onto the panel. You can also click on the “Delete� button when a symbol is selected to delete it; a dialog box will appear asking “Delete the selected symbol?�

If you delete a symbol that has instances on the artboard, an alert dialog box will appear saying that the symbol cannot be deleted until its instance in use is either deleted or expanded. Choose “Expand Instances� to break the link to the symbol; this option will turn the instance on the artboard into a regular graphic and will delete the symbol from the panel. Choose “Delete Instances� to remove the instance from the artboard and delete the symbol from the panel.

Redefine Symbol

“Redefine Symbols� (located in the drop-down menu of the Symbols panel) allows you to change a symbol to the selected graphic on your artboard. Keep in mind that this action will change only the appearance of the symbol, while the name and other options (such as the type) will remain the same.

With the symbol selected on the artboard, select one of the previously defined symbols in the Symbols panel. In this example, we have selected the bow-tie symbol.

The bow-tie symbol now looks like the grime symbol, but the name and other options remain unchanged.

Swap/Replace a Symbol

To swap a symbol with another, select the symbol on your artboard, then select the symbol icon in the panel that you want to use in its place. From the drop-down menu, select “Replace Symbol.�

2. Advanced Symbol Use

Symbols can be edited several ways. In fact, CS5 now offers more editing options than previous versions of Illustrator, including 9-Slice Scaling (see below) and much more.

Control Window

One way to edit symbols is with the options in the Control window, located along the top (or bottom, depending on how you have arranged your Illustrator window) of your artboard. Simply click on the symbol that you want to edit, and you will notice that many of the Control window options for symbols are similar to the options for other objects, such as “Opacity,� “Recolor Artwork,� “Transform� and “Align to Selection.� You might also notice that you can break links and replace symbols from this menu.

The Control window’s options change depending on what type of graphic is selected, so some of these options are available to normal graphics, while others are exclusive to symbols.

To undo transformations, just select the symbol on the artboard and click “Reset� on the Control window; or choose “Reset Transformation� from the drop-down menu in the Symbols panel; or simply right-click on the symbol’s instance on the artboard and choose “Reset Transformation� from the context menu.

Editing as a Graphic

To edit a symbol with your primary editing tools just as you would any other graphic, click on a symbol in the panel (or, to be safe, duplicate the symbol and then edit the duplication), and select “Edit Symbol� in the drop-down menu. (Alternatively, double-click on the symbol in the panel.) You will now be able to modify the symbol in your panel as well as any instances on your artboard.

To modify only the instance(s) on your artboard and not the symbol in your panel, select the instance(s) on the artboard and break the link first. The instance will now be regular artwork that you can edit using any tool in the Tool menu.

You can always turn your edited graphic back into a new symbol by selecting the graphic and clicking “New Symbol� in the symbol’s palette.

To break links to all symbol instances at once, select the symbol’s icon in the Symbols panel, then choose “Select All Instances� from the drop-down menu.

You can also edit all symbol instances along with the symbol in the panel. Simply double-click the symbol on the artboard; or select the instance and click the “Edit Symbol� button in the Control window; or select “Edit Symbol� from the fly-out menu. An alert dialog box will appear, warning you that you are about to edit the symbol and that any changes will be made to all instances of that symbol.

You can choose “OK� or “Cancel.� This means what it says: all instances and the symbol in the panel will be changed according to the edits you make while in this “Isolation Mode.� Check the “Don’t Show Again� checkbox to prevent this warning from appearing again.

To exit the Edit Symbol mode, click on the “Back� arrow in the edit bar at the top of the artboard, or hit the “Escape� key. You can also right-click on the instance that you are editing and choose “Exit Isolation Mode.�

Registration Point Edits

In CS5, editing the registration point of symbols is possible. For those of you familiar with Flash, no more explanation is needed. For those who know nothing of Flash, the registration point basically allows you to select where to place the anchor point, which determines how a symbol will be placed within a screen coordinate.

One time when the registration grid makes a difference in Illustrator is when rotating symbols. If your registration is set to the upper-right corner of your symbol, then the symbol will rotate around that corner. You can see the location of the registration point simply by selecting the symbol on the artboard using the Selection tool. It looks like a small crosshair.

You can set the registration point by selecting a point on the registration grid when you create a new symbol. In the example below, the registration is set to the bottom-left corner. The default is centered. Just click the “New Symbol� button, and the Symbol options dialog box will pop up.

To edit the registration point or to fine tune the location, simply double-click the symbol on the artboard, and you will enter Isolation Mode. Move the graphic around; the registration point will remain stationary. When finished, click the “Back� button in the Control window. In this example, the symbol has been moved to the left, which has the effect of shifting the registration point to the right on the symbol.

Illustrator automatically uses the registration grid’s settings on a symbol, but you can turn this off. Say that you want to set the registration point to the left side of a symbol for Flash purposes, but while in Illustrator you do not want to use the grid. With the symbol selected, click on “Transform� in the Control window. Then click on the drop-down menu in the upper-right corner of the Transform panel. From this menu, select “Use Registration Point for Symbol.� With it deselected, this setting is now off.

9-Slice Scaling Edits

You can select 9-Slice Scaling for a symbol, either when you first create it or later through the Symbol options.

You can also edit the 9-Slice Scaling grid on a symbol when in “Edit (Isolation) Mode.� Double-click the symbol on the artboard to enter “Edit (Isolation) Mode.� Then hover the Selection tool over any of the gridlines until it changes to the move cursor.

Sub-Layers for Symbols

In CS5, you can now create sub-layers for symbols. The reason this is possible is that CS5 has given symbols an independent layer hierarchy, even when you expand symbols. Also, the “Paste Remember Layers� setting works when pasting objects in the symbol’s Edit Mode.

3. Symbolism Tools

One of the best aspects of symbols in Illustrator is the Symbol tools (referred to as “Symbolism Tools� by Adobe). Using symbol sets and the tools available, designing even the most detailed graphics is quick and easy.

Symbol Sets

Although you can use the Symbolism tools in a single symbol’s instance, they really shine when you use them with symbol sets. A symbol set is a group of symbol instances, often sprayed onto the artboard using the Symbol Sprayer tool. To select an entire set, just click on that symbol’s icon in your panel, or click on more than one symbol icon to select more than one symbol set.

In this example, a symbol has been sprayed onto the artboard. To select the set, simply use the Selection tool, and click on any of the symbols.

Symbol Sprayer Tool

With the Symbol Sprayer tool, you can add single instances, add single or multiple sets of instances, and delete individual or sets of symbol instances. To spray symbol instances onto the artboard, select the symbol from the panel, select the Symbol Sprayer tool from the toolbar, and click to add one instance at a time, or drag to spray several at a time.

To delete symbols from the artboard, hold down Alt or Option while clicking or dragging on the instances that you want to remove.

Symbol Shifter Tool

To move entire sets of symbols, use the Symbol Shifter tool. Just select the set or individual symbol instances that you want to shift, and with the Symbol Shifter tool selected, drag the instances in any direction on the board. You can also change the stacking order of symbols with this tool. Simply hold down Shift while clicking on an instance or a set to move it forward. Hold down Alt/Option + Shift while clicking on an instance or set to move it backward.

Symbol Scruncher Tool

The Scruncher tool is helpful for when you want to adjust the space between symbols in a set. To move symbol instances closer together, select the Symbol Scruncher tool, and click or drag in the areas between symbols. To push symbols apart, hold down Alt/Option while clicking or dragging between symbols.

Symbol Sizer Tool

Quickly resize entire sets of symbols by selecting the Symbol Sizer tool and then clicking or dragging on the symbols in the set that you want to resize. Keep in mind that only those symbols within the brush’s dimensions will change size. To decrease in size, hold down Alt/Option while clicking or dragging on symbol instances.

Hold down Shift while clicking or dragging the tool over several symbols in the set to preserve their density. You have to be careful with this shortcut, though. If you are enlarging symbols and hold down Shift, they will often be deleted to keep the density the same. But if you are downsizing symbols and use the Shift key, more symbols of the same size will be added to the set.

Symbol Spinner Tool

Another way to create variety in a symbol set made up of the same symbols is to select the Symbol Spinner tool and rotate the symbols in different directions. Click on a group of symbols and drag and rotate the cursor to turn the symbols in different directions.

Keep in mind that, just as when using the Rotate tool on symbol instances, with the Symbol Spinner tool, instances in a set will rotate based on the registration grid settings. So, if you’ve selected the upper-right corner of the registration grid when creating symbols, then your symbols will “lock� on the upper-right corner and rotate around that locked position.

Symbol Stainer Tool

This is an incredible tool for creating a naturally random color variety within a symbol set. It uses both the color’s hue and luminosity to “stain� symbol instances. Therefore, both black symbols (low luminosity) and white symbols (high luminosity) do not change at all; the higher or lower the luminosity, the less drastic the change in color.

First, you will need to select a staining color from the Color panel. With the Symbol Stainer tool selected, click or drag across the symbol instances that you want to colorize. If you want to reverse the stain effect, hold down Alt/Option and click or drag across symbols.

With the Stainer tool, the longer you hold it over a symbol set, the greater the amount of tint change. But if you want the same amount of tint no matter how much you drag the tool across a symbol set, hold down Shift. This works well when you want to change an entire set to a new shade without much variation.

Symbol Screener Tool

To change the transparency of symbol instances, select the Symbol Screener tool and click or drag across symbols. Hold down Alt/Option to reverse the transparency effect.

In this example, we have duplicated the Symbol layer several times and used the Symbol Stainer tool to add color depth. The Symbol Screen tool allows us to tone down the effect.

Symbol Styler Tool

The Symbol Styler tool allows you to add or remove graphic styles from symbol instances. First, select the Symbol Styler tool (if you select a graphic style first, then Illustrator will apply the graphic style to the entire selected symbol set). Then choose a graphic style from the Graphic Styles panel by going to Window → Graphic Styles, and click or drag across symbol instances for a gradual increase in a graphic style.

Hold down Alt/Option while clicking or dragging to reverse the style effect. Keep in mind that if you want to keep the graphic style changes the same throughout the symbol set, hold down Shift while using the Symbol Styler tool.

Here, we’ve opened a standard Graphics Style library called Illuminate Styles, by going to Windows → Graphic Styles Library → Illuminate Styles.

4. Symbolism Tools Advanced Options

To access the Symbolism tool’s options, double-click on any of the tools. It doesn’t matter which tool you double-click, because all of them can be accessed from the Options dialog box.

Options Available to All Symbolism Tools

At the top of the dialog box are options that stay the same, no matter which tool is selected. Some are fairly self-explanatory. “Diameter� determines the brush size. “Intensity� sets the change rate. “Symbol Set Density� sets the amount of symbols placed within a given area based on a formula; the higher the number, the denser the symbols will be.

“Method� (not available for all tools) adjusts the symbol’s instances: “User Defined� allows a gradual adjustment, determined by the location of the cursor; “Random� adjusts the symbols at a random rate; and “Average� smoothens the symbols gradually. Select “Show Brush Size and Intensity� to see these options while using the tools.

Click on each of the tool icons within the options dialog box to see individual adjustments and shortcuts. Not all of the tools have adjustments, and not all have shortcuts.

Symbol Sprayer Options

The Symbol Sprayer tool contains the most options. All six options contain two choices: “User Defined� and “Average.� If you already have symbol instances in place, the “Average� setting allows the sprayer to spray according to the settings of instances within the brush’s area. For example, with “Average� as the setting, spraying next to instances with variegated sizes will cause your symbol’s instances to spray in variegated sizes, depending on which ones fall within the brush’s radius.

“User Defined� means that the sprayer will place symbols using preset settings:

• “Scrunchâ€�: The density based on the size of the original symbol.
• “Sizeâ€�: Once again, based on the original symbol size.
• “Spinâ€�: Symbols will orient themselves based on the movement of the mouse.
• “Screenâ€�: 100% opacity automatically.
• “Stainâ€�: A full amount of tint and the current color of the symbol.
• “Styleâ€�: This is determined by the current style of the symbol.

Symbol Sizer Options

The Symbol Sizer options include only two choices. When the “Proportional Resizing� checkbox is selected, the symbol instance’s size will remain uniform when resizing. When “Resizing Affects Density� is selected, the symbol’s instances will move further away when enlarged and closer together when shrunk.

5. Make Symbols Your Best Friend

If you plan to create illustrations that repeat a lot of graphics, such as trees, grass, flowers, floating shapes and swirls, to name a few, then symbols should become your best friend in Illustrator. Rather than just copying and pasting a graphic that you have created, you can use a symbol to quickly spray hundreds to millions of copies on your artboard and make changes to them in a matter of minutes. Even if you have used symbols before, taking the time to really play around with them and maybe even following some tutorials will help you grasp this gem of an Illustrator tool.

More Resources

• “Learn Illustrator CS5: Working with Symbols More Easilyâ€�
  This video shows a few examples of how useful the registration grid and 9-Slice Scaling can be in Illustrator CS5.
• “Using Adobe Illustrator CS5: Symbolsâ€�
  This PDF help document is an excellent resource to bookmark for basic how-to questions on anything in Illustrator CS5, including Symbols.
• “Illustrator Symbol Sprayer: Use and Hints and Tips Tutorialâ€�
  Learn how to use the Symbol Sprayer in this basic video on Illustrator CS5. The video includes an overview of the other Symbolism tools as well.
• “How to Use the Symbol Tool in Illustratorâ€�
  See how to use symbols to add leaves to a tree in Illustrator. This video is full of hints and tips on working with the Symbolism tools.

(al) (il)

© Tara Hornor for Smashing Magazine, 2011.

Adobe Illustrator is one very useful program for creating vector artwork. The tools and features available in Illustrator make it easy to create digital illustrations, whether from scratch or by tracing a photograph.

But this is not all Illustrator can do. Businesses can create impressive graphs using Illustrator’s Graph tools. Marketers can use the impressive Type tool and other type features to design single-page ads. Designers create logos and other marketing graphics that need to be scalable in Illustrator. In short, Illustrator is a comprehensive vector program that is difficult to master.

The aim of this article is to provide one more resource for those of you yearning to learn more about Illustrator. We’ll look at one of the less-mentioned features: the Warp tools, also known as the ‘Liquify tools’.

For you Photoshop gurus, these are similar to Photoshop’s Liquify tool, except that the Liquify effects seen in Photoshop are broken down in Illustrator into seven different tools: Warp, Twirl, Pucker, Bloat, Scallop, Crystallize and Wrinkle. These seven tools are all a part of Illustrator’s Liquify package.

At first glance, some of these tools may look the same, but each has a special effect. And we’ll explore the various effects by creating an ornamental illustration involving branches, vines and flowers. You’ll be able to save and add each of the design elements to your collection of Illustrator symbols as well.

So, open up Illustrator, and get ready to dive into a learning experience that is sure to improve your logos, illustrations, posters and more.

Accessing The Tools

In versions CS to CS4, the Liquify tools are located in the toolbar directly below the Rotate tool and above the Live Paint Bucket tool. In Illustrator CS5, the Warp tools are in the same location but now underneath the new Width tool.

Simply click and hold the Width tool to view a pop-out menu of the seven Liquify tools. Then release your mouse over the tool you want to use. Or simply use the keyboard shortcut Shift + R to access the basic Warp tool.

To keep the Warp tools handy, click on the “Tearoff� arrow to the right of the pop-out box. This will detach the tools from the toolbar so that you can access them much more easily while working.

Basic Use

Before diving into a design project, you will need to know some of the usability features of the Liquify tools. For instance, all of the tools can be used to warp an object inward or outward, as shown in the image below (created using the Bloat tool). When creating an inward warp, you need to start with the crosshairs outside of the path. The opposite goes for an outward warp: keep the crosshairs inside of the path.

When using the tools, simply click once to reshape the image, as done with the Bloat tool above (this feature does not work with the basic Warp tool). Or drag the tool across the image for a more dramatic effect, as in the following example, done with the Twirl tool:

For better results along paths, make sure that the crosshair icon in the center of your brush is on the path that you want to reshape when clicking on the object. This will ensure that the brush selects the actual path, rather than having more of a pushing effect against the path.

To open the “Options� box and change the settings for a Warp tool at any time, simply double-click the tool’s icon:

All of the tools have the same basic brush dimension options, which include width, height, angle and intensity. Basically, the width and height options change the shape of the brush; although, a quicker way to adjust the brush’s shape is to hold down Option/Alt while dragging the mouse across the screen. (And hold down Shift + Option/Alt to keep the dimensions of the brush proportional.)

The angle option adjusts the angle of the brush. For instance, if your brush is an oval shape, it would be angled to the left at 120° and to the right at -120°.

The intensity option, of course, adjusts how much of a change each stroke makes. If you want more control, select a lower number. If you want a dramatic change, select a higher number. If you are using a pressure-sensitive tablet device, the “Pressure Pen� option lets you control the intensity with the pressure of your pen on the tablet.

The lower half of the “Options� box contains adjustments specific to the reshaping brush you have selected. Many of the tools include “Detail� and “Simplify,� but the Twirl, Pucker, Crystallize and Wrinkle tools include several other options as well, covered in more detail later. Keep in mind that the best way to learn each Warp tool is to play around with the options yourself.

Using Warp, Twirl And Wrinkle To Create Vines

The Warp, Twirl and Wrinkle tools do an amazing job of creating wood grain and branch or vine shapes. The easiest way to do this is to create a brown rectangle and then fill it with lines. You can either use the Line Segment tool to create and duplicate line patterns in a slightly darker brown than the rectangle background, or follow the easy tutorial on creating a wood grain texture from VecTips.

Double-click on the Warp tool and change the width to 50 points, the height to 50 points and the intensity to 30%. This is the basic and most well-known of the Liquify tools, but maybe only because it is first in the menu. With this tool, you have to move the mouse to make changes; simply clicking in one spot does not reshape an object.

To get a glimpse of how this particular tool works, drag the Warp tool across the top of the rectangle, while ever so slightly shaking it up and down. The Warp tools tend to distort if used too much, so if you do not like the effect created, hit Ctrl + Z to erase moves and try again. Keep sweeping the Warp tool across the rectangle in small sections until you have created lines that look like wood grain:

Tip: If you followed the technique of creating individual lines, go to Object → Path → Join before moving on to the next step.

Now for the fun part: creating a vine to save as a symbol. Double-click on the Twirl tool to see its settings. In addition to the settings for the regular Warp tool, you will notice a “Twirl Rate� option. This affect how fast or slow, as well as which direction, the tool turns in a circular motion. A negative number will twirl the tool clockwise; a positive number will turn it counter-clockwise.

Use the settings in the image above, and then click on each corner of the rectangle. Make sure the crosshairs stay on the outside of the rectangle. The Twirl Rate is set to make the tool turn counterclockwise; but rather than opening up “Optionsâ€� every time you need to change the direction, use the hot key: Option/Alt. Make sure, though, to click first and then hit the hot key, or else Illustrator will think that you are trying to change the brush size rather than the direction of the twirl.

The best part of the Twirl tool is its ability to produce many unique shapes. If you want, you could go crazy twirling the tool across the entire page. Create something like the graphic below by changing the intensity to 50% and the twirl rate to 50. Then start in the upper-left corner of the wood, and drag the tool up and down the graphic; then swipe it once briefly horizontally across the center. Results will vary depending on your motions.

Or you could be more controlled with your movements using Twirl and create vine-like branches, like the ones below. To get a similar look, use the same settings that you used to create the four twirled corners of the wood piece; only make the brush smaller by holding Shift + Option/Alt and clicking and dragging your mouse across the screen. Change the size to create different-sized branches. Now click along the edges wherever you think a small branch should be. Remember to hit Option/Alt after clicking the mouse to change the direction of the twirl.

Vines are not perfectly circular, though, so add some character to each one by clicking it with the Twirl tool, again changing the brush size as needed.

The Warp tool is excellent for molding shapes, which is exactly what this ornamental branch needs at this stage of the process. Double-click on the Warp tool, and change the width and height to 50 points and the intensity to 50%. Then, start pushing the brush against any sharp or straight edges. You can also pull out some of the edges or pull on a few twirled vines.

You may want to play around with the Warp tool to see just how far you can stretch graphics. Change the intensity to 100%, and start stretching and pulling on branches. You may get something like the following:

Now double-click on the Wrinkle tool. You’ll notice that this tool comes with extra settings. The “Horizontal� and “Vertical� settings control the direction of the wrinkles. When working on a complex image with multiple anchor points, you may want to select “Brush Affects In/Out Tangent Handles,� rather than “Brush Affects Anchor Points,� to limit the effects of the tool. To add a slight texture to the smooth parts of the ornamental wood design, use the following settings:

The longer you hold the Wrinkle tool, the more it will wrinkle the image. You can create something like the following texture by dragging the tool across the smoother sections of the graphic, making sure the crosshairs of the cursor are close to the edges to be wrinkled.

You may notice that the Wrinkle tool works almost like sound waves and creates some really interesting effects. Change the intensity to 100%, and drag the tool across the entire design. Now your branches will look almost mossy, or at least tangled with vines.

Using Pucker, Scallop And Warp To Create Flowers

Here’s one easy way to create flowers. Start by creating an oval shape and filling it with a gradient. Then double-click on the Pucker tool, and change the intensity to 50%. Make the size slightly larger than the width of your oval but not as high. Then click and hold over the center of the oval until the sides come together in the middle.

If the brush is higher than the oval, then the entire shape will disappear because the Pucker tool draws points on a path together. Just as when you draw fabric together, however, the Pucker tool does not delete points of a path but simply gathers them together, shrinking the total area:

Now right-click on the puckered oval, go to Transform → Rotate, enter 90°, and hit “Copy.â€� Place this rotated copy over the first petal. With this petal selected, go to Transform → Rotate again, enter 45°, and hit “Copy.â€� Select this last petal, go to Transform → Rotate, and create a 90° copy. Now select the entire flower, right-click, and select “Group.â€� Right-click again, and select Transform → Scale. Set “Uniform Scaleâ€� to 50%, and hit “Copy.â€� Place this copy over the center of the larger flower, and “Groupâ€� the entire image again.

Select the Warp tool, and using an intensity of 30% and an appropriate size, sweep it across the petals to create a wilted look. If the center of the flower looks loose, then use the Scallop tool at an intensity of 30% or less and click once on the center. Make sure the size is no larger than the center petals. Create a few variations:

You may want to play around with the Pucker and Scallop tools to see the different effects they create. As mentioned, Pucker draws points together, and it will do so even when you are dragging the brush across an image. Below, the brush was dragged outward on five different sections of the flower, using an intensity of 100%.

The Scallop tool can create quite a variety of designs with its multiple settings. Keep in mind, though, that the higher the number for “Complexityâ€� and “Detail,â€� the more the effect will just look like thick black strokes. The first flower below was created using a complexity of 5, detail of 10 and intensity of 30%. The second flower has a complexity and detail of 2 and an intensity of 30%; the scallops are much more noticeable. Increase the intensity to 100% and drag the brush counter-clockwise on the flower to create an image like the third flower below.

Using Bloat And Crystallize To Create Mossy Vines

The Bloat tool is similar to Warp in that it can be used to shape objects, except that it “bloats� outward or inward, almost as if someone put a magnifying glass up to the object and captured the resulting image.

Before selecting Bloat, draw a long rectangle, and fill it with a brown and green gradient. Double-click on the Bloat tool, and change the intensity to 50%. Click “OK,â€� and hold Shift + Option/Alt to give the tool about the same circumference as the width of the rectangle. Begin bloating the rectangle into a vine shape. You may want to start at each end first:

Continue shaping the vine with Bloat. Try long strokes across the length of the vine, both above and underneath. To create thinner lines, place the crosshairs of the brush outside of the paths to push against the shape. To make parts of the vine thicker, place the crosshairs on the inside of the image.

Further shape the vine with the Bloat tool, adding stubs by using a smaller brush size and dragging sections of the vine outward. You may want to change the intensity to 100% to create more dramatic strokes. Change the size of the brush as needed.

Although quite similar to the Scallop tool, the Crystallize tool is unique in that it creates more of a starburst effect, almost as if groups of crystals were bursting out of the image. You can use this effect to create fur for animal illustrations or to draw fungus (as you will be doing next).

Double-click on the Crystallize tool, and change the intensity to 100%. Click carefully on different areas of the inside of the vine, changing the size of the brush to create different looks. Notice the difference in effect from placing the brush closer or farther away from the edges. Remember to hit Ctrl + Z to erase brush strokes if needed. You can also click a few times on the outside of the vine using a smaller brush size to create more of a spiked effect:

Now change the intensity to 50%, and click on some of the “crystalsâ€� to grow more interesting fungus shapes. Try some clicking and dragging to elongate the crystals.

Create different vine shapes, add a few leaves, and then scale, rotate and reflect each piece. Put them all together to create your unique vine illustration, made using the entire Liquify tools collection.

In Conclusion

The Liquify tools in Adobe Illustrator are a hidden gem of sorts. Not many tips for them are available online, yet each tool can produce a unique warp effect, and all are exceedingly useful for various projects. Just remember that, as with most other tools, the best way to learn the Warp tools is to use them over and over and over. Play around with the settings for each one to see what amazing designs this incredible set of tools is really capable of. Then share what you have learned, or display your art for the online design community to enjoy!

(al) (il)

© Tara Hornor for Smashing Magazine, 2011.

Typography is not only an all-important aspect of design, it is also an art form in and of itself. Choosing the right font, the perfect spacing and even the correct shape of text can be an important factor as to whether a project fails or succeeds. Although Illustrator is not really used for multiple-paged projects, many would agree that it is one of the most powerful applications for creating vector graphics, such as logos, and it is also often used for one-page documents, such as business cards, posters, or postcards.

Since we can easily transfer graphics from Illustrator to Photoshop and InDesign, designers often use Illustrator to create vector type that they can then incorporate into projects in another program. For instance, you can create a nice type design within Illustrator, then add some extra effects in Photoshop. Or you may need to design a text illustration within Illustrator to place within your brochure project in InDesign.

If you have never taken the time to explore the type side of Illustrator, you may be surprised at the powerful tools that Illustrator provides for working with type. Similar text features found in Photoshop and InDesign are also available in Illustrator — only Illustrator comes with its own unique set of typographical features as well. So for those of you who use another Adobe Suite program, you will easily catch on to Illustrator’s type idiosyncrasies.

No matter what your purpose for working with type in Illustrator is, as a designer, you will not only improve your work, but also save valuable time by knowing the different typographical tools available. Here, we will focus on some of the most important aspects of typography that every Illustrator user should know:

1. Metric vs. Optical Kerning
2. Roman Hanging Punctuation
3. The Glyphs Panel
4. Hyphens and Dashes
5. Styles Panels
6. Placing Type on a Path
7. Point Type vs. Area Type
8. Creating Columns of Text
9. Text Flow Between Containers
10. Scaling Area Type Numerically

1. Metric Vs. Optical Kerning

Kerning is an important aspect of design. It has to do with the adjustment of space between letters in order to improve the visual treatment of typography, and Illustrator provides the right kerning tools for designers. In more recent versions of Illustrator’s CS series, three automatic kerning options are available: “Autoâ€� (also known as metric), “Opticalâ€� and “Metrics – Roman Only.â€� In addition, manual kerning is available. All have their place in design, but knowing which one to use when can be confusing without some basic knowledge.

Auto, or metrics, kerning is built into type using kern pairs; for instance, all PostScript fonts have kern pairs built into them. Illustrator interprets this kerning code to determine how much space to put between certain letter combinations, such as “WA,� “LA,� “To� and “Ty.�

Optical kerning is also an automatic kerning option built into type but slightly different than the Auto option.  It uses the shapes of the letters to determine the space to put between characters. Optical kerning works well when combining letters of more than one font or when a font has little to no kerning built in. Use manual kerning where possible, since it provides the highest level of control. Most often, though, one would use manual kerning only in display copy, headlines, business cards and other short blocks of text.

The “Metrics – Roman Onlyâ€� option, which was added into Illustrator in the CS4 version, is for Japanese typography. This option adds kerning only to Roman glyphs or any character that rotates in vertical text. Basically, it works with Latin characters, such as Basic Latin or Latin Extended, and the half-width Katakana. To switch to Optical kerning, first select the text you wish to change. Then, under the Characters palette (Window → Type → Character), click on the Kerning drop-down menu. Then select “Optical.â€�

Or, if you would like to manually kern letters yourself, place the cursor between two letters, and choose a value in the Character palette:

To turn off kerning between selected characters, set it to “0�:

Keep in mind that to adjust the value between entire groups of letters, you will have to use the tracking settings in the Character palette. The tracking is adjusted in the drop-down menu located to the right of the Kerning drop-down menu. Hover your mouse over the menu to see “Set the tracking for the selected characters,� as in the screenshot below:

Illustrator’s default kerning is “Auto,â€� so simply select this if you would like to turn it back on.

Useful Tip: One excellent way to save yourself some time while designing is to use Illustrator’s keyboard shortcuts to change manual kerning and tracking settings. To change the kerning between two characters, simply place the cursor between the two letters. Then use Alt/Option + left/right arrow. The kerning will decrease with Alt/Option + left arrow and increase with Alt/Option + right arrow.

To change the tracking for an entire group of letters, first select the letters you want to change. As with kerning, use Alt/Option + left arrow to decrease tracking and Alt/Option + right arrow to increase tracking.

2. Roman Hanging Punctuation

Roman hanging punctuation will give your blocks of text a clean appearance, taking your typography from amateur to pro. But what exactly is this tool that is hardly talked about? Turning on the Roman hanging option in Illustrator will make the text line up evenly by “hanging� quotation marks in the margin. Otherwise, quotations are set flush with text, within the margin.

To turn on Roman hanging punctuation, open the Paragraph tool panel, and click on the arrow on the upper right of the box. A drop-down menu will appear in which you can choose “Roman Hanging Punctuation.�

Keep in mind that you can turn on or off the Roman Hanging Punctuation for entire blocks of text. Just select the blocks of text and use the same drop-down menu to change the setting.

3. The Glyphs Panel

Glyphs are any characters found within a font family. The Glyphs panel in Illustrator is the place to locate font objects, from normal characters to the special symbols. Whatever font you have selected when you open the glyphs panel is the menu that will be displayed. Fortunately, you do not have to keep exiting the Glyphs panel every time you would like to see the glyphs for another font or see glyphs similar to the one you’ve selected. You can also keep the Glyphs panel open while moving your cursor to different locations in the document.

To open the Glyphs Panel, go to Window → Type → Glyphs. Click on a glyph to select it; double-click to insert it in the line of text. Illustrator places the character wherever your blinking text cursor is located.

Hover your mouse over glyphs to see the Unicode (the name given to each character in the Glyphs panel); the Unicode is displayed at the top of the panel. Once you have found the glyph you would like to use, simply double-click on the character to insert it into your current project.

To see a different font, simply choose a different family and style from the drop-down boxes at the bottom of the panel.

To see the glyphs in a larger or smaller preview display, click on the zoom in and out buttons located in the lower-right corner of the panel.

In the “Show� menu at the top of the panel, you can limit the type of characters displayed in that font; for instance, “Oldstyle Figures.�

You might notice that some characters in a font include an arrow in the lower-right corner of the character box in the Glyphs panel. This arrow indicates that alternate glyphs are available for this character. To access these alternates, simply click and hold the character. Drag your cursor over the alternate glyph you would like to use, and release the mouse. The glyph should now be inserted in the text.

4. Hyphens and Dashes

One of the easiest ways to disqualify yourself as a professional designer is by using hyphens and dashes incorrectly. The rules are somewhat tedious but fairly easy to learn and remember.

A hyphen is the shortest in length and is located on the keyboard next to the “+â€� sign. It has three functions. It is used when a word is split at the end of a line of text. It is used to join two words together to create a compound word, such as “fun-loving dadâ€� and “anti-American.â€� A hyphen is also used with two-word numbers, such as forty-two. If in doubt, look up the word in a dictionary and use a hyphen if the word is not present. Example: “Twenty-two dollars is all that your un- line break loving dad will give to a well-intentioned suitor.”

An en dash is the second longest in length and is used to show a span of time or a numerical range; for example, 5–9, July–September, 1:00–8:00. In the Glyphs panel in Illustrator, the en dash Unicode is U+2013. Example: “Our vacation is from June 13–18.”

An em dash is the longest in length of the three and is used to show a break in thought. For instance, “Down the road—and a long winding road it was—they traveled as quickly as possible.â€� In Illustrator, the em dash Unicode is U+2014. Example: “We gathered our supplies — all eight truck loads — and started slowly up the bypass.”

5. Styles Panels

When working with large amounts of text in Illustrator, you do not have to keep applying the same font styles manually to every heading and block of text. You can simply save your settings using the Character Styles panel or the Paragraph Styles panel. Both can be found under Window → Type.

To set a style, simply type your heading or paragraph using the font styles you want to save. Then go to Window → Type → Character Styles, or Window → Type → Paragraph Styles. A Styles panel box will appear, and in the upper-right corner will be a small arrow, which is the Styles menu. To create your own name for the style, choose “New Characterâ€� or “Paragraph Style,â€� type a name, and click OK.

When you would like to add your new Character or Paragraph Style to text, select the text. Then click on the style that you created in the Style panel box. The style you saved will now be added to the text.

To edit a style, click on the style in the panel box, then click to the Character and Paragraph Style options in the drop-down menu, or simply double-click on the style you want to change.

Now on the left side of the dialog box that pops open, click on a formatting category. Make the changes you need, click OK, and all text that you’ve applied to this style will be changed. Keep in mind that if text is selected, the changes will be made to it only. Click on the Selection tool and then click anywhere on the work desk to make sure that text is not selected before attempting to change the style of all text.

To delete a style, select it in the Character or Paragraph Styles panel. Then click the “Delete� button in the bottom-right corner of the panel. Or just drag the style onto the “Delete� button. The formatting of text associated with this style will not change, but a style will no longer be applied to this text.

6. Placing Type On a Path

Most Illustrator users know that type can be placed on a path to create shaped text or text that wraps around an object. The technique for applying text to a path is different depending on the path, though. Type can be placed on either an open path, which is a line with a beginning and end, or a closed path, such as a circle or square.

Open Paths

To place type on an open path (i.e. a line with a beginning and end), begin by creating a path, such as a curved line. Make sure to select the Type tool, and then move your cursor over the path until the cursor changes to a Type on a Path icon, which has a line through it.

Then just click on the path, and you will have created a Path Type object. The Stroke objects will be gone, and a blinking cursor will appear in which you can type your message.

To make any changes to your open path type, choose the Selection tool and click on the path. In and out ports (small white boxes) will appear at either end of the path and a line in the center and on the far left and right. Basically, Illustrator is now treating the path as it would area type. Drag one of the lines to make the text path shorter or longer; make sure that your cursor is an arrow with a line-and-arrow symbol next to it.

You can change the actual type just as you would any other area type, including by changing the font size. Doing this, though, may make the text extend outside of the area type’s boundaries. If this happens, a red plus sign will appear.

If you click on the plus sign, the cursor will change to a linked container cursor (it looks like a text box). Then, click on another area in your project to create another open path line of the same size and shape as your first. New text will continue to flow onto this new line.

Or simply drag the beginning and end lines to make text fit on the path:

Make changes to the actual path that the text sits on by choosing the Direct Selection tool and then clicking on the path. You can now lengthen or shorten the path or change the shape, just as you would with any other path.

You can also move the type to sit underneath the path by dragging the center line to the opposite side of the path. Or go to Type → Type on a Path → Type on a Path Options. In the box that appears, check the “Flipâ€� box and click OK.

To flip type over, go to Type → Type on a Path → Type on a Path Options. Select the Flip box and then select “Ascenderâ€� in the “Align to Pathâ€� menu. Other changes can be made in this dialog box as well: change the effect, choose other path alignment options or adjust the spacing.

Closed Paths

The confusing part of placing type on a closed path is that the start and end points are in the same place. With an open path, your starting point is wherever you click with the Type tool to create a Path Type object, and the end point is the end of the path. On a closed path, both the start and end points are wherever you click, because the object creates a continuous line. The center line on a closed path, such as a circle, would then be at the bottom of the circle if your start point is at the top. To place type on a closed path, you will have to choose the Type on a Path tool by clicking on the Type tool and dragging to pull out the Type menu.

Then click on the path where you would like the text to start and begin typing. Once again, make sure the cursor changes to the Type on a Path symbol.

Just as with an open path, you can change the location of the start and end points and, therefore, move the location of the text on the object.

You can also move type underneath the line or flip type over the same way as you would with open type. Simply go to Type → Type on a Path → Type on a Path Options, and change the settings to get the desired effect. Or you can make changes by dragging the center line.

7. Point Type vs. Area Type

Point type, created by selecting the Type tool, is so called because it adds text to a certain point in an image. Area type, created by selecting the Area Type tool, adds text to fill a specified area of an image.

Point type is often used for headlines and other single lines of text. The more you type, the longer the text line becomes. To move text to another line, you must manually press Enter or Return on the keyboard. Area type is used for paragraphs of text and is surrounded by a bounding box. As you type, the text automatically flows to fill the box. The bounding box in area type will have two large boxes, called ports, in addition to the normal bounding box handles. These ports are the in and out boxes from which text flows between area type containers.

When selecting point type with the Selection tool and if you have selected “Show Bounding Box� in the View drop-down menu, a bounding box will appear surrounding the text. However, when changing the shape or size of the bounding box with point type, the text will become distorted because no shape is holding the text. On the other hand, changing the size or shape of area text will simply change the way the text fills the bounding box.

8. Creating Columns of Text

Any area type can easily be divided into columns, or even rows, whenever needed. First, create the area type, and then select it. Go to Type → Area Type Options. In the box that appears, you will see options for changing the settings of both rows and columns, as well as for resizing the area type.

Change the number of rows or columns by changing the Number settings underneath the Row or Column settings. The “Span� changes the width of individual rows or columns, and the “Gutter� changes the distance between each row or column.

If you select the “Fixed� box, then you can resize the area, and the number of rows or columns will change, not their width.

With the Fixed box deselected, the size of the rows and columns will increase or decrease when resizing, but the number of rows or columns will remain the same.

If you break the text into both columns and rows, rather than just one or the other, then you will want to choose the way text flows between columns and rows in the Options section. Selecting “By Rows� will cause the text to be read from left to right, first in the top row and then in the bottom row. Selecting “By Columns� will cause the text to be read left to right, first in the left column and then in the right column.

9. Text Flow Between Containers

With certain projects, you may need to make text flow from one area type container to the next. For instance, you may have created an area type frame in the exact size you need, but as you type, the text “overflows,� which Illustrator alerts you about with a red box with a plus sign inside.

Clicking on this plus sign with the Direct Selection tool will change your cursor to the linked container symbol.

Click again on the artboard and Illustrator will create a new container of the exact same size as the first. Text will now continue to “flow� from the previous container into this new one.

If you would like to create a container of different proportions, though, then click and drag on the artboard until the container is the size you desire.

10. Scaling Area Type Numerically

Instead of resizing an area type bounding box by using the handles, you can scale it numerically, making for a more accurate size that can be repeated. Go to Type → Area Type Options, and enter the size of box you need.

Or you can go to Object → Transform → Scale to size a bounding box numerically. Keep in mind that these techniques will also change the scale of the text. To keep text the same while changing the box only, click on a side of the frame using the Direct Selection tool, and then scale the bounding box. The text should remain the same while the size of the bounding box changes.

Type Tool Shortcuts

Keyboard shortcuts will make your work in Adobe Illustrator go that much faster. Memorize each of the following to improve your workflow:

• Shift + Control/Command + O : Create outlines.
• Alt + Control/Command + I : Show or hide hidden characters.
• T : This way you can select the Type tool faster.
• Control/Command + T : Show or hide the Character panel.
• Shift + Control/Command + T : Show or hide the Tabs panel.
• Alt + Control/Command + T : Show or hide the Paragraph panel.
• Alt + Shift + Control/Command + T : Show or hide the Open Type panel.
• Shift : Hold down while the Type tool is selected to switch between horizontal and vertical text.
• Escape : Press while typing to escape from the type object. The Selection tool and type object will also be selected.

Keep in mind that these are only type tool shortcuts and commands. Print out a complete list of shortcuts from KeyXL to have on hand if needed.

Other Resources

You may be interested in the following articles and related resources:

• Illustrator’s Type Tool: A Comprehensive Introduction, Vector Tuts+
  Learn about Illustrator’s Type tool in this comprehensive introduction.
• Vertical Type Tools, Bloomsburg University, IT Department
  Another excellent article with basic tips on using Illustrator’s Type Tool.
• Using Adobe Illustrator CS4: Type, Adobe
  Look up specific help on type in Illustrator from Adobe itself.

(al) (ik) (vf)

© Tara Hornor for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: illustrator, typography