Start exporting your frames. Finish exporting your frames. Open your frames in Photoshop. Set your frame rate. On the Frame Rate window, select the amount of frames in your gif per second via the drop-down menu.
Open the Motion Workspace. Set your duration and speed. Right-click on your GIF in the workspace to edit its duration and speed. Open the Save for Web window. Define your GIF settings. Export your gif. It is not possible to complete the whole process in Adobe Illustrator alone. If you are looking for something simple, you can give Canva online tool a try.
Make sure they're all selected. I'm putting mine in this folder called 'Whale' on my 'Desktop'. Put yours wherever you like. In terms of the resolution keep it high now, we'll cut it down in Photoshop later on. Make sure there's no prefixes. Just '1' scale, make yours look like mine. Let's click 'Export Artboard'. You'll see, in here, I've got mine sequentially numbered. You could name them afterwards doesn't matter, you don't have to do it in Illustrator. And now the trick is, in Photoshop, go to 'File', 'Open'.
Click on the very first one, so '01', and click on 'Options'. And this is the magic trick. You can say, I like 01, and check if there's a sequence. Click 'Open'. If you've numbered them correctly it won't have an error.
You can't even miss one, if you're missing 04 it will freak out. Now Frame Rate, you can come back here and try this a couple of times.
Now in Photoshop the trick is to go to 'Window', 'Workspace', and switch it to 'Motion'. Weirdly Photoshop does some pretty cool video stuff, video editing, but for the moment what we want to do is, let's just hit the 'Play' button here to see what our thing does. That is our super exciting animation.
At the moment it's happening a bit fast. A bit slow. Mine's looking fine because it's quite simple. Next thing we will do is right click it, and this is it, Speed.
You can speed it up or slow it down. So if you want to speed it up, crank it up and it shrinks down, right, but if I want to slow it down it weirdly doesn't jump back out.
I have to drag this out. Just keep dragging until you get the whole thing. You might have to drag it twice like I did there. Just keep dragging it until it's all the way out because, otherwise there it is there, goes out to 14 frames. You can zoom out this way, Dan. That's better. Just drag the end out. Now I can see it all, hit 'Play', it's probably too slow now. Yes, too slow. Now it's about exporting it.
You don't have to do a GIF, we're doing a GIF because GIFs are cool, and they're reasonably, you know, you stick them on social media and they play automatically on lots of website, Facebook included.
Now what we're going to do, here's 'File', we'll do the GIF way first. So go to 'File', 'Export' we'll have to use this old school, 'Save for Web' version. And up the top here, 'Preset'. Depending on the quality and size, you'll have to play around with this one. Any of these options work for export. Basically the more numbers you have, 32 looks fine for mine. If you got a really detailed graphic, you might have to get up to colors but the file size if going to be a lot bigger.
I'm making mine small. Anything else you can play around with makes very little difference. The big thing that does make a difference is looping. You loop once, or forever, that's what we want. Hit 'Play'. It's not a good representation here in this kind of export window so now you sweat at it, it's not quite right. Then we hit 'Save'. And we're going to call this one 'Whale. Very exciting. It's taken us a while, and a bit of a disjointed class, I know.
Now there are some artefacts up here, that's just from the Puppet Pin Tool. I didn't really kind of take much notice of him. I should have fixed that up before I carried on but there's my bubble blowing, it's kind of, well, it's okay. You can also do a video version. So back here in Photoshop, there's 'Export', 'Render Video'. In here, it eventually pops up. We're going to export mp4, it's a really common format. I'll have 'Whale. Down here we're going to use Adobe Media Encoder, and it's going to be the format, 'H.
Gives you a mp4. On my Mac here, I could do 'QuickTime' as well. Now Quality ratings, you can play around with this.
You can get quite low because ours is such a simple animation. After doing so your GIF will loop for infinity. After the above mentioned steps, have a look at your GIF how it looks and animates. Once you are satisfied with the GIF then you are ready for final export. Your email address will not be published.
Save my name, email, and website in this browser for the next time I comment. Open the vector artwork from the illustrator file. Paste them in as a Smart Object a window will pop up asking you this Only one at a time, paste the layers that are to be animated.
NOTE: Separately copy the layers. For example if I want to animate the little sparks around my icon one at a time that means each spark is neede to have its own layer. Click on the three horizontal lines called the hamburger menu on the top right corner of the screen in the same window and a menu appears.
0コメント