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-08-04 [Janouk]: Great! I always wondered how people made animations with Adobe! Look, I know its nothing great, but my very first animation, dedicated to you ;) <img:stuff/ErestorsDot.jpg.gif>

2005-08-05 [Erestor]: Wow, i love it!

2005-08-06 [Janouk]: :) I'll try harded next time ;)

2005-08-06 [Erestor]: No need it's better than the one I made! You are a pro. animater now :p

2005-09-03 [Zab]: Thanks for this tutorial, Erestor! *gives you both a <img:stuff/huggings.gif>* ^_-

2005-09-04 [Erestor]: O_O wow ...

2005-09-04 [Zab]: ^_^'' my 4:th try...

2005-09-04 [Erestor]: Well congrats your alot better than me :p

2005-09-04 [Zab]: heh.... thanks...^___^'

2005-09-25 [Kileaiya]: <img:> Ok so nothing too ambitious for my first one

2005-09-25 [Zab]: Nice! Really smooth, how many pictures did you use to make it so smooth? :D

2005-09-25 [Kileaiya]: 17 frames :P

2005-09-25 [Erestor]: Very smooth not too mension cool. I think you'd get the full effect of it drunk though.

2005-09-25 [Kileaiya]: It is easy todo, I'll take a screencap and show you XD Zab

2005-09-25 [Zab]: (frames..*remembers the word ><*) Yeah cool too, how could I forget to mention that? ^_^

2005-09-25 [Kileaiya]: Drunk though?? what does that mean :P

2005-09-25 [Erestor]: You get drunk when you've had a bit too much beer. :P

2005-09-25 [Kileaiya]: Well duh, but who is drunk, you?

2005-09-25 [Zab]: *grin* No screencap neccessary, but thanks anyway..XD hm.. I can't take those..Oo screenshoot-thingys..

2005-09-25 [Erestor]: Nope, I don't drink. It was a joke. :S

2005-09-25 [Kileaiya]: :P I sent it to you before I saw your post Zab :P, and hehe it went straight over my head Erestor

2005-09-25 [Erestor]: My fault, it was a bit randomI suppose.

2005-09-25 [Kileaiya]: I forgot to say thank you. SHAME ON ME!

2005-09-25 [Zab]: Heh, I noticed. ^_^ *hugs both* ..O_o..I'm wierd today.. hugging people...

2005-09-25 [Erestor]: No problem. I'm just glad i'm recieving feeback from people and people are actually using it.

2005-09-25 [Kileaiya]: =^._.^=

2005-09-25 [Zab]: ^_____^

2005-09-25 [spiritee]: aHHHH i luffs you!!!! i got it to work >_< <img:>

2005-09-25 [Kileaiya]: Aww cute!

2005-09-25 [Zab]: So nice! ^__^

2005-09-25 [Erestor]: Wow, that amazing spiritee!

2005-09-25 [spiritee]: i'm so happy T_T

2005-09-25 [Erestor]: :) The possibilities are endless now you know ... :P

2005-09-25 [spiritee]: heheh thanks erestor, i couldn't figure, for the longest time, how to use image ready.

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?

2006-05-03 [kay-chan]: Know someone who works with Adobe. XD Got my software for $60.

2006-05-03 [Company Awesome]: Hah, great.

2006-05-04 [Paz]: There are ways of downloading it but I wouldn't say it's exactly legal XD You just have to assume the person whom you're downloading from owns the disk. So in other words, it would be just like a friend handing you the disk and letting you use it :P. You can always trial download a bunch of times

2006-05-04 [kay-chan]: Trial-downloads take FOREVER... on dialup, at least. But I'm continuously offering my friends to let them steal my disk without my knowledge. ^.^

2006-05-04 [Paz]: Oh... dialup >.> I use wireless modem or something like that... DSL on the big PC ^^' I tried to get my friend to bring in hers but she didn't and I *ahem* used Limewire instead

2006-05-04 [kay-chan]: Well, I got DSL now, but I got that after I got Photoshop... It's also available on Kazaa, I think. :P

2006-05-04 [Company Awesome]: I'll try it on Bearshare tonight

2006-05-05 [Paz]: Yes, Kazaa is a good place for it but free place would be Limewire although it has a tendency to take over your comp >.<

2006-05-05 [Kileaiya]: A torrent dler works well for downloading large files, it may take a while but they are generally very reliable and virus free. :)

2006-05-05 [Company Awesome]: Bearshare version that I'm running is free. Pity that there are a couple viruses here and there, but much less than any other system I've used; excluding torrent. Torrent is extremely effective, but incredibly slow. I think I've still got the program on my computer, but I never use it.

2006-05-06 [Kileaiya]: I have bearshare, but I tend to not be able to find what I'm looking for with that. :/

2006-12-01 [Forever Equine]: I have Adobe Imageready and fror some reason i can't make more than 2 frames.:S What am I doing wrong, anyone know?

2006-12-02 [Zab]: I've never heard of that..O_o

2006-12-02 [Forever Equine]: It's weird :S

2006-12-02 [Zab]: Take a screenshot?

2006-12-04 [Paz]: Hmm... <URL:stuff/screenish1.gif>
Don't you just click the tiny arrow and hit 'New Frame' :S It will give you extra layers... but delete those, etc.

2006-12-04 [Forever Equine]: It's weird, I can get the new frames but it just keeps dublicating the same images. I must have really missed something. It's fine with the first and second...nevermind. It's not worth the headache.XD

2006-12-04 [Kileaiya]: I think I know what’s happening Elvandia, you have to make the next layer of the image visible in the next frame, or you’ll just have a bunch of frames of the same image.

2006-12-04 [Zab]: yes, make a new layer in the layers window, hide the first layer on the second frame (it will still be in the first frame) and draw on the second layer in the second frame. Then you have to go to the first frame to hide the new layer, and then unhide the same layer again in the second frame..uhm..,and keep making the same things with the next frames..
It's all explained in the tutorial really, try again and read it step by step while you work on the animation :P

2006-12-04 [Forever Equine]: I did do everything like in the as I said it's not worth it and I don't have the patience for it.XD I'll just stick with what I know, lol!

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