Pugetworks
Seattle Software Developers

blog-archive

Pugetworks Blog Archive!

What's better for web design, Photoshop or Illustrator?

A lot of people ask whether Photoshop is better than Illustrator for web design. This is really a misleading question, because they're both useful in different ways. Personally, I use them both, usually drawing shapes in Illustrator and then sending them to Photoshop to be colored and textured.

It's a bit like an assembly line for cars, where they've built robots for very specific purposes. There's a robot that puts together door panels, and a robot that paints door panels. Which robot is better? Well, neither! It's best to use both to make a single product that neither could do as well on its own.

Now, Photoshop is a raster-based drawing program, and Illustrator is vector based. To some degree, each of these programs do a little bit of both, but it's still a pretty fundamental difference between them, and one that Adobe has every incentive to sustain in order to keep selling both programs separately. In other words, there's probably never going to be a single, clear, unequivocal 'best' program so long as there's a market for two different ones.

To be fair, Photoshop works well enough for vectors, and it does a lot of other raster stuff that Illustrator wasn't ever meant to do. It's got the basic components; a pen tool that works pretty much the way it should, and a direct selection tool that behaves a lot like the one in Illustrator. If you HAD to, you could certainly get away with only using Photoshop, and skipping Illustrator altogether. Many designers do.

However, if you have access to both, I think it's worth it to include Illustrator in your design workflow in many cases. Particularly when you need to draw complicated polygonal shapes and then manipulate the heck out of them.

With that in mind, here are just a few advantages Illustrator has over Photoshop for vector drawing.

  • Selecting shapes

    In Illustrator, the interface for selecting vectors within a document is highly streamlined. You can group a collection of shapes, or even a collection of groups, and then grab any combination of them using the group selection tool. In Photoshop, you'd use a combination of selection tools, the Layers palette and the Paths palette to do the same thing.

  • Pathfinder

    The pathfinder toolbar lets you modify shapes using other shapes. Photoshop includes the basic shape modes (add, subtract, intersect, exclude) but Illustrator adds more complicated methods like divide, trim, merge, and crop. I use these frequently to turn combinations of simple shapes into (for example) geometrically-inspired logos.

  • Changing colors

    Photoshop has pretty sophisticated coloring tools, many of which Illustrator doesn't even try to mimic, but one thing it doesn't let you do is easily change the color of an entire shape or set of shapes. In Illustrator, you can either drag a swatch onto a shape, or select a shape and click the color you want it to be. You can even select all shapes by their color and change every blue in your document to a red.

  • Warp

    Illustrator's Warp filter lets you non-destructively change the shape of a vector. Usually this means turning a box or a circle into a shape it would be difficult to draw by hand (say, a flag or a teardrop). I use this a lot for logo design, and I'm not sure if there's a Photoshop equivalent -- there certainly isn't one that's as easy to use.

  • Pixel Preview / Pixel align

    Traditionally, you're used to seeing pixels in Photoshop and smooth vectors in Illustrator. As of CS5, Illustrator allows you to view and edit your vectors in Pixel Preview mode, to see how they will look on the Web. This lets you spot where your fractional pixel widths might cause fuzzy edges and distortion so that you can fix them on the fly. Plus, there's the Align to Pixel option that shuffles your vector around to make the edges smooth (not an exact science, unfortunately). I use this feature when making iOS tab bar icons, and it's probably saved me days of work all by itself.

  • Perspective grid

    Another new CS5 feature, the perspective grid is a tremendous aid to drawing images with depth. You get to set up a grid in 2-or 3-point perspective, and then draw shapes as usual. Illustrator will force a perspective on what you draw: rectangles elongated toward the horizon, right-angles become obtuse, evenly-spaced objects foreshorten, all for free.

  • Color Guide

    Lets you adjust all the selected colors in your document at once. For example, you could make all your blues slightly greener, or less saturated, or exchange one color for its counterpart on the color wheel. It does a lot of other stuff too, but this alone is worth the price of admission. Photoshop does this as well (for example the Selective Color or H/S/B tools), but not as elegantly or precisely, and not as quickly.

  • Offset Path

    Creates a similar version of a shape that fits neatly over another shape such that the space between their edges is always the same. Huh? It's hard to explain, but very useful, trust me. In Photoshop, I suppose you'd do this by selecting your shape, contracting the selection, and converting the selection back to a vector, but in Illustrator it's a 1-step process.

  • Extrude / Bevel

    Lets you make simple 3d representations of a shape. Turns a square into a cube, and lets you rotate it and apply some simple lighting effects. Photoshop may have some equivalent feature, but all of its 3D features require a dedicated graphics card, which is probably overkill for most users.

  • The canvas

    Imagine a tabletop with a piece of paper on it. In Illustrator, the piece of paper is your Artboard, the document you'll give to clients, and the tabletop is your Canvas. Since the canvas isn't part of the final illustration (it doesn't need to be printed or exported by default) you can use it to keep reference images and alternate versions of the shapes on your artboard. Does that make sense? It's like a scratchpad. This is a great way to work, and something Photoshop doesn't support at all.

  • Live Trace

    Automagicaly converts raster images (like photographs) into an approximation of the same image in a vector version. It's not perfect, but it's a very slick feature that a lot of people were asking for before it was included in Illustrator CS2. There's nothing even close to this in Photoshop. I think Photoshop would be scared to even try something this crazy.

Conclusion

Photoshop is a Swiss Army knife, good for doing a lot of things pretty well, and Illustrator is an X-Acto knife, good for precisely cutting out shapes, and not much else. Yeah, you could carve out your masterpiece with a blunt instrument, but why would you want to? For Web and Mobile design, Illustrator is an elegant supplement to Photoshop that every serious designer should be familiar with.

Personally, I like to draw flat, undecorated shapes in Illustrator, then import them into Photoshop to add colors, lighting and textures. This means I have a lot of layers that look like the silhouettes of buttons, panels and icons, with blending effects and layer masks on top of them. It's a nice way to work, using the best tools for each aspect of the job and combining them in a non-destructive, easily reusable way.

Design, Web DesignAdam