Productive Web Design With… Adobe Illustrator?

Advertisement

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

Design Faster

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

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.

Screenshot3

Quick Tool for Creating Wireframes

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.

Screenshot4

Format Text Quickly and Easily

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.

Screenshot5

Become an Agile Designer

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.

Screenshot6

Focus on Simple, Clean Design

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.

Screenshot7

Work Lighter and Faster

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

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

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.

Screenshot8

Keep Your Design Consistent

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.

Screenshot9

Build Up a Components Library for Future Projects

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:

Screenshot11

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

Screenshot12

Modular Design Limitations With Photoshop

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

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

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.

Screenshot13

Texturize Your Design

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.

Screenshot14

Screenshot15

Create Perfect Gradients

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.

Screenshot16

Rounding Effects

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.

Screenshot17

Smart Resizing With “9 Slices” Scaling Tools

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.

Screenshot18

Advanced Options for Text

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.

Screenshot19

Inserting Bitmap Pictures

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.

Screenshot21

Gradients for Typography and Stroke

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.

Screenshot23

Creating a Grid in Illustrator

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).

Screenshot25

Adjust Illustrator to Fit Your Needs

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

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

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

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.

Screenshot28

Clean Outlines

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.

Screenshot30

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?

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

Conclusion

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

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)?


(al) (ik) (vf)

Footnotes

  1. 1 http://www.isfireworksbetterthanphotoshop.com/
  2. 2 http://www.smashingmagazine.com/wp-content/uploads/2011/01/1-edition-illustrator.png
  3. 3 http://www.smashingmagazine.com/wp-content/uploads/2011/01/3-symbols-illustrator.png
  4. 4 http://www.smashingmagazine.com/wp-content/uploads/2011/01/4-wireframes.jpg
  5. 5 http://www.smashingmagazine.com/wp-content/uploads/2011/01/5-stylesheets-illustrator.png
  6. 6 http://www.smashingmagazine.com/wp-content/uploads/2011/01/6-effects-illustrator.png
  7. 7 http://www.smashingmagazine.com/wp-content/uploads/2011/01/7-illustrator-texture-illustrator.jpg
  8. 8 http://www.smashingmagazine.com/wp-content/uploads/2011/01/9-symbols-library.png
  9. 9 http://www.smashingmagazine.com/wp-content/uploads/2011/01/8-master-elements-illustrator.png
  10. 10 http://www.webalys.com/design-interface-application-framework.php
  11. 11 http://www.smashingmagazine.com/wp-content/uploads/2011/01/25-save-library-illustrator.png
  12. 12 http://www.smashingmagazine.com/wp-content/uploads/2011/01/26-load-symbols1.png
  13. 13 http://www.smashingmagazine.com/wp-content/uploads/2011/01/15-appearance.png
  14. 14 http://www.smashingmagazine.com/wp-content/uploads/2011/01/13-texture-illustrator.png
  15. 15 http://www.smashingmagazine.com/wp-content/uploads/2011/01/16-swatch-texture.png
  16. 16 http://www.smashingmagazine.com/wp-content/uploads/2011/01/18-gradient-illustrator.png
  17. 17 http://www.smashingmagazine.com/wp-content/uploads/2011/01/17-rounded-illustrator.png
  18. 18 http://www.smashingmagazine.com/wp-content/uploads/2011/01/19-scales-illustrator.png
  19. 19 http://www.smashingmagazine.com/wp-content/uploads/2011/01/20-text-wrapping.png
  20. 20
  21. 21 http://www.smashingmagazine.com/wp-content/uploads/2011/01/22-image-illustrator.png
  22. 22 http://vectips.com/tutorials/quick-tutorial-gradient-stroke
  23. 23 http://www.smashingmagazine.com/wp-content/uploads/2011/01/14-gradients-stroke-illustrator.png
  24. 24 http://960.gs/
  25. 25 http://www.smashingmagazine.com/wp-content/uploads/2011/01/10-start-settings-illustrator.png
  26. 26 http://vectips.com/tutorials/change-default-fonts-for-new-documents/#more-1232
  27. 27 http://www.smashingmagazine.com/wp-content/uploads/2011/01/12-default-settings.png
  28. 28 http://www.smashingmagazine.com/wp-content/uploads/2011/01/24-property.png
  29. 29 http://vibr8bros.com/tutorials/illustrator-trick-how-to-avoid-blurred-pixel-fonts-shapes
  30. 30 http://www.smashingmagazine.com/wp-content/uploads/2011/01/23-outlines-illustrator.jpg
  31. 31 http://www.smashingmagazine.com/2010/05/22/adobe-fireworks-is-it-worth-switching-to-cs5/
  32. 32 http://www.smashingmagazine.com/author/michel-bozgounov/
  33. 33 http://www.smashingmagazine.com/wp-content/uploads/2011/01/adobe-fireworks-text-styles-large.png
  34. 34 http://www.webalys.com/design-interface-application-framework.php
  35. 35 http://www.jankoatwarpspeed.com/post/2009/12/24/sketching-wireframing-kit.aspx
  36. 36 http://matthewrea.com/07.21.09/Sketchy-Illustrator-wireframes/41.php
  37. 37 http://www.teehanlax.com/blog/2010/11/28/ipad-sketch-elements-ai/
  38. 38 http://www.mercuryintermedia.com/blog/index.php/2009/03/iphone-ui-vector-elements
  39. 39 http://iconlibrary.iconshock.com/icons/ipad-vector-gui-elements-tabs-buttons-menus-icons/
  40. 40 http://vectips.com
  41. 41 http://vector.tutsplus.com
  42. 42 http://www.bittbox.com/category/illustrator
  43. 43 http://www.reinegger.net/50_reasons_not_to_use_photoshop_for_webdesign.html
  44. 44 http://www.adobe.com/newsletters/edge/january2011/articles/article6/index.html
  45. 45 http://polldaddy.com/poll/4403243/
  46. 46 http://polldaddy.com/features-surveys/

