Android Icon Guidelines Draft0309

24
1 / 17 icon guidelines version 1.0, cupcake release DRAFT-UPDATED 03/09

description

How to make icons for Android.

Transcript of Android Icon Guidelines Draft0309

Page 1: Android Icon Guidelines Draft0309

1 / 17

icon guidelinesversion 1.0, cupcake release

DRAFT-UPDATED 03/09

Page 2: Android Icon Guidelines Draft0309

2 / 24android icon guideline version 1.0, cupcake release

contents & introduction

introductionCreating a unified look and feel throughout a user interface adds value to the product. Streamlining the graphic style will also make the UI seem more professional to the user.

With these icon guidelines, we show you how to create icons for various parts of your application’s user interface that fit the style that has been set. Following the guidelines will help you to create a polished and unified experience for the user.

1 icon types1.1 launcher1.2 menu1.3 status bar1.4 tab1.5 dialog1.6 list view

2 tips2.1 do’s and dont’s

3 icon appendix 3.1 launcher icons3.2 menu icons3.3 status bar icons

Page 3: Android Icon Guidelines Draft0309

3 / 17

1. icon types

Page 4: Android Icon Guidelines Draft0309

4 / 24android icon guideline version 1.0, cupcake release

1. icon types1.1 launcher icon: structure

A launcher icon is the graphic that represents your application on an Android device’s homescreen. It is a simplified 3D icon with a fixed perspective. The required perspective is shown in figure 1.

The base of a launcher icon can either face the top view or the front view.

The majority of a launcher icon’s surface should be created using the color palette described on page 5. To add emphasis, use one or more bright accent colors to highlight specific characteristics.

All launcher icons must be created with rounded corners to make them look friendly and simple—as in figure 2.

All dimensions specified on this page are based on a 250x250 px artboard size in a vector graphics editor like Adobe Illustrator, where the icon fits within the artboard boundaries.

Final art must be scaled down and exported as a transparent 48x48 px PNG file using a raster image editor such as Adobe Photoshop.

Templates for creating launcher icons in Adobe Illustrator and Photoshop are available in the Android icon template pack.

Figure 1, perspective angles1. 92° 7. 64°2. 92° 8. 97°3. 173° 9. 75°4. 171° 10. 93°5. 49° 11. 169°6. 171°

Note: 90° would be a perfectlyvertical line.

Figure 2.

16 px16 px

Page 5: Android Icon Guidelines Draft0309

5 / 24android icon guideline version 1.0, cupcake release

1. icon types1.1 launcher icon: details

light, effects, & shadows

1

2

3

4

5

67°

step by stepCreate the basic shapes with a tool like Adobe Illustrator, using the angles described on page 4. The shapes and effects must fit within a 250x250 px artboard.

1.

2. Add depth to shapes by extruding them, and create the rounded corners as described on page 4.

3. Add details and colors. Gradients should be treated as if there is a light source placed slightly to the left in front of the icon.

4. Create the shadows with the correct angle and blur effect.

5. Import the icon to a tool like Adobe Photoshop and scale to fit a image size of 48x48 px on a transparent background.

6. Export the icon at 48x48 as a PNG file with transparency enabled.

1. Edge highlight: white2. Icon shadow: black | 20px blur

50% opacity | angle 67° 3. Front part: Use light gradient from

color palette4. Detail shadow: black |10px blur

75% opacity5. Side part: Use medium gradient from

color palette

A light source is placed slightly to the left in front of the icon, and therefore the shadow expands to the right and back.

color palette

Whiter 0 | g 0 | b 0

Used for highlights on edged.

Blackr 255 | g 255 | b 255

Used as base color in shadows.

Light gradient1 r 0 | g 0 | b 02 r 217 | g 217 | b 217

Used on the front (lit) part of the icon.

Medium gradient1 r 190 | g 190 | b 1902 r 115 | g 115 | b 115

Used on the side (shaded) part of the icon.

Dark gradient1 r 100 | g 100 | b 1002 r 25 | g 25 | b 25

Used on details and parts in the shade of the icon.

Launcher icons are simplified 3D icons using light and shadows for definition. The image below defines the lighting and shadows.

Page 6: Android Icon Guidelines Draft0309

6 / 24android icon guideline version 1.0, cupcake release

1. icon types1.2 menu icon: structure

Menu icons are graphical elements placed in the pop-up menu shown to users when they press the Menu button. They are drawn in a flat-front perspective. Elements in a menu icon must not be visualized in 3D or perspective.

In order to maintain consistency, all menu icons must use the same primary palette and the same effects (see page 7).

