The second part of this tutorial covers how to put the finishing touches on your presentation and the settings for exporting to a GIF using Photoshop. What we shall be producing at the end of this tutorial.

Mobile app animation

Here is the video file from the previous tutorial showing where we left off. This video file had be recorded using ScreenFlow and exported specifically to video.

Mobile app Animation

Approximate time: 40 minutes to 1 hour

Software you will need
Photoshop

Design materials
Your video file from part 1
A Background image of an Iphone template

Step3: When importing as layers, select the checkbox on Limit to Every – frames. Set this either to 2 or 4 depending on the length of your design animation. The less frames, the more the layers created in Photoshop and potentially the larger your GIF. We want to make sure or GIF is small in size so that it loads quickly in a browser, so use 4 frames. Hit OK.

Step4: The timeline window should show up once the import is done with the animation laid out in frames.

Step5: Split your view by dragging one of the windows to the right. Once the windows are side by side, drag the background layer’s files to the design animation window and drop right below Layer 1.

Step6: Use the crop tool to resize the canvas to fit the background.

Step7: In the Tools window, select the Crop tool and resize the file to your dimensions similar to the Background Image. This might take a couple of seconds to render.
Step8: Select all the layers in the Layers window except for the Background image. Go to Edit > Transform >Distort and then zoom in and position the corners of you video file with that of the Background image.

Step9: Once you are done, click on approve and Timeline should reflect the changes you just made. Go to File -> Save For web. Your file will naturally be large to start off with but you can adjust the following settings to reduce the size: Color can be reduced to 128 if your file is too big and a good width would be around 600px to 700px.

Make sure to select Loop Forever so that your

animation loops when it ends.

Step10: Click Save and your GIF should be created.

mobile app animation

Well done you have created a design animation GIF for a mobile app using Invision and Photoshop.

Calvin Pedzai

Coming from a Master degree in HCI, Calvin Pedzai is an analytical problem solver who enjoys crafting experiences. He has worked as a Financial services software developer, UX analyst and currently is the Senior UX designer at an awarding winning agency