Illustrator, A Beginner’s Guide

By Esben

Esben is a long time reader of Creative Curio and he approached me a few months ago asking if he could write an Illustrator guide for you readers. I thought this was a great idea and a wonderful learning experience for me, too! You all know I’m a huge fan of Photoshop, but I’m one of those users who only opens Illustrator to create logos.

For the next few Mondays, Esben will take us on a journey through unlocking the power of Illustrator and the way it was meant to be use.

Illustrator vs. Photoshop

Illustrator, a beginner’s guide for those of you who know how to use Photoshop

Are you one of those who has always wondered what Adobe Illustrator is for? Someone who opened it and didn’t use it for more that 5 minutes before jumping right back to good old Photoshop? Are you a web designer who actually believes that graphics for the web should always be made in Photoshop?

Well then you better bookmark this article because over the next few weeks we’ll unlock the Pandora’s box called Illustrator.

I’ve seen Digg, reddit and many blogs praising the almighty Photoshop when it comes to making all kind of graphics, from menus to headers, icons and even logos. I’ve always been fascinated how the thundering horde gathers around Photoshop and uses it for things other than what it was created for (manipulating photos).

First off, we need to address what the difference is between the way Photoshop works with graphics as compared to Illustrator.

Bitmap vs. Vector

What is bitmap (also known as raster) and what is vector? Many know what bitmap is, but few know what vector means. If you don’t know and try to look it up, it is often a scary set of algorithms and confusing definitions that meets the eye. Basically, a vector is made of Bézier curves, where bitmap is made up of squares (see images). A Bézier curve is somewhat difficult to explain (so difficult that I actually can’t), but it’s a way to define a path, line and curves, without getting those annoying squares (pixels) in you artwork. For a better visual explanation, visit Wikipedia.

Vector can be scaled indefinitely without losing the clarity of the image, where bitmap will become blurred very fast when you enlarge it. For those of you who love Hollywood movies, have you noticed that surveillance cameras always record in vector? Every time the good guy finds a picture of the not-so-nice guy, he can just zoom in on the image and it
gets blurred and then the Hollywood magic appears and the pixels realign and details comes out. That’s how vector works (just more smoothly), except that cameras can’t record in vector…

Pixels vs. Vectors

Some argue that Photoshop and Fireworks (Macromedia’s version of Photoshop) both have vector graphics and it’s easy to draw–and even resize–without losing clarity. But even though the pen and shape tools make vector outlines, the inner content is still rasterized (pixel-based).

The best example to compare bitmap against vector is to use type tool and type a few letters with the same point size in both a Photoshop and an Illustrator document. Then zoom in on the text and compare the two; you can very easily see the difference between the smooth vectors of Illustrator and the pixels of Photoshop.

It’s important to know when to use each of the programs in the Adobe Creative Suite, but let’s focus on Photoshop and Illustrator.

Photoshop

Photoshop was made when the era of digital cameras came about and was made for this market alone. Since then, it has developed according to the needs of its user base and Adobe has added features like exporting to HTML and Flash for the many web designers (as opposed to strictly photographers) that use it.

Photoshop Myths
Photoshop is actually made for editing photos, adding filters and effects and some limited graphic design. But is Photoshop good for anything else? Sure you can paint photorealistic images–which is almost an impossible task in vector and which require better skills–but one thing that Photoshop can’t handle is text and skeleton graphics (wire frames or outlines), because they are more difficult to control.

Some argue that making a grid or mockup in Photoshop is better than making it in Illustrator, but this is not completely true because Illustrator easily can handle multiple graphics and export them again; it’s actually designed for it for this purpose.

Illustrator

Illustrator was, in the early days, the graphic design (page layout) application before there was anything else. It was also the application, along with Apple’s Laser Printer, that revolutionized the printing industry. So in a sense, Illustrator is both a former DTP (desk top publishing) application and a normal vector drawing program. It’s quite possible to make the same layouts in Illustrator as you can in InDesign, though it is more difficult, takes longer and lacks a lot of features that InDesign has specifically for this purpose. Illustrator is both a web and print application, but is often regarded falsely as a logo-and-print-only application.

Illustrator can and sometimes should be used for the following web tasks:

  • Logos (and that’s a must, because you really want scalability and easily editable logos)
  • Small icons (the reason for this: it is much easier to do!)
  • Graphics that don’t need to be photorealistic
  • Flash (scalability is important)

That is almost complete list for web designing; the only thing missing is photo manipulation! As you can see, Illustrator is a lot more flexible than any other application in the Creative Suite.

What Illustrator should not be used for:

  • Photo manipulation, unless you want to vectorize an image
  • 3D effects – this may come as a surprise for some, but Illustrator doesn’t render complicated artwork especially well (referring here to the Effect Menu in Illustrator, where Illustrator itself renders the 3D shapes). Square models are fine (like a CD case), but if you want fine rounded curves, you should use a true 3D application like Maya, Lightwave or 3D Studio. The rendering Illustrator does is horrible to such a degree that I wonder why they even bothered to add those features with Illustrator. Of course if you have the skills, you could draw your own 3D shapes with no problem at all, but as an Illustrator Effect I wouldn’t recommend it.

Next Monday, Esben expands on setting up and customizing Illustrator so that you can work with it the way you want to! He will also briefly guide you through the most used tools in Illustrator. Subscribe to Creative Curio via RSS or email so you don’t miss it!