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 top Tweet itShare on Facebook

Advertising
  1. 1

    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.

    0
  2. 152

    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.

    0
  3. 454

    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.

    0
  4. 605

    You article was very readable and very precise.

    Thank you for sharing.

    0
  5. 756

    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.

    1
  6. 907

    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

    1
  7. 1058

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

    1
  8. 1209

    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)

    0
  9. 1511

    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.

    0
  10. 1662

    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?

    0
  11. 1813

    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.

    0
  12. 1964

    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.

    2
  13. 2115

    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!

    1
  14. 2266

    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

    3
  15. 2417

    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.

    3
  16. 2568

    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!

    0
  17. 2719

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

    1
  18. 2870

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

    0
  19. 3021

    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!

    2
  20. 3172

    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.

    0
  21. 3323

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

    0
  22. 3474

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

    0
  23. 3625

    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.

    0
  24. 3776

    Hi
    Any Tips please for Indesign ?
    Thanks

    0
  25. 3927

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

    0
  26. 4078

    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.

    0
  27. 4229

    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!

    2

↑ Back to top