Page name: Animated .gif tutorial [Logged in view] [RSS]
2006-04-26 16:31:10
Last author: Erestor
Owner: Erestor
# of watchers: 15
Fans: 0
D20: 7
Bookmark and Share
<Banner here>

Animated .gif tutorial


This page contains a techniques of making animated .gifs and getting good results. To make animated .gif I use Adobe ImageReady (AIR) 7.0 as it's easy. Below is how you can make your own.

Media: AIR


Step 1: New
Open a new file in Adobe ImageReady. Specify the width x hieght of your piece and choose whether you want a transparent background or colour one. Now go to the optomise settings and set it to "GIF 128 no dither". Now you will notice that you have one layer at the bottum.

Step 2: Animation Window
Make sure the animation window is open if not go "window - animation" than you will see a film-strip like window at the bottum. Now right click the only square there are make it "restore to brackground".

Step 3: Base
Now you can draw what you would like to be on under all the other layers. Use whatever brush style you would like, personally I use the pencil tool.

Step 4: Animate!
Now create a new layer and a new frame. The new frame will appear next to your first frame in the animation window. As this second layer is transparent you can draw over the top of you first layer to make it look like it's doing something.

<img80*0:stuff/ini1.png> --> <img80*0:stuff/ini2.png> --> <img80*0:stuff/ini3.png>
Step 5: Annoying
One minor glitch with using AIR is that it automatically makes layer two visible in all the slides hence you need to go back onto your first frame and click the eye on the layer options which will then make it invisble. This however has made layer 2 invisible on frame 2 where we want it so we have to re-select this frame and make layer 2 visible my re-clicking the eye.

Step 6: How much?
Noe you can choose how many times the animaton completes it's self. This option is in the bottum left; I normally set it as 'forever' as it is convinient for it to loop: however you an set it as what you like.

Step 7: Test
Now you should be able to play the animation to test that it works.

Step 8: Save
The last thing to do is save it. This is one of the most complex bits as instead as saving it normally you must go "file - save optomized as ..." and then name it what you want.

Here is the finished result:


Go or return to:
- Erestor's Tutorials

Username (or number or email):


2005-09-25 [Erestor]: I'm glad you like it. :)

2005-09-26 [Zab]: Yes... you've saved us all!

2005-09-26 [Stephen]: Awesome! Thanks soooo much! I can finally make animated .gifs!

2005-09-26 [Erestor]: No problem. :)

2005-10-04 [kay-chan]: I made an avatar with this! mwah, kisses for you!

2005-10-04 [Erestor]: :D Whahey! Kissed!

2006-02-08 [Paz]: Hmm... I spotted a typo ;) Up at the top statement, under the first divider... it sould be 'how' not 'hiw'

2006-03-29 [Tyrana]: Hey! See the little circle with the arrow in it under red X button (to close the window)?? When I clicked on it, there was an option to make it so you don't see layer 2 in frame 1...

2006-04-03 [Erestor]: Thanks Paz and Tyrana!

2006-04-03 [Paz]: You're welcome :P

2006-04-19 [Company Awesome]: There's a typo in step five. 'One minor glich' Glitch** Thought you'd want to know.

2006-04-26 [Erestor]: it's only a minor glitch! :]

2006-05-03 [someelf]: I managed to find out how an animation works ^^ and now I would like to now how I can turn the time slower... o_o it doesn't say anywhere o_x

2006-05-03 [Paz]: Right click on the animation image and it should give you several time options >.> Or at least that's what mine did when I was playing around with it

2006-05-03 [Paz]: Hmm... I can make the second layer when I create it into an animation slide :/ How do you do that?

2006-05-03 [Paz]: Okay, I got one new frame but it won't let me make more with different things on them :/

2006-05-03 [someelf]: I got gimp.. And I already killed the extra buttons and there's no possible way I can return them back XD ^^' Ohh.. I think I didn't saw that... It's quite weird through.

2006-05-03 [Paz]: Haha, sorry for the spam XD I figured it out on my own

2006-05-03 [someelf]: I am now actuely print screen everything I do >_> *prods self* XD

2006-05-03 [someelf]: Lookie what I made ^_^ How I make my animation? I know it isn't as good as yours [Erestor] but at least I tried :)

2006-05-03 [Company Awesome]: Problem with the software is the ri-cock-ulous price associated with purchasing it. Anyone know a good, and hopefully legal, way of getting around that?

Number of comments: 75
Older comments: (Last 200) 3 2 .1. 0

Show these comments on your site

Elftown - Wiki, forums, community and friendship. Sister-site to Elfwood