User's manual - how to create animated GIF and APNG images

The list of the tutorials given below describes how to work with animated and static images using the tools available in the tool:
  • 1. Animizer - a special form for editing an animated image
  • 2. Assembler - combines static (non-animated) images into an animated image
  • 3. Splitter - splits an animated image into separate static images
  • 4. Converter - Converts GIF image to animated PNG (APNG) and back
  • 5. Animating static image - create an animated GIF/APNG image from one static image
  • 6. Animating text - enter text and get it animated

Animizer - a special form for editing an animated image

On the Animizer tool main page you can see a form for uploading. Click on the "Browse" button and select all animated and/or static images that you would like to be included in your animated image. You will see the "Continue to editor" button that will get activated if you have only image files selected (in case non-image files are selected, you will see an error):

Selecting images for animating them

Having selected your images, click on the "Continue to editor" button and wait until your images get uploaded. After that you will see the Animizer form displayed on the left hand side of the screen and an animation preview in the right hand side with the options to download it. The Animizer form includes the following options for you to select from:

Placing additional frames into animated imageIn case you would like to add some images to your animation, click on the "Upload" button next to "Add more frames", select the desired images and wait until your images get uploaded
Selecting image type to be animated GIF or PNGProvides you options for image type you would like your animation to be - animated GIF or PNG. Note that NOT all browsers support animated PNG images. If you still need the PNG format and you would like it to be functional in all browsers you can still use the "Download as sprites" option and "Animated by pure JavaScript" or "Animate by canvas and JavaScript" option in the "download" section (in the animation preview window).

The image below helps you identify if your browser supports APNG:

Identifies whether your browser supports Animated PNG

Note: .GIF format supports only absolute transparency or no transparency at all. Therefore, when you select the GIF format and set background to transparent you will still be able to set a background color that will fill the back layer of semi-transparent parts of your image. Example:

Difference between GIF and APNG
Set the background of the animation to transparentSet the background of an animated image to transparent. For animated GIF images all semi-transparent pixels will be in front of the selected background color.

NOTE: The background of the image is transparent only for the transparent pixels of the uploaded image.
Colorize the image or keep it's original coloringThis feature allows to generate animated images with the default coloring scheme provided.
Colorize the imageThe color of the image itself. The overlay of the selected color is placed in regards to colorization algorithm (the more pixel color is close to black the more it is close to the color selected in this field). In order to invoke the color picker just click on the foreground color textbox
Background color of the imageThe background color of an animated image. All transparent pixels will be filled with the given background.
Animation speed of the imageIdentifies the interval of time between frames switching. The closer the slider is to + the faster the animation goes and vice versa. You can also set a delay between each separate frame in the "Frame settings".
The size of the animated image in pixelsDenotes width and height of an animated image in pixels. The default size of each image is set depending on the first frame size. In order for the image to have proportional width and height when entering the size in the size textboxes, check the "Constrain proportions" box and it will change the other parameter in regards to the entered one. If you want to get back to the original size of the image, click on the "Reset sizes" link under "Image size" title.

If you need all frames in your animated image to have their original proportions or get it stretched throughout the image size, then use the "Keep all proportions" option available in the "advanced settings"
Advanced settingsOpens up advanced settings for the animated image
Frame settingsOpens up the interface for modifying frames settings. You can also open it up by pressing the dark line on the bottom of the page with the "Frames" title:

Separate frame settings of the animation

In the frames settings window you can:
  • - Enable or disable a frame - click on the "Enable" checkbox in order for the frame image to be used in the animation
  • - Change position of a frame - simply click and drag each frame to the left or to the right to change the position
  • - Set the delay of a frame - in the dropdown box select the delay used before the next frame is shown
Keep all images proportionsWhen you upload images for the animation with different proportions and you set the "Keep all proportions" option to "Yes", all images will fit within the image borders but keep it's original proportions. If the option is set to "No", the image will be fully stretched to the edges of the whole image.
Invert image colorsInverts all colors of the image. Example:
Example of inverted colors
Fliping animated image vertically and horizontallyFlips images vertically and/or horizontally.

Note that some images are not affected by this feature as they may be absolutely symmetric in respect to center point
Reverse animationSet the sequence of animation frames in reverse order, so animation goes backwards if the option is selected
Play countAmount of times the animation should be played for. Setting the amount to 0 makes the animation play infinitely

Generator preview area

In this area you can see the animation preview

Generated animated image preview

This tool provides 3 different download options:
  • - Download as sprites - Allows you to download the animated image in the form of image sprites (one non-animated image with frames of the animation placed one after another horizontally)
  • - Animate by pure JavaScript - Allows you to include a special JavaScript code that makes the image sprites animated
  • - Animate by Canvas & Javascript - Allows you to include a special JavaScript code that makes the image sprites animated with the Canvas technology