Hicks

You’re reading all articles on The Hickensian tagged 'ios'

Raise your Handbag!

Have you ever read a snide, bumptious or haughty message and wished you could reply with a raised handbag and a high-pitched mocking call of “ooOOooh!”?

First there was the site ooOO.eu, and now you can retort in iMessage with this handy sticker pack! Choose from twenty one styles of bag: from traditional to designer as well as more esoteric types (such as a cyclists’ musette). Press and hold to lift off and layer stickers – add an “ooOOH!” speech balloon on top or combine bags for more power! For the best effect, place on top of a selfie!

Ever since Apple announced sticker functionality for Messages I’ve wanted to have a go at making a small pack. I experimented with some different illustration styles, and in the end I preferred the looser, hand drawn approach, created in Adobe Draw on the iPad Pro & Pencil.

The process of combining them in xCode was straightforward, but thereafter, getting the app onto iTunes Connect was rather painful. A steep learning curve for someone like me, but I got there in the end.

Handbags! is a free sticker pack, now available from Sticker Store.

App Icon changes in iOS7

The latest version of iOS, the ‘kinda funny lookin’ iOS7  is almost upon us, and if you haven’t already started working on it, here’s an overview of the changes…

Sizes

First of all, the Application Icons are now slightly larger: 

  • iPhone: 120px (retina)
  • iPad: 76px (iPad 2/iPad Mini) and 152px (iPad 3)

As iOS7 only works on retina iPhones, you don’t need to supply a 60px version, just a 57px one for apps that will also run on iOS6 or earlier.

The corner radius has changed too – where previously it was based on the original iPhone non-retina icon (10px on the 57px icon) its now a mystery. Mani have a really in-depth investigation to discover the formula for the new radius, but my personal advice is not to worry about it. Make sure you don’t have any design element around the edge, such as a border, that relies on it. Just place a mask on a layer above to give you the rough idea, and carry on supplying your icons with square corners. 

Style, or the lack of it

There’s been a lot of talk about Grids and Golden Ratios – my advice is to not to worry about these too. By all means use the grid as a starting point, but don’t feel bound by it.

Apple’s new iconset is inconsistent, and ranges from the basic (Calendar) to shockingly immature (Game Center). I didn’t pass any comment when iOS7 was first announced as I believed that the designs would take evolve and mature. They haven’t though. When I compare it to my Windows 8 phone, with its clear, bold and consistent icon style, I just sigh.

Sorry, this isn’t meant to be a rant! Safe to say, I’m “not a fan”.

Goodbye Gloss

Finally, ‘prerendered’ no longer exists as an option – iOS7 has removed the gloss overlay for all icons, so if this was something you wanted in your design, you will need to add it to your artwork. 

Resources

Things 2

I know that there are plenty of other task manager apps out there, free ones even, that have had cloud syncing for a while now. I’ve tried them all, but nothing works as well for me as Things,and now Things 2 finally has proper syncing. Not too minimal, not heavily laden with features, just the right amount of functionality to manage tasks, without spending managing the task-manager.

Well done Cultured Code, it was worth the wait!

Updated iOS Application Icon Ai Template

Sorry its taken a while to get around to this, but I’ve finally updated the iOS Application Icon Template for Illustrator to include the new Retina sizes for iPad 3:

Part of the delay was me trying to include all the document icon sizes as well, but these were more complicated, and I’ll do a seperate template for these when I can. The update includes the whopping 1024px size required for the App Store on iPad 3.

I’ve not updated the guides and masks layer to use the super-accurate corner radius. As before, treat this layer just for preview, and hide it before exporting to PNGs. Your exported file should have sharp, not rounded, corners. I recommend using Matthew Ericson’s export script to export the artboards to PNGs. The artboards are labelled following the Apple guidelines, so as long as you don’t add a prefix or suffix, the filename should be right!

⬇ Download the Template

There shouldn’t be any catastrophic errors, but if you notice anything odd, please let me know!

iOS icon corner radii

When designing app icons for iOS it’s useful to know the corner radius for each size to preview it correctly – even though the exported png needs to have sharp corners. This is why I include the radius size on the Icon Reference Chart and a mask layer on the OS Illustrator Template.

Screenshot of the iOS4 template

These sizes are rounded up to the nearest pixel though, and when David Barnard of AppCubby consulted Louie Mantia (former Apple, Square, and Iconfactory designer) he found the true sizes

Apple starts with the 57px icon and a radius of 10 then scales up or down from there. Thus you can calculate the radius for any icon size using 10/57 x new size (for example 10/57 × 114 gives 20, which is the proper radius for a 114px icon). Here is a list of the most commonly used icons, proper naming conventions, pixel dimensions, and corner radii.

This means that the correct radius measurements are as follows:

Icon512.png 512px 89.825
Icon.png 57px – 10
Icon@2x.png 114px 20
Icon-72.png 72px 12.632
Icon-72@2x.png 144px 25.263
Icon-Small.png 29px 5.088
Icon-Small@2x.png 58px 10.175

If your design doesn’t have any visual elements that follow or echo the corner radius, then you can safely ignore these measurements, and I would normally do just that. Occasionally though, you may find that the right solution requires it, and therefore the more accurate may be useful. Icons like Camera Genius use the corner radius as part of the design:

Obviously, at a pixel level, the difference really is minute, but may be just enough to make it feel as if it’s not sitting right:

Compare the 2 corners in this image, and you can see that it is different. I created this in Illustrator, which does allow you to use radii with a decimal point – your mileage in other apps may vary. For now I’m not sure if adding these to the Icon Handbooks iOS Reference Chart is over-complicating matters – I’d love to know your thoughts via Twitter!

Zippity

My friend Simon at Goo Software recently needed to open a zip file on his iPhone, view it contents and send one of the files to someone else. A simple task you would think, but upon finding that there were no decent solutions available on the App Store, he did what any self-respecting iOS developer would do – made one himself!

The result is Zippity, the easiest way to handle zip files on your iPhone!
Preview contents, send via email, open in other apps on your iPhone. For a mere 69p it also supports .tar, .tar.gz, .gz as well as .zip.

Buy Zippity on the App Store