Menu icons should include rounded corners, but only when logically appropriate. For example, in figure 3 the logical place for rounded corners is the roof and not the rest of the building.

All dimensions specified on this page are based on a 48x48 px artboard size with a 6 px safeframe.

The menu icon effect (i.e. the outer glow)described on page 7 can overlap the 6 px safeframe, but only when necessary. The base shape must always stay inside the safeframe.

Final art must be exported as a transparent PNG file.

Templates for creating menu icons in Adobe Photoshop are available in the Android icon template pack.

2 px2 px

Figure 3.

6 px

6 px safeframe

48 px

48 px

Page 7: Android Icon Guidelines Draft0309

7 / 24android icon guideline version 1.0, cupcake release

1. icon types1.2 menu icon: details

step by stepCreate the basic shapes using a tool like Adobe Illustrator.

1.

2. Import the shape to a tool like Adobe Photoshop and scale to fit an image of 48x48 px on a transparent background. Mind the safeframe.

3. Add the effects seen as described in light, effects & shadows.

4. Export the icon at 48x48 as a PNG file with transparency enabled.

light, effects, & shadows

1. Front part: use fill gradient from primary color palette

2. Inner shadow: black | 20 % opacityangle 90° | distance 2pxsize 2px

3. Outer glow: white | 55% opacity spread 10% | size 3px

4. Inner bevel: depth 1% | direction down size 0px | angle 90°altitude 10°highlight white 70% opacityshadow black 25% opacity

1

2

3

4

color palette

Whiter 0 | g 0 | b 0

Used for outer glow and bevel highlight.

Blackr 255 | g 255 | b 255

Used for inner shadow and bevel shadow.

Fill gradient1 r 163 | g 163 | b 1632 r 120 | g 120 | b 120

Used as color fill.

Menu icons are flat and pictured face on. A slight deboss and some other effects, which are shown below, are used to create depth.

Page 8: Android Icon Guidelines Draft0309

8 / 24android icon guideline version 1.0, cupcake release

Status bar icons are used to represent notifications from your application in the status bar. Graphically, they are very similar to menu icons, but are smaller and higher in contrast.

Rounded corners must always be applied to the base shape and the details of a status bar icon as shown on page 9.

All dimensions specified on this page are based on a 25x25 px artboard size with a 2 px safeframe.

Status bar icons can overlap the safeframe to the left and right when necessary, but must not overlap the safeframe at the top and bottom.

Final art must be exported as a transparent PNG file.

Templates for creating status bar icons using Adobe Photoshop are available in the Android icon template pack.

25 px

25 px

Figure 4.

2 px

2 px

2 px safeframe (no overlap)

2 px safeframe (no overlap)

2 px

2 px

1. icon types1.3 status bar icon: structure

Page 9: Android Icon Guidelines Draft0309

9 / 24android icon guideline version 1.0, cupcake release

1. icon types1.3 status bar icon: details

step by stepIn a tool like Adobe Photoshop, create the base shape within a 25x25 px image on a transparent background. Mind the safeframe, and keep the upper and lower 2 pixels free.

1.

2. Add rounded corners as specified on page 8.

3. Add light, effects, and shadows as specified in the table at left.

4. Export the icon at 25x25 as a PNG file with transparency enabled.

light, effects, & shadows

1. Front part: fill gradient2. Inner bevel: depth 100% | direction down

size 0px | angle 90° | altitude 30°highlight white 75% opacityshadow black 75% opacity

3. Detail: white4. Disabled detail: grey gradient from palette

+ inner bevel: smooth | depth 1% | direction down | size 0px | angle 117° | altitude 42° | highlight white 70% | no shadow

Whiter 0 | g 0 | b 0

Used for details within the icons and bevel highlight.

Blackr 255 | g 255 | b 255

Used for bevel shadows.

Fill gradient1 r 105 | g 105 | b 1052 r 10 | g 10 | b 10

Used as color fill on the icons.

Grey gradient1 r 169 | g 169 | b 1692 r 126 | g 126 | b 126

Used for disabled details within the icon.

color paletteOnly status bar icons related to the phone function use full color; all other status bar icons should remain monochromatic.

Status bar icons are slightly debossed, high in contrast, and pictured face on to enhance clarity at small sizes.

1

2

3

4

Page 10: Android Icon Guidelines Draft0309

10 / 24android icon guideline version 1.0, cupcake release

1. icon types1.4 tab icon: structure

Tab icons are graphical elements used to represent individual tabs in a multi-tab interface. Each tab icon has two states: unselected and selected.

Unselected tab icons have the same fill gradient and effects as menu icons, but with no outer glow.

