3 Steps To Beautiful App Icon Design

Ninja Share:

Icon design is now becoming an art-form in itself. Being creative in icon design leads to notoriety when paired with the right type of app. Here is our 3 simple steps to creating beautiful icon designs using Pixelmator. We will use one our freebie templates called Diagonal Noise Plain as an example.

Step 1 – Think, Simplify, Brainstorm

The main things to think, simplify, and brainstorm are – what is my app about, what is my brand (which could be a basic graphic, logo, or the main character from your game), what are the key themes, and what do you want to get across. Brainstorm key elements that you want to be part of your icon design.

Next choose what type of icon you want to build –  minimal, flat, 2d, or 3d, depending on how much resources and skill you have.

Step 2 – Sketch, Re-sketch, and Draw

Designing the icon is simple and cheap. Start with basic sketches on paper or directly into Pixelmator and then identify and add detail.

Finally, have an idea of the textures and key basic colors you want for your design.

Here is how our template, Diagonal Noise Plain began (we chose a flat design, with minimal detail):

icon-drawing

Step 3 – Illustrate & Remember Details, Details, Details

This part will take a little time depending on your level of skill using Pixelmator, so let’s build this in sections.

Firstly, illustrate the drawing in pixelmator using basic shapes and selection tools. Pixelmator will automatically place new shapes in their own layers, however if they don’t, then take care to place each shape on different layers. Don’t worry about layer clutter, you can always merge these or delete them later.

basic-shape-selection

Secondly, add textures and/or colors to your basic shapes. Usually I merge the main shapes together before I add a common texture for a basic flat design. If you are doing 2d and 3d designs, then you would add different textures to different parts of the basic shapes. A lot of this comes down to testing out different colors and textures and seeing what works best for you, but if you did the previous steps in detail, it will make it a lot easier when you are actually drawing out your design.

basic-shape-fill

Finally, look at the details and try to replicate. Details give the app icon design characteristics such as realism, aesthetic, depth etc. Detail does not mean clutter, even the most basic design, with attention to detail, makes an eye watering design.

In our Diagonal Noise Plain design, we just loaded a basic diagonal texture (from the awesome folks at Subtle Patterns), used the tile feature to expand the texture to fill the selection (Filter -> Tile -> Affine) and then used the Burn tool and the Dodge tool from the basic tool menu, to add the shadows and highlights to the outer part of the icon.

final-icon

The key details you should look out for are shadows, highlights, and gradients. Here is what we arrived at in our final design for Diagonal Noise Plain.

diagonal-noise

As always practice makes perfect, so keep practicing and you too will soon become a Pixelmator ninja.

Step 4 – Don’t start from scratch, use a template

If you want to make it easy on yourself, and don’t want to start from scratch using Pixelmator, why not get one of our beautifully designed templates from our Store, and build on it.

We also show you how to build a simple IOS7 app icon in Tip #19.

SIGNUP TO GET NOTIFIED:
Our best content on designing with Pixelmator. Delivered Regularly!
You'll learn exactly how to become a Pixelmator Ninja using our tutorials and templates. We won't send you any spam. Unsubscribe at any time.
Oops. Comments are now closed on this post!