Pleasing Icons using 3 step coloring

what is 3 step coloring? Read here.


I have used Adobe Illustrator in this tutorial. You can use Adobe Photoshop or CorelDraw.

Step 1

Create a perfect circle with width and height = “250px” and base color = “#d8d8d7”. Lets call this circle as GREY BASE CIRCLE or GBC


Step 2

Copy GBC and paste it two times. Now recolor newly created circles with “#e2e2e1” and “#e9e9e9” respectively.
You are right, they are lighter variants of the GBC.


Step 3

Before moving forward, choose one angle for lightning your icons. I have preferred 30 deg or top right section for all my examples.
Create a CLIP GROUP and place the circles inside GBC as shown in the image below

step3To learn how to clip group in Adobe Illustrator click here

step4This is how it should look after clip grouping.

Step 4

Create another circle with same height and width with color = “#1F8EB5” and then get ready for some mathematics. You can see dimensions of circle under ‘transform’ link. In this example it is 250px.

Divide 250px (height and width) by 1.618 (read more about golden ratio here). You will get a smaller circle as shown in the image below:


We will call this circle as “BLUE BASE CIRCLE” or BBC

Step 5

Center align newly created BBC to the circle created in step number 1. Now copy BBC and paste 2 times and recolor them to “#249CBC” and “#27A9E1” respectively.


Step 6

Clip group the two extra circles created in step 5 but make their dimensions again equal to the circle we created in step 1 (i.e 250px). After clip grouping, move and align these two blue shades with GBC’s lighter variants.


You can use align options to get pixel perfect alignment.

Step 7

Zoom out and see if everything looks perfect like the image below:


Step 8

Put your desired text over the badge. You can always reduce opacity of text to make it appear more vibrant.


Step 9

Go to File> Export. Select png as file type and adjust according to your need.


Step 10

outputfinal PNG should look like the image above

final_outputafter tuning image and adding drop shadow in Adobe Photoshop