Although many designers have\u00a0preferred to use Photoshop for designing website graphics and mockups in the past, Adobe Illustrator is gaining popularity in this arena. As a\u00a0graphic\u00a0designer, 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\u00a0Illustrator\u00a0to create for the web I find that is\u00a0completely\u00a0web 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.<\/p>\n

1. Adobe Illustrator – Web Profile.<\/strong> 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\u00a0the\u00a0most common sizes in web design and you will automatically be working in pixels.<\/p>\n

2. Adobe Illustrator Devices.<\/strong> 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!<\/p>\n

<\/p>\n

3. Adobe Illustrator Align to Pixel Grid.<\/strong> Before you close out your new document window make sure you check align to pixel grid.\u00a0This will result in crisp looking, pixel-perfect shapes. Plus this will make the web developer love you!<\/p>\n

<\/p>\n

4. Adobe Illustrator Artboards. <\/strong>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\u00a0separate\u00a0documents making it easy to show clients.<\/p>\n

5. Adobe Illustrator Artboards-Responsive<\/strong>. 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\u00a0the\u00a0size 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\u00a0accordingly-this will\u00a0automatically\u00a0name them the\u00a0appropriate\u00a0device upon saving!<\/strong><\/p>\n

<\/p>\n

5. Adobe Illustrator Scripts<\/strong>. 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\u00a0separate\u00a0png!!! 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:\u00a0http:\/\/www.ericson.net\/content\/2010\/10\/export-layers-as-pngs\/<\/a><\/p>\n

6. Adobe Illustrator Wireframing and Sitemap<\/strong>. Illustrator is a great tool to create quick and precise wireframes and sitemaps.\u00a0Whether\u00a0you are making them for clients or in-house meetings, there is no doubt that Illustrator makes this\u00a0preliminary\u00a0process 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!<\/p>\n

Looking for some wireframe inspiration? Checkout, I Love Wireframes:\u00a0http:\/\/wireframes.tumblr.com\/<\/a><\/p>\n

7. Adobe Illustrator<\/strong> Shapes<\/strong>.\u00a0This 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.<\/p>\n

<\/p>\n

8. Adobe Illustrator<\/strong> Symbols<\/strong>. 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\u00a0over\u00a0and over again, convert them to symbol and you will always have it\u00a0available\u00a0to you in your\u00a0library. 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!<\/strong><\/p>\n

To learn how to create and edit symbols:\u00a0http:\/\/help.adobe.com\/en_US\/illustrator\/cs\/using\/WS714a382cdf7d304e7e07d0100196cbc5f-6221a.html<\/a><\/p>\n

9. Adobe Illustrator<\/strong> Symbols-Web.<\/strong> If you don’t feel like making your own symbol, Illustrator has given a huge variety to choose from.\u00a0Specifically\u00a0there is a whole library for web icons and web buttons and bars. Plus they are totally editable and customizable.<\/p>\n

<\/a><\/p>\n

10. Adobe Illustrator<\/strong> Rounded Corners.<\/strong> 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\u00a0easily. Effect>Stylize>Rounded Corners.<\/p>\n

11. Adobe Illustrator<\/strong> Patterns.<\/strong> 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\u00a0palette\u00a0and you can use it as is or easily scale it. Works with bitmap patterns as well. Great pattern resource:\u00a0http:\/\/subtlepatterns.com\/<\/a><\/p>\n

<\/p>\n

12. Adobe Illustrator<\/strong> Text Wrap.<\/strong> 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.<\/p>\n

<\/p>\n

13. Adobe Illustrator<\/strong> Color Groups<\/strong>. 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\u00a0specific\u00a0colors that have to be used on various designs and projects. Color groups also allow you to name\u00a0specific\u00a0colors making it easy for multiple people to work from the same file. Never have your web developer look for the HEX number again!<\/p>\n

<\/p>\n

14. Adobe Illustrator<\/strong> Color Groups-Inspiration.<\/strong> Say you don’t have a set color palette and want to try a few variations out. Color Groups let you download\u00a0palettes\u00a0and schemes from various sources (ie; Kuler and Colourlovers) and keeps them organized in their\u00a0original\u00a0scheme. This makes it very easy to experiment with different combinations and save the ones you want to use.<\/p>\n

15. Adobe Illustrator<\/strong> Scale.<\/strong> It might not be the most flashy tool but it’s hugely important. The\u00a0ability\u00a0to 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?<\/p>\n

<Helpful Resources><\/p>\n

16. Adobe Illustrator<\/strong> Wireframes revealed.<\/strong> Ever wanted to know what your favorite website’s wireframe looks like? Visit:\u00a0http:\/\/www.wirify.com\/<\/a>. It will allow you to view any website as a basic wireframe!<\/p>\n

17. Adobe Illustrator<\/strong> Color Palettes.<\/strong> 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:\u00a0http:\/\/www.colourlovers.com\/web\/trends\/websites<\/a><\/p>\n

18. Adobe Illustrator<\/strong> Free Vectors.<\/strong> 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:\u00a0http:\/\/www.vecteezy.com\/<\/a><\/p>\n

<\/p>\n

19. Adobe Illustrator<\/strong> Icons<\/strong>. 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\u00a0search\u00a0by keyword or theme to find the icon that fits the look and style of your site. Check it out:\u00a0http:\/\/www.iconfinder.com\/<\/a><\/p>\n

20. Get inspired.<\/strong> 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.<\/p>\n

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.<\/p>\n","protected":false},"excerpt":{"rendered":"

Although many designers have\u00a0preferred to use Photoshop for designing website graphics and mockups in the past, Adobe Illustrator is gaining popularity in this arena. As a\u00a0graphic\u00a0designer, Illustrator has … Continue \u2192<\/a><\/p>\n","protected":false},"author":30,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[2618,2318,30],"tags":[],"aioseo_notices":[],"yoast_head":"\n