Vector Graphics: Transforming Sketches Into Vector Art

Vector Graphics: Transforming Sketches Into Vector Art

Consider yourself an artist? Have a talent in drawing or inking? These skills can actually transfer over to graphic design extremely fluently. If you have a lot of drawings already lying around doing nothing, there are a variety of ways to digitize these images for the web or even put them in a digital form that allows you to blow them up into massive prints (this is essentially what vector graphics do best).

What Are Vector Graphics

For those of you new to all of this, vector graphics are different from raster graphics (jpeg, bitmap, etc.) because, rather than representing an image as an array of pixels, vector graphics use geometrical primitives such as points, lines, and curves to represent images. This means that vector graphics don’t suffer from pixilation when blown up like raster graphics. This makes them extremely versatile, allowing you to use a sketch in multiple projects demanding multiple file and print sizes.

From Sketch to Vector

There are a variety of ways to turn your sketches into vector graphics: Using live trace to create the vector lines, creating your own vector points on top of your sketch (using the sketch as a reference) with the pen tool, and creating your own vector points on top of your sketch using a tablet. Each one of them has their own benefits and shortcomings; unfortunately, it would take a whole series of posts to cover them all. For today, I will cover live trace since it is the simplest method and perfect for beginners to vector graphics.

To tell live trace vector graphics apart from free-hand vector graphics (made with either then pen tool or a tablet), most live trace vector graphics have more lines and are a bit “busier.” Free-hand vector graphics generally have less lines and look a bit “cleaner,” like the image pictured below:

Live Trace

A few years ago, any graphic artist would tell you to simply never use the “live trace” function in Adobe Illustrator. However, the live trace feature has gradually improved throughout the various iterations of Illustrator. Now that we’re in Adobe Illustrator CS5, there’s a lot that can be done in live trace. In fact, live trace has become so popularly used that some free-hand vector artists are starting to complain (it can take hours or even days to ink a vector graphic while live trace takes five minutes tops).

Still, in order to make a vector graphic actually look good and interesting, a lot of work still goes into prepping an image before using live trace. In fact, a lot of work generally goes into the original sketch if it is to be vectored using live trace.

General rules for sketches before live trace:

  • Use tight, defined lines – Too many loose or stray lines will be interpreted by live trace and make your vector image look cluttered. In general, I avoid shading unless going for an unusual effect.
  • Trace over your sketch in pen – This is kind of an extension of the rule above. You can do this using a new sheet of paper over the original sketch or you can just ink over the original sketch and erase.
  • Less lines are (usually) better than more – This is a general rule and doesn’t need to be followed blindly, but I find that it’s a lot easier to add more vector lines after live tracing using the pen tool.
  • Experiment – Don’t follow the above rules blindly! You may find that your style works well with whatever weird glitch effect live trace has on some of your sketches.

Cleaning the scanned image before live trace:

  • Scan image at 300 dpi (dots per inch) – This is a great resolution for printing; if you don’t need this high a resolution, you can always scale it down later.
  • Open in Photoshop:
    • Grayscale the image – (Image->Mode->Grayscale)
    • Increase contrast – (Image->Adjest->Brightness/Contrast->Levels (or Curves)
    • Use the Eraser Tool (E) to clean up white areas of the image (extremely important)

Using live trace

In general, I find it best to just fiddle with the live trace settings while monitoring a preview of your image to see if you’re getting your desired results. Here’s a helpful PDF from Adobe created for the first Illustrator to use live trace (CS2), but I still find it very helpful for the current version of live trace. This guide from smashingmagazine is also equally invaluable.

Personally, when I’m working with live trace, I’ll try to modify the original scanned image in several different ways (blurring edges and lines, sharpening others, erasing more white areas) and see how these modifications affect the image once in live trace. Generally, I’ll have 5 or more live trace versions of roughly the same image with different modifications.

 

Amazing Examples of Vector Artwork

Alessandra

Alessandra

Lindsay by VinshArt

Lindsay by VinshArt

Stella Vector by ddsoul

Stella Vector by ddsoul

adrianaLima by cd-marcus

adrianaLima by cd-marcus

Cecilia Vector by ddsoul

Cecilia Vector by ddsoul

Pepper Vector by Artgerm

Pepper Vector by Artgerm

Allaya Vector in Color by ddsoul

Allaya Vector in Color by ddsoul

Oriental Portrait V by Cerbercus

Oriental Portrait V by Cerbercus

Witch by CrisVector

Witch by CrisVector

La Luna by CrisVector

La Luna by CrisVector

Rise With The Fallen chapter 2 by DamageCult

Rise With The Fallen chapter 2 by DamageCult

Diga la verdad by Daniel Teran

Diga la verdad by Daniel Teran

Paparazzis by Daniel Teran

Paparazzis by Daniel Teran

COLOR VOYAGE by jaalondon

COLOR VOYAGE by jaalondon

Game Room Splash Series by Kumico

Game Room Splash Series by Kumico

The monster of the swamp by grelin-machin

The monster of the swamp by grelin-machin

Pesadilla by Alejandra-Colunga

Pesadilla by Alejandra-Colunga

The Flying Pig by SquidPig

The Flying Pig by SquidPig

jellyfsh by drud-studio

jellyfsh by drud-studio

tweet by manya

tweet by manya

Chichen Itza and Kukulkan by DanielTeran

Chichen Itza and Kukulkan by DanielTeran

Natural flow by Echtoctet

Natural flow by Echtoctet

Art For Our Sake by dEJavu-1

Art For Our Sake by dEJavu-1

Rainbows by CrowHavenWitch

Rainbows by CrowHavenWitch

The Great Recycler by aphaits

The Great Recycler by aphaits

Soft Surf by Blindn

Soft Surf by Blindn

Mixtape by cloning

Mixtape by cloning

1972 Buick Riviera Boattail by CRWPitman

1972 Buick Riviera Boattail by CRWPitman

Charger by flying-polock

Charger by flying-polock

Olds 442 by Cityofthesouth

Olds 442 by Cityofthesouth

Hot Rod Camaro by Cityofthesouth

Hot Rod Camaro by Cityofthesouth

1962 Corvette Roadster by BRN-MNY

1962 Corvette Roadster by BRN-MNY

 

 

Written by Lauren Bailey

This guest post is contributed by Lauren Bailey, who regularly writes for BestCollegesOnline.com. She welcomes your comments at blauren99 @gmail.com
  • http://tjoepoe.deviantart.com Fajar

    Really Great Post!! I love it. One Question. What is your deviantID? I really loved to see your artworks.

  • http://www.wearenotsavinglives.co.uk Dewi

    I’ve never really got along with tracing programs. Always prefered to vector manually. Some great examples of vector artwork though, amazing stuff.

  • http://www.gespinha.com Goncalo Espinha

    These is one cool inspirational post… Very nice collection indeed, thanks!

  • http://crunchpost.com/ Hina Malik

    attractive and nice sketches art.

  • http://vectez.com Amith

    Thanks Dude, nice post very very thanks,

  • http://entertainmentmesh.com zavera

    i don’t know what to say about it, these are really mind-blowing vector graphics!