How to Create Gifographics

Recently we have seen that gifographics is coming in the online marketing world. It is same with infographic that is a creative way of presenting your data but the main difference is that in gifographic there is some movements in the important parts of your infographic. So, it is simply an animated type of infographic or save as a gif file. Below are the steps in making a gifographic.

An important note before starting to create a gifographic: be sure that the size of it is fitted to where you will post it. Resizing it will result to stop the animated effect of your gifographic.


  1. Image titled Create Gifographics Step 1
    Open the PSD file of the infographics. Choose the areas that you want to move. Out of patience and dedication, cut, rotate, move the images according to simple movement you want to have. You need to ensure that every movement that you modify, you will save the picture as .jpg.
    • Plan the animation you wish to have earlier, it will help you on the frame-by-frame saving.
  2. Image titled Create Gifographics Step 2
    Save jpg files in one separate folder. It will be easier for you to determine the images that you want to use when you need to load it into stack in Photoshop.
    • You may number the images to help you determine which comes in the animation 1st, 2nd, 3rd and so on. This will help you determine which movement comes first
  3. Image titled Create Gifographics Step 3
    On the Photoshop panel, click File > Scripts > Load files into stack. Open the folder where you saved the files and click ok. Wait for Photoshop as it loads the files that you wish to animate. Note that the more frames you have the longer it takes to load completely.
    • Double check the layers panel, and animation window. To show the layer, click Window>check the animation and the layer.
  4. Image titled Create Gifographics Step 4
    Display your frames. You might notice that in the animation toolbar, only one frame is being shown. You must note that if you load 5 frames, it should display 5 frames as well. All you got to do is to go to the Palette Options > Make Frames from Layers.
    • There are cases that the files loaded are in the reverse position. That means the picture number 1 is on the last frame and vice versa. All you have to do is click the Palette Options > Reverse Layers.
      Image titled Create Gifographics Step 4Bullet1
  5. Image titled Create Gifographics Step 5
    Set the animation speed. In the screen shot below, you can notice that the time is 0.00 sec. Select all the frames and you will be given the chance to set how slow or fast you want to have for you animation. If the value you want can't be found on the choices, feel free to customize the speed by clicking Other.
    • If you want to see how your animation runs, simply press [enter] and it will immediately play.
    • Important: To make your animation loop non-stop, do not forget to set its loop to forever[continuous looping].
  6. Image titled Create Gifographics Step 6
    Save and share it! The moment that you are already satisfied with your work, you can finally save it and upload it in the web.

Article Info

Categories: Graphics