Illustrator’s Live Trace: Sketch to Vector

Advertisement

In this post we will take a drawn design, scan it and clean it up in Photoshop, then trace it using the Live Trace feature in Adobe Illustrator. Live Trace was introduced in Adobe Illustrator CS2 but is still a powerful tool available in Illustrator CS5. This process really gives an artist the freedom to digitally experiment with drawings of any kind. The vector art it produces can be used in numerous ways and is easily customized. My motivation for trying this was originally to make a “growing vine”-type animation in Adobe After Effects. I will show a link to the resulting animation at the end of this tutorial, but for now, let’s get started.

Screenshot1

Scan and Clean Up

Scan your sketch and bring the image into Adobe Photoshop. Make sure that the image is Grayscale (Image -> Mode -> Grayscale). Begin by adjusting the image using Image -> Adjust -> Brightness/Contrast -> Levels (Cmd/Ctrl + L)  and/or Curves (Cmd/Ctrl + M) to improve upon the sharpness and contrast if needed. Clean the image using the Eraser Tool (E), trying to get the white areas as clean as possible. Paint the black areas, and alter or redesign any shapes so you are happy with the overall design.

Screenshot2

Cleaning up the image is important for getting a good trace in Illustrator. There are a number of techniques that help get rid of unwanted specks and imperfections, here’s the method I used:

Go to Select -> Color Range:

  • Sample Colors: Select from drop-down.
  • Localized Color Clusters: Leave this deselected in the beginning.
  • Fuzziness: Play with this setting to get the edges less, or more, sharp.
  • Selection Preview: Select None.
  • Invert: Choose this if you would rather preview selected pixels as black instead of white.

Screenshot

Use the Eyedropper Tool to click on your image and to sample the colors you want included. Because we chose the Selection preview (and Invert is not selected), you will see the selected pixels as white, so white = selected. Using the Eyedropper Tool, zoom into your main drawing (Cmd/Ctrl + Scroll) so you can see the pixels you are selecting. View the results on the Color Range preview.

  • Add to Sample and Subtract from Sample: Use these Eyedropper Tools (to the right of the main Eyedropper Tool) to select or take away from the preview image.

If you have trouble areas, you can select the Localized Color Clusters box and this will help add or take away from localized areas (not the whole image). When you are happy with the selection, click OK; you should now see dancing ants. Make a new layer and click on that empty layer. Go to Edit -> Fill (Shift + F5) and fill with black.

Turn off your previous layer. The result should be a much cleaner version of your image. It may take a few experimental tries, since every drawing is different. When you are done, save the image as a .PSD file (this is important for editing it later in Illustrator).

Screenshot3

Lastly, take the Eraser Tool (E) and separate parts of the image that run together, isolating each component image or shape that you want separated. An alternative is to select small shapes with the Magic Wand Tool (W) and add a 2-4 pixel white stroke (Edit > Stroke) to slightly separate shapes. This is to avoid having large groups of your drawing connected with anchor points when it is converted to vectors. There are methods to cut and separate these areas later (which will be explained), but it’s a good idea to try to achieve this early-on.

Tracing in Illustrator

Open a document in Illustrator and place your clean PSD image. Click on the image to select. Click the small box to the right of the Live Trace button called Tracing Presets and Options and scroll down to Tracing Options.

Screenshot

The Tracing Options dialogue box will open. There are many preset selections to choose from but we’re going to use our own settings to get the best possible trace:

  • Check Preview: Now you can see the effects live as you change the settings.
  • Check Ignore White: Now the white background is not present.
  • Set the Mode: Select Black and White. Leave Raster set to No Image and Vector set to Tracing Results, and check Fills.

Since you can see the results live, it helps to play with the settings a bit to get used to what effect they have. The way to think of the settings is that the left side (Adjustments) resembles Photoshop, and is conditioning the raster image before it is traced; the right side (Trace Settings) resembles Illustrator, and is taking the conditioned rasterized image and converting it to paths. Let’s look at what the most relevant settings do.

  • Threshold: This value determines which pixels are white and which are black. Any pixels lighter than the Threshold value are turned white and all pixels darker will become black. For instance, making the threshold higher means that more of the darker pixels will be included in the vector shape.
  • Blur: This blurs the original image before its traced, which helps smooth out jagged edges.
  • Resample: This may come as a surprise to some, but with Live Trace, a higher resolution doesn’t necessarily translate to a better traced result. In many cases, a high-resolution file can add unwanted complexity to a traced file. So play with this feature to see if your image might do better using a lower resolution.
  • Path Fitting: The lower the number/setting, the tighter the image will be traced. If it’s too low you could get a jaggy effect. The higher the number/setting, the smoother the effect, but you lose detail.
  • Minimum Area: Defines the minimum area that will be traced, which helps get rid of the imperfections or “dirty” areas you don’t want to capture. This setting determines the pixel minimum area, so anything smaller won’t be traced.
  • Corner Angle: Sets the sharpness of the corner angles. The lower the number/setting, the sharper the corners.

