Saving time using Illustrator symbols

- Hi, I'm Sue Jenkins, and welcome to "Productivity Tips for Web Designers". In this installment we'll be talking about saving time with Symbols. So let's take a look at how Symbols work. If your Symbols Panel isn't already showing in the Panel dock, you can open it by choosing Window, Symbols. Mine's showing here, it's just not active, so I'll click on my Symbols tab so we can see the actual Symbols. The Symbols Panel has a bunch of handy free presets that are ready for you to use, and working with Symbols is super easy.

All you need to do to use one is drag it out from the Panel right on to your Artboard. So I'll take this plus Symbol, I'll drag it here, there it is. It's just a Symbol instance, it's a copy of the original artwork in the Symbols Panel, and you can make as many copies as you want, as many instances as you want. Now, there's an easy way to tell the difference between a Symbol and regular artwork. So if you have two things side by side, with the Symbol it always has the registration point, whereas regular artwork does not.

So if I were to select this banner there's no registration point, just the center point, whereas here you have that plus Symbol, that registration right in the center. So, once your Symbol is on your Artboard you can transform and move it and manipulate it without altering the original source Symbol. So, for instance, I could scale it, I could rotate it, I could do any transformation with it that I want, and it has nothing to do with the original Symbol. So I can bring another Symbol back onto the Artboard, so this is completely independent, the instance is totally separate from the original.

You can also make duplicate copies of an instance, so let's say you did a transformation like this and you wanted another copy, you can go to the Edit menu and choose Edit, Copy, or you can hold down your "Alt" or "Opt" key, and drag a copy, or as many copies as you want of that Symbol instance. What's more, you can apply Graphic Styles and Transparency to instances as well as adjust their appearance through the Appearance Panel. So, let's take a look over at the Appearance Panel. We just see the Symbol and the contents and the opacity.

And if we wanna look at the Graphic Styles up here we can select that and apply any Graphic Style to the Symbol instance. So we have totally different look, it has nothing to do with the original Symbol or any of the other instances. In addition, you can apply special effects like "Scribble" and "Drop Shadow" to instances through the Effects menu. So if I take this one I can go up to the Effect menu and choose Stylize, "Drop Shadow", and apply the "Drop Shadow" to that instance. Then if at any time you want to revert your Symbol back to its original state, you can select it, and once your Symbol is selected, you can click on the Reset button up on your Control Bar, and that will put everything back to the way it was, except for the Graphic Styles, those will still be applied, but you could always remove Graphic Styles through the Appearance Panel.

To create Symbols from your own artwork, what you'll do is you start by selecting the artwork, and then dragging and dropping the selection right into the Symbols Panel. I didn't have mine open so let's switch over here and then we'll re-drag our artwork in. The Symbols Option dialog box opens at that point, and you wanna give your Symbol a name. It'S best to just name it after what it looks like or what its function will be, so this could be like a food button, so I'll just call it "Food". As for the type, if you'll be taking your artwork into Flash you may want to select the type, your options are "Movie Clip" or "Graphic", otherwise if you're just gonna be working in Illustrator you can leave it set to "Movie Clip".

The registration point is set here at the center by default, but you could adjust the position of the registration point. I usually leave it set to the center and I can always manipulate it later through the Transform Panel. Now, if you'll be turning on "Enable Guides for 9-Slice Scaling" that has to do with how you scale an object, and I'll show you how to do that in a second. And here's the "Align to Pixel Grid" option. I always turn it on. Whenever it's an option and I'm working on Web graphics I just turn it on so that whereas I'm moving my object around it's going to align to the pixel grid.

Now I can click Ok, and that original artwork has been instantly converted into a Symbol instance. So I can make as many of these as I want, so I'll just drag and drop them in. It doesn't matter where I put 'em. So this could be "Disability", turn on "Align to Pixel Grid". This could be "First Aid". The names are arbitrary, it's totally up to you, and you can always change the name at a later date if you want. So now I have three separate Symbol instances, and I can make as many copies of those as I want. Another way that you can create a Symbol is by selecting your artwork and clicking on the New Symbol button at the bottom of the Symbols Panel.

Again, this brings up the Symbol Options dialog box and you can input your information. You can also choose the New Symbol option from the Symbol Panel's pop-up menu. So we'll go ahead and name this one, how about "Pink Banner", and we'll turn on "Enable Guides for 9-Slice Scaling" so I can teach you about how this works. So we have our original graphic here and a Symbol graphic here. So watch what happens if I scale this out, and I want it to be a longer graphic. You see that the ends of the ribbon are skewing as well.

What if I wanted to keep the ends the same way? So I'm gonna undo with my keyboard shortcut "Cmd" or "Ctrl+Z", and show you what happens when you scale artwork that is Symbol. Those edges retain their shape and only the middle part is changing. You can control how an object scales with the 9-Slice Scaling. By double-clicking on the instance you get this alert and click Ok, and then you can see these grid lines.

These are what you'll want to adjust to determine where the scaling will take place. So, only the area inside the four lines will scale, the other areas will not be adjusted at all. So, for this particular shape it's probably easy enough for me to change those lines, I can get a little bit wider of space, something like this. And when you're done just click the arrow to exit your Symbol Editing Mode, and then you can go ahead and scale.

So you can make it as short as you want, as long as you want, and those corners on both sides are gonna stay exactly the way they were. So this alone is worth the price of admission for working with Symbols. Sometimes you may wanna work on some of the Symbols artwork and not have it attached to the Symbol itself. And so, for instance, I have a row of buttons up here... I mean, move those out of the way and zap 'em. This is already a set of Symbols, and maybe it's a set of buttons that I use over and over again, what I can do is I can break the link to Symbol by right-clicking and choosing this option from my Context Menu.

This converts the shapes back into editable shapes, no longer connected to the Symbols Panel. So let's say I wanna change the color, I wanna make 'em all blue, then I can drag those as a group back in to the Symbols Panel, and I can call this my "blue buttons" or whatever I wanna call it, click Ok, and now I'm ready to use those. So now I have two sets, one with green buttons and one with blue buttons. So you could do this for interface elements, you could have a set that you use and then break the link, re-color them, save them back to the Symbols Panel so the next time you work on a project maybe you have two sets of interface elements that you could choose from.

And you can keep adding to your Symbols library as you work on new projects. Illustrator comes with a bunch of free Symbol libraries which you can access through the Library button at the bottom of the Symbols Panel. There's a ton of freebies. You could also open other Symbol libraries, so if you were to find one on the Web you can download it and install it by choosing Other Library. And if you ever wanna save your own set of Symbols to reuse for another project, go to the Symbols Panel menu and choose Save Symbol Library.

You can name it and save it to the location of your choice on your computer, and then open the Symbol library backup to use in any new project. Symbols are great for so many uses like form elements, progress bars, things like ribbons, mobile app elements, cursors, even info boxes or social media icons, you can use 'em for bread crumbs, for control buttons, and so much more. So, whether you're using freebie Symbols or if you create your own Symbol libraries, working with them can be a huge time-saver that really boosts your creativity and your productivity.