If you are working with printed media or Flash, one obstacle you will run into on a regular basis is that source material on the Internet tends to be bitmap based, while it is much easier to use vector based images for those types of things.
I myself have written about it, but there’s a lot of literature on the difference between bitmap and vector graphics. One question that arises: how to convert between the 2 formats? There’s vector to bitmap conversion, which is relatively easy. Because all lines are defined in the vector drawing independent of the resolution, it’s just a matter of entering the image size you want and figuring out where you want to put the corresponding pixels. Usually called rasterisation, it’s an especially interesting problem in a 3D context.
But this post is about the other way around. The conversion from bitmap to vectors. A real artist will do it by hand: put the bitmap image as a background in Inkscape and start creating curves that fit. It is a slow process, but it can lead to incredible results. There is an easier way however, right inside Inkscape there is a “trace bitmap” option that will do the job for you. Albeit with lower quality, but it will be finished during this lifetime.
Just a small sample to get you going:
- I started with this picture from my Flickr set and first cleaned it up a little. There was on object blocking the camera (a strap? I’m not sure) and it’s a bit out of focus. So I cropped it until I got this:
- I opened the image in Inkscape and traced it. I put it in color mode with 8 passes. This means the resulting image will have 8 colored layers and thus also 8 colors. You might want to increase that a bit for some pictures, but I think it gives a nice stylized result (converted back to PNG so it works in all browsers) :
Now what can you do with that vectorized image? There are a few options:
- Supersize it or isolate small parts for neat effects
- Split it in layers
And here are some free vector graphics if you’d need them.
5 Comments
Hello
That's a really informative article. If you'd like, you can add ArtBox7 to this list also. This is a website dedicated to free vectors, photoshop brushes and textures
Thank you
There's some beautiful artwork on your site. I might even use a few, but I'm not sure on the license. Can I use it on my sites? Of course with the proper credit.
Please also include mrvector.com. The license allows you to use our vector artwork in your own projects, both personal and commercial. You just can't give the vectors away or resell them as vectors or brushes.
Thanks for the link. Looks like you have some nice vectors on your site. I'm going to have to create a vector resource post in the near future.
Thanks for the link. Looks like you have some nice vectors on your site. I'm going to have to create a vector resource post in the near future.