Icon Tutorial #1

My first icon tutorial. In this tutorial, we're going to achieve this coloring with a few steps. This is NON-TRANSLATABLE!, it's only compatible in Photoshop. The PSD file is included if you don't want to do the steps yourself.



First, open up the Layers window. You can do this by going to Window>>>Layers. Now, crop down your image however you want it with the crop tool, in this tutorial we're going to crop it down to 100x100 px.

  • Here's comes the iconing! Duplicate your base and set it to Screen at 30%.

  • Duplicate the Screen layer and set it Soft Light at 100%.

  • Layer>>>New Adjustment Layer>>>Selective Color.
    Reds: -40, +40, -100, +4
    Yellows: -100, +100, +100, +100
    Cyans: +100, +100, +100, +100
    Neutrals: -40, 0, +10, +10

  • Another Selective Color Layer.
    Reds: -100, +20, +100, -40
    Cyans: +100, 0, 0, 0
    Magentas: -100, 0, +82, +30
    Neutrals: +77, 0, 0, 0

  • Guess what? Another Selective Color Layer.
    Reds: -100, 0, 0, 0
    Cyans: +100, +100, -100, 0
    Neutrals: +100, 0, 0, 0

  • Layer>>>New Adjustment Layer>>>Hue and Saturation.
    Reds: 0, +63, 0
    Cyans: 0, +45, 0
    Blues: 0, -100, 0

  • Layer>>>New Fill Layer>>>Solid Color.
    Set the color to 25d6c9. Now click OK, then set the layer to Color Burn at 14%.

  • Layer>>>New Fill Layer>>>Solid Color.
    This time set the color to 838484. Now click OK, then set the layer to Darken at 30%.


    • And you're done! If you want to get the same exact result I did follow these steps.

  • Select>>>All.

  • Edit>>>Copy Merged.

  • Edit>>>Paste. Now your whole Icon should be on top of all of the layers.

  • Filter>>>Sharpen>>>Sharpen.



  • Other Icons used with this tutorial: