Launcher icon color palette

Step by step

Used for highlights on edges.

Light gradient

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

Medium gradient

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

Dark gradient

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

Used as base color in shadows.

Used for highlights on edges.

Light gradient

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

Medium gradient

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

Dark gradient

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

Used as base color in shadows.

1. Create the basic shapes with a tool like Adobe Illustrator, using the angles described in Launcher icon: structure. The shapes and effects must fit within a 250x250 pixel artboard.

2. Add depth to shapes by extruding them and create the rounded corners as described for the launcher icon structure.

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 into a tool like Adobe Photoshop and scale to fit an image size of 48x48 px on a transparent background.

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

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