Rose (rhapsody_iv) wrote in icon_tutorial,

  • Mood:
  • Music:

Full Icon Tutorial

This is my first tutorial here, so any constructive criticism would be welcome.

This is for Photoshop CS, but I imagine that lower versions would be able to use it as well. I have never used PSP so I don't how well this would translate.

The icon being made:

I'll be using this image in this tutorial, if you want to follow along with the same image.

After you open your picture, change the mode to Grayscale (Image>Mode>Grayscale). Then change it to Duotone (Image>Mode>Duotone). Change the settings in the option window to the following:

Now, you have to set the curves. To do so click on the box to the left of the color.

Set the Black to this:

The Yellow to this:

And the Blue to this:

Change the mode to RGB. You hopefully should have something like this:

Next step! Cropping!
Select the Crop tool and change the settings like so (No, the text will not be weird. Trust me on this.):

Now, most of the time I have to crop the image a couple of different ways before I'm satisfied, but this time I liked the first one. So, the cropped image:

Duplicate the layer and sharpen it (Filter>Sharpen>Unsharp Mask).

Duplicate the sharpened layer twice. Select the first duplicated layer and up the contrast to about 40% (Image>Adjustments>Brightness & Contrast). Set the layer mode to Screen. Then select the second duplicate layer (the top-most layer) and desaturate it (Image>Adjustments>Desaturate). Set the layer mode to Soft Light. If your image seems too bright lower the opacity on the Screen layer.

Create a new layer (Shift+Ctrl+N) between the Screen and the Soft Light layers. Fill it with #F3D407 and set the layer mode to Hard Light.

Make new layer on top of the Yellow layer and fill it with #2C0E8F, then set the layer mode to Soft Light.

Make another new layer, over the Yellow and Blue layers and fill it with #7B2217, and again set the layer mode to Soft Light.

Make ANOTHER new layer, this time between the Yellow and Blue layers. Change your foreground color to white (#FFFFFF), then use this brush by cosmo_mouse (or really, any frame-type brush):

Leave the layer mode at Normal, or change it to Soft Light if you want a softer look.

Next, select the area outside the brush with the Magic Wand or Lasso tools. Starting with the original sharpened layer, Motion Blur (Filter>Blur>Motion Blur) each image layer. You can use any strength and angle you so desire. Deselect.

Rotate the canvas 90 Counter Clockwise (Image>Rotate Canvas>90 CCW).

Add text. I used "Say hello", which is what my mind came up with when I asked myself what the text should be. I don't know what it means.

Rotate the canvas back (Image>Rotate Canvas>90 CW). Take a deep breath...Aaaand you're done.

For the sake of comparison, here's the original icon and the one I made using this tutorial.
Original Icon:
Tutorial Icon:

And for no reason at all, here are some other icons I made using the same technique.


  • Tableau Online Training Demo Video - IgmGuru

    IgmGuru's Salesforce Administrator and App Builder Certification Training course is designed according to the Salesforce Administrator & App…

  • Icon Coloring

    Does anyone know how to achieve this coloring? Photos are by Jessie Willner, this coloring is all over her Instagram.…

  • animated icons

    Hello, I was wondering if anyone could guide me into doing icons similar to these? Sorry, I do not know the name of the maker(s) or I'd add…

  • Post a new comment


    Comments allowed for members only

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded