Turn Your Sketches & Doodles Into Vector Art – Tutorial

| Design & Technology

Turn your sketches into digital vector images.

Turn your sketches into digital vector images.

Turn Your Sketches & Doodles Into Vector Art – I love to doodle and honestly, I don’t do it enough.  On the list of everything I have to do in my life, doodling ranks pretty low (shocking, I know) but there’s something about doodling… it helps me relax, focus and just be in the moment. Fortunately, from time to time in my job,  I need to draw something and turn it into a vector image.  I wanted to share this technique with you so that you can turn your works of art into amazing vector graphics too. This tutorial requires a scanner, Adobe Photoshop and Adobe Illustrator (I use CS6).

  1. Create the sketches that you’d like to convert into digital vector art.  I like to use Pigma Micron pens because they come in various thicknesses, are a rich black colour and they write beautifully but use whatever you prefer. I also like to use tracing paper to sketch on – it’s cheap and there’s a smooth quality to the paper that’s really nice.
  2. Scan your sketches with a flatbed scanner.  Scan at a high resolution of at least 400 dpi while using the greyscale setting.
  3. Open your scanned sketch into Photoshop and make sure your file is in the RGB colour mode.
  4. Go to IMAGE > ADJUSTMENTS > SELECTIVE COLOUR. Toggle the colour to WHITE and using the slider, move to -100% black with the ABSOLUTE radio button clicked on.  Then toggle to BLACK and using the slider, mover to 100% black.screen2screen3
  5. Go to IMAGE > ADJUSTMENTS > CURVES. Grab the tiny black square at the top right of the graph and slide it over slightly towards the left (not down at all) and then grab the tiny black square at the bottom left of the graph and move it slightly to the right. You’ll have to eyeball this a bit and see what looks best. The goal here is to make the white as white as possible without washing out any black while making the black very dark without turning any of the white to grey. There are many ways of adjusting colours in Photoshop besides SELECTIVE COLOUR and CURVES.  You can also use BRIGHTNESS/SHADOWS as well as LEVELS to achieve your desired outcome.  Feel free to use what you’re comfortable with.screen5b
  6. Once you’re satisfied with the colour settings, crop your page to select the part of the image you want for your design.  You may also bring in the entire page into Illustrator if you have multiple sketches, convert them all together and then just pick out the selections you’re after… whatever works best for you. Save your image.
  7. Select the entire image and copy or use CTRL+C and then open a new page in Illustrator and paste in your sketch onto the canvas. Feel free to enlarge the sketch slightly (remember to hold SHIFT + ALT to constrain the proportions).
  8. Select your image using the SELECTION tool (black arrow) and you’ll notice that in the properties bar at the top, a LIVE TRACE  button will appear (or IMAGE TRACE depending on which version you have). Click on the LIVE TRACE or IMAGE TRACE button. (If you’re not super happy with the results, you can click on the white arrow to the left of the IMAGE TRACE button and play around with the various settings – I find the Black and White Logo setting can work well too). Once you’ve clicked the  LIVE TRACE or IMAGE TRACE button you’ll notice that it now says EXPAND.  With your image still selected, click on the EXPAND button. screen7
  9. With the image selected, right click your mouse and toggle down to UNGROUP and click on it. Now, click on a white area of the drawing so that it’s selected and then go to SELECT > SAME > FILL COLOUR and all the white in your image will be selected, hit the DELETE button. You want to get rid of all the white sections of your image.screen9screen10
  10. Select all the black items on the canvas, right click your mouse and toggle down and click on group. Now your sketch is all grouped together. (Don’t bother with this step if you’d like to move the various elements of the image around on the page or modify them individually).
  11. At this point you can get creative, add colour and use the vector on top of backgrounds, photos, etc. Use your vector to create or enhance your very own work or art.screen11
    Free printable

    Free printable

    Feel free to download this printable here. Enjoy!

About the author

