Menu Search
Jump to the content X

Productive Web Design With… Adobe Illustrator?


Admittedly, Adobe Illustrator is often most certainly not the first choice that comes to mind when it comes to Web design. Fireworks and Photoshop are used much more often, and there are some good reasons1 for that. Still, although Illustrator has traditionally been used for drawing illustrations and logos, you can use it to design layouts and user interfaces, too.

In fact, in my opinion, you can utilize Illustrator to solve some regular design tasks better and more easily than you would do with other tools. With the techniques and tips I’d like to present in this article, I am certain that you will be able to build modular, flexible websites in less time and with less work.

Reasons To Use Illustrator For Web Design Link

Design Faster Link

Unlike the layers paradigm in Photoshop (i.e. first select the layer, and then work on it), Illustrator employs an “artboard” paradigm: every object is selectable directly on the canvas. With just one click, you can manipulate any object on the artboard (by resizing, moving, rescaling, etc.) and make it pixel-precise with the Transform panel (available only in Illustrator CS5). It’s more intuitive and requires fewer mouse clicks, making your work more fluid.

You will also save time with two helpful functions that are unique in Illustrator:

  • Create modular Web designs with the Symbols panel and
  • Quickly format text with the Paragraph and Text Style panels.

Precise edition & dimensions in Illustrator2

Think Modular Link

Using the Symbols panel, you can create reusable components that will save you time when updating your designs or starting from scratch. This technique is especially useful for recurring elements, such as buttons, navigation bars, pagination elements, footers, etc.

How to create reusable components?:

  1. Create a master component (a button, navigation bar, etc), and save it as a ‘Symbol’ in the Symbols panel.
  2. Drag your newly created component from the Symbols panel and drop it into your design.
  3. Now, when you modify your master button in the Symbols library, every linked occurrence of the symbol will update as well.


Quick Tool for Creating Wireframes Link

Illustrator is useful for wireframing, enabling you to quickly show the basic layout and navigation to clients. I usually begin by drawing a mock-up in black and white, using simple boxes, lines and typography. After I presented the wireframe to the client for approval, I create a more sophisticated design, with colors and effects based on the wireframe (we will cover this part in more detail later in the article).

Here are the advantages of preparing the wireframe in Illustrator:

  • Illustrator is fast for drawing wireframes because of its vector nature. You can create boxes, lines and text quickly and easily.
  • You can use libraries of commons elements, such as buttons and icons, and drop them easily into the wireframe.
  • Once the basic wireframe has been approved, you will save time creating the final design because the layout and content are already in place. Sometimes getting the final design is as easy as formatting text with style sheets and applying some graphic styles.


Format Text Quickly and Easily Link

If you use CSS or InDesign, then you will already be familiar with “Character” and “Paragraph” styles and how powerful they are for quickly modifying and controlling the layout of text. You can do the same with Illustrator. The good thing is that Illustrator shares a lot of InDesign’s advanced typographic functionality.

For example, use a paragraph style for all of the body text on your website that you wish to style. Then, when you make a modification (say, change the font from Arial to Verdana), the body text on every page of your design will adjust right away.

In addition to Paragraph styles, you can use the Eyedropper tool to quickly apply text styles to various bits of text:

  1. Select the text whose style you want to replicate and
  2. Click on the text you want to style, and …Voila! The style is instantly applied.


Become an Agile Designer Link

Being able to quickly change your layout without a lot of effort is the key to designing in today’s rapidly evolving profession. After years of using Adobe’s Photoshop for Web design, I began to feel like a “pixel tailor,” using dull scissors and chalk.

I feel that the bitmap nature of the application is not optimized for performing basic Web design processes. For example, suppose I want to round a shape. I would need to follow these steps: select the area, use the “Round the selection” function, invert the selection and then cut the selected area so that the preserved area will appear rounded.

With Illustrator, I just apply a rounded effect to my selection. Additionally, I can save this graphic style and apply it to other elements. In this way Illustrator helps you respond quickly to your customer’s needs.


Focus on Simple, Clean Design Link

Illustrator offers simpler graphic options than Photoshop, which can help you to focus on sound design principles and stop wasting time on unnecessary effects and filters. Photoshop remains indisputably the best option if you want complex interfaces with a lot of graphic effects, such as textured backgrounds and complex lighting effects. But if your designs are simple and clean, then I am confident that you would complete your work faster and more efficiently with Illustrator. And if you really do need complex and texturized graphics, you can accomplish this with Illustrator, too, but it takes some know-how. Later on, we will discuss how to improve your designs by avoiding the overly clean “vector” look, as seen in the textured buttons below.


Work Lighter and Faster Link

Vector images are smaller than rasterized images. Thus, Illustrator will help you create designs that are lighter and less CPU-intensive than those made with Photoshop. This enables you to group a lot of interface screens into the same Illustrator file, avoiding the inconvenience of having to open multiple files when designing.

Over my career, I have designed up to 30 screens all within the same Illustrator file while keeping the size under 5 MB (excluding bitmap images). Because Illustrator is not as demanding on your CPU and requires less memory, you can keep several applications open at the same time without slowing down your computer. You also don’t need the most powerful (and thus more expensive) machine to create, adjust and export your designs.

How To Create Modular Designs Link

To make the discussion more interesting in terms of how exactly one can use Illustrator for regular design tasks, let’s look at the ultimate Illustrator technique for Web designers: creating a modular design with vector symbols.

Save Time With Symbols Libraries Link

