Gif photo animation: tutorial for animated photos

If a picture has more than 1.000 words says, then how much does a photo animation have to say? Especially in the age of digitalization, in which almost every image material – whether photo or video – is digitally available and post-processed on the computer, animated photos or short video clips are becoming more and more important – and not only for elaborate web presences.

Every computer and internet user can access image programs that make photo animation suitable for the masses. A gif animation, no matter if drawn comic, noble cinemagraph or DSLR photo series for a presentation can be created and exported comparatively fast in a few simple steps.

Photo Animation: What is it?

A photo animation is exported in gif format

First, however, a digression into photo animation. What is photo animation and what can you do with animated photos?? By definition, a photo animation is an image technique in which several individual images are combined to form an entire moving image.

The original material can be drawn, generated on the computer or photographed. In simpler terms, a gif animation is a kind of digital flipbook that plays at ideally 24 frames (aka frames) per second, suggesting fluid motion.

Difference between video and animated photos

So where is the significant difference now between photo animation and video footage? Both consist of individual images that are stitched together and rendered based on certain guidelines, which are also determined in part by our eyes and our brain’s processing ability.

Differentiating feature of a modern photo animation, however, is that it usually contains only a few seconds of material and usually repeats itself by infinite loop. In addition, of course, unlike a video, it is not set to music. A special technique is the cinemagraph, which can basically be seen as an intersection between video and gif photo animation.


  • Moving image made from individual frames
  • Ideal playback speed is 24 frames per second


  • Time span and endless loop
  • No sound

Where is the gif animation used?

As already mentioned, basically everyone can create his own animation, provided that he has the necessary photography or drawing technique and the animation program. Since the photo animation is digital gif files, of course, the main distribution channel is the computer and the Internet. Here are accordingly many areas and applications for the gif animation.

  • Advertising banners and eye-catchers
  • Digital art form
  • Caricature and photo manipulation
  • Resource-saving medium of information presentation

Gif Photo Animation Software

A photo animation is based on the right animation software. In addition to dedicated gif software, which is explicitly designed for animated photos (e.g. B. Ulead GIF Animator), most users use an image editor to create their own animation.

[learn_more caption="Photo Animation License Software"]

Create Gif Animation with Photoshop

Predestined for the gif animation is of course Adobe Photoshop. The program offers numerous possibilities at every level of experience to change the visuals and even transform them into an animated gif. With quite a few effects and design options, each frame of the final photo animation can be edited and optimized individually.

Disadvantage: Photoshop is associated with a greater cost.

Animate photos with Ulead GIF Animator

The Ulead GIF Animator is a program that is completely focused on the creation of animated photos for web presences and the like. An uncomplicated handling and above all computer-resource-saving programming distinguishes this tool. The integration of text layers and effects is also possible. Who wants to test the gif software first, can do this either with the 15 days trial version or the, in the functions limited, Ulead Gif Animator Lite.

[learn_more caption="Photo Animation Freeware"]

Photo Animation Freeware

Of course, there are also cheaper or. free software to create photo animation.

Gimp: obvious alternative is of course the image manipulation program Gimp, which for the most part can compete on a level with Photoshop and is also suitable for animated photos. Animating photos is also possible for free, if you get used to the somewhat differently designed user interface.

More Gif Animation Freeware:

Paint.NET: a free image editing program designed by Washington State University for Windows, which thanks to numerous updates and plug-ins can easily compete with Photoshop in the field of animated photos and gif animation

GIF Construction Set Pro: the original artist in photo animation, whose predecessor was already a reference product for web banners and the first animated photos and images on the Internet. In the meantime, the free gif software has been updated and equipped with more features

Movies 13: a standalone photo animation freeware that scores with easy integration and export of videos, as well as already existing gif animations. A wide range of transitions, shapes and backgrounds and a custom scripting language round out the package

UnFREEz: a small free gif animation program, which is focused only on creating photo animations and convinces with fast integration, as well as processing

[learn_more caption="Photo Animation Apps"]

Photo Animation Apps

GifBoom: Animated GIF Camera: a free Android and iPhone app that brings photo animation to your smartphone. Using video capture, the app creates an animated gif that can be shared and saved instantly.

cinemagram: an app for creating a Cinemagram. Individual areas in the photo can be animated, while the main part remains still. This app is currently only available for the iPhone.

Gifture: with a not dissimilar design and interface to Instagram, photos can be edited with filters and merged to a gif photo animation in this iPhone app – sharing on Facebook and Twitter of course integrated.

Loopcam: this iPhone app is characterized by high speed in processing and can also animate several parts of a Cinemagram photo.

MyFaceWhen: here the smartphone camera is used directly and recorded material is immediately processed into a gif photo animation. This app is also only available for the iPhone.

Giffer: an alternative for Android users, which brings all essential tools and components of a photo animation software with it.

Gif Camera: this app also uses the smartphone camera. Here, however, you can tap the screen one by one to capture the individual frames for the photo animation, which are then merged into the final file with some customization options – only available for iPhone.

