How to Vectorize a Bitmap Image

Raster vs Vector Image

A vector image is an image made up of mathematically controlled points called nodes in order to render curves and lines that essentially make up the image. Put simply, it's an image that you can scale up or down in size and never loses its quality. Every line and curve remains sharp without pixelation. The most widely used vector image format is SVG which stands for (Scalable Vector Graphics). Another example of vector file formats is PDF, if you zoom into a PDF file you will notice that the text remains sharp and does not pixelate at all. One important thing to remember is that you should only vectorize images that are limited in color and are not too complicated in shape or color shades. There are plenty of online tools that vectorize images, but my preferred way is to use Adobe Flash CS6. The reason why I use Adobe Flash is because I have control of the size of the vector image. For example, if I want a 1000x1000 pixel image of my logo, I simply scale it up to that particular size and then export as a PNG image. The exported image is fully sharp. Another benefit of using Flash is that I have control over various properties such as the color, shape and text of the vector image.

Step 1: Import Bitmap

Open any version of Adobe Flash and create a new ActionScript 3.0 file. Once you have that open, you should see a white square called the "stage" with a timeline at the bottom and drawing tools on the right. Under File, select "Import" and then "Import to Stage." A new window will open prompting you to select the image you want. Your image might be too large for the stage. In this case, select the image by clicking on it and press the letter Q on your keyboard to activate the "Free Transform Tool." Press and hold down the Shift key, drag one of the corners of the image diagonally towards the center to shrink its size.

Step 2: Trace Bitmap

Once you have the image on the stage in the appropriate size, select the image. At the top menu bar, under "Modify" select "Bitmap" and then "Trace Bitmap." This will open a new dialog window.

Adobe Flash Trace Bitmap

Count the number of colors your image contains and input that number in the color threshold field. Leave the "Minimum area" as 30 pixels. Make sure that the "Corner threshold" is set to "Many Corners" and "Curve Fit" is set to "Tight." These settings will ensure that even complicated bitmap images are traced and converted to vector shapes on Flash. Now press "OK"

Step 3: Create Object

Believe it or not, you now have a vector image. Vector images on Flash are called "Shapes." It's always a good idea to convert these "Shapes" to Objects so they are saved to the library. Before converting your shape to an object. Ensure that there are no "white spots" surrounding the image. These "white spots" often occur when you import images with a white background. Remove them by selecting them and pressing Delete on your keyboard. Now that your shape is ready to be converted, click and drag a selection box around the shape to select it entirely. Press F8 on your keyboard or under "Modify" select "Convert to Symbol." A new dialog box will open. Give it a name and press "OK" Now your vector object will appear under "Library" even after deleting it from the stage.

Final Step: Re-sizing and Exporting The Image

It's very important to remember that if you want to resize your vector image, you MUST do it under the "Properties" panel. Do not make the mistake of resizing the image at the Export dialog box. The reason for this is that the DPI will be off and you will not get a sharp image at the desired resolution. To resize the image, use the "Free Transform Tool" keyboard key Q and remember to press and hold the Shift key to scale down proportionally. You can also resize the image by going on the Properties panel on the right side and under Position and Size, specify the Width or Height.

Exporting Image Adobe Flash

Before exporting, the stage needs to only have the image you are trying to export. If you have multiple display objects, delete them and leave only the image you're trying to export. Select the image, under File select Export and then Export image. A new window will open, specify where you want to save the image then click Save. Another window will open as shown in the picture, leave everything as is and simply click "Export." Your image will be exported to the directory you specified.

3 comments :

  1. Thanks for helpful tutorial. I found that there are also some free vectorization tools that can help with auto-tracing http://vectorization.eu/

    ReplyDelete
  2. Could i vectorize image by using Corel Draw or Adobe Illustrator ? I am downloading vectors for free from the http://www.cannypic.com/, but sometimes i need to vectorize bitmap logos for my presentations. Thanks for advice.

    ReplyDelete
  3. I am very much pleased with the post. I want to thank you for this great article. I enjoyed every little bit part of it and I will be waiting for the new updates.
    Raster to Vector

    ReplyDelete