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?
<Helpful Resources>
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.
Thanks for a thought-provoking article. I have never ever thought to do web design in Illustrator, always defaulting instead to Photoshop. Multiple art boards definitely sound worth investigating, as do the web symbols. A question for you – if you design in Illustrator using pixels, is it still vector based? I have often had clients decide at the end of the project that they really want to be able to print the artwork from their site in publications or brochures. Does this help with that or is it just the same problem because you’ve specified pixels at the start?
Glad the article was helpful for you @ Jenny C. To answer your question Yes, if you design in pixels it is still vector. One helpful tool is pixel preview so you can see what it will look like when uploaded to the web.However, if they want to have good quality brochures I would suggest to do a downloadable pdf-that will give them the quality they are looking for!
ANy other questions just let me know.
Seems like overkill to me, why use a vector only application when there already is a tool called Fireworks? It was designed for web and has some of the best tools available for building web elements. Not to mention the compression is better than either Photoshop or Illustrator (which I might add has the sorriest compression).
Why are you talking about responsive design in graphics? That is handled completely with CSS and other than creating different image sizes which if you are using a quality script that does reduction properly even that is not a graphic issue anymore.
Illustrator for web is a stupid idea period!
Thanks for your reply to my article. The article was geared to graphic designers who are making a transition to designing for the web. They might not have the experience with Fireworks or other web software and feel mostly comfortable designing in Illustrator or Photoshop. These are meant to give them some useful tips so they can better create these graphics and then hand them off to their developers.
As for responsive design, I know it’s helpful for me to see what the design is going to look like on each device to better place images, text and so forth. Especially when we are creating something from the ground up it makes it easier to see how it’s going to look before putting into JQuery mobile. Plus if you are presenting a mock up to a client this is a great way to make changes to the design before any coding gets done.
I respect your point of view and you made some valid points but I still believe Illustrator can be a very valuable tool in the web design process.
I agree with you, and im starting to use illustrator and photoshop for logo and web design, and it was a good ideia to me, beacause i’m not used to other softwares, and this article came to help me. Beside, Fireworks is not produced anymore, because most of is tools are in photoshop. So Ai and Ps is a good choice for web design. Congrats, good article.
Thanks for the resources.
@Kevin M: Adobe’s killing off Fireworks. Also Illustrator isn’t vector-only. Many people use Illustrator to lay out their designs that include photos as well as to create vector artwork, and I wouldn’t call it’s widespread use for design a stupid idea. You may want to familiarize yourself with it better before criticizing the thought.
Have to mention I can’t stand that this (or when any) site doesn’t date their articles. This isn’t evergreen content.
Thanks for the backup with Illustrator-it’s always good to hear from supporters!!