Tutorial: Gif photo animation in Photoshop

Especially in the field of hobby photography and image editing on the computer Adobe Photoshop is the measure of all things and in most cases reference product. The same is of course true for the photo animation to a gif file. In this short tutorial we explain how to create a simple gif animation in Photoshop.

Layers for Gif Animation in Photoshop

For the photo animation for each frame individual layers are created

First step, as generally in Photoshop, is to create a new layer. On this layer, the first frame of the final photo animation can then be integrated. Whether the content is now a photo, or just text, depends entirely on the user.

This first layer is now duplicated and filled with the content of the next frame. This step is repeated until all frames have been created and filled. At the end all layers are deactivated except the first one.

Tip: If video material is to be edited to a photo animation, you can already select during import that each frame is created as a single layer.

The animation window in Photoshop

After creating a separate layer for each frame, you can activate the layer in the window> Animations the animation window. Here from single layers a coherent photo animation is created.

In the animation window for the gif animation the first frame is now already integrated. A new frame can now be added in the top right menu. The new frame is selected and in the layer palette now the second layer is activated.

In the animation window the photo animation of the frames is performed

This step is also repeated until all layers have their own frame in the gif animation window. Below the individual frames you can see an indication of the time interval, which can be adjusted. The shorter the interval, the faster and smoother the final photo animation looks.

Photo Animation with Tweening

A second method to create a photo animation in gif format is the so called tweening. The special thing about this function is that only the first and the last frame are integrated. The intermediate frames are generated by the animation software itself. Alternatively, the technique can also be used to make transitions between individual frames smoother.

You insert both layers as a frame in the animation window and select the second frame. By clicking on the tweening button you can now define in the next window how many frames should be generated additionally. In this way, a fluid photo animation can be created from just two layers.

The tweening function creates a smooth transition between two frames

Export Gif Photo Animation

The last step, if you want to create your own animation, is to save and export it. Select "gif" as the file type and then you can specify whether the finished file should be played in an endless loop or only a few times.

To open the gif animation you can either drag it to an empty browser window or right-click it to open it in the browser.

Photo animation without tweening

Photo Animation with Tweening

Animating photos with freeware: more tutorials

Each image editing program is a little different, so photo animation in the software is also done a little differently. For the main animation programs here are a few tutorials:

[learn_more caption="Photo Animation in Gimp"]

Create Gif Animation with Gimp


[learn_more caption="Photo Animation in Ulead Gif Animator"]

Create photo animation as banner in Ulead Gif Animator


Minimalistic photo animation: the Cinemagram

A special discipline in the photo animation is the cinemagraph or the animation of the image. the cinemagram. This technique is the link between video and photo animation, as it is based on video footage but rendered as an animated photo. The special thing here is that only a certain detail of the image is moved, i.e. animated. It is basically a single frame from a video in which, in a small section, a movement takes place – and that too mostly very subtly.

A cinemagram is the link between photo animation and video (c) mendak / photo on flickr

A Cinemagram photo animation often makes a very noble impression due to its high resolution and is therefore especially popular in fashion photography. Popular are for example cinemagrams in which only the hair of a model moves in the wind, or only a sparkle on the shoes or chain in the jewelry store photo is animated and moved.

Tutorial: animated Cinemagram in Photoshop

If you own a DSLR, system camera or compact camera with video function, you can also create a Cinemagram. Of essential importance when creating such a photo animation from video material is a camera tripod or, as an alternative solution, a capable image stabilizer, since the camera must be held absolutely still so that the photo animation is also possible.

[learn_more caption="Step 1: What to animate?"]

Step 1: What to animate?

A significant step, even in normal photography, is the selection of the subject and in the special case of cinemagraph photo animation, also deciding which part of the image should be animated. This decision should be made roughly before the actual recording of the video, because the rest of the image and especially the camera should remain absolutely still to facilitate the work in the image or animation software.

[learn_more caption="Step 2: Import into layers"]

Step 2: Import into layers

If you work with video material, you can import each individual frame as a separate layer in the editing program.

file> Import> Video frames to levels> Select file

This way the video is automatically analyzed and each frame is considered individually. In the following window you can choose how many frames to import.

Tip: It is recommended to reduce the image size of the layers to save disk space.

[learn_more caption="Step 3: Animate photo"]

Step 3: Animate photo

In the next step the image will be animated. About Window> Animation open the animation window and select the first frame. This frame remains activated for the whole photo animation. It is the basis for the photo animation, along with the background and all the content that is still in the final gif file. To save time, use the shift key to select all frames and activate the first layer on all of them.

Then, one by one, the frames are edited for the photo animation. Select the respective frame below and mark with the selection tool the area of the image which should be moved in the final gif animation. This selection is now deleted by the remove key. This step is done with every single frame. Now the photo animation is saved as "gif" and exported – done!

Tip: With the play button you can quickly check if the deletion worked and the photo animation of the cinemagram runs smoothly.

Like this post? Please share to your friends:
Leave a Reply

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: