Pleasing Icons using 3 step coloring

what is 3 step coloring? Read here.


final_output

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

step1

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.

step2

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.

step4_2
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:

step5_1

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.

step5

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.

step7

step7_2
You can use align options to get pixel perfect alignment.

Step 7


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

step8

Step 8


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

step9

Step 9


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

step10

Step 10


outputfinal PNG should look like the image above

final_outputafter tuning image and adding drop shadow in Adobe Photoshop