Make a better app video: Show off gestures with hand shadows

For gesture-centric apps, it can be difficult to quickly and easily show how to perform specific gestures. Two handed gestures, like Loose Leaf’s ruler gesture, can be particularly difficult to describe. As I was making tutorial content for Loose Leaf, I quickly realized that showing dots for touch locations just isn’t enough.

Importantly, the shadows actually animate to match your hand – notice the pinch gesture above actually animates the pinch shadow slightly. Also in the code is a two finger ‘peace sign’ shadow, perfect for a two finger pan. And also a single finger shadow for taps and single finger pan.

All of the code for the shadows is open sourced and available at

In order to create realistic shadows, I needed to start with professional quality hand silhouettes – I purchased and used this file for the initial shadow shapes, and then worked to make then easily animatable. It’s within the license for me to distribute this derivative work free of charge, but if it makes your inner-lawyer nervous you can always buy your own copy for $1.

How it works

For the curious, here’s how I was able to make this work. First, i downloaded the shadow file as an .eps file, and I then converted that file into an svg using this site. Next, I imported that svg file into PaintCode, which made it easy to export any of those hand paths as UIBezierPath code.

The interesting bit of code was interpolating between two different paths during the gesture, so that the wide open pinch could smoothly deform into the closed pinch. To do that, I edited the paths so that they both contained the same number of points.

Once the paths have the point count, interpolating is easy – use a smoothing number between 0 and 1, and calculate a weighted average of the two point locations – that’s it!

The rest of the code helps display those paths on screen, manage multiple shadows on screen at a time, etc.


Grab the code here! If you found this helpful, shares and tweets are always appreciated, and of course, support your local indie dev and check out Loose Leaf!

The Give and Take of New Features: WWDC ’15

Every WWDC brings unexpected changes, and this year is no different. While I’m excited about many of the new announcements this year, I quickly realized that one of my favorite Loose Leaf features will breath its last with the launch of iOS 9 later this month: swipe from the edge to turn the page.

Up through iOS 8, you can quickly peek through pages by swiping two fingers from the left or right edge of the screen. In iOS 9 however, that same swipe from the edge will bring up the new split-screen multi-tasking view instead! I can’t even count the weeks I spent developing and testing that custom bezel-gesture, so it’s particularly sad for me to see it go. Even more – I’m discouraged that custom bezel-gestures are entirely out-of-scope for app developers from here on out – iOS system gestures now cover the top/bottom/left/right bezels.

There are plenty of my fellow note/sketch apps in the store who’ve also lost their page-turn gestures, so now the rush is on to fill in the new gaps in our UI. Luckily there’s plenty of other gestures in Loose Leaf to switch between pages – pinching to list view or simply turning the pages with two fingers, but the peek is gone, and I’ll miss it.

An Open Source Guide for Launching Your Indie App

Since launching Loose Leaf 5 months ago, I’ve learned a lot about how to get an app in front of its target audience, and everything I’ve learned would’ve been exponentially more powerful if I’d known it pre-launch instead of post-launch. That’s exactly why I’ve written and open sourced the App Launch Guide for indie devs.

This guide is perfect for developers who’ll be working on both the marketing and development of their apps, with the goal of helping make sure nothing is missed in the run up to launch. And while I’ve learned a lot about marketing, I certainly don’t know everything, so I’ve opened this guide into the public domain and posted to Github so that the indie dev community can iterate on this foundation for a more organized launch plan for all of us.

This guide goes through:

  1. List of valuable resources and books
  2. Narrowing all your app ideas into The One
  3. Validating the idea by finding initial interested audience
  4. Choosing a revenue model for the app
  5. Defining a Minimum Viable Product
  6. Align marketing milestones with development milestones

Nearly every item in this guide has been written about at length elsewhere – the real purpose of this guide is to bring all of these ideas together into a single timeline. It’s very easy to start tangible product development much earlier than the less tangible marketing plan. This guide helps align the marketing timeline with the development timeline, so that you’re only spending valuable development time after proving traction with your audience.

Read and contribute to the App Launch Guide on Github.

Google Author link
Page 5 of 51« First...34567...102030...Last »