How to create animated GIFs for UI design presentations

 In Part 1 of the series, I show how to create the animated GIF above.

Key aspects of these animated GIFs are

• Showcase of actual work flows
• Convey the beautiful transitions between different app states
• Small size that can be embedded on the web

 

Well, let’s get right into it. Here are some of the resources you will need.
 

Tools

You will need

• After Effects CS6 or CC
• Photoshop CS6 or CC

In After Effects

1. Create the transitions in one composition
2. Create the presentation in another composition
3. Export composition

In Photoshop

4. Optimize into a GIF

Create your transition composition

Step 1. Fire up After Effects and create a Composition > New Composition Dimensions similar to the Iphone (either 320px by 480px or 640px by 960px) Frame rate 29 Duration 6 seconds 

 

Step 2. Import the background image of London by clicking on File > Import > File And then drag the PNG file under the Project window to the Comp1 window. Resize the background to fit the screen. 

 

Step 3. Create three blue boxes(Shape layers) of width 120px which will expand and fall down the screen during the animation and a fourth box on width 360px. Type in text of the weather and the forecast temperatures. 

 

Step 4. Add the text Snowy at the top and a cloud with six circles (At this point you apply your transitions and animations to the text and the shape layers for the animation you desire). I will cover my transitions and cool animations that you can apply in Part 3. Follow the blog to get updates when I put it up.

Step 5. Save your project but do not close it.

 

Presentation composition

Step 1. Create a New composition within the same project. This will automatically be called Comp2.  Dimensions: 1280px by 720 Frame rate: 29 The duration is dependant on the length of your effect. I had 6seconds.

Step 2. Import the Iphone background and size it to the screen.

 

Step 3. Drag Comp1 from the Project window to the Comp2. You should now have the composition we created earlier, as a layer in the second composition.

 

Step 4. As in Photoshop, we need to Distort the Comp1 layer to match with the background layer image. With the Comp1 layer selected, click on Effect > Distort > Corner Pin   

 

Step 5. Move the corners with a crossed circle on Comp1 to match with the corners of your background image until your composition looks like a finished article.

Some key points

When you play your second composition, your first composition’s animation will automatically play as well. Save your project. Well done, we have created an After Effects composition with key mobile animations and presented on a mobile phone background. In the next part of this series, we shall present how to save the project and eventually save it as a GIF. For now enjoy your creation.