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

Bring in from Photoshop and Illustrator to use in Adobe Animate

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

Alright, so many of you will have skills in say Photoshop or illustrator so you might design some of your assets or graphics in that program and bring them in and that’s totally fine, the only thing you want to be careful of is using Photoshop primarily, especially for things like text you can bring in things like images definitely, you’ve done some good masks, you can bring those in to Adobe animate and that’s fine. But if you’ve got some text, you’ll want to recreate it in adobe animate or illustrator because it will come through as vector graphics and they’ll be a lot smaller than the bitmaps that come from Photoshop.

So what were going to do is bring in some stuff from Photoshop first, so lets go to file, import to stage or command r or control r and I've got this one here called import Photoshop. Just something that I've made in Photoshop, now in Photoshop ill show you it, so graphic, its got 4 layers, the layers are named, they're all on separate layers. So in here, I'm going to leave it all default and click okay, what happens is, it’s a bit big for my stage, so I'm going to zoom out a little bit but that’s aright, you can see here what its done is its retained those layers. I've got this layer one that I got from, it’s a dead layer so I don’t need that really, so I'm going to hit trash. That’s the one that was already there from adobe animate. But here we go, here’s my background layer and here’s my three little guys.

So its brought all my little graphics through, they're going to be very big but that’s how to bring things in from Photoshop, now you can ditch the stuff you don’t want too. Were going to show you how to get the file size smaller for images when we get to part of the publishing that says file size. But that’s how to easily bring it in from Photoshop.

Now to bring stuff in from illustrator, I'm going to undo, you guys go away, undo I'm hitting control z or command z on a mac loads of times to get rid of it. Now I'm going to bring in something from illustrator, much the same way except there's a few little differences this way. I'm going to bring in something from illustrator. Now illustrator has been created, you can see this file here, its in layers but its very different in illustrator. A lot of people don’t use layers, this one has, there's a monsters layer and inside of it is a group and inside of that group is all of my separate little monsters. So in animate when I bring it in, I'm going to leave it all default, I'm going to match the stage, its far too big for going out to preview but this is just an example I guess. Click okay and there's two things that are going to happen, its quite big, that’s okay, so I've zoomed out. Another thing is blending modes aren’t supported so you can see here, in illustrator that this monocle here has a blending mode on to it. Some of these smiley bits here blend through to the background, so they're doing pixel style things in a vector drawing program. So bitmap styley things and animate cant hack it. So you can see there's the little smiley bits, there's the monocle, they're not really coming through well. It has basic blending modes here in animate but they don’t convert over very well from illustrator which has more sophisticated ones. So that’s one of the problems.

One of the other things is that, see in the timeline here, you can see I've got my background which was in illustrator, so if I scroll these back up there was a monster one and a background one so it depends on how its structured, so the nice thing about it though is I'm going to turn the background off, I don’t want it so I'm going to bin the background and what I'm going to do is if I click on this its one big unit but if I double click can you see I've gone inside the group of all of them but they're actually separate in here which is quite cool so I can move them around and start adjusting them, and these are groups inside of groups inside of groups so I can get inside these things. What I might do to release it from these gang is go back to scene one, and go to modify and go to ungroup, now I can start playing around with them separately, I can keep ungrouping these to pull them apart, so probably if they're ungrouped this guy who’s in the shortcut now so I can get rid of that thing. And also, onto the moustache, there he was there. He's been smushed into the background there, he's underneath everything so I might have to group him. So there's a few little problems brining in from illustrator. What I find to be easier to do from illustrator, rather than doing the file, import is just to copy and paste the bits you need.

So I'm select it all and delete it, go into illustrator and blending modes are still going to have problems. So I'm going to click on you, I'm going to grab this, copy it, in illustrator and paste it in here. I'm going to apply recommended import settings to resolve incompatibilities so I've brought it in, there's still the same problem with blending modes but at least you don’t have to go file import, bring them all in and try and paste them all out, so you know break them all apart in groups. I just like to copy and paste straight from illustrator. So I'm going to ungroup this guys, you my friend, I'm going to group him. This blending mode here, I'm just going to leave without.

So its easier probably just to go copy and paste. Alright, so that’s how you bring in stuff from Photoshop and illustrator.

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