Looking around the web you’ve probably noticed that great images can make the difference between an amateurish website and a professionally crafted one. The same goes for iOS apps. In both cases, image quality never makes up for bad design and usability, but carefully created images can really add polish.
A problem is that high-end graphic design tools like Adobe Illustrator, Corel Draw and Adobe Photoshop are priced at the full-time professional market. Frankly, with that sort of budget you’d be better off getting a graphic designer on board. But what if you have more modest expectations of your app? Do you have to live with blurry artwork or pre-created icon sets?
No, is the answer! With a little practice and a little know-how, you can create artwork for your apps that will give it a real lift. You’ll still want to enlist the help of a graphic designer for a major project but there are some simple things you can do for yourself.
Inkscape is a vector-drawing program and covers the same sort of area as Adobe Illustrator and Corel Draw. It allows you to create shapes, apply gradients, add text and work with layers. As such it is ideal for creating artwork from scratch.
Gimp is an image editing tool, similar to Adobe Photoshop. It’s not an ideal tool for creating artwork but is great for working with existing images — resizing, cropping, improving brightness and contrast, etc.
Tab Bar Icon Example
Lets look at a simple example of how I used Inkscape to produce a simple tab bar icon for settings within an app. This is not a detailed Inkscape tutorial, just a flavour of what can be achieved in five minutes.
A tab bar icon in iOS has to be quite simple. iOS renders the highlight and applies any tint that is configured. The tinted part of the icon must be plain colour (any colour apart from clear), with the background transparent. Semi-transparent areas are somewhere in between. A tab bar icon is basically a negative image.
Starting with a new Inkscape document, I set the page size to 512×512 and assigned a grid to help me draw. I drew a circle, turned off the stroke (the line round the edge) and filled with black:
Then I drew a smaller circle inside the first, selected both and took the difference (Path > Difference) between them to get a circle with a hole. I need a clear background to make the hole; a white circle is no good. A rectangle was added at the top to form the first tooth. Clicking on the rectangle twice produces a little crosshair cursor in the middle, which is the rotation point. I moved this to the centre of my gear:
I cloned the tooth (with Alt-D) and rotated it about that crosshair by 45 degrees (Object > Transform). I kept repeating until I had eight teeth. At that point I decided I’d made the first tooth too fat, but that’s no problem. Because the teeth are clones of the original, I slimmed down the first one and they all changed:
After selecting all the objects and resizing a little, I was ready to export as a PNG file for iOS.
Icon Sizes and Retina Displays
You should consult Apple’s Human Interface Guidelines for icon sizes. The size to use for a tab bar icon is 30x30px. For a retina display though, we need twice the resolution. This is easily done by making a 60x60px icon with ”@2x” appended to the name. So I created ”gear-icon.png” and ”firstname.lastname@example.org”.
Testing the Icon
I created a new project in Xcode using the tab bar template, added the icons to the project and configured one of the images for the tab bar as gear-icon.png. The ”@2x” version for the retina display is used automatically for a retina device.
Here’s the result on the iPhone 5 simulator:
Looks good to me!
So in no more than five minutes, I made a hi-res settings icon for my app. It won’t win any awards for graphic design but it’s still a perfectly good settings icon. Next time you need an icon for a tab bar, rather than jumping straight to Google and searching for a pre-created icon set, why not try and create one yourself?
You can learn more about creating tab bar applications on Learning Tree’s iPhone® and iPad® Programming: A Comprehensive Hands-On Introduction course. (We don’t cover Inkscape but if I’m teaching, catch me at break time!)