Jamey By Jamey Ekins
~ Being imaginative, crafty and artistic is just like breathing to me. I blog about crafting, design, kids fun and activities, DIY’s, crochet, sewing, art, recipes and more. You’ll find lots of free loot too including, patterns, printables, tutorials and downloads. New and creative ideas are posted frequently so stop by and check it out.




17 Comments on Turn Your Sketches & Doodles Into Vector Art – Tutorial

  1. Sunny
    June 5, 2013 at 7:02 PM (3 years ago)

    Thanks! This is a great tutorial. I use CS5 a lot for work, but have not tried this. Now, I will! :)

  2. Gabby
    June 6, 2013 at 5:48 AM (3 years ago)

    Nice art! TF the tutorial. Saw your link on the Ingenious Inkling blog today. :)

  3. mary
    June 6, 2013 at 1:34 PM (3 years ago)

    is there a way to do the last part without illustrator? i have adobe photo shop but i don’t have illustrator….or illustrator the only way?

    • Jamey
      June 6, 2013 at 1:57 PM (3 years ago)

      Sorry, but I do think I can do justice to any other answer than no. I’m pretty sure you could use CorelDraw but beyond that I’d totally be just guessing.

      • Jessica
        June 7, 2013 at 2:53 AM (3 years ago)

        There’s also a free program called Inkscape that has a similar option…

  4. Mandy Behrens
    June 6, 2013 at 8:06 PM (3 years ago)

    Wow! Thank you Jamey (+ Jan of Poppytalk) for this wonderful post. I would LOVE to add graphic design skills to my plate and I’ve wanted to know how much work and technology is needed to turn my sketches into graphics. Thank you a million times over. Cheers!

    • Jamey
      June 6, 2013 at 8:21 PM (3 years ago)

      My pleasure. It’s funny how I do this everyday and it only just hit me this week that someone else may be interested in it. With the response I’ve had in only 24 hours I’m thinking I’ll need to do more graphic design tips and tricks posts. I can’t tell you how much I appreciate your feedback. Good luck!
      ~ Jamey

      • Kellie
        October 14, 2013 at 4:21 PM (3 years ago)

        Thank you so much for this! I’ve been designing and sewing children’s clothing for years and am wanting to start my own line of pdf patterns but had no idea how to create the patterns in illustrator. This is a great alternative for me. I’m going to give this a try. :)

  5. Jana @ 333 Days of Hand Lettering
    June 7, 2013 at 8:25 AM (3 years ago)

    I only use illustrator by placing scanned designs right into a new document. I’ll have to give this a shot. Looks like a great tutorial!

  6. Ayla
    June 18, 2013 at 9:37 AM (3 years ago)

    This is fantastic. Thanks so much for sharing!

  7. tam
    June 29, 2013 at 9:16 PM (3 years ago)

    loved your generous and straight forward tutorial – thank you

  8. Diane
    November 7, 2013 at 11:02 AM (3 years ago)

    This worked great! Thanks for sharing!

  9. Sonia Trumbull
    March 21, 2014 at 8:54 PM (3 years ago)

    Just found this tutorial on Pinterest. Is one able to do the same concept just with Illustrator? I don’t have photoshop but have Illustrator

    • Jamey
      March 22, 2014 at 1:28 PM (3 years ago)

      As long as you have a way to scan in your sketches and have them pretty much black and white then you shouldn’t need Photoshop.
      ~ Jamey

  10. Ivan Duroska
    April 18, 2014 at 4:44 PM (3 years ago)

    I like your illustrations.

  11. Evans Joey
    January 14, 2016 at 10:57 PM (10 months ago)

    Excellent tutorial! I tried it out and ordered my test fabric (heavily based on your drawings) and can’t wait to try some more. You can see my results on my blog -

    • Jamey
      January 19, 2016 at 11:11 AM (9 months ago)

      Your welcome Joey, I’m glad you found the tutorial useful.
      ~ Jamey


Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>