↑ Back to topShare on Twitter

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  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 : http://labs.adobe.com/technologies/illustrator_html5

      Here is an interesting testing of this pack by Astute Graphics : http://www.astutegraphics.com/blog/adobe-illustrator-cs5-html5-pack-testing/

      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

        WE HAD FLASH FOR THAT NOW THEY ARE KILLING IT. (NOT DIRECTLY BUT ALMOST)

      • 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 : http://unify.eightshapes.com

    • 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

    Hi,
    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!

  31. 76

    Great article! Thanks SM again and again!

  32. 77

    As both a developer and a designer, I can tell you that trying to code something based on an Illustrator file is an absolute nightmare. If you want to waste your developers time, design in Illustrator.

    • 78

      Couldn’t agree more!

    • 79

      sorry but i have to disagree – i work for one of the biggest software giants in the world – and the vast majority of developers have no problem working with illustrator. In fact, my current team uses Illustrator more than any other program. I think it comes down to your own personal level of knowledge of the program. Your comment comes across as quite biased.

    • 81

      Please read the comments I wrote above on these problems, and feel free to explain the problems you met. It could help to make an article explaining a better way of preparing files for developers. Thanks.

    • 82

      I’m also a designer and a developer, and I can use either. It’s all dependent on your knowledge of the programs.

  33. 83

    Good points, all, but can we get articles like this about Fireworks? Fireworks has far outpaced Photoshop for many years now when it comes to web UI workflow.

    • 84

      I hope we can have more Fireworks articles (of this kind) in the future, yes! ;)

    • 85

      I would be very interested in that aswell! Curious to see which features overlap with the ones in this article. In other words; should one use illustrator over fireworks for web design?

  34. 86

    This is FANTASTIC! I’ve been using Photoshop religiously, thinking it would actually be a better fit than Illustrator, especially for someone with a very limited background in graphic design – but I’ve been wanting to learn how to work more with Illustrator, and this is the perfect primer. Thanks for posting!

  35. 87

    AJW Design & Illustration

    January 17, 2011 11:10 am

    Actually, Photoshop does offer something similar to the artboard click-and-edit functionality in Illustrator: Simply checking auto-select (layer or group) option on the move tool will automatically select the layer of any object you click on, allowing you to edit it right away.

    • 88

      You’re right on that. You can easily select elements with this “auto-select” option.

      But PSD still remain a layer orientated software, which bring some problems for the workflow when you want to fast manipulate elements.

      For example if you want to send an element backward, or in the background. In Illustrator, you just use “Object>Arrange>Send to back” or use the convenient keyboard shortcut for that. In photoshop you have to rearrange the layers and drag and drop them to put one element below another.

      • 89

        It’s also largely a matter of what you are used to. For example, though I could use “send to back” I always have the layers pallet open and move the layers that way in AI. It gives me a lot more control over exactly where in the layer stack the objects go.

  36. 90

    This article is spot on, the wire framing techniques mentioned at the beginning are a great way to save time when the client wants to make a change before more detail is added. Also using the initial wire frame a designer can figure out how the content will fit with the overall design. For example some sites have too much content and too little white space which results in a cluttered design. Keeping with the pragmatic approach to design 960.gs has grid templates for illustrator which help with sizing and alignment, and palettes can be imported from colourlovers or kuler into illustrator. Thanks again Vincent for writing this article.

  37. 91

    Fireworks does indeed have support for text/paragraph styles. I am using Fireworks CS3 right now and am able to create text styles that control line spacing, font, effects and everything else. You should look into that further if you didn’t know you could do this.
    I would not use Fireworks to design an entire site, however, because it is slow as a snail after adding about 5 pages to a document. Which, if you’re not going to add a bunch of pages to a website comp, then why bother using Fireworks? Adobe needs to improve the speed. Actually, with ALL their software.
    The problem with using Illustrator comes into play when you work in a team environment and have to hand off your files to someone else. Developers DO NOT know how to use Illustrator. They DO, however, know how to use Photoshop well enough to turn layers on and off and slice things up.
    Also, if you are not using Illustrator CS5, then you won’t have the multiple pasteboard feature, and designing site pages becomes a huge pain!

    • 92

      Really good article. I came here to comment on a minor misinformation on Fireworks — it is possible indeed to apply styles to paragraphs of text. I’m glad to see that other folks already addressed this earlier.

      @tim — not quite sure I can agree on Fireworks being “…slow as a snail after adding about 5 pages to a document”. I work with documents containing up to 20+ pages in FW CS3 every day and keep praising the Pages panel and related features as top FW qualities. So, for me it works perfectly OK on a 4-core Win XP (32-bit) machine.

      With that said — yes, opening a file with many pages is initially slow in FW. However, once it has all the pages in memory, it’s super fast to Page Up / Page Down and work on a complete site / UI at once.

      Thanks again, Vincent, for such an insightful article.

      • 93

        On a dual-core Intel Mac it is super slow after about 5 pages with a hundred or more layers. Photoshop has no problem whatsoever with that many layers. I frequently have hundredS of layers in Photoshop and it works fine. It may be just the Mac version, which I would not doubt. But masks in Fireworks are also awful to try to use.

        • 94

          Well, I’m a PC and maybe it is the Mac version, I wouldn’t know.

          It’s funny how I feel exactly the opposite on masks — I feel it’s so much simpler to work with masks in FW than PS :)

          I guess it boils down to the age-old topic of taste, preference, habit. Ultimately you should use the tool that you’re most comfortable with. I’ve heard of fellas who use InDesign for web design work and I’m sure they’re doing wonderful job. Actually, I feel that at the handicraft level, web/UI design is more comparable to traditional page layout work than it is to illustration work.

  38. 95

    This is a very helpful article. I’ve mostly been using PhotoShop, but sometimes create a few elements in Illustrator and then import them to PS. However, I just started a design that just seems easier to work with doing the bulk of the work in Illustrator, so these tips will be very helpful.

    Also, as a bit of an aside. The other day Adobe sent me a survey about their web fonts tool. As part of the survey they asked what program I designed in and they had Illustrator but not Photoshop as an options for the response. It surprised me and made me wonder about the usage of Illustrator vs. PhotoShop for web design.

  39. 96

    I use Photoshop if the design is going to be really heavy with textures, blending modes, and other “raster” type of features. If the design is going to be much more vector looking, I would prefer to do it in Illustrator. I have even used InDesign to do web designs if it is in between vector and bitmap. I haven’t really used Fireworks though. InDesign is great with object and character styles. Master pages with InDesign also make it easy to have different templates for homepage and content pages. Adobe does a great job with programs going back and forth, so why not use that and use all of them. Web design is a skill set, not an application!

  40. 97

    I absolutely agree with everything here about Illustrator; it’s would be a near-perfect solution EXCEPT for the fact that you can only achieve a bevel by using the 3D panel which is totally unwieldy and complete overkill. Don’t know if this has been improved in CS5?

  41. 98

    Wow! Great article. I use mostly Illustrator for web design, and switch to PS only to edit photos. Thanks for a great and thorough article!
    Only one question: why 0.5 pixel and not 1, if I already snap the objects to the grid?

  42. 100

    I’m surprised with how many people use illustrator to design web sites, I certainly wouldn’t ever think of switching from photoshop… and don’t see a need to.

  43. 101

    illustrator sometimes has problems rendering the pixel-correct shape of strokes, even if the coordinates are locked on .5-pixels. really annoying.

  44. 102

    Great article. I use PS and will most likely continue to do so. Either way great illustrator tips.

    You are slightly off on a couple of points though. In PS CS4 it is possible to specify a specific size for your vector shapes and apply rounded corners to a vector shape without having to do the selection and delete technique you were talking about.

    “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.”

    When you have the vector shape tool selected in PS and you look across the top you will see a little down arrow beside the custom shape button. If you click that you get extra options for creating a shape with a specific size and the ability to “Snap to Pixels”. And right beside that you will find a radius option that allows you to set how round you want your corners. The one draw back is you can’t change the radius after you make the shape.

    Still a beautifully written article that is sure to help out a lot of people, Thanks for writing it.

    Twitter: @OakesDesign

    • 103

      You’re right, it’s possible to create a vector shape with precise dimensions.

      But too bad, you cannot modify precisely the dimensions after you created it, or change the round corner dimensions as you mentioned it: a serious drawback in a Web Design context where you need to adjust dimensions precisely (and you change it often).

  45. 104

    great post, as usual.

    I’m a photoshop lover by I’m working more often with illustrator.

    Vitaly : I think there’s a unclosed tag in this part

    “Creating a Grid in Illustrator”

    looks like the tag is not closed, and all the paragraph has the header style. :)

    Ciao!

    • 105

      Vitaly Friedman (editor-in-chief of Smashing Magazine)

      January 17, 2011 3:53 pm

      Ouch, right! Sorry for inconvenience, Antonio. The tag is closed now.

  46. 106

    I found it interesting the way you talked about how you use photoshop to do certain things. I love the idea of the modular design and certainly think that a lot of stuff is easier in illustrator. But with the vector functionality that is in photoshop right now, I still think that photoshop is pretty viable.

  47. 107

    I am most effective when I design between AI, GIMP, and the browser.

    I love the quick flexibility of Illustrator (like shrinking an entire design and storing in the corner of the artboard while messing around with other ideas.) However, I’m not the kind of designer that has a clear idea of what I want to do before I start.

    I find that for me, the creative process is aided when I move fluidly between the browser and graphics programs, leaning on CSS as much as possible…

    As a note: GIMP is a life saver for me when working with certain types of gradients or images. It’s just super quick and easy.

  48. 108

    For the love of God, please do not encourage people to lay out web sites in Illustrator.

    Making your job more efficient, slows up the developers job by a multiple of 5.

    The problem probably lies in people that are used to designing for print, design sites in Illustrator. But, most designs I get as Illustrator documents are CMYK (then you complain about the colors not matching). They’re far from pixel perfect. They’re laid out based on inches, or points. They have no concept of size.

    And don’t for a second say “just export to photoshop for slicing” – because everyone knows that crap is about as reliable as a PC.

    Here’s a noble idea, use the right tool for the job. If you need to create a button in Illustrator, go right ahead. Then copy and paste it as a smart object. We’re cool with that.

    Illustrator is the worst program in the world to slice and save for web from. Okay, second worst, I’ve had layouts given to me in InDesign, because it’s so “much more efficient” to create multiple layouts for the client. Every time a web design is done in Illustrator the world is one step closer to apocalypse. *You* don’t want to be responsible for the end of the world, do you?

    • 109

      I couldn’t agree with you more (well, maybe not the apocalypse part! :)

    • 110

      Ah ah, you’re right : let’s avoid apocalypse, and some stress for developers ;-)

      But the problems you point to here are more bad practices than a software problem (yes CMJN settings for Web Design is a shame..)

      This could be solved by better practices as I propose in a comment above. I’m thinking of writing :
      • 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

      • 111

        would love to see these tuts!

      • 112

        I do concur that the problem is work flow, which is why I mentioned that most issues I’ve had usually come from designers accustomed to designing for print. On the flip side, most designs I’ve received from those accustomed to designing for the screen give me their items in photoshop, and from time to time I’ll get something in fireworks.

        The apocalypse part is a stretch (maybe that should apply to InDesign web layouts), I admit, but in terms of complete project efficiency, from beginning to end, I’m still going to have to go with Photoshop.

    • 113

      Honestly I do about 90% of design work in illustrator and then use photoshop and smart objects to grab the parts of the design that I actually need slices for. I think a little knowledge of html and css from the designer goes a long way and solves most of the problems that are talked about here.

    • 114

      I’d have to agree with Vincent here, the issues you’re describing are problems with the artists supplying the artwork and not Illustrator itself. Just because it’s a vector program doesn’t mean the artist doesn’t have a responsibility to layout the design to specific pixel dimensions. There’s no reason that a designer can’t provide a pixel accurate, RGB colour space design with properly set up slices and avoid PSD conversion entirely.

    • 115

      couldn’t agree more

  49. 116

    Douglas Bonneville

    January 17, 2011 1:33 pm

    I create styles for text in Fireworks all the time. Not sure what the article means when it says it can’t to styles. It’s not a very powerful style system, but it works. Fireworks offers the path of least resistance to creating websites out of the box. I use it in conjunction with PS. When I need to do any heavy photo work, I do it in Photoshop and then paste into FW, but really that need is quite rare. I’ve been using FW since v1.0 and CS5 is really well done and finally stable. But even when unstable, the vector nature of FW and the SIMPLICITY of all the tools trumps both AI and PS on all fronts.

    One thing the article fails to mention is workflow. The slices guide in FW is it’s single killer feature that blows away PS and AI. Simply add and name a slice and when you need to reexport it, just right click and BAM you are done. The optimization panel is also just nearly perfect. For real workflow where there is a lot of round trip edits and updates, FW can’t be beat for it’s efficiency and simplicity.

  50. 117

    Fan-friggin-tastic. I’m a huge Illustrator fan and have gotten beat up on here for posting an article suggesting that you could use it for other tasks like page layout. It’s an incredibly powerful app and functions perfectly for web design. I’m very interested in Fireworks, but have definitely had the same trouble as you switching because of my preference for the rock-solid Illustrator interface and workflow.

  51. 118

    Great article! I always start with illustrator to rapidly prototype a design. Then I move into photoshop for the finishing touches.

  52. 119

    Great article!! Fully agree with the autor! PS is for editing PHOTOS and AI is for DRAWING. And the best thing is – you can import PSD file into AI and keep all layers and so on, while if you import AI file to PS you just get one flat pixelized layer. D’oh!

    • 120

      Yes, this is my workflow as well. The majority of the page design is done vector in Illustrator. Any sections that require more texture or photographic work I do in Photoshop and then import into Illustrator.

  53. 121

    Well this certainly is a hot topic! I personally use both Photoshop and Illustrator for my design work. Working with vector shape layers in Photoshop gives me all the flexibility I need and moving custom shapes made in illustrator into Photoshop is as easy as copy/paste.

    The ideal situation would be if Photoshop and Illustrator would merge into a single product. Honestly if there would be a way to edit shapes in Photoshop the same way as in Illustrator I wouldn’t even need a stand alone vector application.

    Who else would like to see a Photoshop and Illustrator (Photoillustrator?) designer friendly hybrid app?

    • 122

      One of the things that was a deciding factor in using Illustrator for this kind of thing, is the way photoshop asks you if you want to commit your changes, after every tiny thing you do. It’s way too time consuming. And then there’s the obvious of rasterizing after every size change.

    • 123

      I see it every day. People often call it Fireworks

    • 124

      I see it every day. People often call it Fireworks.

    • 125

      The 1st time I’ve used illustrator I had the same thought. Why the hell are they separate apps? (I know… why sell 1 app, when you can have a whole suite)

  54. 126

    i use photoshop the most at my design but this post made me think to learn illustrator more ^_^)> great post.

  55. 127

    I use AI for almost all my web graphics (I have CS3 and CS4 but for some reason still love CS3)

  56. 128

    Another good thing about using AI for design comps is that you can embed them in a PDF UI Spec without the design becoming pixelated. Great for zooming in on parts of the UI when presenting to clients.

    I really want to love Fireworks…I really do. It has by far the best features for web design…but the interface is SO clunky I give up every time I try to switch. Plus you can’t export as a vector PDF even though it is a part vector tool (which rules it out for wireframing for me).

  57. 129

    You make a very compelling argument in regards to layout benefits vs photoshop. I’m tempted to try it, but like others have mentioned, I think I’d get hung up in the end workflow.

    It’s be great if someone could make a slicing workflow tutorial for AI.

    • 130

      “It’s be great if someone could make a slicing workflow tutorial for AI.”

      Actually, i’m thinking of doing it :-)
      Like I said in my comment above :
      • 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

  58. 131

    Interesting article – it all comes down to the tool that you prefer using.

  59. 132

    Steffi - Web Courses Bangkok

    January 17, 2011 8:40 pm

    Interesting article. Well, everybody has his/her own way of designing, but definitely lots of good tips

  60. 133

    Thanks for this Introduction to use Illustrator for WebDesign Layouts. I allready use Photoshop for this part. But I think I will give Illustrator a try. Thanks a lot!

    If anybody speaking German, feel free to read my blog on afrobirdy.de!

  61. 134

    Good article,I like it.

  62. 135

    Nicholas van der Walle

    January 18, 2011 12:56 am

    Wonderfully comprehensive article. I use Ai daily and had completely forgotten/ignored the 9 slice feature. Good to re-visit existing tools. Thanks!

  63. 136

    A great article. I typically use PS for most designs. I can see why AI is such a good tool for creating modular designs.

  64. 137

    Nice to read you here Vincent. Great article!

    Hope to talk you soon.

  65. 138

    Maybe Smashing Magazine should use some of their advice in regards to ‘Productive Web Design’ and rethink some of their redesign decisions…

  66. 139

    Awesome article! Designing website UI’s in Illustrator has always been my favourite!

  67. 140

    Love Illustrator for drawing but for serious webdesign there’s just one good choice;
    Fireworks!
    Neither Illustrator or Photoshop where designed to work with pixels. Adobe tries hard to get them to work well for screen design but Fireworks was born to do so. It will always feel more naturally at home with screen design.

  68. 141

    Fireworks has improved a lot. It is a less “heavy” that Illustrator (at startup and at runtime). I recently tried opacity and I fell in love with it.

  69. 142

    i am impressed by the fact that most people here use photoshop for prototyping. i use fireworks and if you work some months with it you will know why it’s made for webdesigning.

  70. 143

    Great article. It’s strange though, my first choice for laying out designs has always been Illustrator – it suits my design style better. I only really use Photoshop when I absolutely have to, eg. specific effects.

  71. 144

    Interesting article!
    Especially 9slices and paragraph styling parts are usable.
    But it’s strange that nobody mentioned “Layer comps” and “Smart Object” in PS – two extremely usable features in PS that can shine over all other mentioned products ;)

  72. 145

    Yes! Finally, I use (and always have) Illustrator for my designs and have since long stopped trying to explain this for Photoshop users. Now I can just link this. Thank you. Good work!

  73. 146

    nice admin keep up

  74. 147

    Very nice article. I have to say that I’m relieved to see that’s I’m not the only designer using illustrator to create full websites. I usually prefer illustrator when it comes to websites that tend to be web-application for instance, when you have lots of gui elements that you repeat, the symbols are a great tool. I also use it a lot for mobile applications. Illustrator is also awsome for creating great buttons.
    You make a good point about cpu ressources. The main reason why I first used Illustrator to create a website (actually a wireframe which became a website afterwards with some modifications) was because photoshop was too slow on my aged computer.

  75. 148

    I’m really surprised how low the percentage of designers that design in the browser is. I open Photoshop when I want to create some elements, but I create the main lay-out in my editor.

  76. 149

    It’s good to find an article that backs up all of the reasons I’ve had for using AI in web design. I even think exporting is easier due to creating layer styles for a ‘slices’ layer. I wouldn’t consider starting a design in PS as it’s not geared towards layouts.

  77. 150
  78. 151

    Just use Fireworks

  79. 152

    In Photoshop we can create a button, for example, croping the button and “save for web”. Can i do something like this in Illustrator? I think is impossible to work only with IIlustrator.

    • 153

      Draw a slice around it, name the slice, ‘save for web’.

    • 155

      I often use the crop area tool in Illustrator for quickly saving a graphic for web- inCS3. For SOME REASON they’ve completely changed it in CS4+!!!
      But in CS3: It works a bit differently than Photoshop: In Illustrator, you create a box around your item, and this box acts as the crop area. Go to Object>Crop Area>Make. I LOVE it because you never change the artboard, just the crop area, so you can redo as often as you like, quickly and easily.

  80. 156

    I’ve found it easiest to stick to Illustrator for the mockup stage as my designs are often used in print presentations to clients.

  81. 157

    a great article indeed. helps a lot to understand the gravity of illustrator for design UI projects.

    Thanks a lot for sharing.

  82. 158

    I have to respectfully disagree.

    Photoshop is the industry standard for a multitude of reasons not mentioned here. If the site is to be worked on by more than one person you MUST use Photoshop!

    If you go into an agency and start designing a site in Illustrator, they will tell you to stop and do it in Photoshop. If you don’t, you will not be hired back.

    Sure, Illustrator is better for text, wire framing etc. but it should be used in support of Photoshop, not in place of it.

    I thought this was common knowledge?

    • 159

      I work for an agency and have started every design in AI. Granted you do need to know how to work with PS in web too, but I’ve never been told I MUST use PS..

      • 160

        What if another designer has to pick up the project if you’re unavailable?

        • 161

          One would hope that other designer would already know how to use Illustrator, as much as an industry standard as Photoshop.

    • 162

      Totally disagree, I worked in an agency for a number of years, and we used Illustrator for mockups all the time. Much easier to print high res copies for client approval (yes, sometimes you need paper proofs for web design). If you know what you’re doing, AI saves a lot of time, especially when extensive changes are required.

    • 163

      I know some agencies that work with both Adobe Fireworks and Photoshop; and some actually work with Fireworks only!

      So no, this is not “common knowledge”. Many designers simply stick with Photoshop just because “everyone does that”. Seems time has come to stop this practice and broaden the horizon a bit… :-)

      So I applaud the article — for once someone to recommend a different tool than Photoshop, for Web work! In fact, both Illustrator (as of version CS5) and Fireworks (as of version CS3 onwards) are much better tools for Web design than Photoshop!

      • 164

        At my agency(kavamediagh.com), we use Fireworks and I’d more than glad to share tips or tutorials on designing sites and the work flows. Could you point me in the right direction Michel, Thanks.

    • 165

      What?

      So… everyone has to use iphone as their smarphone of choice just because “most of the people use it” too? And the rest of the smart phone aren’t smart phone then?

  83. 166

    Interesting article, definitely agree that illustrator is faster to design for web than Photoshop. Right now I am designing in InDesign (which I have only used for print stuff before) and it is proving surprisingly easy!
    Using masterpages makes it really quick to make changes to elements that appear on every page, and the paragraph/character styles panel is easy to use. Also InDesign has a great paste in place function/keyboard shortcut so the elements are in exactly the same place. The more complex graphics (vector based) I have created in Illustrator and placed into the masterpages. You could also use object styles if necessary.

  84. 167

    This article is pure gold for every webdesigner. Everybody should design in Adobe Illustrator! It’s so flexible!

  85. 168

    I’ve been doing the same, using illustrator for most of my work. From wireframes to final design, and I’m using photoshop for the fancy bits. If you never tried, give it a shot. I’m sure you will see very quickly how one can produce the same quality work in less time.

  86. 169

    I’ve been thinking about switching from PS for a while. Definitely going to give it a try. Thanks for that.

  87. 170

    Great article, I’ve been using Illustrator as my main web design app for quite a few years now. There are a few things that are more awkward than Photoshop (slicing, and advanced layer effects), but once you get used to it, it’s a much better workflow.

    Since most objects are vector based, you can resize large site elements quickly and painlessly. Also, a big plus, which I don’t think you mentioned is the ability to print high resolution copies of your mockup for clients. Try doing that with your 72dpi Photoshop mockup, and still keep your file size low!

    • 171

      You should be sending your clients comment-enabled PDFs, not printing “high-res” copies of something that will only be viewable on screen or a mobile device. If you use printouts and the client approves them, then you go into development without the client ever seeing an onscreen version, you are going to be in a world of hurt. The colors will ALWAYS be off on the printed version. They have no idea of the width of the site or the length, or anything really. You are just lucky if you haven’t had problems with this already.

  88. 172

    a thing is really important and is missing here is the autocreation of grids using a simple box ( object / path / split into grid), this one is the best tool for creating grids inside Illustrator. i have also coded a plugin for photoshop for creating the same grids inside that one so you can replicate easily your concept designs in photoshop later

    ;)

  89. 173

    I’ve been waiting for someone to agree with me on this!!! I make 99% of all web and UI mockup’s in Illustrator. It’s so much easier now in CS5 with the export to png using art boards feature!

  90. 174

    Inkscape

  91. 175
  92. 176

    In the real world they are deadlines, I once had one employee wasting hours in illustrator and Photoshop when another did virtually the same design in fireworks : 4 times faster, cleaner and fast cutting

    Remember Adobe make all three applications and they themselves encourage web designers to use Fireworks!

    It also doubles as a remarkable prototyping tool also, when doing your next presentation to a client, get a good laptop and fireworks, to present your ideas beets the pants off hard to understand wireframes (from a clients point of view)

    The tool is designed purely for web design nuff said!!

    I be in a few weeks we will have a post on the benefits of designing a web site in Quark Express.

  93. 177

    “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.”

    Passe you SEO guides, (pay attention on using graphic text)

    Unless your are a flash designer than you don’t really care about Seo ;)

  94. 179

    Best… web… design… article… ever.

  95. 180

    Been using AI for web design for years! Glad to see an article on it.

  96. 181

    This article is all about, as you said, preference. I have used PS for years, and have tried Illustrator as well as Fireworks, and just don’t care for the tools as much as PS. I’ve tried using IL more, but still find the tools a bit odd to use. Good overview nonetheless.

  97. 182

    Even seeing your article and all comments, I prefer to continue using Fireworks I think it’s still faster.

  98. 183

    Illustrator should be every designers “go to” program, and I have been in this industry since 1988. I can tell you 90% of our projects start in Illustrator. That’s over 4400 projects since 2002. This includes print and web projects. If you are serious about design, you need to have the modular ability Illustrator is based on. Never do we do a web project, that sure enough, require a print project to support it. It may be a display, a package, a billboard, a name tag, or what ever. If you can’t turn that brilliant web design into branding objects for other projects… you are wasting your time. We only use Photoshop for photos. :-)

  99. 184

    I was actually mulling this over lately. AI seems a better candidate for doing website mockups that PS (PS still king for doing raster art), but alas, I simply don’t know AI as well as I do PS (but I want to change that as well)

    AI CS5 really looks like a solid candidate for website mockups since it does excel in many areas of modularity. I’m finding modularity to be a great thing, especially when it comes to coding a site. I’m absent-minded, so having something be naturally organized and systematic really makes finding it and altering it so much easier.

    I’m sure if you need to place a raster image that won’t scale well in AI, it can do it, and will do it’s best to resample it on the fly as a smart object, but aside from that, yeah, I’d say AI is a better candidate than PS to that extent. It’s not that PS isn’t better suited to do other things more than AI, which it is…

  100. 185

    I recently read an article on SM about why Fireworks was so great for web design. And I read another at one point about why PS was better. After reading this one, I am confused.

    With all due respect, I find a lot of the articles on SM to be long winded and sometimes contradictory. These aren’t blogs, they are opinionated whitepapers.

    My advice – pick one program, learn it well, and do your job.

  101. 186

    Wow.

    My first Adobe product was Illustrator, makes me really want to revisit why I have been spending so much time in Photoshop lately.

    Thank you!

  102. 187

    I like this article very much! Thank you for good tips. I was used to make mock-ups in Photoshop and I had a lot of problems changing something in difficult shapes. I think it’s time to leave Ps for photo editing and making complex artwork.

  103. 188

    I’m not pro, i just do my ideas for my pro graphics and I use paint shop pro (as for me i know almost everything what 10× more expensive photoshop and is far easier to use), and balsamiq for creating mockups.

  104. 189

    I use AI CS5 in the company to develop all layouts, be it apps, custom documents or web interfaces. It takes practice to use AI effectively for web layouts but if you get past that, the modularity and flexibility are awesome :)

  105. 190

    I use Adobe Illustrator most of the time and this article gives me hope that with the right knowledge, effective website design can also be achieved using Illustrator.

    Can’t wait to see upcoming articles.

  106. 191

    Brilliant post!

  107. 192

    Thanks for reminding me why I use Illustrator and not Photoshop – I sometimes feel like a bit of a freak in the design world because most designers think that you need to use Photoshop. But I agree 100% with you, Illustrator is a far superior tool when it comes to web design.

    Just one question, are you sure the Transform panel is only in CS5? I’ve been using it for years! Maybe there is some particular feature in it in CS5 that you were referring too that I missed when reading?

    Thanks for the article – I loved it =D

  108. 193

    I definitly love Illustrator to design webinterfaces :)
    Thanks for the usefull overview !

  109. 194

    I’m sorry but until Adobe fixes the pixel ruler to display like every other sane pixel ruler (in increments of 10, NOT 36(WTF!)) Illustrator is not going to be an option for pixel dependent layout and graphics.

  110. 195

    Everyone at Poccuo uses AI for wireframing/web layout (for several of the reasons mentioned above). At the end of the day you can always export .psd’s, etc. if that’s what the devs are requesting. As for the rule issue, you can use 1px tall/wide rectangles instead – if you set up a 1px grid + snap it’s completely painless.

  111. 196

    We’ve been using Illustrator for years at my firm. It promotes a clean, modern aesthetic, but it doesn’t have too.

    I’ve found that the use of slices, layers, and transforming objects is more mature in Illustrator than in Photoshop.

    I suggest designing w/o Pixel Preview and then slice with Pixel Preview turned on.

  112. 197

    Good post. I’ve been using Illustrator for years, I think the biggest downside is slicing.

    In CS3 I enjoyed using the crop tool to slice although I’m sure Adobe intended the slice tool to be used. In CS5 the crop tool has become the Artboard tool which takes a bit to get used to.
    As the slice tool creates a load of junk I don’t know why they don’t use the export crop area tool that has been part of Fireworks for a long time. This is a fantastic tool that really makes it fast and easy to export a refined selection.

  113. 198

    IMHO
    Photoshop is more “artistic”
    Illustrator is more “pixel perfect”
    I personally switched back from Illustrator to PS again in order to design my websites.
    But sometimes I use smart Object to include in Photoshop object designed in Illustrator.
    To me using ONLY Illustrator is a bit rigid , i feel more free under PS especially if you are designing highly graphic websites.
    Illustrator is great for fast wireframing, though.

    I also think that designing mockup now is too little, we should be able to preview behaviour, animations (jQuery), mobile or tablet layout.
    With the arrival of HTML5 , CSS3 and other cool stuff , a static mockup could not be enough

  114. 199

    Christopher Bailey

    January 19, 2011 11:40 am

    Very nice post! It’s full of useful tidbits that I didn’t know. Thank you for sharing!

  115. 200

    WHY ARE You people slicing??!!!!! What age of webdesign are you in?!! Masks and full jpg/png layers. Don’t slice. lol 10 randomly placed images to create one image. You still use tables for layout as well??? Or is your css all inline….

  116. 201

    Could not agree with you more. I started designing in Illustrator and never looked back. For today’s preferred simple site design, it is simply more efficient, and I love how easily editable the whole thing is. How many times has a client said “I love everything but this one, tiny detail here.” And with Illustrator I can pop in and change it in about 5 minutes. Not great for beefing up my hourly pay rates, I suppose, (ha!) but my clients LOVE my flexibility.

  117. 202

    The Master pages in Fireworks is a feature that neither PS or AI have. This is THE MOST IMPORTANT TOOL for productivity!!
    Much more than paragraphs

  118. 203

    Ask a dozen people, and you’ll get a dozen opinions… BUT, InDesign CS5 (and I stress CS5), is HANDS DOWN the best app ever for site design. Cassiano is right, in that Master pages are important, but wrong about paragraph styles and productivity. Productivity extends beyond merely designing a layout. It also includes wireframing, layout, asset management, outputting for review, outputting for production, multiple users, and the ability for developers to see exactly what the hell you did, in order to replicate it with CSS and HTML. On that last note, InDesign is probably the closest you can get to replicating HTML and CSS in a design app.

    I’ve heard people say “Indesign… isn’t that for print?” Yes. Originally. Quark and Indesign were used for laying out large, multiple page layouts for years before the internet was making us all rich… Photoshop was used for Photos and illustrator was used for, well illustrations. Somewhere along the way, that all changed, but inDesign was never part of the mix for web designers, (I have my theories on that). But there is a reason print designers don’t use Illustrator or Photoshop to design catalogs and magazines. If you apply the same reasons to web PAGES, it becomes a no brainer.

    • 204

      Jeremy Douglas Hoover

      January 21, 2011 6:58 am

      I can see how indesign would be good for mockups and wireframes, but how do you hand off an .indd to a developer?

  119. 205

    Great Article ! lots of learning but at the end, no one want to (completely) switch to illustrator including my self.
    What about those client who insist you for PSD’s and the developers who are used to PSD’s. Although Vincent have anticipated for a tutorial on converting Illustrator to HTML but I don’t think every developer would like to show his interest in that like the designers from the Photoshop clan.
    Concluding my debate, I suggest we should design parallel in both tools Photoshop and Illustrator, as now photoshop have the Smart Object option available which is far more flexible than shape objects in photoshop.

    P.S. Thanks ‘Vincent’ for a nice and very informative article !

    • 206

      Jeremy Douglas Hoover

      January 21, 2011 6:51 am

      You can Export to PSD at hand-off.

      • 207

        This is what I do every day. Design in Illustrator and export to psd. Unfortunately items that are grouped or buried more than one layer deep have issues with “flattened containers”. So I break sections apart ungroup, export, then regroup and name in Photoshop. Pain in the arse but it’s still quicker than designing from scratch in PS.

        Should also mention that Photoshop “Layer Comps” is critical for me when handing off to a developer… something Illustrator doesn’t offer. Layer comps help the developer from having to search endlessly through a million layers, to understand how a single screen should look.

        Unfortunate, but both programs are needed in my work flow.

  120. 208

    Thank you for this tips, saved me time a lot! :)

  121. 209

    Thanks for the article, good to see so many people uses illustrator. Many people in my part of the world don’t quite understand how to use it to make pixel perfect web designs. There’s so much misconceptions about illustrator as a web design tool. This article sheds some light and clarify things to those ignorant bunch. Thanks.

  122. 210

    Illustrator is an all round great tool. Primarily, it is great to begin a website design with Illy. The speed of creating elements and layout is second to none. The key for me though is knowing when to switch from Illustrator to Photoshop using the Export to PSD function. This way, you can have the best of both worlds. I certainly would not use Illustrator for slicing as Photoshop is more robust in this regard.

  123. 211

    Jeremy Douglas Hoover

    January 21, 2011 6:49 am

    If you are placing images in Illustrator, a good tip is to disable PDF compatibility when you first save the file (or just do a ‘Save As’ to get the dialog box again). This will keep your file size down and make saving much faster.

  124. 212

    I am surprise to see that photoshop is still more popular for web design.
    Illustrator reaches far beyond in possibilities to quickly mock up.

    I always start with illustrator first and jump to Photoshop if I can’t do something with Illustrator.

  125. 213

    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.

  126. 214

    Great tips for designing in Illustrator! It should’ve been just that though, and not compare everything to Photoshop, because most (if not all) of the things mentioned can be achieved in Photoshop equally good and fast (including object select). And Photoshop does so much more when you design for the web.

    But whatever tool that works for you is the best tool for you!

  127. 215

    it’s work dream yet
    for me

  128. 216

    I am new to web design but have wondering which tool (Illustrator/Photoshop) to pick up for a while.

    Your article is exactly what I am looking for.

    Thanks a bunch!

  129. 217

    Thanks for the good article. I love Adobe Illustrator and i always use this to create mockup. But most of the client wants mockup as layerd PSD file. They didn’t anything know about Adobe Illustrator. I try export Ai to PSD, sometime i get good result, Sometime Illustrator rasterize everything (including text, its bit of pain).

    Also i have CS5, if i save the same as older CS4, CS3, CS2 Formats, it breaks/change text layout. These are the issue i’m facing while using Adobe Illustrator to create mockup…

  130. 218

    Honestly you can create anything using anything. I’ve seen some works created in Microsoft Paint that are simply amazing – so the person behind the tool matters.
    Interesting article.

  131. 219

    Good post. The Photoshop method of designing then slicing belongs to the era of tables based layouts. AI avoids all this by getting you to focus on simple grid based layouts first. PS designed sites can be over-designed and over laden with effects. I’ve been designing sites with AI for the last ten years and would recommend it.

  132. 220

    I’m new to web design/development and have been having some troubles with the updated version of Dreamweaver. I am much more comfortable in Illustrator, so I would prefer to design there… but how do you get from Illustrator to the web?

  133. 221

    I use illustrator for web design!!! One thing not mentioned here is the ability to make artboards the specific size of your icons so that you can export them really easily as pngs… use that all the time!

  134. 222

    Abdullah Bin Laique

    January 25, 2011 12:23 am

    Thanks for this awesome post…

  135. 223

    Inkscape for Vector and Gimp for Design —- Open Source

  136. 224

    we’re having lot’s of issues here at PSDgator.com when clients come with AI files for slicing and coding in HTML/CSS. I don’t say it can’t be done but it’s a lot harder to slice and code an AI file instead of a PSD file or a layered PNG Fireworks file.

    My 0.02: Use Illustrator for the Vectors/Cartoons/Buttons/whatever, then import it to Ps or Fw and build your page :)

    cheers.-

  137. 225

    Thanks for the tips. I’m sure some will come in handy. Personally, your overall method is way off my own workflow, and most of AI’s advantages over Photoshop are handled at least as well or better by Fireworks.

    I find parts of the discussion pretty much beside the point for me. As in, typography. I never export text from my graphic program other than special design elements – not body copy – so whatever supposed limitations of FW’s handling of text don’t bother me. I guess I just don’t get putting all the text in the graphics software. I just put it into the HTML, where the browsers’ interpretation of text handling is gonna be different than AI’s or Photoshop’s or any other graphics app.

    For the rest, I do appreciate Illustrator for logo creation, and I do also accept layouts from clients that were created in AI (although I’d certainly prefer Fireworks). Photoshop is reserved for image handling and certain effects that I can’t do in Fireworks. But on the whole Fireworks carries the load for me, and does it well. It’s far easier to be pixel perfect in FW than any other tool, and that’s always been the case… in fact, I’m still using FW8.

    But I’m not an Adobe traditionalist… I find Fireworks’ interface far more intuitive than most of the Adobe apps, so….

  138. 226

    thanks vincent! these are great tips. i survive on illustrator and found these real useful.

  139. 227

    I agree; it have some drawbacks, however, so you have to use both Photoshop and Illustrator both, and also final result is better to export to Photoshop, not to Illustraror. Because Ps has easier tools to measure pixel sizes. And some others trick.

    Ah, and I also with InDesign could be able to export text as Smart Objects to Photoshop.

  140. 228

    I start with illustrator all the time.

  141. 229

    Good Article Vincent,

    You seem to work in pretty much the same way as me. Since the launch of CS5 and the align to pixel grid feature, I think Illustrator has become a better option for most web design tasks. Before this it could be a little fiddly, checking designs for partial pixel measurements and so on.

    Now I tend to use it 80% of the time. It’s a must when I want to produce a clean modular type based layouts.

    I’d like to expand on your use of symbols. Symbols don’t need to be limited to small elements and they can be nested. I tend to use symbols for whole repeating elements within a design; a footer or navigation instance. This allows continuity of space and juxtoposition across a design which would be time consuming using other methods.

  142. 230

    Awesome article! Always used Illustrator myself since 1999.

    One Question: How do you add a bitmap image to the Swatches palette?

    I tried drag-and-drop and bitmaps simply can’t be added to the swatches palette.

  143. 231

    Great article. One other big plus you didn’t mention is the Artboards feature in Illustrator. This allows you to create layouts for different pages for a web design all in one file.

    Others always look at you a bit weird when you say you don’t use Photoshop for web design. I have just never found it very easy, for many of the reasons you give here. I used Inkscape over GIMP too, even before being able to afford the Adobe kit.

  144. 232

    Either way Photoshop & Illustrator are both Adobe products so they work together beautifully why not use them both.

  145. 233

    I find Illustrator is more precise for overall layout, but I like working between both Illustrator and Photoshop.

  146. 234

    I do agree I have trouble managing to save for web and devices in Illustrator BUT when it comes to speed!!! Illustrator is so much faster and easy to use!!! I am starting to use Photoshop so I get better at it but so much of it’s workflow when it comes to simple things is way to complicated… I will always stick to Illustrator for simplicity reasons as the article says but also I’m working hard towards new effects I can achieve in Photoshop.
    Great article Vincent!
    Thanks!

  147. 235

    I can’t wait to start my next site. laying out shapes and editing them is so tedious and can be frustrating. I will be crushing sites now.

  148. 236

    This was a nice overview tutorial. Thank you!

  149. 237

    Once a site is designed in illustrator and sliced, isn’t it possible to export straight to XHTML/CSS + images via save for web and devices? I believe you can export it into an absolute position div layout and then do the finishing touches on the final coding in Dreamweaver??

  150. 238

    Abbas January 17th, 2011 9:45 am
    I use Illustrator to design my sites. The attention to detail you can achieve is far higher than using Photoshop.

    I love illustrator than Photoshop to say its more than 200% use ur energy for Illustrator u will get more perfection in ur work..

    Abbas is Right …

  151. 239

    We`v just a long conversation about using InDesign at the beginning of design, at the stage of idea. Is It usefull ? I have always worked with AI and using ID in this case is something new for me instead I work with ID very offen. I`m agree about wireframes, but all graphic objects from buttons and patterns to more difficult images may become a seriously problem, isn`t it?
    Are there some articles about it?
    I would be very grateful if you will show me some examples of such design.

  152. 240

    based on the survey responses, it actually seems like significantly more people (like myself) use Illy more than Fw. Fireworks is indeed a good program in concept –because it can create functional prototypes out of a design specs file– but I could never get over its learning curve.

    Learning all Illustrator’s techniques though, is the gift that keeps on giving. Every time you learn something new in it, it can be repurposed for various design tasks.

  153. 242

    I am very much a Photoshop girl but if I was ever going to be tempted by another piece of software then it would be Illustrator, especially after reading this great post.

  154. 243

    You article was very readable and very precise.

    Thank you for sharing.

  155. 244

    Dear Vincent,

    I like the approach of creating the entire Interface in illustrator. This is absolute a good learning for others. However it can not replace photoshop when it comes to a Website with a lot of photographs treatment. illustrator has some good points for which photoshop is not and vise-versa since I am the user for Both. For creating high end digital banner design on the web design, someone has to depends on photoshop (or such photo editing/retouching/manipulating softwares). This is going to be another process by creating the image based design in photoshop and then place the graphics as linked file in illustrator, again you are depending on Photoshop. I think this is quite convenient for web-designers/graphic designers to work everything starting from interface elements to promotional banners in ONE Application, which is also good for sharing one file with the team members or even deliver to client.

  156. 245

    Thank you for writing this. Ive been using Adobe illustrator for about 3 years know. And i would’ve saved so much time if id had this earlier. xd

    Thank you :D

  157. 246

    Hallo,
    Thank you for your nice article. There are many useful information.
    Thanks

  158. 247

    Illustrator’s pixel precision still lacks a lot of polish, it doesn’t work 100% perfectly, which results in a lot of real life frustration. It also lacks states and pages, which help a lot to layout flows. Its symbol, library and text capabilities are better than with Fireworks, the visual styles are worse, as you lack basic styles like for example the extremely useful Inner Shadow.

    What I want to say is that Adobe doesn’t provide an ultimate solution to web and interface design. You have to know your tools and use the right one for the right scale of projects. I have wasted a lot of time in Illustrator with trying to get pixel precision working (even though the numbers were even) and Fireworks does crash and has a lot of bugs, especially in the style department, making larger scale projects a pain in the …

    I am using Photoshop only for complex GUIs (skins) for applications as it allows easy masking, lighting effects and texturing, abilities both Illustrator and Fireworks lack due to bad interfaces. However vectors can prove very valuable in those scenarios so you might want to spend the considerably higher amount of time they need to create even then. (Thats all about the Airbrush vs Vector issue)

  159. 249

    Though this is old, I completely agree. Just having the precision path control in Illustrator is the key. However, I do have to disagree w/ you in one area. You said shapes don’t have editable dimensions or something to that effect in Photoshop. Sure they do! Shapes are created w/ paths which can certainly be resized and once you enable “free transform” you can specify the size.

  160. 250

    Hello! awesome tut. one thing i’ve noticed though is I can use the transform panel in Ai CS4 and can resize to exact dimensions as i’d like…. not sure what the diff is in CS5 with this pixel-precise thing?

  161. 251

    Woah, tons of useful web design tips here. I design with Photoshop but have been annoyed that at different zoom levels, the text loses quality. It sounds like Adobe Illustrator may be able to help me out here though, we’ll see. Thanks for the helpful tips, going to bookmark and return later.

  162. 252

    I would really love to use Fireworks as my go-to app for building mock-ups but unfortunately it just isn’t up to par. The software feels and operates like it’s straight from 2002. Right now the Fireworks team is building “Mobile Pack extensions”. I feel that their time would be better served updating this app into the year 2012 by focusing on the core functionality of what sets it apart from Photoshop and Illustrator. Fix the UI, most of the bugs, and THEN start thinking about creating strong extension sets.

  163. 253

    A year ago I considered myself an advanced html and css coder. But then I quit a job and months later took a temp project creating an html email for a large company. They gave me a psd file, fully layered, and I had never used photoshop extensively. Expecting the user friendlyness of Illustrator and Fireworks, I was in for a total shock. I have since learned that for some reason web designers use photoshop for designing websites and emails. I find that ludicrous. As you accurately observed, photoshop makes things more complicated than they need to be. The fact that you have to click back and forth in order to simply make a change? That’s ridiculous. If you have 100 layers and aren’t sure exactly which element it is, you’ll waste tons of time clicking on the various layers. And the fact that photoshop isn’t vector based for its graphics is beyond unacceptable. Illustrator is much easier and user friendly. So, now that I’ve spent many days learning how to design w/ photoshop, I’ll spend some time learning web design in Illustrator (as opposed to just logos). Adobe has to kick itself and design photoshop to be more like Illustrator (for objects to be selectable directly on canvas). Well done article!

  164. 254

    hello guys i would like to share my opinion after i read all the opinions on comments!.. some said photoshop is more artistic and illustrator more ‘pixel sure’..well both are artistic i believe – as a graphic dsigner-..but when it comes for Web design i use adobe illustrator.. because its a vector program off course and everything you see even in this web site is vector !!! offcourse you can mix and match photoshop with it:)

    thanks

  165. 255

    Abigail Bradshaw

    March 1, 2012 11:31 pm

    I just took a class where they had us design the website in Photoshop – the entire time, I was thinking “this would be so much easier in Illustrator!” I guess the only disadvantage would be that Photoshop treats photos much better. But when you’re saving so much time with the overall design, I think that’s not too big of a deal.

  166. 256

    I’ve been using Illustrator for web design for quite a long time. I’m glad to read this article where you pointed out some of your best practice in using AI.

    Anyway I also switch from AI to PS from time to time. Its a really good article and I enjoying it!

  167. 257

    Go ahead and design using whatever tool you like, Photoshop, Illustrator, Fireworks, Indesign it’s your choice.
    Hand me as a developer an .ai file to work with though, and I’ll smack you in the mouth. (figuratively of course…)

  168. 258

    Illustrator takes a lot more time to learn than photoshop, but a lot more fulfilling in the process!

  169. 259

    I LOVE this article! I have been a designer for over 10 years. I remember rule number 1 was to always design in Photoshop. I never really understood why. I suppose back when websites were first introduced Photoshop was more superior than illustrator. HOWEVER, with modern technology, there is no reason to ignore Illustrator for website design. I find my time is focused on creativity instead of dealing with multiple steps to complete a simple task in Photoshop. In my opinion, Photoshop is for photos. I prepare all images for a website in Photoshop, and place them into illustrator for the visual. I have been using Illustrator for about 5 years to design websites and I always felt that I was doing what other’s thought to be an industry no-no…but yet I’m more productive. Glad to see I’m, not the only one!

  170. 260

    After reading this article, I can say that I understand why designers use Illustrator over Photoshop. As a developer though, I absolutely hate working with illustrator files. Partially because I barely know how to use the program and know Photoshop much better (half the time I just take a screenshot of the element I want and crop it in Photoshop) and partially because of the “linked files” issue. Sometimes, when I get the file, half of the images don’t load because of a “linked file” error. I acknowledge that maybe I should learn Illustrator better, but I really don’t have the time to do so.

  171. 261

    Awesome article. Great in-depth and really useful. Thanks!

  172. 262

    Still my preferred method of building the scheme to screen. Thanks for a insightful article that really tells it how it is.

  173. 263

    ComittedUXDesignerAndIllustrator

    November 12, 2013 2:31 pm

    Hi guys, I just want to share you all that I’ve been using Illustrator my entire life designing websites. Believe me, I started as a web designer using it and then there is User Experience Designer. When I finally got in designing for UX, it is perfectly done into crispy website by understanding the UX Principle. Which is keen, simplicity and user experience. Also in my experience, it so easy to design compare to Photoshop. I’ve been using Photoshop only for altering images & photos, and most of it are uniquely branded through Illustrator. In the latest CS6 to CC(Creative Cloud) it has become the God of Illustrating Medium Artworks. Why did I ever choose this as my medium? Because everything is scalable, does not get pixelated, easy to express your drawing, and easy to click or highlight what you want. You can even change your view into Pixel View, which is equivalent to Photoshop. Rendering it into final work become easy as well without using Layers of Layers in Photoshop. For instance go back to highlight the layer and then re-edit it. Cropping it in Illustrator > is what we call Clipping. You surround your import image with a box, and then you clip it. That is how you crop.

    I am not here to offend those people with experience in photoshop, of course I totally respect where you prefer using in designing. Just give the Illustrator a shot. A lot features have been totally improved to the latest version > CS6 – CC(Creative Cloud). Most of the principles in designing a website is UX(User Experience). Thus, Illustrator or Fireworks are mostly used for these UX Design to get a better look, feel and experience. A Design is not just a design anymore. A UX Design has a meaning and experience to it. This is where most web designers are now moving into UX Designer.

  174. 264

    Hi
    Any Tips please for Indesign ?
    Thanks

  175. 265

    “Align to pixel grid” — its very very bad. Do pixel-perfect by hands in Pixel Preview.

  176. 266

    In my opinion Professional Web Designers must work in Illustrator, because Illustrator is responsive to transform all shapes and forms, and designers can use their own created shapes again and again just make some changes easily. Illustrator possibilities is never ends. Future is Illustrator.

  177. 267

    I totally Love Illustrator anyway! And this article is fantastic about using it in web Design. It is just the one I needed to convince me to have my students use illustrator for their first project!
    Thank you so much for sharing!

↑ Back to top