* * * * * * * * * * * * * * * * * * * *

EDITING ANIMATED GIFS

* * * * * * * * * * * * * * * * * * * *

This is not a step-by-step tutorial on editing animations. It is simply an overview to show how I maintain the largest collection available that is totally banner and ad free.

Editing animated gifs can be rewarding. When you want an image to work well on different colored pages you need a transparent background. The colors have more "pop"and the image blends in better. There are other characteristics that can be easily modified to make your gif more suitable to your tastes. Below, you will see examples of several modifications and some creations I made using online and PC based apps.

MAKING THAT BACKGROUND TRANSPARENT

Several methods and tools exist to create gifs with transparent backgounds. There is ImageMagick, Photoshop, and various versions of Paint (both online and PC based). The simplest to use is is found on my Bodacious links. Use the Image Creators/Editors drop down and select "Onlin Image Editor". Load your image and select the"Wizards" tab. Transparency tool is used and has different options. This tool is only suitable for gifs that have good color sepsration in all frames or for gifs with a background that is different from all the colors in the objects to remain.

Here is an example of an original versus the one displayed in my Christmas collection

< Original gif edited gif>

Now let's look at one with different conditions. This one was on the now defunct Smiley Central site. It has frames with enclosed background that creates a moving target that can not be eliminated without deleting parts of the object itself.

< Original gif edited gif>

Note the area between the legs, shoes and body. This is my method for cleaning that up:

  • Use the Online Image Editor as in the previous example to remove the main areas of the background.
  • Resize and crop blank areas if desired and save to your PC.
  • On my Bodacious links, use the Image Creators/Editors drop down and select EZGif.
  • Select "Split" on the menu bar and load your image into the tool.
  • Click on "Upload" button
  • After image loads, click on "Split to frames!" button.
  • At the bottom of the display of the individual frames, select "Download frames to zip"
  • Save the zip file to your PC and unzip in an empty folder.
  • Use Paint to erase the white background and save as the same file name. In this example, I edited 5 of the 8 frames.
  • Now go back to EZGIF and select "GIF Maker", load all the frames
  • Scroll down to the "Effects" section and check the box next to "don't stack frames"
  • Then click on "Make a GIF!"
  • The animation will appear instantly and you can then save it with the icon.

Further Edits

With the EZGIF page still open, you can continue to edit as many times as you like. Copy frames, skip frames, drag and drop to change sequence and change the delay between frames. Let's put a little pep in his step:

<First editsecond edit>

Another example of delay changes:

<Original timing edits>

Complicated Edits

Sometimes, conditions don't make things simple. Below is an example on a gif that required edits and "Paint" repairs to all 19 frames. Poor contrast between the white background and the back of the hands and the skate blades, made it impossible to get clean images by any direct method. Paint was used to add back the light shading in the hands and the skate blades. Erasures cleaned up the area between boots and body and the void in her hairdo as well as stray pixels around the edges. Horizontal flip changed the direction of rotation and copying and rearranging frames added to the duration of the spin (sizes reduced for illustration purposes):
As found: Transparent: left spin: spin X 3: left spin X 3:

Some Creations and Extreme Editing

As found: Viewed on Edge browser: 1st extention:
2nd extention: 3rd extention: No Loop :


Began with these:

Created these:



More extreme edits and creations
Repairing broken animations][ Bodacious Smiley Source