The Symbols library enables you to reuse and modify elements across an entire website. Not only does it save you time, but it helps you build a library of items that can be used over and over again.

Illustrator previews all of your symbols in the Symbols panel, and you can create as many panels as you need. You can organize your work by creating panels specific to each kind of common GUI element: arrows, icons, buttons, etc. In this way, you simply browse through your symbols, select the one you want, and drop it into the design on your artboard.


Keep Your Design Consistent Link

Symbol components help you maintain the look of a design throughout the entire website. By centralizing component design with master symbols, you are able to view all of your elements at once and make sure that the style you are working towards is consistent. No more will you need to check every screen to see whether you have forgotten to update one element.


Build Up a Components Library for Future Projects Link

Because the components reside in the Symbols panel, they are separate from the design layout. By continually adding components to your library, you will build up a collection of items that can be reused or modified in other projects. The increase in efficiency quickly becomes exponential. This is the first step to building your own interface framework.

My humble advice to help you organize your work is to also use different panels for each group of GUI elements. Over the years, I found out that it’s better to have one panel for arrows, one for icons and one for basic GUI elements (buttons, forms elements, etc.). You can see an example of a GUI components library by downloading my free GUI design framework10.

To create your own Symbols panel, first, add a vector shape to the Symbol panel by dropping it inside. Next, save this symbol library as an AI file by selecting “Save symbol library” in the Symbol panel options:


You can add as many Symbol panels to the artboard as you want by going to Window → Symbols Libraries.


Modular Design Limitations With Photoshop Link

Photoshop has the option “Customs shapes,” which are similar to the “Symbols” in Illustrator but has three major limitations:

  1. You can’t define a precise size for the elements you create. Let’s say you draw an area for a custom shape without knowing the exact size you want. There is no editable field that allows you to adjust the dimensions to the exact size you require.
  2. You cannot change the dimensions of the “custom shape” once it’s been created. This makes your designs inflexible and labor-intensive. These custom shapes behave more like a vector brush than reusable components for Web design.
  3. There isn’t a specific panel to manage your custom shapes. Adding a custom shape to the repository requires many clicks every single time: click the custom shape icon, activate the drop-down panel to see the customs shapes, click to select the shape. Then finally, click on the layout and define the size of the shape by dragging it to the desired dimensions. That’s a tedious process. Illustrator’s definable Symbols panels is far easier to use and is the main reason why I sincerely believe Illustrator is the superior Web design tool.

Create Professional Designs Link

You can design professional, sophisticated interfaces with Illustrator. Look at the buttons below. Notice that they have a textured appearance and various visual effects (drop-shadow, inner glow, etc). With a little practice and a good eye, you can achieve the same graphic designs that you would with Photoshop. The clear advantage, however, is that these elements will be completely editable, resizable and reusable.

Add Visual Effects Link

Although it has fewer built-in graphic effects filters than Photoshop, Illustrator includes the most useful ones: drop-shadow, textures, noise, rounded corners, and inner and outer glow. By focusing your creativity on fewer effects, you will work more efficiently and spend less time playing around with effects.

All the filter settings are located in the Appearance panel and you can save every combination of effects as a graphic style, making it easy to reuse or to modify your designs. Remember, with Illustrator you have the power of modular design: when you update a graphic style, every occurrence of the element using that style gets updated as well.

Another powerful feature of Illustrator is the infinite number of outlines that can be placed around vector elements and the unlimited number of background fills that can be added to any object. Experiment with these, and you can create some complex layered styles.


Texturize Your Design Link

It’s usually better to avoid the sterile “vector” look in your designs by adding some texture to the elements in the layout.

Here are three main methods of texturizing in Illustrator:

  • Use seamless and repetitive bitmaps. For large backgrounds, import a texture by selecting File → Place, and then add it as a swatch in the Swatch panel. Then, you can use it to fill any shape.
  • Use the Stylize filters (Effects → Stylize) to add some noise or texture to a background.
  • Use the texture swatches included with Illustrator, and put them on top of a background fill. Change the texture fill to an Opacity mode such as Multiply, and adjust the opacity to somewhere between 15 and 20% to give it a subtle fused affect.

Again, you can save all of these texturing and noise effects as a graphic style and reuse or modify them later.



Create Perfect Gradients Link

The latest version of Illustrator (CS5) is packed with some sophisticated gradients, including opacity settings for each color point and elliptical gradients. You can click directly on a object to customize the filling gradient with different preferences: angle, location, colors sliders, focal point, origin, etc. The process is very efficient and is a bit superior to that of Photoshop, in which the workflow is hindered by an intermediate gradient editing window.

Currently, Illustrator still lacks some gradient dithering options (found in other applications such as Fireworks), which can sometimes lead to the “band effect.” An effective workaround is to add some texture and/or noise to your gradients, as explained in the previous section.

Notice that Fireworks offers more type of gradients. All versions (including CS3, CS4, CS5) have Linear, Radial, Rectangle, Cone, Contour, Ellipse, Bars, Ripples and some more gradient types. Fireworks has many more types of gradients, and those gradients are also “live editable” on the canvas, just like in the latest version of Illustrator.


Rounding Effects Link

Adding rounded corners to any shape, including typography, is very simple in Illustrator. Simply click any object on the artboard to select it. Then, choose Effect → Stylize → Rounded Corners from the main menu, and define the radius for the curve. Later on, you can modify the radius using the Appearance panel. Photoshop, on the other hand, allows you to add only rounded corners to rectangles, and once the radius is set, it cannot be altered.


