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, 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…
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!
This is what I’ve been waiting for. I know I use PhotoShop when I should be using Illustrator—especially when creating illustrations for the web. Problem, then, is that all the time and effort that goes into such an illustration is so limited in its use: if I used Illustrator more often, then I could (if required) use those same illustrations for print.
Thanks Lauren. Great article, Esben. I’m looking forward to the the next one.
I fit into the category of a long time Photoshop user who just now found out the advantages of Illustrator. I laughed when the post mentioned opening up Illustrator and then jumping back to Photoshop after five minutes! I have done that several times (I can just do it faster in Photoshop, at the moment!).
I can’t wait for the rest of the articles. Maybe this will give me the faith I need in order to dedicated myself to learning Illustrator.
haha! I’m pleased I’m not the only one. I’ve used Photoshop for about 125 years, and I feel so comfortable with it. I’m hoping that Esben will make a convert of me.
@Johno
The next article is how to setup Illustrator and I think you will benefit from this article. I would suggest that you start to use Illustrator for making your “i Love Typography” headers. Because that would be a easy start and usefull for you at the same time.
@Jacob
yeah thats what I hear constantly, but Illustrator is not so much about speed, but precision. If you have any questions feel free to ask me
If anyone have any ideas on which tuturials subjects I should write about, feel free to post them. I will supply the articles with ai, svg and eps files.
Thanks for your editorial skills Lauren :-)
Thanks, Esben — these articles should be very helpful to those of us who are stuck in Photoshop. I hope you have a whole article on Bezier curves. I can make them do what I want in Illustrator like maybe 25% of the time — the rest of the time I’m lost.
Writing a article as we speak
but I think its coming sometime in Marts.
But I can send you some links, that are really helpfull on that subject alone, I could imagine that you have a dire need :-)
John,
I too am in that Photoshop boat! I really enjoyed this series that Esben wrote (hehe, I got the sneak peek!) and I’m sure you’ll start using Illustrator more often after you’ve read them all. Some things are actually easier to do in Illy than PS, it’s just having the discipline to open it rather than PS. I had never thought of that point that it would be easy to repurpose a web graphic for print if you use Illy; that’s a great idea!
Jacob,
I’m much faster in PS than Illy, too. I’m so glad Esben asked me to host these articles!
Esben,
Thanks again for writing! Looks like this series will be quite a hit!
You’re welcome for the editing
Alec,
I can actually use the pen tool ok, it’s just selecting those awful small anchor points that’s the problem! Do you ever use the pen tool in PS?
Esben,
I’m glad you’ll be writing more Illy articles! Thank you! You are always welcome to have them hosted here.
@Lauren,
Thank you Lauren for hosting them, since Im not much of a blogger - and I need a editor badly :-)
I find the sentiment expressed in this article ironic, because I use Illustrator for nearly everything. I don’t use a whole lot of photo-realistic images, so Illustrator is perfect for me. Besides drawing, I use it to mock-up web pages, play with color schemes, work with basic layouts such as posters, et al. I find that the amount of control it offers combined with the simplicity of the program is just what I need.
@Lauren — never ever never. It scares me.
I am currently taking a Computer Assisted Graphics Design class in the art department at my University, and my teacher is very talented with “Illy”. He has really changed my faith from PS.
Before I always thought that only print designers and atrsy people used illustrator, and I couldn’t graps what vector graphics were all about. After using Illustrator for just a couple months I never open PS any more, except to crop or manipulate photos.
Can’t wait to read more posts on this subject.
I used to be pretty good at Illustrator when I was a student, but when I got a job I had to switch to Corel Draw. A couple of weeks ago I opened Illustrator at home to make myself some new business cards and I realised I didn’t know what to do. So I did everything in Corel instead.
I’ve always liked the way Illustrator complements Photoshop and it’s certainly more intuitive than Corel.
Can’t wait for the next article. They will help me to learn the program again.
@Dylan B
My articles are beginner guides/tutorials because when I started out, I had hard time finding those articles, so I hope you are not put off by a the low level Im teaching about.
@barbara
I have to admit that I only tried using Corel Draw once and I didn’t find it a bad app, but one have to find a “weapon of choice” and stick too it.
Perhaps a tutorial on a business card would be a good idea, until now I only made articles about web graphics.
I hope you all like long articles.. the last one I did was about 4 A4-pages :-[
@Esben
Well since these applications are so deep with so many different ways to use them, it would take more than just a couple of months in a class to learn a lot about the application. I have already learned things about PS and IL from this article that I didn’t know.
@Dylan B
Im glad to hear that, this article though is just a introduction for the article next monday.
But you are right that the are complex, but when you start using them and begins to have a good feel about them, often you want more options.
I think its Adobe’s GUI thats a problem, more so than endless functions, because they tend to hide important stuff.
Are you going to discuss other vector programs, too, particularly the open-source Inkscape?
Getting images out of Inkscape is substantially more difficult then Illustrator, but other than that, I think it’s a great tool.
Hey Jake,
I have thought about it.. because I think its important to broaden the view on this particular app.
But Im afraid I do have some serious hardware problems using Inkscape.
First I only have PPC based Macs and Im refusing to switch to Intel, don’t ask why
So this makes it impossible to use Inkscape through some sort of virtualizing and that makes me stock on X11, which is extremely slow and Im not talking milliseconds!
I could on the other hand install Ubuntu, Debian or Yellow Dog, but I did that and the OS died on my when I updated to Feisty Fawn. I did that once and it was nothing but trouble.
Since its not that easy to make a dual boot on PPC Macs I had days of trouble with Ubuntu. The bootloader is wicked and did at that time, only worked with one version of Ubuntu. I don’t know if they have fixed it since, I dare not try figuring out.
But Im willing to go ahead and for starters, try to make a guide for Inkscape, but it is going to take some time ahead, since my articles is only going to be published once every week and i got 6 in line so far.
Yeah I see what you mean my exporting to bitmap.. I was looking for a option for making a clipping mask, but couldn’t figure it out. I am going to look into it.
Jake to you know any other bloggers that writes about Inkscape?
@Jake!
I just figured out the export, its much like CS2 and earlier versions.
go to “object” -> “clip” -> “set” and draw a rectangle over the area that is fitting, resize by numbers if needed. Then go to export to bitmap in the file menu..
paul.,
Interesting! I think you are the second person I’ve met that mostly uses Illustrator. But that’s another story… coworker *grumble* You mock up Web pages with Illy? Do you take it into PS to slice up the images? What I don’t understand is (and Esben, love to hear you weigh in on this, too) how you account for Web being pixel-based. Web is very, very specific down to the pixel and Illy is strictly vector. How do you deal with aliasing (graphics not exactly lining up on a pixel, so they are are “half pixels” or partially transparent)?
Alec,
I remember being extremely frustrated with the pen tool (in Illy and PS, they work almost the same) when I first started working with it but now it’s so second nature! I’m glad Esben will be doing the explaining of working with it because I would have to think very hard about how I actually use it! You’ll get there some day too
Dylan,
I think the thing I don’t like about Illy is that if something is produced in this program, you can always tell; there is a “style” that people always use—posterized, generally either one color or three colors (highlight, shadow, midtone). Maybe that’s just my ignorance in seeing Illy work. Check out Illustrator World for some pretty amazing stuff (particularly the Realistic category)!
Barbara,
Funny how we can get so used to a program and then move away from it and not remember how to use it a few years later! Hopefully you will find these next few articles useful
Esben,
Perhaps you can give us some tutorials on projects you have worked on or are currently working on. Tell us some new things you’ve learned to do. Similar to what I’m doing with InDesign. What do you think? And thanks again for all this work you’re doing! You really should start your own Illy blog… you’d already have a loyal following here
Dylan,
I don’t think even the programs’ developers know everything there is to know about these programs! I learn something new all the time! And there are sooo many ways to do the same thing.
JakeT,
Hello! Welcome to Creative Curio! I hope Esben will be able to help you out with Inkscape. I’ve never used the program myself.
@Lauren
Really cool site. I especially like the realistic pictures. My teacher showed us some pictures of realistic images other, more advanced, students had made.
As one of our beginning projects we had recreate a battery as best as we could. This was a pretty tough project for a beginner, but was really fun. It really drilled into my brain some of the core concepts of illustrator and design. Here is my battery. It’s not awesome, but a good start I think.
@Lauren
Well since I made ads in a small local newspaper, then I don’t think Im going to share anything… unless you like these kind of ads: “2 pounds of steak - only $2,99”.
But in some of the coming articles, I could try to go through some of the webdesigns I made. I have one coming up, that could be interesting
Aliasing, well I haven’t found a method yet, that takes care of the problem, but Mordy Golding. seems have the answer. Even to control it at different objects.
@Dylan,
A photorealistic battery? Well then you know everything there is about opacity mask.. which in my opinion is the most difficult feature to grasp in Illustrator.
@Lauren
I set the artboard width to to the number of pixels I want the site to be, then I throw the layout together using the basic tools in Illustrator (I just can’t bring myself to call it “Illy”). After I figure that out, I make the individual images separately by defining the size of each, and export. Sometimes the final image is 1 pixel off because of anti-aliasing, but then (and only then) I take it into Photoshop and just resize it by one pixel, which doesn’t make a visual difference. I know it probably sounds complicated but I hate slicing in Photoshop; for some reason it makes me feel dumb. I do use Photoshop if I have to of course, for realistic images or whatever. And while it does seem like there is an “Illustrator style” that’s not all it’s capable of.
@Esben photorealistic. Thats it. I have gotten pretty comfortable with opacity masks, and clipping masks. Although I wouldn’t say I know everything about them. They are very helpful tools though. Making the battery, I actually didn’t use one opacity mask. Most of it was just gradients, and transparencies. Also I have to give much credit to the blend tool. It is so helpful in getting a shiney look and feel to a metal surface, or any surface.
@Paul
You should be able to slice the edges off in illy. The artboard is a clipping path as well as a guiding path. I personally don’t use it anymore, because of the new crop tool in CS3. You don’t have to go in to Photoshop to make does correction.
read this :-).
@Dylan
I haven’t tried making anything close to Photorealistic in illy, mostly because I haven’t got anything to use it for, so far. A important factor in photorealism is 3D.
But I gotta hand it too you, It’s a very nice battery you made, especially if its your first try out in illy.
I got a weird problem with blend tool. I can only get a “preview” in blend options, when I double click the blend tool. But if I go to object -> blend->blend options, the “preview”icon is dimmed :-/
@Esben
Thanks. I figured there was a way to do that, but it so rarely comes up I hadn’t bothered to figure it out. Although it seems like it should be easier than it is.
@Paul
Well illy CS3 is exactly that.. sorry to tell you that. But it have a powerful crop tool or lets just say.. logical!
I can understand your frustration, but cs3 is worth it in my opinion.
http://www.adobe.com/products/illustrator/
Under “featured tour” there is a video demonstrating the crop tool in CS3
@Esben
Yes, CS3 has managed to elude me thus far. In other words, I haven’t used it yet.
Oh god Dylan. You just gave me flashbacks to last semester’s sophomore technology 1 Illustrator project.
We had to take an object ( I started with a camera but halfway through, CS3 melted down and I had to have my hard drive re-imaged, and had to start over with a simpler flash drive) and render it as realistically as possible from three different angles. I shudder at the mention of a gradient mesh. The lazier students put in about 80 hours, most of us did between 100 and 120 hours.
Please, god, never again.
@Esben
I have the same issues when when in the blend options menu. The preview button is shaded out. Not sure why that is. The only thing I can think of to simulate a preview mode is to go ahead and make the blend with Option+Apple+B, and if you don’t like Release with Shift+Option+Apple B. Kind of jank but it’s pretty quick.
@Jay
Gradient Mesh. Gradient Mesh. Gradient Mesh. haha. Some of my worst experiences with the project came from trying to use an Envelope Distort with a mesh. I can’t even remember how many times I had to undo and start over. 120 hours is insane. Still got the images? I’d like to see them.
@Jay I too would love to see it
Gradient Mesh is hardly beginner stuff, but at some time, I’m going to introduce it, although I rarely uses it much myself.
@Dylan
Yeah but it still is too quirky for me.. the workflow is just too long and when you have to use specified steps, my veins in my temple area is long and crooked.
Great article series, im one who has always ACTUALLY wondered why are all my friend doing courses in graphic design, in love with Illustrator an dim not…. be interesting to see what I should be using it for!
Dylan,
That’s a pretty impressive battery! Good job! Love to see more of your work
Mel,
Yes, I’m liking this series, too. Stay tuned! Next one goes up Monday!
this is a great blogpost introduction about Illustrator. I used to use Photoshop a lot.. but when I learn how to use Illustrator, I maximized the benefits of using vector design.
Nice post…I have been In graphics design for 12 years and I used all graphics software. how about AI and CDR ? Which one you prefer?
Hi Nilo and welcome,
Well haven’t tried out Corel, I stumbled upon Illustrator and have used it ever since. :-)
I’m sorry, and I am glad you are all hyped about illustrator, so you should be . But PS vs AI?? Why the versus? It’s like saying Cars vs Boats… sorry but thats how i feel. Vector btw is not an image file in any way shape or form. The reason it can be scaled so big is its a set of line art and rules Not a fixed pixel based image hence “Vector” …still nice site. Good work. Enjoy
If anyone checks out an old version of Adobe streamline and tries to convert a photo will know what i mean vector… you get vector line art- the output is thousands of lines, that are all editable… try it. Without the rasterising a gradient would be one colour line to another in a series of steps, which is how i used to have to do a gradient in illustrator 2.3 (it was called blending)then put a square box over all the lines, select all and go, create compound path. Believe me when there where no layers and thousands of blends, and all before even a power pc it was a labour of love not much else… I have enjoed photoshop since version 1(which was not much better than MS paint at the time lol ) and didnt reall change until 2.5 which was the biggest step for adobe ps :-p anyhow again nice site. be lucky *peace
D Wax,
It was not meant as one against the other, but more which one should be used. I’m not sure what you mean about the comment on vector images. I don’t think it was implied anywhere in the article that vectors are pixel based, in fact, the opposite was stated. Thanks for stopping by!
ok Laurie fair comment, ..fireworks <—macromedias version of photoshop??…nice site btw..will bookmark..oh about the quarkx ID thing which is wh i ended here..nice topic, and i too am alwas asked for xpress prefered although I am an avid adobe user (ace - ps 7)..take care..adioss
you have a nice eye btw :-P
One Trackback
[…] I read “a beginner’s guide to Illustrator” and was still lost, I knew something was wrong. I said to myself, “I’ll learn it […]