How to make your own animated GIFs

[Myname]

Question: How does one tween multiple images in FireWorks the way ImageReady tweens multiple images?

You know, how one image fades to another? It was easy to do in ImageReady but since Adobe discontinued it, I'm only left with FireWorks.

I've converted the frames that I want to tween, into symbols. Then I select the frames and go Modify > Symbol > Tween, but it keeps saying that I need to select different instances of the same symbol in the library. Yea, I don't quite get what that means and I've tried almost everything.

Thanks.

[fallin up]

when i resize a large image will it be distorted with this program?

[felix]

This program being?...

If you're talking about the programs in the guide, no.
Well, you can distort it intentionally if you say shrink only one dimension.

[portia_isabel]

wow i love the tutorials thanks a million

[AuditionEX]

Ei faffy can I ask a Q?

I just open a gif file. I want to know the easiest step by step procedure on how to add [3px black border, inside] and [2px white border, inside].

so it would be liek this

I tried that custom and I am confused. I tried my own research but failed...

[felix]

There's a entire Tutorial thread in Fan Creation. o.O

But anyway...
Open the file in ImageReady.
Add New Layer. Make sure it's on top.
Ctrl + A, meaning select all.
Go Edit > Stroke, set it to inside.
Add a 2 px white border.
Repeat, adding a 1px black border.

That will get you the effect in your example.
ps. You are allowed to delete your own posts. (Edit > Delete)

[AuditionEX]

oh ya. damn i forgot that teknik hahaha.

stupid me.

many thanks again !

[Daikazekage]

Thanks a million! But there are still a few questions for me to ask you.

Where can I download ImageReady? I cant seem to find it anywhere.

[felix]

ImageReady comes with Photoshop. From Photoshop CS3 onwards it's integrated into the system.

Before you ask. You are not allowed to ask where to download it illegaly!

[Synria_]

Is there a possibility of updating this tutorial to fit CS3?

[felix]

There is no need to update that tutorial. There have been a duzen others posted already.
Hm. I'm guessing you haven't seen the Sig/Avatar tutorials by the makers [Index in First Post] thread.

[Synria_]

O wow... thats a nice help list. Thanks!

[teachopvutru]

If I have a 500x500 image with frames already there that I'm about to make a 100x100 animated gif out of, then which of the following would result in better quality:

1) Turn image into Index Mode then resize.
2) Resize then turn image into Index Mode.
3) Both will have the same quality or it isn't as noticeable.

[Daikazekage]

Is there anyway I can do without ImageReady? Gimp perhaps?

[SeijiSensei]

Originally Posted by Daikazekage

Is there anyway I can do without ImageReady? Gimp perhaps?

I use the GIMP on Linux to make animated gifs all the time. Here's my usual strategy:

1) Play the segment of the video I need to capture with mplayer using the options "-ao null -vo jpeg -ss hh:mm:ss -endpos nn" replacing hh:mm:ss with the starting time of the segment, and nn with the number of seconds to capture. This creates a sequence of numbered .jpeg files with each of the frames.

You can use whatever alternative method you have available as long as you end up with the frame sequence as individual graphic files that the GIMP can read.

2) Open the initial frame of the sequence in the GIMP. Then, in that frame's GIMP window, use the command "File > Open as Layers" to select all the remaining frames you wish to include. All the frames you have selected will be overlaid on top of the initial one.

3) Use Filters > Animation > Optimize (for GIF) to have the GIMP convert the sequence into one where only the frame-to-frame changes are preserved.

4) You can now crop or scale the new, differenced sequence as needed. Editing the layered images is much trickier since you'll need to make sure any changes you make propagate across the entire sequence.

5) Choose File > Save and give the resulting file a .gif extension. GIMP will ask if you want to flatten the layers or save them as an animation. In the following dialog, I usually replace the default 100 ms delay between frames with 40 ms, since that's approximately the length of time a frame appears on screen when shot in 24p.

It can be a challenge to stay under AS's 50 kbyte file-size limit. The simplest solution is to scale the entire graphic down until it fits, but I've also used the approach of throwing away some of the intermediate frames. I've been impressed how much animation can be preserved in just a few frames.

I'll also occasionally duplicate the sequence in reverse order to improve the smoothness during looping. For instance, if there are 5 frames, I might duplicate the first four and create the sequence (1 2 3 4 5 4 3 2 1). Often I'll play with the times the frames appear on screen as well. You can add. copy, and delete frames, and change their timings, in the Layers dialog (Ctrl-L). To change a time, click that frame's entry in the Layers dialog, change the number, then hit enter. I usually keep the first and last frames on screen longer than the intermediate ones.

[Gotank]

I use GIF Construction Set Professional 3.

It's very user friendly, and configurations are very easy to make, be it croping or controlling the frames. The program also has a trial period, which is good.

After getting the program, it's just a matter of getting the frames. Usually, you can rip these straight out of the videos. Either by pausing the video, then traversing frame by frame and using screen capture, or slowing down the video and unpausing for small amounts of time for video players that don't offer the option of frame by frame traversal.

After getting all the frames for a desired animated sequence, it's just a matter of loading them into the program and let it compile.

All in all it's fairly simple.

[felix]

Originally Posted by tiachopvutru

1) Turn image into Index Mode then resize.
2) Resize then turn image into Index Mode.
3) Both will have the same quality or it isn't as noticeable.

Late reply but, 3) is the closest to the truth.
Although in theory I think it's 2, I never actually got anywhere in practice.

[hannahkatreena]

do i still need to download the episode to make it a gif?

[felix]

Um. Not necessarily...

Random frames which were preferably in close to each other at some point will usually generate a eye-pleasing animation, which is to say it will look good enough to use. So downloading the episode is not necessary should you have access to a frame sequence.

[IHaveCrayons]

Wow thanks for the guide. And to think... I used to use ULEAD gif animator...