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.

Understanding Adobe Photoshop Features You Will Use

Understanding Adobe Photoshop Features You Will Use

Adobe Photoshop can be a complex tool only because you can do so much with it, however for in this video series, we're going to keep it as simple as possible. In fact, in this video you'll see an overview of the few tools and Adobe Photoshop features we will use. When you see this video, you'll see how you can do so much with so few features, but you'll learn how to use them in depth in the future videos.

Get My Free Video


Post a comment