Select a language

Shutterstock Blog Shutterstock Blog

Thinking Inside the Box : An iPad & iPhone Icon Tutorial

© Cienpies Design/Shutterstock


By Byron Hudson

If you work in digital

design, you already know that establishing a successful web presence means reaching people on Apple mobile devices, and a critical element of that is having an eye-catching Apple iOS icon.


As web viewing shifts more and more from PCs to handheld units, the main way people are are getting to content is by clicking those little square icons that fill up the homescreens of iPhones and iPads the world over. Everyone with a website or blog is learning what app developers have long known: for millions of users, the iPhone and iPad icon is your public face. Like the picture we put up alongside an online dating profile, if it's unattractive we won't be getting many clicks.

iPad and iPhone icons are also increasingly the way people bookmark websites. (Read more about it here.) If you don't provide one of these images, a screenshot of your homepage will be used by default, and nobody wants to give up precious home screen real estate for that. People really do care how their homescreens look, especially iPhone users who tend to be a more fashionable lot. Why not give them something nice? Do it for the fans.

So let's not put this off any longer... Let's make an icon.

Four Frequently Asked Questions About iPad and iPhone Icons

1. Does it have to be a square with rounded corners?

YES. One of the things we love about Apple is their cool interface design, and some small degree of standardization is the price we pay for it. That said, the only real limitation we're facing is that our artwork must fit inside a square. That is because our icon will be resized and reformatted automatically to fit into various parts of the Apple interface which uses squares. (For a run-down on this, visit Apple's Human Interface Guidelines site.)

2. Does my iPad and iPhone icon have to have that glossy highlight on it?

NO. If you want to create your own lighting effects or prefer a flatter look for a particular icon, you can tell Apple not to apply the gloss, which leads us to...

3. How do I post it on my site?

Simply place a 1024x1024 pixel image file in the root directory of your website named either 'apple-touch-icon.png' (if you want the gloss) or 'apple-touch-icon-precomposed.png' (if you do not) – easy! Apple devices will look for this file and import it automatically. If you want to apply different icons to different pages or vary the design for the many different sizes in which it will be displayed, you can do that, too. For those who want a little more control, the various options are covered here.

4. How should I approach the design?

Choose a color palette and imagery that are consistent with the site to which the user is directed upon clicking your icon. There is nothing more jarring for a user (or more likely to increase your bounce rate) than making someone think they have ended up in the wrong place. So make sure there is some stylistic connection between icon and landing page. A cute puppy on a pink background might not be the best choice of icons for a black and red website for a mixed martial arts gym with photos of guys kicking each other on its homepage - even if that puppy is your dojo's mascot.

Want to find a template? There are many beautifully rendered icon backgrounds available in Shutterstock's library. If you are pressed for time you could just pop a logo onto one of these backgrounds. Here, we've gone with a nice set by Kolopach.

shutterstock_93586144

shutterstock_93586144

© 

Kolopach

/Shutterstock

Advice for Designing iOS Icons

Keep it simple. Remember, the icon will be resized, so even though it needs to be beautifully rendered at larger scales, it also needs to be legible at smaller ones. For instance, a cloud reader app icon should probably have a cloud on it. A tire store site should probably use a picture of a tire. An icon is like the sign a business puts out by the road to catch the eye of people driving by. It must communicate its intention in an istant. A big, iconic image that describes your site or app is always the best way to go.

Avoid text. While a single letter or a few initials can work, these icons will be scaled down to as small as 29x29 pixels for Spotlight searches. Also, Apple will display the title of your site or app with system text under the icon anyway, so don't feel you need to put text into the icon.

Use a well-rendered illustration rather than a photo whenever possible. Simply cropping a photo rarely works well for these icons. For inspiration, check out this excellent gallery of icons: You will see that many of these, while perhaps based on photographic assets, have been reworked to look like illustrations. The majority, however, actually are original art made from scratch.

Step by Step: From Vector to Icon

Not a professional illustrator? No worries – Shutterstock has tons of great resources. Include the term "vector illustration" in your search, and see what comes up. For instance, a search for "soccer ball vector illustration" yielded this image, from B Stofko:

shutterstock_65228851

shutterstock_65228851

© 

B Stofko

/Shutterstock

You could take a ball, place it on a background that evokes a court or athletic field, add a drop shadow, and frame it with one of those prefab icon backgrounds.

soccer1

soccer1

VIOLA!

soccerball

soccerball

From Photo to Icon

If, for some reason, you must use a photo, consider applying filters and effects so it will look more like an illustration.

A quick tutorial:

For this, we will use the icon background file above (Shutterstock Image ID: 93586144), a photo of a foot on a soccer ball (Shutterstock Image ID: 38232166), and an illustration of a soccer field (Shutterstock Image ID: 63555124).

1. In Photoshop, start by cutting your subject out of the background.

2. Adust the Shadows/Highlights to make the lighting less naturalistic and more idealized.

3. Reduce the level of detail with the Reduce Noise filter.

foot1b

foot1b

4. Use the burn tool to accentuate the contours.

5. Make a selection from the subject, and on a new layer behind it, apply a black outline.

foot2b

foot2b

6. Lock the layer and paint different colors along the outline it appears too dark.

foot3b

foot3b

7. Bring in an illustrated background image.

foot4b

foot4b

8. Move over to Adobe Illustrator and paste in the Photoshop image. Select the shape that defines the interior and use it to mask the imported image.

VIOLA!

footiconb

footiconb

Remember to output your image at 1024x1024 pixels. It used to be 512x512, but with the introduction of Apple's Retina display, they have raised the bar for screen resolution.

That's it. Now you are fully compatible with the Apple iOS.

At least until the new iPhone comes out.

Extra Credit

You can create a special prompt asking iPhone and iPad-using visitors to your site if they'd like to add your icon to their home screen.

Check out this handy script from cubiq.org which places a floating balloon near the bookmark button when folks visit your site, inviting them to add your icon.

Comments