Tickets goes retina

Tickets, our iPad app for accessing your Lighthouse projects, has just gotten the retina makeover with its 1.3 release.

For those of you unfamiliar with Tickets and/or Lighthouse, here’s the quick recap. Lighthouse is a website where you can track bugs etc. with your software projects, set milestones etc. We use it for all our projects at Digital Flapjack. The only thing that was missing for us was a nice way to access our bug lists from our iPad, which is why we made Tickets. Tickets is a simple and pretty iPad app that fronts onto Lighthouse and makes it easy to access the latest information about all your projects wherever you are.

This release is basically the new iPad retina display update, meaning Tickets now takes advantage of all those lovely extra pixels on the new iPad if you’re fortunate enough to have one. If you have Tickets already, it’ll appear as a free update next time you look at the App Store on your iPad, and if not, what are you waiting for, go buy it now - it’s by far the most beautiful way to keep track of your development projects on your iPad.

Some inside info on going retina

For your education and entertainment, I thought I’d share with you some notes on what we went through to make Tickets retina ready. As those of you have used Tickets will know, Tickets represents everything very graphically, following Apple’s lead with skeuomorphic iPad apps.

Thankfully for us, most of this drawing was already vector based, so most of the in app drawing was retina ready from the day the new iPad shipped. The outline of the tickets, the detailing on the edit popup and so forth are all vector based, and just worked with the new display, looking lovely from the get go.

Most things in Tickets have a subtle texture to them, and in fact this looked fine when stretched, although we did provide retina textures in this release, just because we’re perfectionists like that :) Though in doing so we did hit a slight oversight in the standard iOS way of doing things like this.

Clearly textures are just images that are tiled to fill a given area, and as such, it doesn’t make sense to provide a texture image that’s twice the size of the original texture. However, without help, the iPad doesn’t know you’re trying to texture with a given bitmap, so we ended up duplicating each texture and giving it the magic @2x filename. A bit of a hack, but it’s little effort; however it’d be nice if at some point there was a way to express that given image can be used for both regular and retina display, if only to save on app download size.

However, the main place where it was obvious Tickets hadn’t been designed with retina in mind was with the buttons and icons in the app. And here we have an confession to make. The easiest way to get nice large icons for the iPad before the new one was to take icons designed for the retina iPhone, and use them at native resolution on the iPad. We’ve always been a big fan of the Glyphish icon set (as are many other apps, and for good reason), so we used a bunch of the @2x icons from there and used them.

This of course presented a problem when we came to do the retina iPad version - there was no handy @4x iPhone icons for us to use as the @2x icons for the iPad. This left us in a quandary - how to scale these icons for the retina iPad? Glyphish does ship with the Adobe Illustrator files for the icons, but we tend to do most our design work purely in Adobe Photoshop, so we don’t keep a license for Illustrator around. This meant we couldn’t easily scale the icons ourselves. We could ask a designer to try and scale them up, but it seemed if we were going to do that, we should just get a full new icon set done anyway.

Before doing that, we had a look around for alternative icon sets that we could scale, and we came across the very nice iconSweets 2 set. It’s not quite as comprehensive as Glyphish, but it has some fabulous icons in there, and best still for us, they come with Photoshop vector format images, so we can scale them as we see fit. It was a simple task then to find a similar group of icons to those we used in Glyphish and switch them for ones from iconSweets 2.

So, if you wondered why some of the icon styles had changed slightly in the retina release of Tickets, now you know :)

Overall though, updating Tickets to take advantage of the new iPad’s retina display was fairly painless, despite it being a very graphical application. It goes to show that although using vector based drawing takes more time initially, updating the design later is a much simpler process.