animation tutorial

Aug 27, 2010 23:29

Quick how-to tutorial for animating icons in Photoshop CS and Imageready CS. This is actually the extent of my animation knowledge so I apologize in advance if you have a question, since I probably won't be able to answer. I'm also not saying that this is the best or easiest way to make animated icons. It's just how I've been doing them for like forever. All the animated icons posted in this journal were made the same way.

There's also a lot of fabulous things Imageready can do and the best way to learn them, in my opinion is to just play around with the settings and tools and also to look through some tutorials.




So here are the images we're using for our icon. Real sexy. This is where I would normally color, sharpen, fool around with the image. Here I just resized that sucker and...did nothing else lmao.



I stack all those, by copying and pasting, into one file. Right on top of each other:





And then go to File -> Edit in Imageready



And it opens in Imageready.



Then I click on those little arrow thingies to see the rest of my layers.



There they are. In this window I change the speed of frames, delete frames, move them around, and duplicate them. You can also hit that play button and watch how things are going to look, in motion.



In this window, I hit the Optimized tab to see the file size and how things will look once I save it.



How the icon will look and the filesize can be changed in this window. Just fool around with these settings a lot and see what you get and how the filesize increases and decreases. And if you hit that little arrow thing on this window:



You can find a pretty easy way to automatically reduce file size.



Just enter a file size and the program will work with whatever color and dither settings you had.



Once I'm done fiddling around with the settings I head over to File -> Save Optimized As.. and save it as a a .gif file. Name it and all.



And that's all!

tutorial

Previous post Next post
Up