The power of Illustrator’s Appearance panel and Graphic Styles

30 Oct 2013

For most of the design work for the web and for iPhone/iPad GUI design, I prefer to use Photoshop, in combination with illustrator. In case of illustrations, icons, or other vector-based work, I jump into Illustrator. Once finished, I paste my creation into my Photoshop document, either as a Smart Object or a Vector Shape layer, because flexibility means everything. Illustrator has made a great step towards web oriented design work, and a lot of things you can do in Photoshop are possible with Illustrator. Take for instance the Graphic Styles. In Photoshop you have Styles. You might think it is its counterpart, but I believe both can not be compared. Let me give you an overview of how Illustrator's Graphic Styles work and what is possible…

Understanding the Appearance panel

First thing first. To know how Graphic Styles work, you need to fully understand the Appearance panel. The Appearance panel shows the different attributes of a path or object. With attributes I mean, the Fills and Strokes applied to a path or object, shown in a stacking order, so from the bottom up. You notice that I used these words in plural. By default, Illustrator gives an object one stroke and one fill. By using the Appearance panel it's possible to add multiple strokes and fills to one object.

Besides the possibility of applying multiple strokes and fills to one object, you can also add different Live Effects to these strokes and fills, and use different opacity values and opacity modes. In other words, endless combinations are possible, which makes this panel a really powerful feature. Below are a couple of examples that show its power:

Simple examples

This is a simple example of how you can use the Appearance panel to achieve the result with only 1 path. Multiple strokes are stacked on top of each other to create the look of a road or a railway, all with just one simple line. This is a very flexible way to create roadmaps, because you can easily apply this to a curved line, or any kind of single line. Editing the road or railway is easy as you have to deal with only one path.

A more illustrative example of how you can use the Appearance panel where I also modified the transparency of a few single strokes.

More complex example

Below is a complex illustrative example of how you can use the Appearance panel on 1 single path. You can add as many strokes as you like, apply patterns or gradients to it, add a Live Effect(s) on each of them separately, or on the entire path (if you target the Path item at the top of the panel). Plus, you can give each stroke a different transparency setting. The possibilities are really endless, which gives you a lot of room for experimentation.

This example shows you can go very far and the possibilities are really endless as you can also add Live Effects to a single stroke, and you can also add a Live Effect on the path itself.

Understanding Graphic Styles

It's very important that you fully understand the Appearance panel, because then you can create your own Graphic Styles. The purpose of the Graphic Styles panel is to store an appearance of an object, so you can reuse it quickly on other objects. However, it's very important that you don't confuse Graphic Styles with Symbols. When you save a Symbol in the Symbols panel, you save the entire object. So you also save the path(s), or in other words the shape of the object. When you save a Graphic Style, you only save the appearance of that object, not the shape. You'll see that using Graphic Styles will make your productivity more efficient.

One of the practical examples to use Graphic Styles is for the creation of roadmaps. By saving a Graphic Style for each type of road you keep things flexible.

Learning from Graphic Styles

Did you know that Illustrator comes with a ton of Graphic Style Libraries? Graphic Style Libraries are collections of preset Graphic Styles. You can find these libraries in the Graphic Style panel options (arrow button at the top right of the panel), under 'Open Graphic Style Library…'. When you open such a library, it appears in a new panel, so not in the Graphic Styles panel itself. You select, sort, and view items in a graphic style library the same as you do in the Graphic Styles panel. However, you can't add, delete, or edit the items in graphic style libraries. You first need to add the style to your Graphic Styles panel. If you select a Graphic Style, you can study its appearance in the Appearance panel. You can learn how they are built, and they might also give you ideas. Especially the ones that have Live Effects are interesting to study. Most of them are really complex, and most of them are just plain ugly, but they can serve as a starting point to create your own. Take for instance the Scribble Graphic Style Library. In the image below I applied Scribble 11 to some (editable) text and tweaked the color and the settings:

Learning from the Illustrator's own Graphic Style Libraries, by looking at the Appearance of the Graphic Style and by experimenting with the settings.

Create a Graphic Style

