20 Adobe Illustrator Tips, Tricks & Resources for Designing for Web in Illustrator
Although many designers have preferred to use Photoshop for designing website graphics and mockups in the past, Adobe Illustrator is gaining popularity in this arena. As a graphic designer, Illustrator has always been my default program but when I got a job where I would no longer be designing for print but for web I was worried that the two wouldn’t be compatible. However the more I use Illustrator to create for the web I find that is completely web friendly and has many wonderful features for designing for the web. Here are 20 tips, tricks, tools and resources that will make designing for the web in Illustrator that much easier.
1. Adobe Illustrator – Web Profile. When you create a new document for web you all know that you should be working in pixels. What you might not know is that if you choose web for your profile you will get to choose from the most common sizes in web design and you will automatically be working in pixels.
2. Adobe Illustrator Devices. Also under the profile if you choose devices you will get sizes of the most popular devices-you never have to memorize screen sizes again!
3. Adobe Illustrator Align to Pixel Grid. Before you close out your new document window make sure you check align to pixel grid. This will result in crisp looking, pixel-perfect shapes. Plus this will make the web developer love you!
4. Adobe Illustrator Artboards. If you have used Illustrator you know that artboards are a life saver for creating multiple documents or alternative versions of the same project. But artboards are also helpful in the web design process. You can easily create an artboard for each page and easily see how they work together. Don’t forget you can save individual artboards as separate documents making it easy to show clients.
5. Adobe Illustrator Artboards-Responsive. Artboards are also great for creating responsive design. If you are like me and need to see everything visually here is a great tip. Create one document and name it responsive design. Then create 3 artboards. One the size of your laptop or screen size, one the size of your tablet of choice and one the size of your mobile phone of choice. With this created you can easily work on ALL three layouts at the same time. SUPER BONUS TIP: Make sure you name each artboard accordingly-this will automatically name them the appropriate device upon saving!
5. Adobe Illustrator Scripts. Are you ready for your life to be changed? No seriously this will be a big step. Haven’t you ever wished you could save each artboard as an individual png? Well with this script-wish granted! With this script you can create graphics on multiple artboards and then save each artboard as a separate png!!! No more slicing for you. Plus whatever you name the artboard that is what the file will save as. Huge time saver and again it will make you look awesome to the web department. A WORD ABOUT SCRIPTS-scripts are just like actions in Photoshop- a preprogrammed action that you download. For this script visit: http://www.ericson.net/content/2010/10/export-layers-as-pngs/
6. Adobe Illustrator Wireframing and Sitemap. Illustrator is a great tool to create quick and precise wireframes and sitemaps. Whether you are making them for clients or in-house meetings, there is no doubt that Illustrator makes this preliminary process SO much easier and quicker. You can make changes, move elements around, duplicate elements with ease. Plus when done you have a crisp, clean vector wireframe or sitemap-Perfect to print for client approval!
Looking for some wireframe inspiration? Checkout, I Love Wireframes: http://wireframes.tumblr.com/
7. Adobe Illustrator Shapes. This may seem like an obvious tool in Illustrator but it’s one of the most underused, especially when creating elements to an exact size. Choose the shape tool and click on the artboard. You will be directed to a custom dialog box. This is great for creating buttons, bars or images to an exact size. Great in the pre-planning stage.
8. Adobe Illustrator Symbols. Symbols are your best friend when designing for the web. Why? Because they make it easier to create repeating elements- buttons, icons, etc. If there are icons you use all the time in your design instead of creating them over and over again, convert them to symbol and you will always have it available to you in your library. You can convert any illustration into a symbol. Your icons are a click and drag away. SUPER TIP: When starting a project always convert the companies logo to a symbol since you will be using it over and over again!
To learn how to create and edit symbols: http://help.adobe.com/en_US/illustrator/cs/using/WS714a382cdf7d304e7e07d0100196cbc5f-6221a.html
9. Adobe Illustrator Symbols-Web. If you don’t feel like making your own symbol, Illustrator has given a huge variety to choose from. Specifically there is a whole library for web icons and web buttons and bars. Plus they are totally editable and customizable.
10. Adobe Illustrator Rounded Corners. Rounded corners are easy to make in Photoshop but adjusting them isn’t. Illustrator allows you to create rounded corners edges on any graphic you make (if your text is outlined you can also add this effect). Plus it also allows you to adjust them easily. Effect>Stylize>Rounded Corners.
11. Adobe Illustrator Patterns. Another typical element that designers like to use Photoshop for but is just as easy in Illustrator, are patterns. Just drag a pattern or image into your swatches palette and you can use it as is or easily scale it. Works with bitmap patterns as well. Great pattern resource: http://subtlepatterns.com/
12. Adobe Illustrator Text Wrap. Text wrap is great for, well wrapping text around pictures. However the reason I use it in designing for web is that it gives the illusion of padding and gives you a good idea of how you should space your text and images. Create a text box and select the text and the image you want to wrap. Then go under Object>Text Wrap>Create. There is also a dialog box that will let you adjust the amount of wrapping or “padding” to your image.
13. Adobe Illustrator Color Groups. Color Groups are very unique to Illustrator. They allow you to organize your colors into groups. It is a huge time saver when with working companies with specific colors that have to be used on various designs and projects. Color groups also allow you to name specific colors making it easy for multiple people to work from the same file. Never have your web developer look for the HEX number again!
14. Adobe Illustrator Color Groups-Inspiration. Say you don’t have a set color palette and want to try a few variations out. Color Groups let you download palettes and schemes from various sources (ie; Kuler and Colourlovers) and keeps them organized in their original scheme. This makes it very easy to experiment with different combinations and save the ones you want to use.
15. Adobe Illustrator Scale. It might not be the most flashy tool but it’s hugely important. The ability to scale your elements without loosing information or quality is such a huge advantage with Illustrator. Sure the logo looks great at 100px at 72 resolution but what happens if they want it to go on a business card or a billboard?
16. Adobe Illustrator Wireframes revealed. Ever wanted to know what your favorite website’s wireframe looks like? Visit: http://www.wirify.com/. It will allow you to view any website as a basic wireframe!
17. Adobe Illustrator Color Palettes. As I mentioned earlier there are tons of places that you can get palettes and color schemes from. One of my hidden secrets is on the site Colourlovers. If you look under the Trends tab and choose websites you will have access to 100’s of palettes from websites that are trending right now. Check it out here: http://www.colourlovers.com/web/trends/websites
18. Adobe Illustrator Free Vectors. As savvy as an Illustrator as you might be, sometimes it’s nice to have access to some free vectors. What I love about this site is that it has free iphone, ipad and imac vectors perfect for mocking up a web designs for presentations. Vectezzy: http://www.vecteezy.com/
19. Adobe Illustrator Icons. When designing for the web your design is probably going to include icons. Sometimes you don’t always have the time or the need to create your own. Icon Finder is a huge collection of all sorts of free icons for web. The great thing about this site is you can search by keyword or theme to find the icon that fits the look and style of your site. Check it out: http://www.iconfinder.com/
20. Get inspired. Now that you have few new tricks up your sleeve, you are ready to start creating some amazing web graphics and designs. Need some inspiration? There are endless galleries and collections of designs to help get those creative juices flowing. Some include: Dribble, Behance, Best Web Gallery and Pinterest, just to list a few.
What did you think of this article? Do you know of a trick, tip or resource that I left out? I would love to hear from you! Make sure to leave comments below.