This course has been archived, the content is no longer up-to-date or relevant to most students.

This lesson is exclusive to members

Animate - HTML5 Banner Advertising in Adobe Animate.

Converting Bitmaps to Vectors in Adobe Animate for HTML5

Daniel Walter Scott || VIDEO: 29 of 53

Download Exercise Files



Upon completing this tutorial, you'll be able to compress Bitmaps into Vector graphics and understand how this affects the image.


Video transcript

Hi, in this video were going to look at a neat little trick that adobe animate can do when it converts our bitmap images into vector which means, the Photoshop pixel based images can be converted into that nice low file size vector style graphic. Now the pros are that it keeps the file size down generally, depending on how complex the image is. One of the big cons is it’s a very big stylistic change for the image.

So lets have a look, I'm going to go new canvas, I'm going to save it. Make sure I'm saving it with underscores. There we go, I'm going to use our shortcut for place to stage, which is command r or control r on a pc. So I'm going to bring in a Ute. So I'm in the exercise files, there's one called animated banner. So I'm going to bring in automated Ute. It’s a Ute, this in New Zealand, Utes are the most popular selling vehicle in the whole country at the moment. So we love our Utes, now with it selected were going to go to modify, go to bitmap and there's this one called trace bitmap. Now yours is probably going to default to 200, the lower you go, get down to 20, its going to be very detailed and were trying to get the file size lower, if you put it down to 1, your computer will probably melt down trying to redraw it and it will take forever. So the lowest you want to go is probably 30 or 40. The average is about 200, watch this, if I have it at 200. Can you see its now a vector image which means I can just pull it to pieces so I'm clicking one piece with my selection tool and I can start separating it out, which is quite cool, but you can see stylistically its changed quite a bit, its more like an icon or an illustration a bit and if that’s what you're looking for, awesome. And the file size will be a lot lower like this and allows you to do a few things like I click this windshield here and over here my fill panel I can go through and pick new parts to it. This is quite useful as well when you want a white background you want to remove, you can click the white background and hit delete. This one didn’t have one to start with.

So the lower the number the more detailed it is, but the more stressed your computer is and often if you get more detailed it often becomes bigger than the original bitmap image. So that’s how to do something called trace bitmap. This function is in illustrator as well. And it is probably a little bit more sophisticated in there. If you see this tool and think wow, it’s amazing. Its even more amazing in adobe illustrator and you can bring it in to adobe animate just by copy and pasting remember. Alright, see you in the next video.