I received so many nice compliments about my app demo slides at Úll 2013 that I’ve decided to make my Keynote slide template available. I’ve also written up how I create the demos, including how I record demo videos of our apps over AirPlay. If you find yourself needing to demo iOS apps for meetings and presentations, you’re very welcome to use this template.
The first thing to do is to download and install the Keynote template for Keynote ’09. Here’s the link:
Once it’s downloaded, unzip the downloaded file, and copy the enclosed file (‘iOS app demos.kth’) to this folder on your hard drive:
(This is in the current user’s ‘Library’ folder. You can find it by opening the ‘Go’ menu in the Finder, holding down the alt key, and selecting the ‘Library’ option that appears when you do so. If you haven’t previously installed a custom Keynote theme, you may well need to create the iWork, Keynote and Themes folders yourself within the ‘Application Support’ folder.)
If you want to make the template available to everyone on your computer, put the file here instead:
(Again, you may need to create the iWork, Keynote and Themes folders yourself.)
Then, launch Keynote, and create a new presentation by selecting ‘File > New’. In the Theme Chooser, scroll down to the bottom, and you should see a new theme called ‘iOS app demos’. Select this theme, and click the ‘Choose’ button. This will create a new presentation based on this theme.
To select the app demo slides, show the Keynote Inspector (View > Show Inspector, if it’s not already visible) and switch to the second tab (‘Slide’). Select the second sub-tab (‘Appearance’), and then click on the slide thumbnail (under ‘Master and Layout’) to see a list of all available styles. In addition to a few stock slide styles, I’ve added landscape and portrait versions of the iPhone 5, iPhone 4S, iPad With Retina Display, and iPad Mini. I’ve also added an app icon slide template.
Select one of the iOS device styles, and your slide will update to show the device. You won’t be able to edit the background or positioning – it’s fixed as part of the template — but you can drag and drop your own images and movies into the screen area. One neat feature of the template is that they’ll appear underneath the screen sheen, which makes for a nice effect when demoing.
The screen of each device is set up as a ‘Media Placeholder’ in Keynote. This means that it’s a placeholder for you to drop your own images and movies onto. To add a screenshot or demo movie to a slide, simply drag it from the Finder and onto the center of the screen area. You should see a thick blue border appear around the screen area when you do:
After dropping the screenshot or movie, it will be scaled to fit the available screen space. If it’s a movie, you can then use the QuickTime panel in the Inspector to tweak the start and end points of the movie to suit your presentation:
To replace the screenshot or movie, just drop another one on top.
Important note: In order to make the screen sheen appear on top of your screenshots, I’ve had to make the sheen be a Media Placeholder too, due to Keynote idiosyncrasies about layer ordering. So, be careful not to drag-and-drop on the top right of the screen, where the sheen appears, as otherwise you might replace the sheen by mistake. If you do, simply undo and try again.
Creating demo movies
I create my app demo movies using a great Mac desktop app called Reflector. This app turns your Mac into an AirPlay receiver (like an Apple TV), and only costs $13.
To create an app demo video with Reflector, first make sure that your Mac and your iOS device are on the same, fast wireless network. Launch Reflector on your Mac. Then, double-tap the iOS device’s Home button to bring up the App Switcher, and swipe from left to right to view the media controls. (On an iPhone or iPod touch, you’ll need to swipe twice, as the AirPlay controls are on a second screen off to the left of the main media controls.)
If everything is set up correctly, you should see an AirPlay button in the media controls area. Tap this button, select your computer’s name (mine is called Dormouse), and then turn on Mirroring. All being well, you should see your iOS device’s screen appear in a Reflector window on your Mac’s desktop.
Get your app set up and ready for the demo, and then in Reflector, select ‘Device > Start Recording’ (cmd-R). When you’re done with your demo, select ‘Device > Stop Recording’ (also cmd-R), and save the movie file to disk (but don’t include the device’s frame in the recording). You can now drag this movie onto a template slide as described above, and tweak its start and end points in Keynote.
App icon slide template
There’s a bonus extra slide in the template, for app icons. This also uses a Media Placeholder, and will crop any icons you drop onto it so that they have the standard rounded-rectangle curved corners. So, you can drop an uncropped square icon (e.g. the 1024px by 1024px uncropped icon you upload to iTunes Connect) onto this slide’s placeholder, and it’ll do the rest.
Note: The Keynote theme uses Gill Sans as its default font. My own slides use Myriad Pro Semibold (the font Apple uses in presentations), but this isn’t installed by default on Mac OS X, so I’ve used Gill Sans for this template.
Final note: You’re welcome to use this template for any purpose, commercial or otherwise, and adapt it for your own use. However, please don’t distribute it through any channels other than via a direct link to this article (rather than directly to the template), so that I can keep it up to date as new devices are released. Thanks!
If you’ve found this template useful, you can find me at @daveaddey on Twitter, where I post regularly about all things app-related.