Animation Shop Tutorial

Jan 19, 2016 16:34

So, sanalith asked how to make animated sig tags, and I told her I would PM her details on how to use the program I use. But as I started typing, I knew it was way too much for a PM. So I ended up making a full-blown (I think) tutorial. Hopefully this will help someone.

PS- Click on the images for full size.
PPS- I hope this doesn't come off as condescending. Shannon mentioned using terms a 5yr old could understand, so I hope this works...



Okay, first things first: I use Jasc Animation Shop 3.05, which is a free download. It may be called a free trial when you open it, but as you can see from the screecap, my free trial has been expired for years now and it still works.




Just click on the start button and you'll get the workspace screen. If you already have the screen caps/images you want to use ready for the .gif, click on the Animation Wizard button in the top left corner.




After that, the Wizard screens will pop up. First is the size option. I always edit my images before hand so that they're all the right size (it keeps things from getting wonky, especially with the aspect ratio), so the easiest option is the one at the top (Same size as the first image).




The next asks for the canvas color. I don't even know what that does because I've always just used transparent.




If your images are different sizes, the Wizard asks you where you want the smaller images to, but like I said, I always edit the images before hand to take care of any wonkiness. There's also an option to scale the frames to size, but that tends to lead to weird ratio issues.




The next screen asks if you want to loop the animation or make it a one-time thing (.gifs generally repeat) and how quickly the frames should go (frame rate). If I have no idea I usually set that at 10, then check the animation to see if it looks right. I'll show you how to change it if it's not a few steps down.




Next, it will ask you to upload the images you want to use in your animation.




It's pretty much like any program where you open images.




And when you're done it looks like this:




Once you load your images and hit next, the frames of the animation will pop up in the main workspace.




To check how the .gif looks, click on View → Animation.




It will pop up in a separate window.




In my case, the animation was moving too slowly, so I had to decrease the frame rate (if it had been moving too quickly, I would have increased the frame rate). But first, I have to make sure that all of the .gif will be changed and not just the first frame. To do that, go to Edit → Select All.




To change the frame rate, go to Animation → Frame Properties. There will be a little pop-up that lets you change the frame rate/Display Time. I accidentally deleted that screencap with my first example, so here's a wild Jem appearing.




Back to the original .gif- if you look at the bottom of the frames, you can see the D number went from 10 to 2.




When you get your animation working the way you want it to and it looks good, save it. It starts out the same as saving any other image.







But then it pops up with a whole bunch of weird stuff. The first is how optimized you want your .gif. Basically, since this program is older, it's taking into consideration the fact that a big file (basically all of .gifs today) would have taken a thousand years to download before. But since technology has advanced, I always just keep the optimization turned all the way up.




It'll show you the optimization progress.




Then, it will show you the difference between the original and the optimized. If you keep the optimization bar all the way at the top, there should be little to no difference in the two images (though the optimized one does end up kind of grainy sometimes).




The next screen basically asks you if you're okay with the file size. The only time I even pay attention to this is when I'm trying to make an animated icon since LJ has the file size limits. Most of the time I just hit Next because I'm not going to change anything.




After that, you're done! New .gif created!

If you intend to take an existing .gif and kind of reverse engineer it (instead of using your own images/screen caps), there's a few extra steps.

First, find the .gif you want to use and save it. After that, instead of hitting the Animation Wizard button, click on File → Open and choose the .gif you want to use.







It will pop up frame by frame like a .gif made in the Animation Wizard.




To make sig tags, you'll need to edit each of the frames individually (whether to resize or add text or whatever), so select all of them.




After the frames are selected, right-click on any one of them. It will give you a drop-down menu. Click on Save Frames As...




It will give you options for saving. The easiest thing is to just use the default options because it will automatically name the frames as FileName 01, etc.




Once you've saved all the frames, you can open them in your photo editing program and do whatever you want to them. When I make sig tags this way, I end up resizing/cropping and adding text. Once all of the frames are edited the way you like, pop them back into Animation Wizard (bonus, you already know the right frame rate because it's the same as the original .gif) and make your animated sig tag!

I hope that helped. If it didn't but you think the program looks good, here's a Youtube tutorial. I didn't watch it, but hey, it was the first result when I Googled the program, so it must be pretty good.

graphics, .gifs, 2016

Previous post Next post
Up