You’re reading all articles tagged 'ipad'
Found in the woods
So far with my iPad Pro + Pencil, I’ve been working mainly in vectors. Adobe Draw is a fantastic app for this hardware and it means I can create resizable artwork. I do a lot of ‘pencil sketching’ in Adobe Sketch but so far no actual bitmap painting, so it was high time I had a go with Procreate. Taking an iPhone snap I took on a dog walk over the Christmas break, I sampled colours from the photo to create the missing parts of a large woodland creature that the original image (below) hinted at…
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…
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”.
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.
- iOS7 Design Cheat Sheet - a very comprehensive reference of all new sizes (I haven’t had time to update The Icon Handbook reference yet!)
- New Metrics for iOS7 App Icons - Great tips on App Name length which is more of an issue in iOS7
- Marc Edwards PSD Templates
- Sketchmine Sketch.app Templates
- iOS6 and 7 visual comparison
Hicksdesign recently created a new application icon for PlanGrid, an iPad app for storing and viewing blueprints for the construction industry. Even though blueprints aren’t actually blue these days, its such a familiar piece of imagery that it couldn’t be ignored as a metaphor.
The final design followed the original quite closely (see right), retaining the simple image of a white pictogram on a blueprint background. Instead of the magnifying glass, a stylised version of the loupe was used instead, and construction lines and folded paper effects were added on.
A variety of options were explored, using various magnifying devices and architectural symbols. Here are the vector sketches:
As well as trying out a characterisation of their software, known as ‘GridBot’:
The idea that was most liked however, was the loupe:
The hatched version lost too much impact at smaller sizes, so in the end, the solid version won. xScope mirror was then used to help preview the artwork on devices as I worked. This was particularly useful for getting the stroke weights correct on retina displays, and for testing colour. The blue needed to be much more saturated on iOS than on my desktop screen.
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!
App, app and away!
I’ve finally submitted my first iOS app to the iTunes App Store! A joint project with Simon Whitaker of Goo Software, the title on the top of the window might hint as to what the app is about. If the app gets approved (don’t know of any reason why it won’t but you never know) there’ll be a detailed post to come…
LiveView for iPhone and iPad
If you’re designing anything that’ll be viewed on either the iPhone or iPad, you’re going to find LiveView a godsend. It’s been out a couple of years, but I only discovered it this week.
It comes in two parts – a Screencaster app for your Mac, and a companion app for the iPhone/iPad. As you work on the graphics, you can view it live on the device. An essential, and free tool. I shot a quick video on my iPhone to show how it works:
So far, it only seems to be lacking an option top use it in landscape mode.