In the last few weeks, I have been asked more and more, what is the best way to create demo GIFs of iOS apps? This question has come mostly from small app developers with small budgets, but want to expose their product to their users.
I will be using Startups | Mapped In Israel as an example:
Step 1: Add finger tips to your app
One of the important things to do when creating a demo is to direct the viewers so they know exactly where to engage with the app, They want to be navigated on the screen. (I think I first saw it on Kevin Systrom’s Instagram keynote).
This step is not hard to implement via an open source project on GitHub that does exactly that thing (You can use it for live presentation on Apple TV too).
Fingertips is a small library (one class) meant for presentations from iOS devices that shows all touches and gestures so that the audience can see them.
These 2 steps, bring your app to life. All you need to do:
- Simply add the following line into your Podfile (I hope you are using Cocoapods):
2. Add those 5 lines of code to your AppDelegate’s didFinishLaunchingWithOptions:
UIViewController *vc = self.window.rootViewController;
CGRect frame = [[UIScreen mainScreen] bounds];
self.window = [[MBFingerTipWindow alloc] initWithFrame:frame];
self.window.rootViewController = vc;
- Don’t forget to #import <Fingertips/MBFingerTipWindow.h>
Now when Air Mirroring your app you will notice a cool touch indicator circle:
Step 2: Record a short demonstration video (See Update 1)
The best way to record a real device screen is to use Reflector (13$). This is my personal favorite that I use.
It uses Air Mirror to show your iOS device on your Mac and supports screen recording.
You can choose if you want to show the frame and which device.
Use CMD+R to start and stop recording.
Step 3: Convert the video to GIFs
The next step, is to convert the demonstration videos to GIFs using GIF Brewery (5$ in the Mac App Store).
With this tool, you simply select start and end time thus creating the GIF.
You can use the preview to decide if you want to shorten or lengthen the video.
When following these steps, you will be able to quickly and effectively create a demo of your iOS App. There might be other ways to do this, I am just explaining my way which I know will create a clean, simple and straightforward demo. Feel free to share this article as well as comment or email me, I’d love to collaborate on more how to’s.
OS X Yosemite (10.10) added the ability to capture beautiful videos of your app, one super cool feature is that it automatically replaces the status bar to a clean status bar without the carrier name.
All you need is your device connected with the Lightning cable and Quick Time, Go to File-> New Movie Recorder, choose your iOS device and start recording!