Smart Resizing With “9 Slices” Scaling Tools Link

With Illustrator CS5, you can resize an object without distorting it. You define some zones to extend and some zones to preserve (rounded corners, for example). Save this object as a symbol, and you now have a reusable GUI component.

The 9-slice scaling feature is not new to the Adobe line of products. It first appeared in Adobe Fireworks CS3 (it applied to Symbols only in version CS3). In Fireworks CS4, the feature became a new “9-slice Scaling” tool, and now it can be used on any object on the canvas. Photoshop does not have this option at all.


Advanced Options for Text Link

In Illustrator, you can wrap text around images — the text will automatically adjust to changes in image size — and define outside margins, just as you would in full-strength text-layout programs such as InDesign and QuarkXPress.


Inserting Bitmap Pictures Link

Using photos in your layout, such as photos of products, illustrations or artwork, is as easy as dragging and dropping the image files onto the canvas. This works with PNG, GIF and JPG files. You can also paste directly from the clipboard.

If you need images that are transparent, use the “Place image” function to insert the image and then link to the source file (File → Place). As an bonus, every time you update the original file in another image editing program, the image in Illustrator will reflect these changes. This will increase your efficiency and save you the headache of having to re-import images.

You can also use a clipping mask with gradients for fading opacity, although Photoshop might win out on this one for ease of use. You can learn all these techniques with this useful tutorial by VectorTuts20.


Gradients for Typography and Stroke Link

You can use gradients on editable text and strokes of all elements. You might want to check this tutorial for these gradients strokes22 to learn more about it. With a little practice, you will master this technique and be able to combine textures and effects.

What’s more, no matter how complex the typography and text in your designs become, they will always be editable in Illustrator. One thing to keep in mind, though, is that this method can be processor-intensive and should be reserved for titles and important elements.


Creating a Grid in Illustrator Link

In my opinion, it’s always a good idea to start your project by designing the grid and defining foundational design settings first. This will save time later and help you create a structured and consistent design.

How to create a grid in Illustrator?

  1. Create an artboard that is either 950 or 960 pixels wide. These are the common grid sizes I use for building websites that fit the 1024-pixel–wide displays. Note: the artboard area is used for the layout of content. Feel free to design larger backgrounds if necessary.
  2. Set the grid based on your artboard size. For example, with a 950-pixel artboard, you will have 19 blocks of 50 pixels each. Each of these blocks can be further sub-divided into 5 blocks, resulting in blocks that are 10 × 10 pixels in size. Or you could use the de facto standard 960 Grid System24. Choose the grid size that you are most comfortable or familiar with.
  3. From the main menu, select View → Snap to Grid. This makes the grid act like a magnet, forcing each element to lock precisely to one of the grid lines.
  4. From the main menu, select Units → Preferences, and set the units to “Pixels” and the keyboard increment to 0.5 pixels (yes, 0.5 pixels, that’s a pixel-precise tip — please read the details below).


Adjust Illustrator to Fit Your Needs Link

Since you are using Illustrator for Web design, a few adjustments are required to keep your designs optimized for your workflow. You can change the default font setting from Myriad to the font used in your current project. Learn how to do it with this complete tutorial on changing the default font settings in Illustrator26.

You can also define a few other preferences, such as text style sheets, default artboard size (950 pixels), graphic styles, and symbols to optimize your Illustrator environment for Web design.

12-default-settings in Productive Web Design With... Adobe Illustrator?27

Don’t Start From Scratch: Customize Your Templates Link

You don’t have to redo this process every time you start a new design. By creating and re-using templates you can increase your efficiency without much effort. You can create your own template by going to File → Save as Template. Set it up with a standard 950-pixel artboard width, your grid settings, customized preferences and your favorite symbols and graphic styles.

Create a Pixel-Precise Web Design Link

One of my pet peeves with previous versions of Illustrator was the “blurry effect” present in some line strokes or texts, as well as the absence of pixel-precise tools. You can avoid these problems with some of the new tools introduced in Illustrator CS5.

Property Inspector Link

Use the “Property Inspector” to quickly check and edit the exact position and dimension of objects right down to the pixel. This will help you reduce the time you spend positioning elements. In addition, by giving precise values to pixel dimensions, you avoid the blurry effect because the strokes will be aligned to the pixel grid.

Other useful tools in Illustrator CS5 are “Align to Pixel Grid” and “Pixel Preview” (View → Pixel Preview), which helps to avoid the blurry effect.

There are two options to align to the pixel grid (only in Illustrator CS5):

  • When you create a new document, check the “Align to Pixel Grid” option at the bottom of the window.
  • In the Transform panel, check “Align to the Pixel Grid” at the bottom of the panel.


Clean Outlines Link

The article Illustrator Trick: How to avoid blurred Pixel Fonts & Shapes29 shows you how to eliminate the blurry effect for outlines. I suggest that you read it carefully, but for those who want to jump right in, here is a quick summary:

  1. Use the Outline and Inside stroke default option, instead of the Center stroke.
  2. Position elements with whole values, and give them whole dimensions. Avoid fractions (2 instead of 1.9, for example).
  3. Move lines and strokes in 0.5-pixel increments when they are blurry.

Also turn on the “Snap to grid” or “Snap to pixel“ option under the View menu, because it keeps the strokes locked to the nearest pixel and avoids the blurry anti-aliasing. The “Snap to pixel” option appears only if you are in the Pixel Preview mode: View → Pixel Preview.


Two last tips:

  • To quickly position lines, set a 0.5-pixel keyboard increment in the Preferences (Preferences → General). This way, when lines are blurry, you can simply use the keyboard arrow keys to move them by 0.5-pixel increments until the blur disappears.
  • If you have tried everything and the element is still blurry, use a 0.999-pixel size for the stroke (hack courtesy of Benjamin McDonnell).

Why Not Fireworks? Link

Fireworks is supposed to be the Adobe CS suite’s dedicated application for Web design. It offers some powerful functions: Symbols library, Pages panel (I would love to have this in Illustrator), pixel-precise rendering, vector and bitmap editing, gradient dithering, etc. All the tools that any Web designer would want in a single package.

So, why don’t I use it? Well, I have tried Fireworks every time a new version is released. I still prefer Illustrator, and here are some reasons why:

  • First and foremost, it’s a question of taste. I find the Fireworks interface not as easy to use as Illustrator’s. Fireworks was originally developed by Macromedia (the same folks who brought Flash to the Web world), and its look and feel retain some of those roots.
  • Secondly, the modular design is not as well developed in Fireworks as it is in Illustrator. For example, the Fireworks’s Symbols panel allows you to preview only one item, making it difficult and time-consuming to find the symbol you want and to browse the symbols in your library.
  • In CS3 and earlier versions, I experienced a lot of bugs and crashes. CS4 was much improved but is still prone to some bugs. Admittedly, now these problems seem to be addressed: CS5 is one of the most stable versions of Fireworks to date, as Michel Bozgounov explains in “Adobe Fireworks: Is It Worth Switching to CS5?31.” But if you are using an older version, you may still experience some crash problems.
  • Fireworks does not provide a way to format text by applying styles to paragraphs, which is a serious deficiency because Web design is to a large extent about typography.

UPDATE (24.01.2011): As some readers have taken notice of the Text Styles in Adobe Fireworks, they can indeed be edited/created, re-applied globally, and much more. You can use the relevant sections in the Properties panel or directly within the Styles panel. See the illustrations below for more details. A big ‘Thank You’ to Michel32, our Fireworks expert,  who has prepared these explantory screenshots!

33 Link

Conclusion Link

The perfect tool for Web design does not yet exist. In my opinion, little has been done over the past few years to really meet the needs of Web designers. Still, I have developed a good working relationship with Illustrator. Over the years I have had developed some effective methods and tricks to optimize Illustrator for Web design. It’s the application that I find myself often recommending for modular design. I have developed my own User Interface Design Framework for Illustrator, resulting in improved productivity and consistency (via the Symbols libraries and vector GUI elements).

After more than 10 years of working as a Web designer, I’m no longer interested in producing the fanciest design. Experience has taught me to focus on productivity and flexibility. Work faster, and deliver the work on time: that is my priority. And Illustrator is a solid option for that. The next generation of Fireworks may wind up being closer to what I’m looking for in a Web design suite. Until then, I’m sticking with Illustrator.

Further Reading Link

Resources for Web design and wireframing in Illustrator:

  • User Interface Design framework34
    My free Illustrator GUI framework, loaded with a ton of GUI elements (buttons, tabs, navigation elements, etc.), vector icons, graphic styles and swatches for Web designers.
  • Free Sketching and Wireframing Kit35, by Janko
    A free set of elements for sketching and wireframing with form elements, icons, indicators, feedback messages, tooltips, navigation elements and more.
  • Sketchy Illustrator Wireframes36, by Matthew Rea
    “In the past, I’ve dabbled with various tools to create screen mockups and designs; however, I keep coming back to Illustrator; partly because it’s what I’m most comfortable with, but it also fits well into my workflow.”
  • iPhone Sketch Elements AI37, by Teehan + Lax
    A collection of common iPhone elements in a sketch–like style, allowing you to easily and quickly mock up custom wireframe screen flows. For their wireframing needs, they switched from Photoshop to Illustrator: the PSD version “proved a little too high-fidelity. For rapid prototyping we found we needed a more malleable approach. This is when we turned to the iPhone Sketch Elements AI.”
  • iPhone UI Vector Elements38, by Rusty Mitchell
    A complete and well-crafted library of iPhone GUI elements.
  • iPad Vector GUI Elements39, by Iconshock
    This set contains almost all of the iPad’s UI elements, including buttons, tabs, menus, keyboard and more.

Recommended websites for Illustrator tips and tutorials:

  • Vectips40
    I learned a lot from the insights of Ryan Putnam.
  • Vector Tuts +41
    Fresh tutorials and tips to improve your Illustrator skills.
  • BitBox42
    Some interesting tutorials… unfortunately, just four new articles in 2010.

Why you might also use Fireworks instead of Photoshop for Web design:

What applications do you use primarily for Web design (for the visual part)? Link

(al) (ik) (vf)

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46