Selected tab icons look just like unselected tab icons, but with a fainter inner shadow, and have the same front part gradient as dialog icons.

Tab icons have a 1 px safeframe which should only be overlapped for the edge of the anti-alias of a round shape.

All dimensions specified on this page are based on a 32x32 px artboard size. We recommend using a 1 px padding around the bounding box inside the Photoshop template.

Final art must be exported as a 32x32 px transparent PNG file.

Templates for creating tab icons in Adobe Photoshop are available in the Android icon template pack.

Unselected

32 px

32 px

Selected

32 px

32 px

Page 11: Android Icon Guidelines Draft0309

11 / 24android icon guideline version 1.0, cupcake release

1. icon types1.4 unselected tab icon: details

lights, effects, & shadows

1 23

1. Front part: gradient overlay | angle 90° bottom color: r 223 | g 223 | b 223 top color: r 249 | g 249 | b 249 bottom color location: 0% top color location: 75%

2. Inner shadow: black | 10 % opacity | angle 90° distance 2px | size 2px

3. Inner bevel: depth 1% | direction down | size 0px | angle 90° | altitude 10° highlight white 70% opacity shadow black 25% opacity

These look just like the selected tab icons, but with a fainter inner shadow, and the same front part gradient as the dialog icons.

step by stepCreate the basic shapes using a tool like Adobe Illustrator.

1.

2. Import the shape to a tool like Adobe Photoshop and scale to fit an image of 32x32 px on a transparent background.

4. Export the icon at 32x32 as a PNG file with transparency enabled.

3. Add the effects seen in light, effects & shadows for the selected state filter.

Page 12: Android Icon Guidelines Draft0309

12 / 24android icon guideline version 1.0, cupcake release

1. icon types1.4 selected tab icon: details

lights, effects, & shadows

1 23

color palette

Fill gradient1 r 163 | g 163 | b 1632 r 120 | g 120 | b 120

Used as color fill on unselected tab icons.

step by stepCreate the basic shape using a tool like Adobe Illustrator.

1.

4. Export the icon at 32x32 as a PNG file with transparency enabled.

2. Import the shape into a tool like Adobe Photoshop and scale to fit an 32x32 px artboard with a transparent background.

3. Add the effects seen in light, effects & shadows for the selected state filter.

1. Front part: Use fill gradient from color palette

2. Inner shadow: black | 20 % opacity | angle 90° | distance 2px | size 2px

3. Inner bevel: depth 1% | direction down | size 0px | angle 90° | altitude 10°highlight white 70% opacityshadow black 25% opacity

The selected tab icons have the same fill gradient and effects as the menu icon, but with no outer glow.

Page 13: Android Icon Guidelines Draft0309

13 / 24android icon guideline version 1.0, cupcake release

1. icon types1.5 dialog icon: structure

Dialog icons are shown in pop-up dialog boxes that prompt the user for interaction. They use a light gradient and inner shadow in order to stand out against a dark background.

Dialog icons have a 1 px safeframe. The base shape must fit within the safeframe, but the anti-alias of a round shape can overlap the safeframe.

All dimensions specified on this page are based on a 32x32 px artboard size in Adobe Photoshop. A 1 px padding around the bounding box inside the Photoshop template.

Final art must be exported as a transparent PNG file using Photoshop.

Templates for creating tab icons in Adobe Photoshop are available in the Android icon template pack.

32 px

32 px

Page 14: Android Icon Guidelines Draft0309

14 / 24android icon guideline version 1.0, cupcake release

1. icon types1.5 dialog icon: details

lights, shadows, & effects

1

2

Dialog icons are flat and pictured face on. In order to stand out against a dark background, they are built up using a light gradient and inner shadow.

1. Front part: gradient overlay | angle 90°bottom: r 223 | g 223 | b 223top: r 249 | g 249 | b 249bottom color location: 0%top color location: 75%

2. Inner shadow: black | 25 % opacity | angle -90° | distance 1px | size 0px

step by stepCreate the basic shapes using a tool like Adobe Illustrator.

1.

2. Import the shape to a tool like Adobe Photoshop and scale to fit an image of 32x32 px on a transparent background.

4. Export the icon at 32x32 as a PNG file with transparency enabled.

3. Add the effects seen in light, effects & shadows for the proper filter.

Page 15: Android Icon Guidelines Draft0309

15 / 24android icon guideline version 1.0, cupcake release

1. icon types1.6 list view icon: structure

The list view icons look a lot like the dialog icons, but they use an inner shadow effect where the light source is above the object.

