Online Book Reader

Home Category

Rockstar Icon Designer - Kate McInnes [51]

By Root 415 0
the object with a shape that is styled to take full advantage of the clickable area. The rendering style is realistic, but not hyper realistic with a focus on soft finishes and a tactile clickable appearance over glossy effects and textures. Icons shouldn't be cropped, such as a zoomed in detail of an object, or have perspective.

Android icons are designed to have the same visual weight so they appear to be the same scale within the user interface. Android icon templates by DsynFLO Creations.

Technical Breakdown

This is where the Android platform can become confusing. Because it runs on a range of devices with different screen sizes and resolutions, developers are encouraged to supply three versions of each icon to run on low, medium and high density screens. Icons for each density should be designed to take advantage of the scale they're provided at with the small scale icon designed to be as crisp as possible and the large scale icon rendered to have a subtle use of textures and details to make them look great on high resolution screens. Because the icon assets are required at various densities, it's best to create the design in vector. Because the style is soft and illustrative, vector is also a good choice because there's no need to use special effects that are sometimes easier to make with raster effects. The Developer Guide also recommends that designers use guidelines to position the icons on the artboard. Using guidelines will ensure that drop shadows and ant aliasing isn't clipped by the image boundaries and each icon looks balanced in relation to the others. Below is a rundown on the specifications for each density of icon.

Sizes Low Density Launcher Icon – 36 x 36px within that size the icon design should be 30 x 30px to balance the image and allow for drop shadows (28px x 28 for square icons).

Menu – 36 x 36px within that size the icon design should be 24 x 24px to create visual balance in context (22px x 22 for square icons).

Status Bar - 12 x 19px within that size the icon design should be 12 x 12px to create visual balance in context.

Tab – 24 x 24px within that size the icon design should be 22 x 22px to create visual balance in context

Dialogue – 24 x 24px

List View – 24 x 24px

Medium Density Launcher Icon – 48 x 48px within that size the icon design should be 40 x 40px to balance the image and allow for drop shadows (38px x 38 for square icons).

Menu – 48 x 48px within that size the icon design should be 32 x 32px to create visual balance in context (30px x 30 for square icons).

Status Bar – 16 x 25px within that size the icon design should be 16 x 16px to create visual balance in context.

Tab – 32 x 32px within that size the icon design should be 28 x 28px to create visual balance in context.

Dialogue – 32 x 32px

List View – 32 x 32px

High Density Launcher Icon – 72 x 72px, within that size the icon design should be 60 x 60px to balance the image and allow for drop shadows (56px x 56 for square icons).

Menu – 72 x 72px within that size the icon design should be 48 x 48px to create visual balance in context (44px x 44 for square icons).

Status Bar – 24 x 38px within that size the icon design should be 24 x 24px to create visual balance in context.

Tab – 48 x 48px within that size the icon design should be 42 x 42px to create visual balance in context.

Dialogue – 48 x 48px

List View – 48 x 48px

Colors Used: Android has provided a recommended color palette and a materials guide, which can be downloaded as an Icons Template Pack for PSD from the Developers Guide. The main colors used on launcher icons are neutral shades of grey, blue, green, yellow, orange and red. Materials provided are chrome, satin finished plastic and colored metal. Surfaces that don't use a material effect should have a subtle grain effect added to soften the appearance of flat colors.

Menu icons have a slight embossed effect and rounded 2px corners. It has a 90 degree gradient fill from hexadecimal color #8C8C8C to #B2B2B2 with a 2px 90 degree inner shadow of 20% opaque white. The inner bevel

Return Main Page Previous Page Next Page

®Online Book Reader