↑ Back to top Tweet itShare on Facebook

  1. 1

    I was agreeing and applauding you until you dissed on Macromedia. Dreamweaver, Flash, and Fireworks were all better in Macromedia’s hands.

  2. 2

    I really appreciate the thought that went into this article.
    You really did a nice job making the case for Illustrator and even brought up some things that I hadn’t thought of! I’m in CS3, so I’ll have to wait to try out some of it, but there were definitely tips here I’m going to start using right away. (I’ve always yearned for Illustrator to work with a Database like some higher-level programs like Pro-E, but making a symbols library is something I honestly never thought of!)

    I have always used Illustrator for the basic important elements of the site. It’s faster and easier, and once you learn how Photoshop treats layer names in the export, you can export a file that is just as good as PS native. I only use Photoshop for adding textures and various other things that Illustrator just wasn’t built to do. The end deliverable I hand off to coders/programmers is always an organized PSD, so why would it matter IL vs PS?

    I would not use Photoshop for print page layout (like the last place I worked at) nor would I use it for Web page layout.
    I think it’s really just a personal opinion though.. Photoshop may well work easier or faster for some people. I come from a print background and have found that far fewer Web designers are familiar with Illustrator than print designers are familiar with Photoshop (if that makes sense). However, no graphics program can make up for lack of good planning and wireframing, and the more you hash out the design ahead of time, the faster the actual design process will go regardless of what you use.

    Thanks again for the article, and I hope to see more on this subject in the future!

  3. 3

    We should all be happy we’re not reading about Corel Draw or old Freehand.

  4. 4

    I use Illustrator to design my sites. The attention to detail you can achieve is far higher than using Photoshop.

    • 5

      I totally agree with this – if anything, I find getting pixel perfection much easier than if I am using Photoshop.

    • 6

      I disagree with this. Attention to detail relies on the user, not the program.

    • 7

      Perhaps someone here can help me. I have just designed my first website in Illustrator. I am very happy with the design and layout and now I want to make it “work”, i.e. in terms of links etc. and put it on the Internet. What is the next step? It is only a basic website with four pages.

    • 9

      I don’t know about attention to detail, but attention to flexibility, yes!

      I work with art directors (mostly from print backgrounds) and request that they supply Illustrator files to me. I do not expect them to design to scale due to all the iterations that a web site can go through. I consider it my job to refactor the visual design to small screens, medium screens, large screens, touch screens– to name a few. There are many developers that I wouldn’t trust with any visual design (especially margins), so maybe that is how PhotoShop become dominant. Then, it’s either pixel-perfect or it’s not.

      Yes, the anti-aliasing of objects can be a pain, but I find that with the move to fluid layout and responsive design that designing a website in a vector-based layout program is more efficient than a pixel based program like PhotoShop. All web sites should have multiple layouts that respond to the device and screen size, and it’s easier to stretch and re-size vector elements than it is pixel based ones.

  5. 10

    Mmmm… I agree and disagree at the same time… I use both AI and PS to design in combination. I find easier to chop a bitmap than an AI. Things get blurry even when you use snap to pixel functions.
    Great article to save for future reference.

  6. 11

    You have inspired me to take a hand at designing in illustrator. Great article and amazing information, with emphasis on what illustrator can do.

  7. 12

    Nice article! It’s definitely not for everybody, but if properly tamed, Illustrator can save you so much more time than Photoshop ever could. Plus, vector graphics are going to be the future. Mac OS is shifting towards supporting full app scaling. With screen diversity on iOS, Apple would please everyone and mostly itself enabling vector apps. And, the web designers would be in heaven if they could design vector graphics once and not bother about screen size… ahh, dreams to reality, pls.

    • 13

      I agree, vector graphics directly embedded in the browser will be an exciting new playground :-)

      With HTML 5 and vector support in latest web browser releases (via the SVG format), we can now export some parts of the design directly in vectors format.

      I didn’t have time to dig it, but Adobe released a HTML5 pack for Illustrator :

      Here is an interesting testing of this pack by Astute Graphics :

      Undoubtedly a promising way to follow, but we have to wait a better support of HTML5 with all browsers.

      Anyone tried this kind of SVG/HTML5 export from Illustrator ?

      • 14


      • 15

        I use Illustrator since version 2.0. I’ve got more tips in this article than in my entire career!!!!!!

      • 16

        Thanks for this very interesting article !
        Working as creative director in a 360 communication agency I definitely think that pixeloriented web design comes slowely but shurely to an end!
        Today there are just two ways to adapt to different screensizes:
        1. creating fluid layouts, anticipating large enough background images, reposition text or functional areas that means that each screen-resolution has its proper “design”.
        2. just don’t adapt and optimize on a 1024 screen-width using more or less vertical scrollable layouts.

        I am sure that scalability is the future, there are just too many platforms and screen sizes out there.
        Just look at apples new ipad coming out in just a few weeks. It will most likely have a screen resolution of 1600*1200.
        On my 27′ imac almost any e-commerce website looks like a business card.

        I think as on future screens the pixel density will be high enough that you actually don’t see the pixel anymore, we will head against the end of pixeloriented webdesign, that’s why I will slightly drive art directors towards scalability in their workflow.

  8. 17

    Michael McWatters

    January 17, 2011 9:49 am

    A thorough article describing the benefits of using Illustrator.

    While I still prefer Photoshop (as you say about Fireworks, it’s to some extent still a matter of taste), I wish Photoshop would adopt some of Illustrator’s features. For example, better control over vector shapes; style sheets for type; component libraries, etc.

    And, like you, every time I try Fireworks, I become vexed and fall back to my favorite, Photoshop.

  9. 18

    I think choosing the best app for any task is subjective and totally depends on your familiarity and instinct when using the software. My friend uses Flash for everything, from printing to web design. My brother uses PowerPoint to create business proposal

    As far as I’m concerned, I’d cringe and pull all my hair out if I received a design in .ai to CSS…..

  10. 19

    There is nothing more frustrating than coding a website that was designed in illustrator. It’s incredibly difficult to slice graphics and designers will often times not realize the scale of what they are building since they are working in vector (it can often result in things that are too small or too big at actual size).

    • 20

      Agreed. Our designer used to hand me templates from illustrator and it was definitely a huge pain. You have to consider each part of the process when choosing which software to design in. Our designer has since switched to Photoshop.

      • 21

        I disagree. As a front-end developer, I would contest that using Illustrator’s artboards to export images is superior to slicing in Photoshop. You can set up many artboards in different areas, and easily export that area later on if an aspect of the design has changed.

        • 22

          I agree with Andrew – As long as your layers and artboards are set up right, “slicing” can be done pretty easily. But a messy AI file is a nightmare.

          Here’s my workflow that I like, and it’s been made even easier with CS5’s multiple artboard management:
          * Set up all artboards
          * open .ai file in Photoshop
          * import all artboards at once, align to Crop Box and set to 72 px/in
          * Save for Web

          I use Photoshop because Illustrator’s Save for Web is NEVER accurate. And sometimes I’ll use an invisible box to align the artboards, so the export is exactly 100×100 or whatever.

          • 23

            Thanks for posting your workflow! I tend to go back and forth between the two programs, as well. Nice to see specifically how other people work.

    • 24

      wow i totally disagree – i’d say it depends on your own knowledge of illustrator. I don’t care if someone gives me a photoshop file or an illy file – you gotta learn the program. Just like anything else.

      • 25

        True dat.
        I’m proficient in Photoshop, InDesign and Illustrator and prefer the latter for webdesign for the reasons pointed out in this great article. I even work in CMYK mode to ensure consistency between web and print for branding purposes.

        Also, at every stage of the design, you can provide your client with a hi-res printout.

      • 26

        Yes Yes Yes… as a designer you should be trained to operate in several programs.. You gotta remember guys these programs are Tools. If you only know how to use a screwdriver and hammer then you limit your abilities. I hate to bring what my kid watches into this but look at Handy Manny… He uses all of his Tool’s and then some and everybody loves that guy! BE THE HANDY MANNY OF DESIGN! NO JOKE…

    • 27

      We have a lot of negative feedbacks in the comments about the ability to convert from Illustrator to HTML, even if some other testimonies prove the opposite.

      I think problems come mainly from 2 reasons :

      • Some designers don’t know enough the hard process of converting to HTML, create some unrealistic designs or don’t prepare properly the files.
      • Some developers are used to PSD, but don’t know how to use Illustrator.

      No time to make it now, but I think I will write soon :

      • A recommandation document for designers : How to prepare Illustrator layout for HTML conversion
      • A tutorial for developers to explain how to convert Illustrator files to HTML

      Some tips for slicing/exporting (please feel free to add more tips and insights !) :

      • For exporting images, you can use the slice tool in the “Tool” panel, or the slice menu menu in “Object > Slice” with a lot of options (create slices from guides, from selection, merging or delete guides, etc.)
      • You can also rescaling the “Artboard ” around the elements you want to export. Note that when you have the “Artboard” tool selected, if you click on one vector element or group of elements, it will create automatically an artboard around the elements. So you just have to export it by using “File > Save for web”.
      • A lot of problems come from the misunderstood “Artboard” concept in Illustrator. It’s different from the PSD “Canvas”. In photoshop everything you see can be exported. In Illustrator it have to be defined by the “Artboard”.The slices won’t work outside this “Artboard”, so be sure to have a large enough “Artboard” canvas to slice your design. Use “View>Show Artboards” to show Artboards. Rescale them by selecting the “Artboard” tool in the Tools panel.

      Some tips for preparing the files for conversion :

      • Be sure that every external image you use is embedded in the Illustrator file. When you save a file, check this option in the “Save as” window : “Include linked file”
      • Check the fonts used in your layout by using “Type > Find font”. You have the list of fonts used in the document ; you can automatically replace the ones you don’t want. If you tried different fonts during the design process, there is some chance you forgot a small piece of text with this font somewhere (it could be even a text zone without any text, so it’s invisible…). If a font is missing because you didn’t send it to the developer, he will see an error message while opening the Illustrator file.
      • Organize and name your layers : one layer for “header”, one for “menu”, etc. Inside these zone layers create one layer for the background, and one for the content. So it’s easier for the developer to hide the background when he want to export transparent elements.
      • Use RGB of course. I also desactivate the color management as it bring a color switch between my layout in Illustrator and the exported pictures in the browsers. Go to “Edit > Assign profile” and select “No color manage this document”
      (Maybe you know better solutions ?)
      • I also use the guides and group them on a layer to show the structure and proportion to the developer.

      If you know more tips and good practices, fell free to share.

      • 28

        I usualy use Fireworks for the entire process, but might try ilustrator, after reading this article.
        About the slicing issue: How about designing in Ilustrator, then open and export for web in Fireworks (It is still the easyest and more powerfull export tool in Adobe CS – whatever version you’re using)??

        • 29

          I agree with you, Fireworks, the best tool to export, I design in Photoshop and export in Fireworks

      • 30

        Try Slicing the images from Illustrator. The edges are not sharp.. It really giving a big pain because there will be a 1px – 2px difference because the smooth edges.. Then what about the shadow… and the other cool effects photoshop and firework has. I think you haven’t use fireworks. Its really a easy to use application.
        I’m not saying that I don’t like Illustrator. I really like it for drawing. But not for web designing.

      • 32

        Although a great article. I highly disagree with using AI to design a site. As was stated in other comments, you must take into account the full process “Designer AND coder”

        I will not accept designs in AI for one simple reason, its takes way to much time to cut,move,or alter anything for that matter (compared with the time it takes ME in photoshop) and even with “Pixel perfect” it still is blurry.

        I have used AI and Photoshop for over 10 years now so its not that I dont know how to use AI, I simple don’t like it for anything but Print design. In a world of exacting detail and pixel perfection AI cannot perform unfortunately.

        Just my 2cents. Smashing Rules!

      • 33

        Thanks, Vincent. It would be really useful to know the workflow from illustrator to html page construction. There are a lot of tutorial and information about workflow by PS, but I never found one regarding Illustrator.

    • 34

      Actually if I had the choice of receiving a design file that was the wrong size, I’d rather get it in Illustrator than Photoshop, way easier to resize in Illustrator and not lose resolution.

    • 35

      Illustrator is great for designing sites, except I have to agree the slicing tool accuracy is awful. I’ve seen me dip back into Fireworks as I cannot get the slices accurate enough in ai.

  11. 36

    Everybody has his or her personal preferences, and it’s always useful to see how other designers are working, what their workflow, techniques and tools are. I actually liked a lot that the author doesn’t try to push his opinion, but is rather humble and presents his opinion by arguing the advantages of Illustrator. More articles like these would be great for Smashing Magazine IMHO.

    • 37

      Agree… it was well-written and not ‘preachy’ LOL

      I enjoyed reading how he uses AI to speed up his design process.

  12. 38

    This is great! I have always been better with illustrator, and usually do a lot of web design work in it (e.g. buttons, background elements, etc). It really is more time efficient to use illustrator.

    On problem though, many clients as fo files in .psd files. Why is this? Would it be feasible to convince them otherwise?

    • 39

      I’ve convinced a few clients as needed…. people ask for photoshop because they think that’s the “standard”. And ultimately, because there are so many different tools out there that can do it – I almost want to say a “standard” is becoming harder to come by.

    • 40

      You can export from Illustrator to PSD. It is in layers and the text is editable too. All you need to do is rename the layers and maybe group them to make them better organised.

      I use Illustrator for web design all the time. Way faster than Photoshop. Less screwing around with layers and way better text editing.

      • 41

        One major problem with converting files from AI to PSD : it will flatten the layers when you have too many layers, or if you use some transparency options, etc.
        In my experience it’s a nightmare with complex designs, and some layers are unexplainably flattened. This is a major flaw in a supposed integrated design software suite.
        The only solution I found (to avoid spending hours tweaking) : export from Illustrator, forget about PSD conversion *-*

    • 42

      Many clients ask for PSD files because the is the de facto standard, and developers are used to it.

      Accepting Illustrator file means a small learning curve for the developer and more time spent for the first time they will convert from Illustrator. It make sense that some customers refuse it : it cost more time the first times and it’s tiring to learn new practices.

      But Illustrator and Photoshop are quite similar, they just need some directions and tips to learn it fast and avoiding wasting time. I’m thinking of writing a document for helping developers to know how to convert file from Illustrator to HTML (see my comment above)

  13. 43

    Nice post! I use photoshop, but there are some great tips and ideas here that I may try out! Thanks!

  14. 44

    this is such a great article. I’ll definitely try illustrator out for my next web design project. I’m an avid AI user, but in web design I’ve always used it only for shaping buttons and icons.
    The whole designing process is covered really well! thanks a lot!

  15. 45

    Great article, many thanks! I worked with Photoshop since 1999. Illustrator came into my life many years later. Every task in Photoshop takes me much less time than in Illustrator since I am not as familiar with it as I am with Photoshop. But you are right, it’s much faster to work with if you know where the needed configuration is. Time to get used to it more.

  16. 46

    Really great article.
    I have to say I am one of the few graphic/web designer who really hates Photoshop and the way it works… I keep it for pictures-related work and that’s it.
    I switch between Illustrator and InDesign. I find them more related to the content-driven works.

    • 47

      I heard about some people using InDesign for WebDesign, sounds interesting.
      Could you share about your experience ?

      8shape also built a framework based on InDesign for producing wireframes :

    • 48

      We`v just a long conversation about using InDesign at the beginning of design? at the idea stage. Is It usefull ? I have always worked with AI and using ID in this case is a big news for me.
      Don`t you know some articles about it?
      I would be very grateful if you could show me some examples of such design.

  17. 49

    Maybe it’s just me, but I can never get illustrator to produce clean/crispy images on output. Anyone else?

    • 50

      Have you read this part in this article ?
      “Create a Pixel-Precise Web Design”
      Please try again after reading it and tell me if it work now.

  18. 51

    I use illustration for web design sometime, one more thing is u can select multiple grid at the same time =)

  19. 52

    Vincent Says”…Fireworks does not provide a way to format text by applying styles to paragraphs…”
    Um…Yes it does I use it every day. Paragraph styles were i think implemented in CS4 and improved in CS5.
    I would also have to say as a long time user of both apps.. I think the FW interface is really fast. Illustrator would probably be my second choice to FW currently though.
    Its totally beyond me why anyone would use Photoshop for web design…or any design for that matter that wasn’t 99% image.

    • 53

      I checked again and still don’t see any way of creating and applying my own paragraph style with Fireworks.
      The only style I found is in “Text>Style” and is limited to built-in bold, italic and underline styles…
      Any information about where paragraph styles are supposed to be activated (if it exists)

      • 54

        Did you try working with de Styles Panel? When you set a new style you can save type properties. Not intuitive, but styles ar on styles panel. It is true that it doesn`t have enough options, but it works.
        By the way. What about Master pages in Fireworks? This is a feature that neither PS or AI have. This is a very important tool for productivity.

      • 55

        It’s in the property inspector and it works well. Knuckle-raps for not researching that.

        But otherwise I generally agree with you. It’s good that someone’s taken the trouble to point out illustrator for web design. It’s very capable.

        • 56

          I checked again and I have to disagree : I don’t see any characters or paragraph styles in the Fireworks properties panel.
          You can choose the font and the weight with a dropdown. And you can select bold, italic, underline, but that’s all..
          No way to create your own text styles.
          If someone disagree, he will have to provide a link to a screenshot to prove it :-)

  20. 58

    Great Article, switching from Photoshop to Illustrator for a designer is not an easy task.

    Ultimately, it all comes to your level of comfort with application. But still you need to find the ways to improve your workflow.

  21. 59

    I believe that they both work seamlessly together. I use Illustrator for wireframing and also for building elements of my design. I then copy/paste them into photoshop as smart objects, giving me the ability to edit the vector smart object in illustrator and updating the PSD by just saving the illustrator file. Also, it preserves the crispness you get with a vector object. Another nice thing of doing this is if you have many small elements and want to update them all, you just modify the smart object and all of the copies of that object are updated.

    As mentioned, symbol libraries are also great for often-used elements and can save a ton of time.

    Great article.

    • 60

      Totally agree. This is exactly how I work. – I use Illustrator to wireframe and create my block elements – I use Photoshop for styling and texturing and I use Fireworks to export/slice out all of my assets.

      I believe this is the way that the Adobe suite was intended to be used for web design.

      Also, I must say, after reading a lot of comments from developers who are complaining about the complexity of slicing elements out of Illustrator; Where I work, it is the responsibility of the DESIGNER to provide all assets pre-sliced and ready to be used by the developer, this way the designer already knows how to use the software and the developers can focus on what they do best; writing beautiful code.

      • 61

        hello bchild.
        I can not find enough documentation on this subject and I liked your working style on articles. Would you could you show a short video. I want to see exactly how it works because i’ve tried and I failed.

  22. 62

    about the pool, my choice: Inkscape

  23. 63

    Gr8 article….I have been using Photoshop for wireframing, but I this definitely makes me want to switch to Illustrator!

    • 64

      Wow it’s quite a challenge to wireframe in Photoshop…. how do you do it?!!

      I use Mockflow, I think to wireframe, you need an app that you could easily resize, drag and drop objects on

  24. 65

    This article is great, and the first I’ve seen who tells what is a truth for me since 5 years : Illustrator is the best webdesign tool for productivity (even if I didn’t use all of your tips!).

    Moreover, it’s a big deal for productivity between print & web applications; no resizing problems when you want to make a web pattern to become a huge illustration on a poster for example.
    Finally, I love this intuitive way of create vector shapes…

  25. 66

    A very good article.

    I especially like your objective view on Fireworks. As a proponent of Fireworks, I appreciate this not being a simple which is better.

    Your point on typography is good. The FW team in Adobe should think learn from this. Too bad the team is a bit of an underdog compared to the other teams and hence less resources.

  26. 67

    This is fine if you’re slicing your own design. Otherwise, the guy who has to do it is going to be really annoyed.

  27. 68

    Good article. Still, I don’t understand why you’d want to use a vector tool for something destined for a raster world. It’s much easier to make “pixel perfect” designs using Photoshop. And yes, you can make styles in Illustrator, but it’s much more flexible and intuitive in Photoshop.

    • 69

      Thanks for your feedback, but the point is not so much about vector against bitmap.

      Photoshop and Illustrator are now both able to export crispy & pixel precise pictures for HTML layouts.

      This is more about the productivity brought by Illustrator workflow and the symbols library + paragraph styles panels. For some reasons Illustrator got these panels, Photoshop don’t have anything and Fireworks got a difficult to use symbol panel. Unfortunately, the Adobe Creative suite is still not a consistent and homogeneous line of products. And Illustrator was the lucky one on that.

      • 70

        Am I missing something or does your Photoshop CS5 not have a paragraph panel like mine? :) Great article but PS is the way to go :)

      • 72

        I think the point Nathan was trying to make was that the pixel perfect view in illustrator will not accurately represent the final output of the bitmap final product.

        Illustrator will always show crisp lines even if the object’s bounds don’t lie on a whole pixel value. Exporting this object to bitmap will result in an object that is off by 1-2px and has blurry edges.

        Where as the same object in photoshop may have a slightly blurred edge, once exported to bitmap it will still look the same. It may not be pixel perfect while working but it is an accurate representation of the end product.

        This is a well written article with many great tips to speed up the work-flow.

  28. 73

    I use only Illustrator to design sites. It’s a lot faster and a lot more flexible than Photoshop.

  29. 74

    Yes, I love creating wireframes in Ill for web design. Been doing it for years. But then again, my background is in graphic design so I like to get visual first. I understand it web designers are more into coding. In any case, Illustrator allows for lightening fast mock ups. Nice article!

  30. 75

    Like many who have already commented, I use and feel most familiar with Photoshop. However, I do instantly recognize the importance of speeding up workflow, and the view of the future in relation to vector vs. pixel.
    Great tips in this article – thanks!


↑ Back to top