Designing with Illustrator: Tips and Tricks, Part I

Angie Terrell

3 min read

Jan 28, 2015

Designing with Illustrator: Tips and Tricks, Part I

Illustrator header image

Adobe Illustrator is great for creating wireframes and visual designs, and for some of us designers at Big Nerd Ranch, it’s the primary tool we use for client apps and internal projects. Here are some of our favorite tricks and tips.


Symbols are essential for designing interfaces in Illustrator. If you’re not using them, you should be. Symbols are perfect for anything that will be reused in your designs—and as we all know, when designing interfaces, many elements should be reused.

Illustrator symbols

When you create an icon or button, just drag that object into the Symbols panel, and a symbol is created for you. From that point on, you can just drag the symbol onto your artboard.

Why not just copy and paste? Well, when the client asks for a change later, you can change the symbol once and it will update everywhere in your Illustrator file, across all artboards.

If you have created a set of symbols during the wireframe phase, then there’s a good chance that symbol will evolve into a visual element that will need to be part of the style guide for the final product. If it’s reusable, then a visual language can start from your symbols panel.

Appearance Panel

Speaking of panels, the Appearance panel can be used in a very powerful way to create visual graphics that can also be reused.

This tutorial and others opened my eyes to the power of using multiple fills, strokes and effects within the appearance panel on a single object.

This is an example of just how complex the Appearance panel can become on a single object.

Appearance panel

Then, when you’re happy with the appearance, you can drag the object to the Graphic Styles panel and reuse that appearance on other objects. This technique can even be used on typography in really interesting and creative ways.

Pixel Perfect

If you want your designs to be tight and clean on device or on the web, then you’ll want to start your AI documents with these settings.

When you create a new document, make sure you are working in pixel units and have Align New Objects to Pixel Grid checked.

Align new objects to pixel grid

Then, in your General Settings, make sure your grid and keyboard increments line up to individual pixels.

Align to individual pixels

I have a gridline every 64 or 8, depending on the project. But make sure that subdivision divides into individual pixels.

Subdivision to individual pixels

Then if your keyboard increment is every 1px, you can be sure that you’re nudging on the pixel grid.

That’s not all. If you want things to be pixel perfect, you MUST make sure that Snap to Grid is checked. This is very important. If this isn’t checked, you may still get objects that sit on half a pixel (which will cause a fuzzy edge).

Snap to grid

From that point on, use the Pixel Preview option in the same View menu to check your design and see how much anti-aliasing is being applied. It’s possible something is falling off of the pixel grid and could use a little tightening up.

I’ll have more tips and tricks to come in a future post, but if you can’t get enough of learning about design best practices, check out our iOS Mobile Design and Android Mobile Design bootcamps.

Angie Terrell

Author Big Nerd Ranch

Angie joined BNR in 2014 as a senior UX/UI designer. Just over a year later she became director of design and instruction leading a team of user experience and interface designers. All told, Angie has over 15 years of experience designing a wide array of user experiences

Speak with a Nerd

Schedule a call today! Our team of Nerds are ready to help

Let's Talk

Related Posts

We are ready to discuss your needs.

Not applicable? Click here to schedule a call.

Stay in Touch WITH Big Nerd Ranch News