When you are happy with the settings, be sure to first Save Preset. This is on the right of the Tracing Options dialogue box and will come in very handy if you need to make some other changes before tracing again. Once you’ve saved, hit Trace. You will then need to hit the Expand button or Object -> Live Trace -> Expand to see the actual results.

Edit and Tweak the Results

Screenshot4

Separate Grouped Vector Objects

Be sure to Ungroup (Shift + Cmd/Ctrl + G) (Object > Ungroup) as many times as necessary to make sure everything is ungrouped.

In the above images you can see that I did some editing to my original trace. Some shapes were unwittingly grouped together, despite my efforts in Photoshop to keep them separate. Luckily, should this happen, there are a few easy solutions.

Revise the Original Image:

It is easy to go back and quickly edit your image in Photoshop with a click of a button. The Undo (Cmd/Ctrl + Z) command will need to be applied until you return to the raster image (hence saving the preset, so we can use it again here):

Screenshot5

Go to the Links panel (Window > Links) and click on the little pencil icon in the lower right corner. It can now be instantly edited in Photoshop. When the editing is done, close the window and when prompted, choose to update/save the changes in Illustrator. You can now use your preset to re-apply the trace in Illustrator.

Screenshot6

Use the Knife Tool:

Another solution is to simply use the Knife Tool (pictured above, it is part of the Eraser group on the tool bar) to cut grouped anchor points apart. It helps to View Outlines (Cmd/Ctrl+Y). You can also hold down Alt to have the knife tool cut a straight line. Zoom in by scrolling while holding Cmd/Ctrl. The Delete Anchor Point Tool (Pen Tool + minus sign) is another tool for deleting anchor points and separating grouped objects.

Live Paint (see “Inspirational Suggestions” section below):

This feature doesn’t actually alter any of the vector groupings; instead it allows the coloring and texturing of any lines or shapes, regardless of how they are grouped.

Reduce the Number of Anchor Points

Live Trace tends to produce an extraneous amount of anchor points in some places. To get rid of some of these we can use the Smooth Tool (pictured in the above image). Click and drag to simplify and reduce the anchor points and to smooth curves.

Touch-Ups

If some shapes did not trace properly (as with the circles in the example below), they can quickly be redrawn. It’s helpful to lock down the original raster art on the background at around 20% opacity.

Screenshot7
Final result.

Animated illustration8

Design Techniques

At this point you can alter, delete or add to your vector design as you creatively see fit. I experimented with patterns, textures9 and backgrounds. The main thing is that you now have your art in vector form and can easily alter it in many creative ways. Here are a few brief suggestions for techniques that are useful:

Adobe Kuler

An extension handy for anyone using Illustrator, Adobe Kuler10 puts a pallet of suggested and popular color combinations that can be added to the swatches panel. This tutorial11 shows a way to create and load your own Kuler swatches from the Kuler website to your Illustrator library. Another great informational video tutorial: Learn CS4 Design Premium: Using Kuler Color Themes12.

Screenshot13

Live Paint

Live Paint deserves a tutorial of its own, as there are many features; a quick mention is worth it here, because Live Paint can easily fill in shapes without having to alter the vector groupings:

Select your artwork and go to the Object menu. Select Live Paint > Make. Select the Live Paint Bucket (K) and fill the cells with the desired colors.

Screenshot14

Screenshot15

Recolor Artwork

Great for playing with color combinations. This feature takes the existing colors and provides complimentary color options which can be viewed instantly. To open the palette, select your artwork and click the little colorful circular button on the top menu, or choose Edit > Edit Colors >Recolor Artwork.  This is pretty intuitive to use, but here is a great tutorial16 from Mordy Golding if you’re interested in an in-depth look.

Screenshot17

Credits, Links and Resources

  • Fridays with Mordy18
    I’ve seen Mordy Golding pop up, over and over again, in video tutorials about Illustrator. He has a great deal of valuable information. This link takes you directly to his “Fridays with Mordy: Live Trace in Illustrator” podcast.
  • Lynda.com19
    This website has many useful video tutorials, including ones on the Live Trace feature. Access them by subscription, or by signing up for their 7-day free trial.
  • Creating Vector Content Using Live Trace20
    This PDF download has an in-depth description of Live Trace.
  • Tweak to Get the Perfect Trace21
    From the Adobe website, this gives an in-depth explanation of all the options in the Trace Settings feature.
  • Live Trace Tricks in Adobe Illustrator22
    This video tutorial from Layers Magazine is more about using Live Trace for color photographs, but I thought I’d include it since it’s a nice variation and describes the Live Paint Bucket feature very well.
  • Applying Custom Texture in Illustrator23
    This is a nice, simple tutorial for adding textures.

