As a webdesigner, I’m at the moment specialized in interface design for application website but also for iOS, android and BlackBerry, so I tend to use a lot Illustrator. I use it for mockups, but also for the design of entire websites. Some designers might call me crazy, but after a while, I found that I worked more quickly with Illustrator than with Photoshop. In this article, you will find some of the tricks that help me work faster and considerably helped to improve my day to day workflow on Illustrator.
Quick Note : I base this article on my CS5 version of Adobe Illustrator, on windows so some keyboard shortcuts might be different for Mac users, and some functionalities might not exist on previous versions. If you note any difference on your working environment, you can let us know in the comments.
Scale and Resize Objects with Perfect Strokes
By default, Illustrator does not scale strokes (unless you outline the path). So when you scale an object with a 10px stroke, the stroke will be 10px wide, no matter what the new size of the object is. This lead to pretty ugly objects. Fortunately, Illustrator has an option for that called “Scale Strokes & Effects”. To enable (or disable if you need) this option, go to Edit > Preferences > General and simply check or uncheck the “Scale Strokes & Effects” to make it suite your needs. You can then scale your objects and the stroke will stay proportional.
Short Cuts for Pasting Perfectly
Another way of winning time and getting more productive with a software is to know the shortcuts. We don’t like to re-invent the wheel as designers and we tend to copy-paste a lot of stuff we already created to re-use it : shapes, graphic styles, etc. Here are some useful shortcuts for quick copy-pasting actions. Those action are available in the menu, but It’s always better to know the shortcuts.
Paste in front: (CTRL + C to copy then) CTRL + F. This is the equivalent of the Photoshop “duplicate” option. It will copy your object, and past a new same one “in front” of it. Very useful for pixel perfect alignments.
Paste in back: (CTRL + C to copy then) CTRL +B : it does the same thing as past in front, but, guess what, pastes the object behind the selected one.
Copy an object by drag and drop: old + ALT (pc) + drag the object. With this combination of keys you will be able to duplicate any object and place them where you want them to be, just select the object, press ALT, drag and drop it. Be careful to drop the mouse button before the ALT key, otherwise it will just move your object.
If you want to use the guides to place the object, you can add the shift key. The object will then move following abscissa – ordinate guides. The shift key tricks also works if you only want to move an object.
Two Eyedropper Tips for Better Color Selection
I presume that everybody knows how the eyedropper works : you select an object, select eyedropper (the I key), and pick the color – visual style of the object you want. The eyedropper also picks border colors and styles. But did you know that you can make the tool work the other way around? You can give an object the border style and color of your currently selected object, just by holding the ALT key while the eyedropper is selected. Notice that your eyedropper cursor gets black when you do that.
Another trick is to use the SHIFT key. When combined with the eyedropper, this key enables you to only select the color you want and apply it to the fill or stroke color, without coping the style of the whole object.
Improving Pen Tool Use
The pen tool is, I may say, the most used tool in Illustrator. Changing the tool just to move a path or the screen make you lose a lot of time, so here are a few keyboard tips to work without having to change tool :
To move a path you’ve created while it’s still selected, just hold the CTRL key. You can then go back to edit this path by clicking on the last anchor you created.
To move the anchor point you are currently editing, hold the mouse and click on the spacebar. You will be able to change the position of this anchor. Once you drop the spacebar key, the anchor won’t move anymore, and you will be able to continue editing the path.
If you’re working on a very large path, and you’ve zoomed a lot, you might need to move the screen. To do so, simply hold the spacebar : you will see the Hand tool. Move the screen, and go back editing your path once you dropped the spacebar.
An annoying thing, when working with many path on the same layer / document, is that they tend to react with other anchor points. For example, if you create a path, and try to create an anchor on this path, the pen tool will automatically change its function to the “add anchor point” tool when passing on the path. If you want to prevent this behavior, go in Edit > Preferences > General. Then check the “Disable Auto Add/Delete” checkbox.
Make a Guide with Anything
I guess that a lot of designers use guides to align their design. Most might use vertical guides, sometimes horizontal guides. But did you know that you could create guides with pretty any path?
Need a diagonal? Draw your diagonal line with pen or segment tool, go to View > Guide > Make guide. Done.
Need a more exotic one? You can create guide from anything, all you have to do is create the path, and transform it into a guide.
Going Flexible with Rounded Boxes
Rounded boxes has become part of many many many? website UI elements since a few years know. Everybody seems to love rounded boxes. And Illustrator has a special tool for this : the rounded rectangle tool.
The problem with this tool is its lack of flexibility. Once you’ve created your rectangle, you have to edit anchor by anchor if you want to be able to scale and resize the rounded rectangle without deformation, otherwise you might end up with some strange shapes.
Did you know that there was another way to create rounded rectangles? A more flexible one actually? All you have to do, is create a normal rectangle, then go to Effect > Stylize > Rounded Corners.
There are two advantages to this method: first, you’re rectangle is flexible, you can resize it as you like. Secondly, you can change the size of the corner by going into the appearance panel and double clicking the rounded corner style.
The big downside of this method (yes there is one) comes when you want to use the pathfinder with those rectangles. Since it is a applied to the whole object, if for instance you trim the object, the rounded corners will still be applied to the new object. To be able to use those rectangles with pathfinder without having rounded corners everywhere, you have to select the rectangle, go to object > expand Appearance.
Unfortunately, this will then render you rectangle less flexible and you won’t be able to resize it without deformation, so use this with parsimony.
Working with Symbol Libraries
Another great feature of Illustrator, is the ability to use and re-use objects you have already created using the symbol panel. Using this panel, you can save your objects for later use in the same document. You can also save entire symbol panels to use them in other works, thus creating libraries of ready to use icons, symbols etc. A nice example of such a library is the UI framework created by Webalys.
To create a symbol: select all the objects you want to group in the symbol and then go to the symbol panel and click the “new symbol” icon (same icon as new layer).
Once the symbol is created, you can re-use is by dragging if from the symbol panel into the document.
The most important thing to remember when working with symbols, is that they are still flexible and editable. But remember: if you edit the symbol, all the instances of this symbol created in the page will be edited. To edit the symbol definition, double click on one of the symbols in the document. You should get a pop up if it is the first time you’re doing this. Notice that the change will be applied to all instances, and in the preview icon in the symbol panel.
If you want to only modify one instance of the symbol, you will have to right click the object, then choose “break link to symbol”. Remember that this object is not a symbol anymore, so any modification will only be applied to this object. You can nevertheless create a new symbol with the modified object.
Be also careful when you delete the symbols from the panel: choose “expand instances” if you want to keep the symbol that were inserted in the document.
Also note that you can combine symbols in symbols. Then the modification of one of them will be applied on other symbols that it is part of.
To save your symbol library, go in the symbol panel, click the bottom left symbol libraries menu, and click save. To load a symbol library, go in the same menu, and search it under the user defined menu. Those libraries will not be loaded at the start of illustrator, but you can make them part of your permanent workspace by checking the “persistent” option in the top right menu of the panel.
Working With Graphic Styles
Graphic styles work a little bit like symbol: you can save for later a set of different effects applied on an element, and re-use them on other elements. Here again I will advise you to download the Webalys framework which provides a great library of graphic styles.
One you’ve created a graphic style for an element, let’s say a button, all you have to do is open the graphic styles library and click the “New Graphic Style” icon. All of the filters and elements that are displayed in the “appearance” panel will be saved in the graphic style. You can even save the radius of your rounded corners!
To apply this style to other elements, select the element and chose your style. If you need a preview of the element with the style, right-click the graphic style (works on windows) and you will see a preview overlay of the current object with the style you’ve clicked. Pretty useful when some styles are quite similar.
Like for symbols, you can use the graphic libraries menu to save your styles and load other styles libraries.
Keep Your Workspace Clean by Using Multiple Artboards in the Same Document
Since CS4, Illustrator has the ability to create multiple artboards. The artboard is the region that contains what’s printable. They are pretty useful when you want to work with different artworks that will be part of a whole document: different pages of a website (instead of using layers), different parts of a mobile application. In my example here, I created 4 artboards for each part of an iPhone application: the logo, the launch icons in different sizes, the home screen of the application, and the icons.
Each artboard works on its own: it have his own ruler, but layers are common to all artboards.
To create an artboard, use the artboard tool (or CTRL + o). You can change the size of the artboards, duplicate them, delete them, etc.
Consider artboard like flexible stand alone pages, presented in the same document. You can continue to work normally when you use multiple artboard, you can even use the slicing tool. When saving for the web (or when you want to print), the action will work for the selected artboard, thus enabling user to save each artboard in a separate
.jpg file for example.
Working with Transparency: The Opacity Mask
The last trick might surprise some people, but it is actually possible to work with opacity masks in illustrator, as if you were working with a mask in Photoshop.
To activate an opacity mask on an element (here I use a pink rectangle) : create the object, open the transparency panel. You will see a preview of the object. Notice the space on the right of the preview ? That’s where our mask goes, just double click this space, and you will get a mask.
This mask works exactly like in Photoshop: use black to hide elements, and white to make them appear. You can even play with the opacity of the elements you create, use gradient, etc. The example above was created by adding some black and white stars in the mask, and giving them different opacities. Note that I never touched the pink rectangle I created at the beginning.
As a bonus tip in the opacity section, I will explain how to change opacity of the stroke. First create the object and give it a stroke. Then in the appearance panel, select “stroke”. Then open the transparency panel and change opacity. When stroke is selected, this will only change the opacity of the stroke. This also works if you select fill, and want to only change opacity of the fill.
That’s all folks for today, I hope you enjoyed the tips ! As you can see, illustrator is a great tool when you want to work quick and fast. You can re-use objects, symbols, styles you’ve already created, thus improving your workflow. I personally tend to use illustrator a lot for quick wireframing, building consistent icon sets and button libraries for projects. I also use it a lot when I create mobile application. I’d be glad to read how you would use Illustrator in your projects, so don’t hesitate to leave a comment.
There are many great websites out there if you would like to get better at illustrator. If you know some other great illustrator tips, or if you know the equivalent for the keyboard shortcuts on Mac, don’t hesitate to leave a comment.