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):


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.