Convert A Cartoon Picture To A Svg Icon or image

Convert A Cartoon Picture To A Svg Icon or image
Convert A Cartoon Picture To A Svg Icon or image
This Tutorial is shared by RobJM of Tehkseven


Here is how I made some svg icons and wallpapers from a jpg image for my Flintstones theme.

[tweet]I used photoshop and illustrator, but I presume you can do the same with the free alternatives.

Cartoons are probably the easiest of images to convert to vector files, the better the image the easier it is, although it’s possible to get good results even with quite poor images with a bit of tinkering.

This is for an icon but it’s really just the same if you want to use it as a wallpaper, just adjust the finished size.
Here is the original file I used if you want to follow along

This image I used was perfect for this, very easy to do.
First open up your image in Photoshop and crop it roughly to a square of how you want your finished icon to look.
Then right click on the layer and select ‘layer from background’
Convert A Cartoon Picture To A Svg Icon or image
In the pop-up just select OK , it should be then same as below.

Convert A Cartoon Picture To A Svg Icon or image

Next select the magic wand tool and select the white background with it and press delete on your keyboard to remove it, remove all the background.
Convert A Cartoon Picture To A Svg Icon or image
Save your image as a png file, then open that file in Illustrator.

With your image selected, go to ‘Object/Live Trace/Tracing Options.
Convert A Cartoon Picture To A Svg Icon or image
Move the box that pops-up to the side so you can see your image, now in the pop-up box you can see all your tracing options,tick the preview box to see how the settings affect the image.
Convert A Cartoon Picture To A Svg Icon or image
it depends on your image what settings you use, with this image it came out really good just by using Preset ‘default’ and Mode ‘colour’.My final file size came out at 34kb, a bit big I thought for an icon.

I managed to half that file size by using the settings as in the screenshot above, Mode ‘black and white’ and then colouring the image myself.

So select Mode ‘Black and White’ then press ‘Trace’ you should get something like this.
Convert A Cartoon Picture To A Svg Icon or image
Next go to ‘Object/Expand’ then select OK.This basically splits the image up into the parts that are outlined by the ‘black lines’ so you can colour each part individually.Convert A Cartoon Picture To A Svg Icon or image
Convert A Cartoon Picture To A Svg Icon or image

Save it now as svg 1.0, untick ‘preserved editing capabilities’.

Next just to make things easier, I copied and pasted the original png file into this one, just to make it easier to select the colours.
Convert A Cartoon Picture To A Svg Icon or image
Next use the ‘Direct Selection’ tool [the 2nd arrow down] and select an area you want to colour, zoom in if you want to make sure you select the correct part, then choose the ‘eyedropper tool’ and click on the corresponding colour in your png image you pasted in, thats your selection coloured, now just repeat for you entire picture.
Convert A Cartoon Picture To A Svg Icon or image
Once that’s finished click on ‘View/Show transparency grid’ if it isn’t already showing.
Convert A Cartoon Picture To A Svg Icon or image
You will see the background is white, simply select it with the Direct Selection’ tool as you did above, and press delete on you keyboard to remove it, do the same with each portion of the background.
Convert A Cartoon Picture To A Svg Icon or image
Also use the top ‘Selection Tool’ and select the png image you pasted in and delete it.

Now to make it an icon, go to ‘File/New and make a new document 60×60 pixels, go back to your finished image,go to ‘Select/ All then ‘Edit /Copy’.
Go back to your 60×60 document and go to ‘View/Actual Size’ and then ‘Edit / Paste’ to paste you image in, it will be too big but just select it all , and resize it to fit [holding shift why you do this will keep it’s proportions]
Once you have it roughly the right size you can zoom in and make finer adjustments.
Then save it as a svg 1.0 file, untick ‘preserve editing capabilities’ , that came out as 16kb for me, half the size of the colour mode version, and I’m sure there are other ways to tweak it, to get it smaller still.

Next try it out in carbide…

Convert A Cartoon Picture To A Svg Icon or image

Convert A Cartoon Picture To A Svg Icon or image
You could also use that 60×60 icon as a wallpaper,because it is vector it will resize to any size without degrading in quality, if you paste your image into a 60×80 [240×320 ratio] instead of the 60×60, you will have a 16kb wallpaper.
Convert A Cartoon Picture To A Svg Icon or image

If you like this tutorial then consider subscribing to my feed.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.