How to create animated GIFs for UI design presentations: Part 1

Weather app animated GIF

Weather app animated GIF

You may have seen really cool animated GIFs that design professionals are using to present UI design on Behance, Dribble and other design communities platforms and wondered how did they created them. What is fast becoming one of the best ways of illustrating gestures and animations in mobile apps, animated GIFs offer a little more over traditional storyboards and static screenshots. In Part 1 of the series, I show how to create the animated GIF above. The second part will explain how to export your files properly and optimize into a GIF. Download of project file is also available. The third and final tutorial breaks down the transitions and animations more fully. Click on the animations below to see how these awesome pieces can be used in a UI design presentation.

Tutorial on how to add motion blur

Animation for a responsive website for an Ecommerce store.

Animation for a flight tracker app.

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

Adobe-After-Effects-Logo Adobe_Photoshop_CS6_icon

Resources

London background image tower_bridge_of_london-wide Tilted Iphone background image iphone-tilted

For the full After Effects project file.

Download-Button-Set-PSD

Design process

Our design process is very simple and for those who would rather skip to the end, here is the overview of this tutorial. I will not explain the weather app’s intricate transitions which are applied in After Effects (Part 3 of this series will explain the transitions and how I applied them in AE) but will give you the overview of key points in the process. 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 Screen Shot 2014-05-09 at 8.44.05 PM 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. Screen Shot 2014-05-09 at 5.38.09 PM Screen Shot 2014-05-09 at 5.40.20 PM 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. Screen Shot 2014-05-09 at 7.41.01 PM 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. Screen Shot 2014-05-09 at 5.14.28 PM Step 2. Import the Iphone background and size it to the screen. Screen Shot 2014-05-09 at 8.50.46 PM 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. After Effects Screen Shot Screen Shot 2014-05-09 at 8.17.53 PM 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    Screen Shot 2014-05-09 at 8.25.16 PM 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.   Screen Shot 2014-05-09 at 8.25.56 PM

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.

Next steps

Click here for the second part to this tutorial.

For the full After Effects project file.

Download-Button-Set-PSD behancelink                 Twitter-btn If you enjoyed this article please like, follow or comment my blog. I would appreciate any feedback from special people like you. 😉

22 thoughts on “How to create animated GIFs for UI design presentations: Part 1

  1. Pingback: Great tutorial showing how to | Twivivi画像

  2. Pingback: TOOLBOX

  3. Pingback: How to create animated GIFs for UI design… ~ En passant

  4. Pingback: How to create animated GIFs for UI design presentations: Part 1 & 2 | HyperLinkLove - Hyperlink Love!

  5. Pingback: How to Make Cool Animated GIFs for Your Design | Dot Net RSS

  6. Pingback: How to Make Cool Animated GIFs for Your Design | UICorner-User interface design resources,articles and tutorials

  7. Pingback: Pixels of the Week: Web Design links not to miss – May 15, 2014 - Stéphanie Walter: Webdesigner - UX-UI designer

  8. Pingback: Great tutorial showing how to | TWIMAGI

  9. Pingback: 25 After Effects Tutorials for Animated UI and UX Design | Designscape - advertising, branding, graphic design tutorials, news and inspiration

  10. Pingback: 15 UI Animation Tutorials

  11. Pingback: Design News / 15 UI Animation Tutorials

  12. Pingback: 8 Photoshop UI Animation Tutorials | SmashingApps.com

  13. Pingback: After Effects Tutorials & Inspiration | Barry Mccalvey – Freelance UI/UX Designer

  14. Exactly what I was searching for! Thank you, I loved it!
    I have been seeing these types of walkthrough animated GIF and trying to figure out how to do this for over a year now. For a intermediate level developer and not-so-great designer like me these graphics are quite interesting. I wanted to learn it too! I will try follow your article and try to learn this. I will post when I have made something! 🙂
    Sorry about the typos!

Leave a Reply to calvinpedzai Cancel reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s