We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf New York, dedicated to smart front-end techniques and design patterns.
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.
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.