Creating animated GIFs using Invision and Photoshop Part 2


The first part of this tutorial explained how to create an animated UI design for a mobile app using Invision and record the animation using ScreenFlow.

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
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
Mobile app Animation

 

special_note3Approximate 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

Our design process
Stage1:Position your mobile design on a presentation background
Stage2: Export as GIF in Photoshop

So let’s begin.

Stage1: Position it on the presentation background

Step1: Fire up Photoshop and open your background for your final presentation. I downloaded a free Iphone template from Ramotion on Dribbble.

Iphone template by Ramotion
Iphone template by Ramotion

 

Iphone template in Photoshop
Iphone template in Photoshop

Step2: Import your video file using File > Import. Import it as layers.

vlcsnap-2015-09-12-19h26m06s600

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.

vlcsnap-2015-09-12-19h26m53s527

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

vlcsnap-2015-09-12-19h27m40s864

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.

bk_repositioning

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

vlcsnap-2015-09-12-22h18m06s840

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.

repositioning

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.

vlcsnap-2015-09-12-19h45m46s356

special_note4Make 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
mobile app animation

 

special_note2Well 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

Leave a Reply