They are also designed to be used only in a list view. Examples include the Android Market home screen and directions in Maps.

This icon normally has a 1 px safeframe, but it is ok to use the safeframe area for the edge of the anti-alias of a round shape.

Note: All dimensions specified are based on a 32x32 px artboard size in Photoshop. We recommend using a 1 px padding around the bounding box inside the Photoshop template. Be sure to remember to export final art as a transparent PNG file using Photoshop.

Templates for creating tab icons in Adobe Photoshop are available in the Android icon template pack.

32 px

32 px

Page 16: Android Icon Guidelines Draft0309

16 / 24android icon guideline version 1.0, cupcake release

1. icon types1.6 list view icon: details

lights, shadows, & effects

1

2

1. Inner shadow: black | 57 % opacity | angle 120° | blend mode normal | distance 1px | size 1px

2. Background: black | standard system color These icons are displayed in list views only.

Note: The dialog icon sits on 32x32 px artboard in Photoshop, without a safeframe.

List icons are flat and pictured face on with an inner shadow. Built up by a light gradient and inner shadow they stand out well on a dark background.

step by stepCreate the basic shapes using a tool like Adobe Illustrator.

1.

2. Import the shape to a tool like Adobe Photoshop and scale to fit an image of 32x32 px on a transparent background.

4. Export the icon at 32x32 as a PNG file with transparency enabled.

3. Add the effects seen in light, effects & shadows for the proper filter.

Page 17: Android Icon Guidelines Draft0309

17 / 17

2. tips

?

Page 18: Android Icon Guidelines Draft0309

18 / 24android icon guideline version 1.0, cupcake release

2. tips2.1 do’s & dont’s

When creating new icons there are some factors to consider to make them fit within the guidelines of the platform.

Do

Make sure no abnormal perspective is used. The depth of an object should be realistic.

Keep it simple! By overdoing an icon, it loses it purpose and readability.

Only use colors when necessary. Mind that the base of a launcher icon should be grey and feel solid.

Use the correct angles for the specific icon types.

Don’t

Use open elements like text alone as icons. Instead place those elements on a base shape.

Use colors for your status bar notifications. Those are reserved for specific phone-only functions.

Page 19: Android Icon Guidelines Draft0309

19 / 17

3. icon appendix

Page 20: Android Icon Guidelines Draft0309

20 / 24android icon guideline version 1.0, cupcake release

Browser Calendar CameraAlarm Clock Calculator

SettingsMusic

YouTube

Gallery

MyFavesMessaging Voice DialerMaps

GmailDialer

Market

Email IMGeneric application

3. icon appendix3.1 launcher icons * as of 03.09

Google Talk

Voice Search

ContactsCamcorder

Page 21: Android Icon Guidelines Draft0309

21 / 24android icon guideline version 1.0, cupcake release

3. icon appendix3.2 menu icons * as of 01.09

Info / details Clear / Close / Cancel / Discard

My Location Directions Edit Favorite Shuffle More Map mode

Video History Route Search Switch Traffic Add Back Forward

Bookmark Go to Home Party shuffle ZoomPlay Gallery Share Call

Camera Done Duration Attachment End conversation Archive Rename Rotate Upload

Page 22: Android Icon Guidelines Draft0309

22 / 24android icon guideline version 1.0, cupcake release

3. icon appendix3.2 menu icons * as of 01.09

Add buddy / Invite

Block user Clear Clear playlist Emoticons End chat Favorite Flag My account / Account list

Compose Flip orientation Go to Import contacts from SIM

Home Delete All threads New window Help

Notifications View labels My places Music library Save draftSave Rotate Repeat Revert

Refresh Reminder Spam Settings Start conversation

Today Month Week Stop

Page 23: Android Icon Guidelines Draft0309

23 / 24android icon guideline version 1.0, cupcake release

3. icon appendix3.2 menu icons * as of 01.09

Mute Upload video Shuffle all Security Search Star Upload Set as Scan for devices

Route List Slideshow Speaker / Volume

Invites Compass Most popular

Page 24: Android Icon Guidelines Draft0309

24 / 24android icon guideline version 1.0, cupcake release

3. icon appendix3.3 status bar icons * as of 01.09

Voicemail Music SMS/MMS EDGE Calendar Email IM Gmail Alarm

Sync Disk full USB connected Warning Signal GPRS GPS on Airplane mode Speaker phone

Vibrate Bluetooth WiFi 3G Call Call forward Call on hold Missed call Battery 100%

Installation complete

Silent mode Sync error Bluetooth connected

Wireless network available

Roaming WiFi unavailable Signal unavailable

Battery empty