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

Converting Bitmaps to Vectors in Adobe Animate for HTML5

This lesson is exclusive to members

Course contents
SECTION: 6
Warnings & errors 1:10
SECTION: 7
Width tool 5:23
SECTION: 14
Project 9:34
SECTION: 15
Buttons 12:14
SECTION: 17
Bone Tool 6:53
SECTION: 18
Stop looping with JS 1:45
SECTION: 22
Conclusion 1:37

Questions

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Course info

53 lessons / 5 hours

Overview

This course is for visual, creative people who need to start making HTML5 banner ads. I made this course for people that are struggling to get their heads around the new world of HTML5 advertising. This course is step by step with exercise files. I’ve saved a copy of each Adobe Animate file after every video so if you get lost you can compare your files to my completed files. At the end you’ll be able to create, test and upload standard banner ads.

This course is perfect for people completely new to the digital advertising world. We’ll cover all the basics. It’s also great for people who previously worked in Adobe Flash to produce SWF advertising.

Because this is such a new industry I’ll be around to help you with any questions. Use the forums on the pages and I’ll respond.

Thanks for considering my course. If you’re not sure if it’s right for you. Simply sign up, try it out and if you’re not happy I’ll refund you no problem. - Dan.

What are the requirements?

  • You'll need a copy of Adobe Animate CC 2015 or above. A free 30 day trial can be download from Adobe here.

  • No previous Adobe Animate or digital advertising knowledge is necessary.

  • If you're not sure if this course is right for you. Email me what you’re trying to do and check if you’re on the right track.

What am I going to get from this course?

  • 53 lectures 3 hours of content!

  • Forum support from me. 

  • How to build banner advertising

  • How to keep file sizes down.
  • Firm understanding of the publishing process for ad networks like Google Doubleclick, Adwords, Simek etc. 

  • Professional workflows and shortcuts. 

  • A wealth of other resources and websites to help your new career path.

What is the target audience?

  • YES: This course is for beginners. For people who prefer not to work in code. Visual people. Creative people. Graphic designers. Marketers. Past users of Flash.

  • NO: This course is not for developers. This course will cover standard animated banners. Not dynamic banners like expanding banners, video banners or game banners. 

Course duration 5 hours + your study.

Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Downloads & Exercise files

Download Exercise Files

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.

  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2024