PowerPinch: Hacking an iPad presentation
Sick of endless PowerPoint slides? If you want to take your presentation to the next level, and you know basic HTML, you can hack together a presentation on an iPad that lets you interact with your content like never before. I call it "PowerPinch" because you can pinch, swipe and zoom seamlessly with your presentation, and focus in on the content you're talking about, then zoom out quickly and move on to the next thing. It's seriously liberating.
First, some caveats: Creating a presentation like this takes more work than throwing a PowerPoint together. (I'd also argue that the output is obviously better than PowerPoint too). But if you just need to throw some messaging together, or if your pitch is still in a mode where it's iterating quickly, I'd suggest you get a flow down with PowerPoint first, and then move it to PowerPinch. You'll also need to be able to work within a photo editing program -- I use PhotoShop -- to put the pitch together.
Ready to have at it? First, here's a video showing what a PowerPinch presentation looks like:
The first step is to make what I call Image Tiles that form each "slide." Assuming you'll be using an iPad for this, you want to oversize the tile resolution so you can zoom in on the tile on the iPad. The iPad's resolution is 1024 pixels wide by 768 pixels tall. I made each image tile 1859 pixels wide by 1347 pixels tall. To the right is what one of my image tiles looks like that I used in the video above.
I create the image tile in PhotoShop as a .psd and then save it as a .png. You want to keep the .pngs at 1 megabyte or smaller, or the presentation will get unruly as you add image tiles.
I save the .png to my public dropbox folder. That way, whenever I update the .png, the hosted file is also automatically updated. So, for example, this is the URL of the Image Tile at right: http://dl.dropbox.com/u/1096184/pitch/main/00070_hor_soc_overview.png . And the next Image Tile URL is http://dl.dropbox.com/u/1096184/pitch/main/00080_hor_soc_overview_soon.png. (If you don't know what Dropbox is, that's outside the scope of this blog, but I highly encourage you to read my blog on playing a computer like an instrument, that talks about Dropbox and how it works, along with other lifehacker productivity tools.)
You'll also notice that the Image Tiles are named with numbers at the beginning. For example, the first one is 00070_hor_soc_overview.png and the next one is 00080_hor_soc_overview_soon.png. More on the reason for that later.
Once you have a few Image Tiles created, you'll want to string them together with a simple HTML file. You can find and view source on the full, finished HTML file that I load onto the iPad by clicking here. You'll notice that I put a spacer .png file between each Image Tile to give them some spacing. A screenshot of the code is at left.
Next, just open the web page you just coded on your iPad using Safari, and choose "Add to Home Screen." Doing this allows you to make the PowerPinch presentation look like an "app" and keeps the Safari URL bar from showing on the screen.
That's all there is to it. You'll be rocking PowerPinch presentations in no time.
Here are a few other things you'll need to know:
You'll want to pick up either a VGA iPad connector or an HDMI iPad connector so you can output your iPad on a big screen. I went all out and connected mine to a 10 foot VGA extension cable, since many board rooms have short cables, and I really like to be able to walk around with iPad in hand while I'm presenting.
Also, the reason I name my Image Tiles with numbers in front of the file name is so they're easy to print when you want to compile them into a PDF to email out. Here's the process to turn your PowerPinch presentation into a PDF on a Mac:
- Highlight the Image Tiles you want to print, choose "open with" and select Preview.
- This will open all your Image Tiles in the correct order.
- Then choose "print" and either Save as PDF, or if you have PDFpen, choose Open with PDFpen.
- Then you can edit the PDF to taste (remove pages, rearrange, etc) and mail it off.
- For advanced users, I recommend you make a Quartz Filter to reduce the file size (if you want to know how to do this, just leave a comment below).
I'm sure there are ways to optimize this process; please let me know what you figure out!Here are a few other presentations I've done using PowerPinch: