Does it make sense for me to learn Adobe Illustrator?

January 22, 2011 10:01 AM

I am a back and front end web developer - primarily a coder (that's my background) but can also hold my own in html/css/UX/GUI design. But I don't know the first thing about vector graphics. It it plausible for me to learn Adobe Illustrator? Is it worth it?

Though I'm primarily a coder, contrary to the stereotype I don't think I'm particularly aesthetically challenged. I can deal with raster graphics, color combinations, I can take a decent photo, can somewhat sketch. And I enjoy expressing myself visually. But I've never attempted vector graphics.

In my work, as soon as I need the most trivial of squiggles, I go running to a designer. Now, I don't pretend that I can replace a true graphic/UX designer, and I will always collaborate with them on the big things (overall look/feel of projects, logos, font choices, etc.) But I wish I could do what they do just enough to be able to make little trivial things on my own.

Is this a misguided way to think? Is nothing really trivial? Would getting up to speed with vector graphics take more time and effort than its worth? Is this a hat that a coder should not attempt to wear? If I should dive in, where do I start?

Thanks Mefites!

posted by tempythethird to computers & internet (9 answers total)

I used to teach Adobe Illustrator at a local college. I had a few coder-types take the class. They enjoyed it very much, especially learning how something like a color gradient or a gaussian blur can really lend realism to a subject.

Vector graphics are great for coders in general, though. You get to get as deep into the math as you want, with all sorts of transforms and other neat things (not to mention bezier curves or other types).

On top of that, you can start learning SVG and combine your coding skills with some SVG output, maybe even try animation. Look up Raphael JS and see the demos they've got.

So as someone who uses vector graphics all the time (almost every day) I say go for it. You'll probably find your niche -- maybe you won't be drawing fonts all day, maybe you'll really get into technical illustration (with its own maths) but I'm sure you'll enjoy it.
posted by circular at 10:16 AM on January 22, 2011 [1 favorite]

There are some interactive designers that argue illustrator is a better medium for creating concepts. I've used illustrator in this fashion myself and the only thing I regretted was not having Photoshop's Layer Comps.

That said, if all you want is the basics then just pickup any quickstart guide. The basics of creating and manipulating vector shapes won't take you much time to learn. Schedule a little bit of time each day for a couple of weeks and you'll be able to pick it up.
posted by quadog at 10:20 AM on January 22, 2011 [1 favorite]

Just be a little cautious- it's really hard to avoid 1px jumps between rollover states, etc- since AI is vector, not bitmap, you can end up with tiny little changes when the assets get exported. I find it's easier to go ai to photoshop and then export from photoshop to the web after nudging the layers into place as needed.
posted by jenkinsEar at 10:45 AM on January 22, 2011 [1 favorite]

Illustrator is totally something that you can learn on your own! just use tutorials and google whenever you get stuck. Probably the most difficult part is the initial learning curve of getting used to how shapes and vectors work, i like to think of it like an advanced etch a sketch. You don't need to be a designer to pretty quickly learn to create some simple things that look perfectly serviceable.
posted by Fluff at 11:07 AM on January 22, 2011

From a web coder perspective, it might be wiser to just pick up Inkscape. In a few years, SVG will be relatively ready for the web, and Inkscape's native format is SVG. Since it's open source and free, the low cost makes the "worth it" factor much higher for developers--if over the vagaries of time, you find yourself at an employer who doesn't buy Adobe licenses for developers, you're prepared. When diving into new DB backed projects, I use SchemaSpy to generate SVG diagrams (by way of graphviz) and load it into Inkscape to tweak things.

The two things a coder will be interested in are:
* wtf a Bezier curve is
* how to use the tools to manipulate them

My recommended learning path is to
1. Run through the builtin Help->Tutorials.
2. Find some rasterized line art, import it into inkscape, and vectorize (trace) it by hand.
3. Dig through the archives of this blog.
posted by pwnguin at 11:46 AM on January 22, 2011 [4 favorites]

If it's for web development work I'd recommend you learn Adobe Photoshop or Macromedia Fireworks first. Fireworks is a less full-featured and more geared toward the web, but the principles you learn in one translate to the other, and they will also translate to Illustrator and InDesign if you want to do print work. SVG has been touted as a "Flash-Killer" for a long time now, but it's not going anywhere fast.

"as soon as I need the most trivial of squiggles, I go running to a designer"

That comment sounds like what you want to be able to do are design logos for the web, backgrounds, all the graphical elements of a web site, and Photoshop or Fireworks are better programs for that. I'd recommend Illustrator for logos you want to scale easily to any size without loss of quality (therefore more for printing than for the web), and for SVG or animation endevours, where you want to be able to scale without loss of quality in your animations.
posted by banished at 12:02 PM on January 22, 2011

my art school didn't teach us how to use programs (classes were focused on concept and not wasted on how to learn a program), so we had to learn them on our own. you just need to go in and start using it. it's really not that hard to learn on your own.
posted by violetk at 3:45 PM on January 22, 2011 [1 favorite]

I ended up buying a month of access to Lynda.com on a tip from a few friends, and so far I'm really happy. I've found several excellent tutorials by professional instructors that start from the theory/foundation up, and I think they will make a great foundation for later learning-by-noodling-about.

...

From a web coder perspective, it might be wiser to just pick up Inkscape
Actually, I should have probably written this question as "learning vector graphics." I definitely plan to pick up Inkscape (free and OSS!), but I'm using the one month trial of Illustrator to learn vector graphics in general, since most of the tutorials out there are specific for AI. If I'm comfortable with AI I assume it won't be a big deal to switch to Inkscape.

If it's for web development work I'd recommend you learn Adobe Photoshop or Macromedia Fireworks first.
I'm a little surprised at this. I could be mistaken, but I assumed that most graphical "primitives", (logos, icons, backgrounds) should be done with vector graphics? You can scale and manipulate these infinitely, its kind of why people shoot RAW in digital photography. Also I find that vector graphics result in crisp lines and solid colors and "snappiness" (IANAD, excuse the lack of proper terminology,) can this feeling really be achieved with bitmap graphics?
posted by tempythethird at 6:56 AM on January 23, 2011

I'm a little surprised at this. I could be mistaken, but I assumed that most graphical "primitives", (logos, icons, backgrounds) should be done with vector graphics?

Absolutely. banished's suggestion isn't bad, though: Fireworks and Photoshop both have vector tools, but their (especially Fireworks') toolkit is slightly better for doing web work. Fireworks was the first software package that really helped me enjoy working with vectors. Illustrator has a slightly steeper learning curve for working with effects. Considering where you're at, though, starting with Illustrator certainly isn't a bad idea.

You can scale and manipulate these infinitely, its kind of why people shoot RAW in digital photography. Also I find that vector graphics result in crisp lines and solid colors and "snappiness" (IANAD, excuse the lack of proper terminology,) can this feeling really be achieved with bitmap graphics?

As it's all being displayed on a pixel grid anyway, you'll find that Fireworks and Photoshop are both capable of the same crisp, snappy graphics; also, as I mentioned above, Fw and Ps also have vector tools. Worth looking into at some point.
posted by circular at 10:05 AM on January 23, 2011