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.

Bring in from Photoshop and Illustrator to use in Adobe Animate

Daniel Walter Scott || VIDEO: 28 of 53

Download Exercise Files



Upon completing this tutorial, you'll be able to import Photoshop and Illustrator files into Adobe Animate and understand better how to manipulate the images once they have been imported.

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

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.