Color palette

Step by step

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

Used for details within the icons and bevel highlight.

Used for details within the icons and bevel highlight.

1. In 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.

2. Add rounded corners as specified in Figure 6.

3. Add light, effects, and shadows as specified in Figure 7.

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

Grey gradient

Used for disabled details within the icon.

Grey gradient

Used for disabled details within the icon.

Fill gradient

1: 1 r 105 | g 105 | b 105 2: r 10 | g 10 | b 10 Used as color fill.

Fill gradient

1: 1 r 105 | g 105 | b 105 2: r 10 | g 10 | b 10 Used as color fill.

Black r 255 | g 255 | b 255 Used for bevel shadow.

Black r 255 | g 255 | b 255 Used for bevel shadow.

Was this article helpful?

0 0
Photoshop CS Mastery

Photoshop CS Mastery

Artists, photographers, graphic artists and designers. In fact anyone needing a top-notch solution for picture management and editing. Set Your Photographic Creativity Free. Master Adobe Photoshop Once and For All - Create Flawless, Dramatic Images Using The Tools The Professionals Choose. Get My Video Tutorials and Retain More Information About Adobe Photoshop.

Get My Free Videos


Post a comment