Home » Artwork, Colour separations, Vector Graphics, design, pre press, screen printing, t shirt printing

Vectorising sketched artwork and drawings

Submitted by Julian on Wednesday, 7 January 20095 Comments

Somebody sends us their artwork that they would like printed out onto T shirts.
How is it done?
Follow me into the studio…

We get artwork in a whole variety of forms from finalised vector graphics to a quick sketch on a shopping list.
For this demonstration, I will use a sketch of Woody Allen put together in photoshop.

woody-colour1

To start with, this has a wide variety of textures and is fairly colourful. The idea here, is to produce a stark, single colour print. Woody’s going to need simplifying and that means combining all the tonal areas into black.

woody-2-contrast2

One way is to adjust the levels (image/adjustments/levels), another way – and the one I have used here – is simply to pull the contrast up and the brightness down. When you’re happy, save the file.
For screening simple graphics like this, as with so many other things, vector is best. Vectorising a piece of bitmap artwork will give it ultra crisp lines instead of the blocky edges we associate with bitmaps.
Open up illustrator or another vector program, and take the image into it.
You can draw over the sketch using the pencil tool. This way, you can do some cleaning up of the lines as you go.
However, if it’s speed you’re after, you should always try vector tracing first. As well as, usually, making a very good job of it, tracing often introduces interesting and useful effects of it’s own.

woody-first-trace

Here we have the bitmap sketch (on the left) and a quick trace using the default live trace setting in illustrator.
Even at this size, you can see how a lot of the messiness has been cleaned up by the simplifying action of a vector trace.

woody-first-trace-detail

If we go in closer, the difference in line edge clarity is obvious. This will print nice and cleanly.

It could well be argued though, that some of Woody’s character is lost – look particularly around the mouth where the shadow has become decidedly angular.
Here’s where the tracing variables can help.

woody-2nd-trace2

This time, I’ve gone into the options and taken the path fitting down to 1 pixel. This gives a trace with a much higher fidelity to the original image. Too far in this direction, however, can result in the actual bitmap pixels being traced! If the original is of a low resolution this can happen, and will result in something which is still rough looking. You should make sure that your original image is of a good resolution to start with if possible.

Another setting which can make all the difference is blur. Using this tool can turn ragged lines into smooth, flowing ones which tend to look quite organic. For simple shapes particularly of an abstract nature, curlicues and the sort of floral patterns commonly seen in artwork today, this might be just the job. Also the blurring of a trace can impart a ‘glossiness’, or sort of plastic sheen etc. Depends what you have in mind.

woody-blurred
Here’s Woody again with the blur turned up to 4 px. It’s often a trade-off, trial and error, but again, the higher quality the original artwork the better.

However, we have to try and work with what we receive and often all we have is a low quality piece of artwork. Tracing does not always work. Under these circumstances, we have to re-draw, and a drawing tablet, such as a Wacom can work wonders – so much easier than using the old mouse.

Related posts:

  1. T- shirt design:Creating simplified artwork from a photograph
  2. 5 colour index separation and waterbased ink
  3. 6 Great Sites for Vector Resources and Tutorials
  4. 6 colour T shirt print, index separation
  5. Index Separation Method for Screen Printing

5 Comments »

  • Roy Nottage said:

    Do we get a free Woody t shirt for completing this studio tour?

    Very informative and helpful article, great for someone who is planning to design a t shirt and needs to consider these stages pre-design.

    Glad to hear the tablet is getting a good deal of use.

    Roy Nottage´s last blog post..Last time I saw it, I was shading it in, then… gone!

  • Julian said:

    Thanks for your comment Royzy

    In answer to your question – no Woody T shirt for you.
    However I might be able to do you a deal on a Dale Winton one if you’re interested.

    By the way what’s all this p*rn doing on your website. I thought you were a respectable fellow. I am rather shocked.

  • Roy Nottage said:

    Ahhh what, I guess a Dale Winton t shirt will have to do.

    Unfortunately it was necessary for me to find lots and lots of that sort of imagery in order to improve my anatomy skills. If only there was some other way.

    No such material in my last post though, it even has a graph in it.

    Roy Nottage´s last blog post..What is the Uncanny Valley?

  • MIka said:

    Hi, I want to know if it is strictly necessary to convert bitmaps into vector graphics. I’ve made a 600 dpi graphic in Photoshop -4 colours- to get more accuracy and had each layer already black-coloured to get it on film. When someone told me to vectorize the artwork I got very unsatisfied with the results, since the “brush stroke” effect got lost.

  • Steve said:

    Hi Mika

    There is no need to vectorise artwork for printing out films, especially if you have good artwork at 600 dpi, vector graphics are good for flat clean lines, but as you say you have brush strokes it is possible this is not the right solution for the design you are working on. We use raster artwork on a regular basis, it is helpful to have good rip software when working with raster graphics, and some knowledge of creating gradients and soft edges using half tones is useful too.

Leave a comment!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

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

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.

CommentLuv Enabled