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? ^_^

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