Creating a Graphic Style is very easy, and you can do it in different ways. You can drag the object that has the appearance applied into the Graphic Styles panel, or you select the object, go to the Graphic Styles panel, and click the New Graphic Style icon at the bottom of the panel. You can also target the path of the object in the Appearance panel, and then click the New Graphic Style icon.

Create a Graphic Style by clicking on the Path item in the Appearance panel, and then click the New Graphic Style in the Graphic Styles panel.

Create a Graphic Style by selecting and dragging the object into the Graphic Styles panel.

Apply a Graphic Style

Applying a graphic style to an object is very simple: just select the object and click the style you want from the Graphic Styles panel. Saving and reapplying styles can save a lot of production time. I've found it most useful when creating road maps. You can save a style for each type of road. Once you have drawn your map using single path lines, it's just a matter of selecting the line and applying the correct road style. It's also possible to apply a graphic style to a grouped object: again, this is ideal for drawing maps as the lines of the streets are all perfectly connected!

Using the Eyedropper tool

Another way to apply a Graphic Style is by selecting a style and by dragging it onto the object. In a lot of cases, you simply want to copy an Appearance of an object to another object instead creating a Graphic Style. You can do this by using the Eyedropper tool. However, by default the Eyedropper tool only copies the basic Appearance of an object, which includes just the stroke and fill. You need to edit the default settings by double clicking the Eyedropper tool in the Toolbar, and checking the Appearance checkboxes in both columns (as shown in the image below).

Check the Appearance checkboxes in both columns so when you apply the Eyedropper tool, the complete Appearance of an object will be applied.

Append a Graphic Style

To append a style to an object’s existing style attributes, or to apply multiple styles to an object, you need to hold down the Option/Alt key while clicking the Graphic Style in the Graphic Styles panel. You can also Alt/Option-drag the style from the Graphic Styles panel to the object.

Edit a Graphic Style

If you have the same style applied to a lot of objects, and you need to change the appearance of all these objects, than you can do this by changing the graphic style. To do this, there is no need to select an object. You simply select the Graphic Style in the Graphic Styles panel, and you modify the Appearances. Then you go to the Appearance panel options menu and you choose Redefine Graphic Style. Another way is to drag the Appearance icon (in the top left of the Appearance panel) onto the style icon in the Graphic Style panel while holding down the Option/Alt key. Once the Graphic Styles has been updated, all objects that have this style applied will automatically be updated.

Updating a Graphic Style by dragging the new appearance (icon) onto the Graphic Style, while holding down the Option/Alt key.

Graphic Style Library

Saving a Graphic Style Library can be very useful in case you need to reuse the same styling over and over again for a project. Take for instance the creation of road maps. A couple of years ago I had to create a series of road maps for a client, spread over a period of time, now 2 then 3, etc. I saved myself time by creating a Graphic Style Library file that I loaded each time I had to create a new road map. This way I was sure I used the exact styling for the roads. I took it even further by saving a Template file which also contained a set of Color Swatches and Character Styles for the text. Sometimes it is worth the small effort, definitely if you work in a team, then you can exchange these files, making sure everybody uses the proper colors, styles, etc.

Saving a Graphic Styles Library by selecting 'Save Graphic Style Library…' in the Graphic Styles panel options

Saving a Graphic Styles Library is easy. Just go to 'Save Graphic Style Library…' in the Graphic Styles panel options and save the file to a preferred location. To load a Graphic Style Library select 'Open Graphic Style Library… '. There you'll find a list of libraries that came with Illustrator. To open other libraries, choose 'Other Library…' from the submenu to browse to the file.

There you have it, Graphic Styles in a nutshell. I'm sure there is way more to tell about this powerful feature, but I hope that this introduction will spark some ideas on how you can use this to your benefit. Also please don't hesitate to share them if you like.

Comments

  1. 1 Sew Heidi 30 Oct 2013

    Your tutorials are so well thought out, planned and documented.  Really appreciate the thoroughness, time and effort you put into these!  Always learning new tricks from you, keep it up!

  2. 2 Rolando Murillo 30 Oct 2013

    Fantastic article, I always want to optimize my design process and was really leaving the Graphic Styles behind, only using Character and Paragraph Styles until now.

The Deck

Ads via The Deck