MP4 file ( Share > Export)and save it to your documents. After you are done stop the recording and Save your project file. Go through your rehearsed interaction you want to showcase and keep the recording short. We only require the rectangular screen which have the animations and transitions you want to show case for your GIF presentation. NOTE: LEAVE OUT the phone model from Invision when before recording. Selecting your custom recording screen using Camtasia Camtasia custom settingsĬlick on the red button to resize the boundary box to the size of only the rectangular screen of your design. Switch off the audio to reduce the size of your output file. This will give a boundary box overlay which shows what will be recorded.
Open up your Camtasia, click on record button and Full screen option will be selected.
Let’s look at recording using Camtasia first,Ĭamtasia has a free trial of its full features and available for download for Windows or Mac. In this step, we want to capture the interactions with the app design that we want to show on our final GIF. This will ensure a smooth transition when you GIF loops. Always end the interaction where you began it. Make the interaction short but showcase the best features of your app that will help your design presentation. NOTE: What is important to do upfront, is to decide on the interaction to showcase. Next go to Preview mode and click through your screens and make sure everything is work the way you want. Step3: Once you are done, Invision will automatically save your project changes. Invision Build Mode Invision Gestures Invision transitions Invision has several gestures and animations that can be applied on these hotspots in Build Mode. Decide on your hotspots (these are areas that perform a certain action when clicked) and create them. Step2: Next figure out how you want to showcase your screens and the transitions between them.
Step1: To begin, log into your online Invision account, create a new project and import your design screens. Invisionapp/Invision is also a cheaper alternative to After Effects as you can get a FREE account forever with the animations included. What is very cool about this technique in this tutorial, is how quickly animations can be created and how quickly the GIF can be exported. As a Senior designer, I have personally been using it for more than two years and its feature list is constantly been added to.
What is really key about the software product is its collection of interactions that can be rapidly applied to desktop and mobile designs. Invision is a design software for creating interactive clickable prototypes directly from visual designs.
The second tutorial explains how to present the animation and export it as a GIF. The first part explains how to create, record and exporting the design animation. I have split this tutorial into two parts. Stage 3: Position it on the presentation background and export as GIF in Photoshop Stage 2: Record and export it as a video using Camtasia or ScreenFlow Stage 1: We shall create the animation in Invision The final product we shall be creating in this tutorial. In this tutorial we will look at a simpler and faster technique for creating animated design GIFs for mobile app presentations using Invision, Camtasia, ScreenFlow and Photoshop. After Effects allows for unique, quality animations and greater creative control. This process is very time consuming but the results are really impressive. In the tutorial series “ How to create animated GIFs for UI design presentations” we looked at how firstly to create and export the animations from After Effects and save as GIF in Photoshop.