How-to create gif for Google+ post

So you’ve made an app, and you’ve implemented a super sweet looking interface with incredible animation details - why not show it off then!

We take pride in designing our apps, and therefore we also want to be able to proudly present it in posts on social media - in this case Google Plus. Even though a picture says more than a thousand words, an animation says more than a static picture (79 times more in the below example to be exact). With a gif animation Google Plus will display your prowess as the reader scrolls by it, whereas a video is only displayed if the reader clicks it - and we’re looking for immediate attraction here, so that’s no good.

You can see an example of what we’re trying to achieve here on Appdictive’s Google Plus page.

How to steps

  1. Record the screen. First we need a recording of the screen action. There are multiple different ways of doing this, and if you’re a developer working with Android Studio, the easiest approach is to use the screen recording feature shown in the screenshot.

    Step 1

    There are other options as well to record the screen. One is the official ADB command for screen recording and another is to use an app for it. Just search “Screen record” on Play or see a few examples of them here.

  2. Add effects to the video (optional).
    With animations showing the full screen of an app it’s nice to have a device frame around it. You should be able to do this in most advanced video editing programs - we use Photoshop for it.

    1. Generate device frame using the official generator
    2. Add it to the video or to the gif.
      We add it by opening the .mp4 screen recording in Photoshop and adding in a background color and device frame as layers. Make sure the background and frame runs through all frames of the video and export it.
      Step 2
      Alternatively you can use GIMP to add a frame to your .gif (see next step for conversion) - however we have not tested this approach.
  3. Convert the .mp4 video to a .gif animation
    • Use Gifcam (just search for “download” on the page to find it) to record part of the video, if e.g. you want to only have a section of the screen recording such as this fab animation. Step 3
    • Another option is to simply upload your video to Cloud convert and let that do the conversion from mp4 to gif.
  4. Post it!
    With the gif ready, add it to your post and write some interesting text - don’t forget a link to your app, so people can try it out for themselves!

    Step 4

By: Jesper Lysgaard Rasmussen