Hello class! Today we'll be looking at the tricks of icon makage in photoshop!

I've heard a few times now that people wish they were able to make icons.. Now I'm here to tell you that you're perfectly able! This might look like a lot of difficult stuff at a first glance, but it's really very simple once you try it out.

This tutorial is on a level where I'm expecting you to have at least some basic knowledge of photoshop. If you don't  you can probably still pull it off, but the terms I use might be a little confusing. However! If there's anything at all that you don't understand - whether you're new to photoshop or my explanations just suck - I'm here to answer all your questions!

None of the steps are compulsory (although it might be hard to skip out on the first two and possibly 4.5 as well). The other steps can all be used together or individually. I'm just trying to cover all bases here... these are pretty much all the techniques I know. Also, you don't need to follow everything I did here, I'm basically just trying to introduce what different layers can do for you in general.

First we need something to work with. Here's what I'll be using. You can use the same one to let you better understand what I'm actually doing, or you can try something of your own. If you have no material to work with, do not fear! I have uploaded some of my own screenies here and here and here.



Everyone got a screenie? Good, let's begin.

Step 1: Warm-ups.

Okay, so open it up in Photoshop (I'm using CS2, dunno how it translates to earlier versions but it probably works just fine). Then make a new document in photoshop, 100x100 pixels. Drag the screenie into the new document. This is just for the sake of being able to move around the picture later. If you simply crop the image from the start, you'll lose everything that's outside the canvas.

Okay, now transform (ctrl+t) the base to make it small enough for icon size.



Step 2: The Way of Balance.

Okies! Now make a new adjustments layer, levels (You find it under Layer > New Adjustment Layer > Levels). Hit auto and magic happens. Auto levels somehow works out the color balance properly if there's too much of one color. It also adjusts the contrast to a nice basic value. Don't ask how, it's secret ninjutsu!


You can also adjust these settings manually to make the picture lighter/darker/more contrasty. But I normally use other ways to do that, so let's try those instead.

Like for instance: New adjustment layer, curves! This is fun stuff. You can play with this curve a little to see what happens. Pull upwards and the picture will go brighter, downwards it'll go darker. If you make your curve bend in this fashion, it'll get more contrast.
   =  

And like this it gets more smooth.
   =  

Both ways are good, but for this particular icon I chose to go with the first version.

Now we're gonna try out another adjustment layer! Channel Mixer. We'll use it to bring out those pretty colors, mm :3

Now here's how this works if anyone wants to know: First up is red. This will adjust the balance of cyan/red in the picture. If you pull the first meter (red) to the right all things in the picture that are red, will become even more red! If you pull to the left they will become cyan. If you adjust the second meter (green), the green parts of the picture will turn more reddish (pull right) or cyanish (pull left). Then if you change the output channel at the top to green you get to adjust the green/magenta balance, and for blue it's the balance of blue/yellow... Uh... Did that make any sense?

Basically what we do is increase red for the red output, green for green, blue for blue. But in order to maintain a balance in color we need to also adjust the green and blue settings under the red output channel, and vice versa. Just try it out and you'll see. Find something that you think looks good. A (maybe obvious) pointer is, try to keep the white bits white and you've maintained balance.. if the white ends up with color it means your balance is off. (Although of course this can actually be pretty cool if that's the effect you're looking for!) I used this, but the effect it has may be different depending on your base.




Anyways! For now look at my settings for guidance and get something like this:


We've made the colors pop nicely! It's so pretty and bright, I could easily leave it like that... <3 But no rest for the wicked!


Step 3: The Way of Color Layers.

What next... I think we're done with the adjustment layers for now! Whoo! And now for something completely different. Make a new layer, and fill it with dark blue. Set it to Exclusion. This makes the dark parts turn a little blue, and the light parts turn a little yellow (I think)... anyway it gives a pretty nifty soft effect. You can try changing the hue (ctrl+u) of this exclusion layer to see what effects it has with other colors, but in general dark blue is what you want.
=

Next, let's fill another layer with color, this time we're going to set the layer to Soft Light and it will change the hue a little. The best way to do this is to just fill with any color, set to soft light and then use hue/sat (ctrl+u) to find the color that you think fits best for this image. I chose something cyan like this and lowered the opacity to 70% because I thought it got too dominant otherwise.
=

Another color layer, this time set to color burn. For color burning you need to use something very light. I thought the image lacked pink so I chose this one, and lowered opacity to 33%.. You could also just go with a color that is even lighter than this, near white and leave the opacity at 100%, it gives almost the exact same result.. that's the way I normally do it, but I was a little lazy here.
=

Now let's try a gradient! Gradients give lovely life to the image. Set the layer to soft light again. I almost always use the Simple gradients that come with photoshop, usually something that goes from white to blue/purple, but you can play around with this for different effects. This time I customized the gradient a little just because I felt like it. Again, try out ctrl+u on this layer (try it on the other color layers too!) to see what you can get.
=

Step 4: Reflections on your progress.

Um, basically you can keep adding more color layers like this forever, but let's not. We're sort of done with the ground coloring now I think. But remember, you can always go back and change stuff. For instance you can try turning off the visibility of each layer and see if there's something that brings the picture down rather than improve it. For instance, when I turned off my curves layer I noticed that the image was too contrasty, Raph's pretty snarly teeth line had turned invisible! I took care of this by manually drawing some gray over the teeth on the Curves layer's mask. If you don't know how to use masks, it's no matter... this is not something you have to do often anyway.


And even when doing this, I realized that without having the curves layer at all, the image got pretty cool as well.


It was a little dark at first, but that I adjusted by going to my level adjustment layer and changing the middle input (the one that is 1,00 by default) to 1,19.
 

So all of a sudden I've got two different color versions! Leave it to me to make things more complicated than necessary. But this actually happens all the time, there are just so many ways to color a picture it's going to be difficult deciding what you like better. Anyways, I'm gonna stick with both versions for now.

Step 4.5: The way of doing stuff you forgot to do earlier.

Now let's go back to our base layer and use Filter > Sharpen > Sharpen.
(dark version)

This turned the image nice and crisp, don't you think? But perhaps a little too much. This really depends on what base your using but you're probably going to need to fade the sharpen a little (ctrl+shift+f or Edit > Fade Sharpen).
   
I faded the darker version to 70% and the lighter version to 30%.

Normally I sharpen at the very beginning, but now that I think about it I wonder if it's not actually better to wait with sharpening until later on like this. Well, it doesn't matter too much either way. Just remember, it can be good to keep an un-sharpened copy in backup, just in case you need to change it later on.


Step 5: Complete Color Control no Jutsu.

I know you must be going "enough with the colors already" by now, but bear with me. This is something very useful, I promise! On top of your color layers, add adjustment layer "selective color". Now we're really going to work some magic! This is a little like the channel mixer, only more specified on each color. Here you can change the hue of all the colors in the image. Try out pulling the settings around all sorts of ways and you'll understand how it works. Using this you've got an amazing control over all the colors. Yes, you've got the power! Muhuhuhuuu! I played around a little and for instance with these settings...    (did nothing to yellow and black)




...I got this. BUT this is always going to be different depending on your image's color scheme so it's a good idea to customize this.


Different settings and suddenly it's Michelangelo.


Donatello.


However there are some limits, for instance it's impossible to make it into Leo using only this method, since red and blue are near opposite on the color scale. Anyway, as you can see this thing can really work wonders. (But just for the record I don't really manipulate colors to make one turtle out of another. That's dishonorable!)

Step 6: ...Ohayou Wasabi!

Yosh! What else is there to learn? Lesseeee.. well, you can always add some textured layers! There are many different kinds with different ways of using them... Let's look at some. But first let me state that I am tired and not really focusing to make this look good, so don't diss texture layers just because mine look bad... Now on to the demonstration!

First we have this kind of fully-covering textures that you set to soft/hard light that gives your icon some - shockingly - texture. I set this to Hard light 40%. Texture by lookslikerain.
  = 


This kind of texture gives even more life to the picture by adding some extra color hues. Put it on top and set it to Screen. Texture by lookslikerain.
  = 

This we set to lighten or screen to add some shinies. Texture by lookslikerain.
  = 

Some rays of light perhaps? I think textures like this one looks best in multiply, screen or hard light. Remember to adjust the opacity (more than I did!)! Texture by colorfilter.
  = 

There are other types of textures too but these are the ones I can think of at the moment.

Step 7: Deciding Your Way of the Ninja.

Okay, this is the tough part. Now you have to think of something to write on your icon! If you're like me, a complete shell-for-brains, you're allowed to skip this step (because I said so!). You can also add some decorative brushes if you like and to finish it off, a frame or border. Buuut~ my brain is fried so I'll leave that up to your own imagination! One pointer though, if you're adding this kind of stuff, you can try putting the decoration/border/text underneath the color layers and it will blend into the colors more naturally. And now is also a good time (actually, before adding textures would've been a better time) to move around your base and make sure you've got the composition you want! When you save, make sure you save as .png for best quality @ least size. And keep the psd too!

Class dismissed.. remember to stretch properly and rehearse your kata.

If you try your hand at this then please post your results! <3 You'll make me happy-bouncy if you do. Or if you have any questions about love, death and icons... I'm your woman.

These are my final results, kinda. I got too lazy for the last steps, meh meh.
      
Light version final   vs.  Dark version final

Okay, okay! Just one last tip for the road: if you've made a color setting that you like, why not try using the same one for more screenies. I got these by changing only the selective colors layer. For the last two I used all of the textures from step 6 too for a more proper demonstration.