Matt Gemmell

TOLL is available now!

An action-thriller novel — book 2 in the KESTREL series.

★★★★★ — Amazon

iPhoto iPad tooltips PSD

design, ui & photoshop 1 min read

Amidst a cornucopia of questionable interface and interaction choices which render the application almost unprecedentedly intimidating for new users, Apple’s iPhoto for iOS features a help overlay with gold tooltip-like bubbles.

It looks like this:

iPhoto help overlay on iPad

iPhoto help overlay on iPad

Here’s a close-up of one of the help balloons:

iPhoto (iPad) tooltip screenshot

iPhoto iPad tooltip close-up

Since Apple’s designs tend to heavily influence third-party apps (just as their hardware tends to be copied wholesale by Samsung and HP), I thought that the tooltip might be a handy element to have around. I recreated it in Photoshop, and it looks like this:

iOS tooltip in Photoshop

iOS tooltip in Photoshop

It’s a fully vector-based element, and the PSD is sensibly layered, named and grouped according to the principles of good Photoshop hygiene.

I made a few tweaks to the appearance of the tooltip compared to iPhoto’s version, most notably changing the font to Helvetica Neue (the actual font in iPhoto’s tooltips is Tally Text Bold 1, which is a commercial font available for $20).

You can download the PSD here. It was created in Photoshop CS6, but should work in moderately-recent older CS versions too. I’m not making it available in any other formats (such as, but not limited to, Pixelmator etc), but you’re welcome to do that yourself.

I hope you’ll find it useful in your designs and apps.

To keep up to date with new articles here on the blog, you should follow me (@mattgemmell) on Twitter.