(rk) (ik) (vf)

Footnotes

  1. 1 http://www.smashingmagazine.com/wp-content/uploads/2010/11/1frame2.jpg
  2. 2 http://www.smashingmagazine.com/wp-content/uploads/2010/11/2-copy.jpg
  3. 3 http://www.smashingmagazine.com/wp-content/uploads/2010/11/3-copy.jpg
  4. 4 http://www.smashingmagazine.com/wp-content/uploads/2010/11/6-copy.jpg
  5. 5 http://www.smashingmagazine.com/wp-content/uploads/2010/11/72.jpg
  6. 6 http://www.smashingmagazine.com/wp-content/uploads/2010/11/8.jpg
  7. 7 http://www.smashingmagazine.com/wp-content/uploads/2010/11/MAIN3.jpg
  8. 8 http://vimeo.com/14019165
  9. 9 http://www.squidoo.com/illustrator_shape_texture
  10. 10 http://kuler.adobe.com/
  11. 11 http://layersmagazine.com/kuler-color-illustrator.html
  12. 12 http://tv.adobe.com/watch/learn-cs4-design-premium/using-kuler-color-themes/
  13. 13 http://www.smashingmagazine.com/wp-content/uploads/2010/11/101.jpg
  14. 14 http://www.smashingmagazine.com/wp-content/uploads/2010/11/111.jpg
  15. 15 http://www.smashingmagazine.com/wp-content/uploads/2010/11/121.jpg
  16. 16 http://www.istockphoto.com/article_view.php?ID=609
  17. 17 http://www.smashingmagazine.com/wp-content/uploads/2010/11/14-copy.jpg
  18. 18 http://experts.na3.acrobat.com/p37271596/?launcher=false&fcsContent=true&pbMode=normal
  19. 19 http://www.Lynda.com/freepass/mordy
  20. 20 http://www.adobe.com/products/illustrator/pdfs/creating_vector_content.pdf
  21. 21 http://www.adobe.com/designcenter/illustrator/articles/illcs2at_tweak_print.html
  22. 22 http://layersmagazine.com/live-trace-tricks.html
  23. 23 http://www.squidoo.com/illustrator_shape_texture

↑ Back to topShare on Twitter

Sharon Hart is a freelance web/graphic designer and chocolate connoisseur. She worked many production and design jobs in Los Angeles for a number of years before returning to her roots on the East Coast (Massachusetts) where she now happily runs Elastic Color. When she's not designing she enjoys cooking, painting, reading, tea, hiking and the company of her cat Pixel. You can also find her on twitter chatting about the newest design trends.

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    This article makes me want to go back and try messing around with Live Trace again. I had abandoned it.

  2. 2

    The showcased final animation looks odd and unfinished. It still looks look a draft, with uneven edges, remaining white borders, odd shapes (and very approximative animation).

    I wonder how much this final result depends on the sketch-to-vector tutorial. If it does, then it’s not a good professional process.

    I would say that instead of going through the harass of vectorizing, for this particular very easy design example, you’re better off redrawing it with Illustrator vector tools.

    And if you think it’s hard to do, then it’s time to familiarise yourselves with vector drawing tools, because this task is easy and shouldn’t take more time than vectorizing (think about duplicate elements of the same kind, think about mirroring). The result will be much much better, and easier to animate.

    This tutorial is hardly reflecting SmashingMagazine usual articles quality.

    • 3

      @vincent-b This tutorial is meant to present a number of techniques, tweaks, edits, touch-ups etc. to use along with Live Trace as well as the preparation of any scanned drawing. The result being a vector image that can be manipulated in countless ways artistically. I tried to emphasize that. The “final result” is just one of many redesigns I had including the result used in the After Effects animation (also meant to inspire the possibilities here). What matters is that people can achieve their own vision. I am very familiar with the drawing tools and could have done it that way. Instead I wanted to share what I learned experimenting with the Live Trace feature and the techniques that compliment it.

      • 4

        Oh Sharon by ‘you’ I was more talking to readers of this article :) I am pretty sure that you master these techniques. I understand the “all aroudn techniques approach”. Still just continue to regret that the final step, the one showing the animated result, is not at all professional, neither is the vector one. If after a vectorizing phase and an ioptimization phase, the result still looks sketchy, so I don’t see the point at all for this tutorial. I’ve been given a closer look to the final vector result since you’ve answered, thinking I could lower my temper, but it’s actually worse than I thought : most of the curves of the final image are odd, the shapes are looking unfinished.

        http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/11/MAIN3.jpg

        If the point is showing that you can achieve a good vector work by vectorizing and retouching (which is definitely possible), then this tutorial is incomplete because it only shows a sketchy result.

        I understand the ‘countless way’ you can modify the image. How about just showing how to get nice curves and shapes? Because if the vector is going to look like the s-ketch, just rescan the sketch in a higher definition and you skip the work.

        When SmashingMagazine asks for contributors, I often think I’m not going to dive in because it represents a large amount of work to build a professional tutorial with quality examples. Exactly the same quality I expect when I read an article here. And SM often tweet they pay well. So I feel the need to say it when I feel there’s a lack of quality put in an article.

        • 5

          Vitaly Friedman (editor-in-chief of Smashing Magazine)

          November 16, 2010 2:04 am

          Vincent, we are permanently working on revising our quality guidelines on Smashing Magazine, and we certainly could use more insights from professional designers and developers. Writing does take time, but it can be a gradual process. Whenever you have time, please do get in touch — I am sure we will figure something out.

          • 6

            Thanks for your words.

            Having some highly design oriented software products in the wild, I know that attention to every details count. Every bit of misplaced pixel is going to be reported by users. Reported until it’s fixed. Even users of a $.49 iPhone app are going to demand that the app is perfect.

            In webdesign work, my clients (and their colleagues, their family, friends..) are dismantling every graphic design work : “My nephew said he can do better round corners than you”… and his nephew is probably telling the truth, because he uses this amazing tutorial on Smashing Magazine on how to make a .gif height and width dividable by 8 to optimize quality of graphics at pixel level.

            This is what I’m talking about, state-of-the art graphic design and techniques at a given time. I can write tutorials about very specific techniques, when I have hard time to myself find good readings about them. Would I write about sketch-to-vector how-to’s, I’ll check the thousand resources already existing about it and try to match the quality, at least.

            Just googling “sketch-to-vector” and browsing the results is blowing your mind away.

            Discussions about being a designer and where to put the quality level can be great. Everything I said has been downvoted. The only person having 10+ points is the one saying I’m a douche, and only saying this.

        • 7

          Get off your high horse Vincent you douche and quit trying to dismantle a perfectly good tutorial.

          • 8

            agree. I think it was Vincent’s garbage that set the tone of a lot of these comments.

          • 9

            Gerald is right. Vincent is a negative Nancy. This is a very useful tutorial, and it is appreciated.

          • 10

            I wholeheartedly agree, the final result makes the tutorial feel out-dated, worthless and unprofessional, which is unfortunate because the tutorial is not that bad.

            it’s just the execution of the examples that is lacking.

          • 11

            I can’t agree anymore. It’s a really good article. Thanks Sharon.

          • 12

            I am sorry Gerald, but I don’t think I’m deserving to be called a douche here.

            I’ve argumented my thoughts and explained everything I said. I signed up with my real email and haven’t been impolite to anyone, unlike you.

            I came back to answer and to be more precise. Sorry to try to push the enveloppe here. I really wonders who looked the final result in details. As someone said, the tutorial is good. But you can’t make any point if you don’t showcase it properly.

            SM is not supposed to be ‘any’ webdesign magazine. I see SM preparing future posts on Twitter often. They come up with these great posts full of the best references about a particular topic. Yet some articles are far from being perfect.

            Who is SM aiming to be read by? I give you a hint, look at the ads : it’s b2b ads, mostly, SM is for professionals, and even if a professional technique is described here, the result is very far from it.

            I am not trying to dismantle anything.

        • 13

          …”Because if the vector is going to look like the s-ketch, just rescan the sketch in a higher definition and you skip the work”…

          assuming you don’t need the work to be scalable. I also think that intangible “taste” may be an issue here – who’s to say that the image needs to have perfect curves and not look hand drawn in order to be considered “good”? Some may feel that a more “hand drawn” look is more personal and less cold. Take into account intent if you are trying to criticize aesthetics; if you don’t know the intention / audience, etc, then I don’t know how much weight the criticism has because it it only ultimately something akin to “I don’t like it”. Unless you are the client, you don’t have to :)

      • 15

        That’s great to see your tutoring.

        Thanks

  3. 16

    Great! Couple ideas just popped outa my brain after reading this!
    Thanks Sharon :)

  4. 17

    Fantastic tutorial! I’ve tried going at it alone with the Live Trace (and Live Paint) a number of times only to have it not work at all, or as easy, as I hoped.

    Never found any tutorials as thorough as this one, either. Thanks!

  5. 18

    real illustrators dont use live trace.

    • 19

      @John – I am a real illustrator, and I use live trace all the time. Often times I draw on an actual physical piece of paper, scan it in and use live trace to vectorize it, so in a sense, I am more of an illustrator than someone who strictly uses other tools to create an image. Live Trace and any other tool inside of Illustrator is just another tool, that if used correctly, can produce amazing results. So, John, don’t go saying something that only an idiot would say.
      If you would like to see some of my pathetic illustrations, check them out and judge for yourself.
      http://www.sabordesigns.com
      michaelmurdock.blogspot.com

    • 22

      You are right – real illustrators don’t even use a computer to paint. They use (gasp) real paint. I guess it depends where you draw the line (pun so completely not intended).

      nice tutorial.

      • 23

        @Kingen. I don’t agree. I use both traditional techniques along with the tools given to me in Illustrator and other programs to create my illustrations. For someone to say real illustrators don;t use live trace is just a stupid statement with no understanding of illustration. For someone to claim real illustrators ONLY use real paints to create is an equally absurd statement.

        • 24

          hey murdock! wake up and smell the sarcasm!

          And I checked out your work – no offense, but I think you are more of a designer that like likes to draw – it’s ok – I’m an illustrator that likes to design :)

        • 26

          Actually, I can’t explain why you are the only one to show your work. I also can’t explain why some people jump in front of a speeding bus :) Because of my snark, I’ll keep my real identity to myself – but if you care, I’ve been recognized by CA, Print, Graphis and others under my real name. I’ve been teaching this stuff at a private art college since the early 90’s. You don’t have to believe me.

          I think your message is basically spot on – ultimately the tool doesn’t matter. A good illustration (actually, any creative endeavor) happens in your head. The tools that you use to get in front of the viewer are irrelevant and should be a matter of personal choice to the artist. If you are limited by your tool (i.e. – basic understanding of software or oils or acrylic, etc) it limits what you can do.

          Conversely, really knowing the ins and outs of software or all of the technical tricks associated with any kind of traditional media does absolutely nothing in terms of making great work.

          I think this post was a “rough around the edges” way to show those without a lot of experience drawing in vector drawing how to get from a to b. Personally, since I’ve been trained traditionally, vector drawing is non intuitive and a pain. It’s actually much easier (and faster) for me to work traditionally – all the way from sketch to finish.

  6. 27

    Dave Bergschneider

    November 15, 2010 2:56 pm

    Nice article. I think live trace is a bit of waste for a high-end projects that may require a lot of detail. The sheer amount of excess nodes live trace likes to create in order to mimic your drawing. So for me, it is just easier and quicker to trace manually than having to worry about cleanup that would likely take just as long if not longer. However with that said, I did enjoy your article.

  7. 28

    great post! and thanks for sharing us your technique…

  8. 29

    I may be mistaken but don’t you hold alt to achieve a straight line with the knife tool…not shift.

    • 30

      @Clint Yes: Hold down Alt with the knife tool to achieve a straight line (not shift). You are correct, thanks for pointing that out. It’s been corrected.

  9. 31

    Great process of taking a traditional illustration into Illustrator. Live trace is a great resource when it’s not abused.

    Good tutorial with some helpful tips!

  10. 32

    Interesting article. I have a couple of thoughts and points:

    Clint, you’re correct, I caught that too. You hold ALT for a straight line with the knife tool. Not shift.

    Vincent-b and John, I completely agree with you, by the time you figure out this process that usually results in unwanted points, and unnecessary groupings, you could have achieved a perfect drawing using the various tools that beginners aren’t familiar with.

    Although, I do feel it is a rather useful article in teaching beginners and professionals alike new and different techniques. I’m extremely fast with the pen tool, but I might try this process for a different perspective…

    And yes vincent-b, the end result video did look unfinished as an animation. But it did do what it was supposed to do, and that was to show an animation of the design from the article.

    Just my two cents.

    • 33

      @drane53 (and vincent) Agreed, if you can whip out a drawing with the pen tool then great. I can actually do this, but many can’t, and I do use Live Trace a lot because it works better with some illustrations and makes the process quicker if you use the additional suggestions. Not to mention the importance of preparing your scanned image. The animation was my first attempt at After Effects so it’s amateur. I was hoping to help inspire creative possibilities.

  11. 34

    Thank for the tutorial. In fact, the example is better and faster vectorized by redrawing in illustrator but the purpose is to know the technique and learn it. It could help.

    and…
    “real illustrators dont use live trace.”
    only real newbies can say that. No matter the way, an artist creates art.

  12. 35

    People are idiots, and i know they are probably just trolling, but whatever. Here are the facts, coming from a PROFESSIONAL ILLUSTRATOR. All of the tools inside of Illustrator are there for your benefit, to help you create an awesome piece of art, if you are too arrogant to try using them in actual application, your loss. So many times have I started illustrating something using the pen tool and decided it would be a lot quicker, and I could produce better results by HAND DRAWING it first, then live-tracing it. So grow up, learn to use more than just the pen tool, and create some amazing stuff.

    • 36

      Hallelujah, Mr. Murdock!

    • 37

      While I agree with your thoughts on AI tools, I am saddened by the tone in your voice. Didn’t you think you could make your point in a polite, respectful way?

      • 38

        This is a moronic reply in itself.

        If you continue to read you will see Michael explaining much more and I think the frustration comes from repeating things over and over.

        If you dont grow and stay with the tools of the new age then you will become obsolete very quickly.

        A question to everyone here who is negative about live trace:
        Do you only use film camera’s? If yes, do you only use film, no digital?

        Illustration is moving forward with the times and with such we will see art which we could not dream of in the past, this art is only possible with new tools and methods. Use the new tools and become more productive if you are not looking to innovate. My recent move form Photoshop CS3 to CS5 has improved my productivity by at least 10% on a daily basis.

        • 39

          I agree with David A. Other’s behavior is never an excuse to permit yourself to be less than cordial. Separate yourself from others, give a response not a reaction. It helps those of us who don’t happen to share whatever temporal frustration and emotion you happen to have been feeling to learn and be open to what new information might be in your response, without having to be dissuaded by some emotional tit for tat.

    • 40

      I try not to use the pen tool, but I find the magic wand is very helpful.

    • 41

      No intention to offend but you said on a previous comment ” I am a real illustrator” and now you said “coming from a PROFESSIONAL ILLUSTRATOR” and, by looking at your portfolio, I really think you have a lot to learn before proclaiming yourself such an illustration ninja… You should try to be more humble… My 2 cents.

      • 42

        If it pays his bills he’s a pro. Whether you like what he does or not, doesn’t matter.

        Being pro is all about making a living of what you do – Not what random forum users think.

        • 43

          @Martin – Thank you.

        • 44

          Martin – Does that make the guy making my Big Mac a chef? :)

          Absolutely nothing against Mr. Murdock – just the rational used to invoke professionalism.

          • 45

            If his jobdescription says “Chef”, then yes! He makes food like any other chef.

            You might think that he’s less of a chef than any given chef or topchef, and i can see why, but that doesn’t change the definition of the title.

            Again, the title “professional” relates to being able to live off what you do. Here’s what Wikipedia has to say about it:

            1. A professional is a person that is paid for what they do. Qualifications have little to do with being a professional as the world’s “oldest profession” is strictly a monetary gain career. An amateur maybe more qualified than a professional but they are not paid, thus they are an amateur.

            You might make “better” products than Michael Murdock, but that doesn’t make him any less professional since he made a living out of what he does.

            Ofcourse i can relate to individual skill and what not, but that’s not really what this is about.

          • 46

            Certainly the attribute “Professional” can be qualified greatly. Generally speaking, at minimum, it is receiving money for your service.

    • 47

      I agree that the Live Trace tool is very useful when you have complex drawings that you want to “digitize” for illustrative purposes. However, it is a fair point that sometimes it is just as quick (if not quicker) to scan the drawing and rebuild it with vectors on top of it. You save yourself the mind-numbing clean-up work that takes usually much longer for middle sized illustrations than what it would take a professional illustrator to vectorize the drawing by hand. And I would also like to mention the invention of graphic tablets which help cutting down the time it takes to digitize the drawing by hand.

  13. 48

    The opensource vector image editing program inkscape has a powerful live trace tool, and its free. I’ve used it for various projects, and I would recommend looking into it if your not familiar with it already.

  14. 49

    This is awesome and what I was looking for. I just can’t draw in Illustrator, but often would love to get my lines cleaner, rounder, etc.

    Let’s see how this all works in practice…

  15. 50

    I personally prefer Vector Magic for tracing.

  16. 51

    Live Trace is something that Adobe has never gotten quite right, and it’s something that almost EVERYONE who uses Illy for the first time assumes can be done, easier, and quicker.

    I make TShirts and other art using vectorized interpretations of photographic images. And, despite a few comments here, not everything can be done with the pen tool. Not even close. Especially for complex imagery.

    At first, everyone will be alarmed at the sheer NUMBER of anchor points Live Trace assigns to a seemingly simple illustration. It just doesn’t seem very “smart”. And, frankly, the amount of “prep” work (contrast / curves in PS) and “post” work (expanding, cutting, smoothing, converting, deleting, etc) in Illy is simply insane.

    Adobe needed to clean this feature up in CS2… never mind it’s still twitchy, laborious and confusing in CS5.

    Gah.

    Anyways, this is a nice tutorial though, and refresher for those of us who use it often :)

  17. 52

    I will show a link to the resulting animation at the end of this tutorial, but for now, let’s get started.
    Did i miss it?

    Anyway, great tutorial: thanks for sharing!

  18. 56

    Vector Magic is 20x better than live trace

  19. 58

    I get very disappointed every time I read people moaning about this kind of article. Not all the people that read this magazine are professionals, we, the ones that are like sponges looking for useful information are VERY grateful for this kind of articles. It’s up to each of us to use it or not, let the arrogance to one side, and stop making so stupid comments about what work best. If you know EVERYTHING why you bother to even read this. Thanks Sharon for sharing this, I think is very cool :)

  20. 59

    Amazing.

    We just finished a lecture about the same subject in class. What coincidence ! it;s great to see this on smashing though!

    thanks for the tutorial!

  21. 60

    It has been a long term problem creating vector images from bitmaps. I have used most software there is and you can end up with huge vector files!!

    The problem is usually based around what the eye knows is a perfect circle the software decides to draw a jaggered vector line around a circle instead of one single smooth closed vector.

  22. 61

    Sharon, this is a wonderful tutorial and I have been looking for a site with a good tutorial on these and similar techniques but just wasn’t able to find one. I’m eager to learn and want to find out as much as I can about illustration. Do you have any books you recommend? Perhaps you would like to discuss it over a nice candle-lit dinner at my condo? I would love to have you over.

    • 62

      haha, Mike, thanks … I don’t really have any book recommendations. I used to buy many books, some of the reference “Bible” types are still useful but I find they get outdated so quickly and the programs change so frequently. I would suggest looking into a class on things you’re interested in, also jumping right into tutorials that inspire is a great way to learn.

  23. 63

    Sharon Hart = God Send! I can’t tell you how many times that I struggle with this method of getting my sketches into Illustrator only to scrap the entire project b/c I can’t get it to work just right!

    Thank you Sharon. Much appreciated.

  24. 64

    Thanks for the tutorial from Minsk! For pro and real illustrators: instead of criticism maybe it’s worth to try to create your own tutorial…

  25. 65

    Awesome post. Thanks Sharon!

  26. 66

    I think the live trace tool is great for mock ups and showing ideas in a more committed way. I use it all the time to create drafts, after all no real point in spending a couple of days on a finished illustration if a client doesn’t like the style or tone of the image.

    I do agree that once you move to the final artwork stage the pen tool is the best way to get the right lines and smooth curves required for a scalable, professional end result.

    The article definitely highlights a tool that can make your work flow effective and time efficient!

  27. 67

    I’ve designed over 150 t-shirts this way. Although I find it is easier to clean up the shapes when they have been converted to vector using a wacom tablet to quickly neaten up any edges that have gotten jagged from ink bleed etc.

    I tend to use a 2 pixel blur a fair bit as well which makes it all a bit smoother.

  28. 68

    nice article– great one

  29. 69

    Hi
    Merci merci merci merci.
    Archeologist realy need this ! We have a lots of old map and draw handmade ^^ and now we have to vector it. Imagine working week after week to do it :). With your help it will be faster ;)

  30. 70

    This detailed explanation is really useful and very easy to follow. This will allow many people to experiment with this technique and get the results they want. I will personally be following this tutorial myself as a web designer as I think it could be extremely useful for adding a more creative and personal touch to websites.

    There are so many tools within designing software that you can always learn something new no matter how big or small. After all the more tips and tricks you know the better your designs will be produced.

  31. 71

    Great article Sharon. I own KillerBeePrinting.com and I’m always looking for areas of improvement for our programs & staff, in this case our designers. We small biz owners can’t always afford to send our staff for training on newer programs (a never ending process these days) so it’s nice to pick up some great free training advice. Keep up the good work and God bless!

  32. 72

    Parabéns pela iniciativa! Ótimo tutorial!
    Me ajudou mutio!

  33. 73

    Dear Sharon,

    How could I get a trace transparent layout? Because I use live trace but I cannot find the way of get a transparent layout when background is made with another color.

    • 74

      Ezequiel – When you have your “Tracing Options” box open (pictured above in the tutorial under the “Tracing in Illustrator” heading) make sure you have the “Ignore White” box checked. It is the little box at the bottom right of the tracing presets window on the “Tracing Settings” side. This will knock out the white background.

  34. 75

    Thanks Sharon

    It was great tutorial.Thanks a lot for share your experience with us!

  35. 76

    I’ve Been trying to work out a work-flow myself. Has anyone here checked out vector magic for live tracing? I’ve been trying to convert doodles into vectors and I’ve found that the best method lies somewhere between redrawing (wacom with pressure sensitive brush and hand tracing) and live trace.

    Also for cleanup of high detail traces instead of simplify or the smooth tool, sometimes I find it easier to use the lasso tool to select a bunch of ugly points and hit the remove anchor points button on the bar at the top of illustrator. The cool thing about going this way is it will automatically select the same number of points again down the path. saves alot of unnecessary clicking when doing cleanup of straight lines. Also, right click>average is your friend.

    I’ve noticed that in the end sometimes it would’ve been quicker to manually redraw, but the imperfections of livetrace can give a somewhat more natural look sometimes, especially for brush and ink drawings.

    • 77

      Chris,
      That is awesome advice, I thought I’d covered everything :] but the lasso tool and definitely right click >average are great techniques. I agree that a redraw is sometimes better depending on the drawing. Sometimes it’s a combination of the two. As for Vector Magic (vectormagic.com) I’ve heard great things about it. You upload images and they e-mail you the vector. You can try two for free if you sign up but then there is a monthly fee. Something to consider if Live Trace doesn’t seem to produce the results you want.

  36. 78

    Love it Sharon. Thanks

    Rich

    [vincent stfu]

  37. 79

    Sharon,
    Nice guide for getting a “doodle” or drawing that turns into more that expected to a more workable state. Happens to me all the time.
    I did want to add a little trick or addition to your steps, and this is in No way a critique.
    I am a photoshop person, and as such, it feels that many people over look the power of the vector abilities within said program.
    Once you define your contrast (as directed) you can then create a vector outline of the piece within photoshop.
    After a “clean up” is done, you can then remove the unwanted background(s) from the image with any of the removal tools.
    Select the entire illustration (ctrl+layer click) and then go to your path menu – select “create work path” and remember that the lower the tolerance (.5 – 10) the more detailed the paths will be. Then it’s traditional path smoothing.
    The only reason I bring this up is, if you have a drawing that is multi color, and difficult to create a specific outline of the entire thing, you can separate the colors with the channels, create specific channel paths, and granulate the vector process as needed.

    This is, of course, if you are not an illustrator fan, have illustrator, or just really like pixels (like me =)

    Cheers,

    Tim Ward
    Mental Ward Design

  38. 80

    this is the awesome designing software

    i am loving it….

  39. 81

    The tutorial is good.

    It’s not a Master Class that you’re paying $500 for, ease up. These tutorials are for explaining a process not to impress you with the best design work ever made.

    Stop talking bad about everyone else and post YOUR “better” tutorial, post YOUR “better” portfolio of work if you think others aren’t as good as you. Don’t rant about “every little detail” being perfect if you’re spelling and grammar is off within your post.

  40. 82

    This is a very useful tutorial. I appreciate the time and trouble you have taken to explain a number of features (ex: live trace, expand, live paint) that I had been confused about.

    Thank you!

  41. 83

    @vincent

    Then what are you doing here in the first place if you are not searching for a good tutorial? lol. C’mon man! Don’t be a dick. trololol.

  42. 84

    Kevin Merriweather

    January 1, 2012 11:59 pm

    I am a novice and found this tutorial to be quite informative. Thanks Sharon keep up the good work!

  43. 85

    great tute. Im a novice and have a question. when im in photoshop and do this step: Go to Edit -> Fill (Shift + F5) and fill with black, it doesnt fill it with black it looks more like a grey. To get it to be black i have to edit > fill it about ten times. what am i doing wrong. cheers. joel

  44. 86

    Hi Sharon,

    I’ve been a professional illustrator and designer working at the pointy end of brand communications for over 20 years. What I like about your tutorial is that your sketch stayed looking like a sketch. It looks like a piece of art, rather than a piece of software. It looks like a human took the time to create the piece. Its the difference between cave art and clip art. All of that creates a powerful and valid human message built into the illustrative technique – all of which seems completely overlooked by ‘the’ negative comment.

    I’m sure many people appreciate the time and effort you put into this tutorial. Don’t be put off by the occasional text spasm from Vulcans who think that learned logic is betterer than born soul. Unfortunately, social media is over-run by attention seekers who think that having access to a virtual soap-box, is the same thing as having an opinion worth sharing.

    Just keep doing the thing you do. It has appeal to all of us who appreciate soul.

  45. 87

    This was such an amazing tutorial! Every point was clearly delineated and I accomplished what I set out to do so quickly!! Thank you so much!

  46. 88

    I used the directions given here for a logo I created in Photoshop. When I Live Trace the images in the logo it traced a box around each image rather than the path snapping to the image itself like yours shown. Is there a way to fix that without having to trace the path by hand?

  47. 89

    I need to konw on reproducing images using illustrator. How would you reproduce the shell logo using the pathfinder and then add your own twist (twice) to it, save the file?

  48. 90

    Good debate :)

  49. 91

    Loved this article. I’ve used Live Trace for years, and honestly I’ve never been explained just what each attribute does, so I’d just experiment until I got a satisfactory result. This helped a lot!

    Thanks for your insight!

↑ Back to top