Using my icon color light textures

Posted on April 29, 2005 at 10:55 pm under Tutorials and Tips

Software Used: Adobe Photoshop 6.0

This tutorial came after questions about how to use my Lights and Colors texture set to give a combination of both light and color effects on the example icons I posted. Below, I will cover the ways you can use those textures to achieve the following 3 icons with very minor alterations to get these different color schemes:

Step 01: Getting Started with Your Base and Textures

First, find a picture you want to use and do the usual resizing and adjustments to obtain your base image. Assuming that you already know how to do that, I’ll be skipping right on. For this tutorial, we’re starting with this:

We’re going to begin with our base image on the bottom-most layer of your working canvas, then add on the textures as layers on top as we go.

Let’s just go ahead and add textures now

While we can do different things to fix this base, we’ll be leaving it alone for this tutorial and focusing instead on jumping right on to applying the textures. Add the following textures as layers on top of your base in the order listed:

Set the layer blend mode to Screen and adjust the Opacity to 67%.

Set the layer blend mode to Overlay.

Erase parts of the textures away

Important: After adding those textures on top of the base, you’ll notice that the textures are now also obstructing Emilie’s face. The following is a step that many beginners using textures don’t think to do, but it’s very important. We want the textures to compliment the icon and not take away the focus by burying the subject beneath them, so we’re going to fix that.

There’s no illustration here, but what you’ll be doing is using the Eraser tool (choose a soft one with low opacity) to erase away the 2nd texture where it’s covering the face and body. Remember to make sure the correct texture layer is selected before erasing or else you might end up erasing the wrong thing.

After you’re done erasing, you should see the colors/textures remain on the background of the icon without doing weird things to Emilie’s face. Here’s what we have so far:

The icon now looks quite faded out, so we’ll get to fixing that next. But notice how the 2nd color texture is erased and now only sits on the background and not on top of her face? Yes? The eraser is your best friend! :) Now let’s get to that faded out problem…

Step 02: Minor Sharpening Fix

Remember the untouched original base we started out with? Duplicate that layer (Layer > Duplicate Layer or you can also right click to select the option) and move it to the top of all your current layers.

After that’s done, Desaturate the layer by going to Image > Adjust > Desaturate or just hit Shift+Cmd/Ctrl+U. Finally, we’re going to sharpen the layer by going to Filter > Sharpen > Sharpen. You should get this:

Set the layer to Soft Light, and the icon now looks like this:

As you can see, doing that made the image sharpen up and stand out a bit more against the textures. It still looks faded out, but we’re not done yet!

Step 03: Adding Another Texture Layer

We still have a bit of that faded out issue but before I fix that, I decided to add another light texture to give the icon a bit more depth. This is the one I chose from my Monochrome Spotlights set:

Set this layer’s blend mode to Screen.

I find that the lighting effect is more fitting to be on the bottom than on top so let’s flip the texture layer vertically by going to Edit > Transform > Flip Vertical.

I also thought the lighting is obstructing Emilie’s face a bit. Once again, we’ll use the Eraser tool to lightly erase across the layer around where her face is. And now we have this:

Now that I’ve added all the different textures, we’re left with the final touches to get rid of the faded out look.

Step 04: Final Sharpening and Touching Up

Like in Step 02, we’re going to duplicate the original untouched base again. After duplicating it, move it to the top-most layer and set the layer blend mode to Overlay with 45% Opacity. Still not quite there, so let’s duplicate the original base and drag that to your top-most layer yet again. This time, Desaturate the layer and set it to Overlay at 50% Opacity.

All in all, you should now have two duplicated original bases with the above settings. This is our result:

As you can see, it’s finally much clearer now. At this point, some may like to call it done. What’s left are basically optional steps that I’ve added in just to give you other coloring ideas, and also a finishing steps in finalizing the icon.

Step 05: Optional Coloring Technique

The following is really just a color preference. It gives you an idea of the different coloring you can get- my attempt at combining a mini tutorial within! So let’s try the infamous blue exclusion layer technique.

Create a new blank layer and fill it with a dark blue. This example uses #000033. Set this layer’s blend mode to Exclusion and you’ll get the following result:

Notice the color difference between this one and the previous example? Again, it all depends on which coloring you like better.

Step 06: Adding Text and Borders

All that aside, what’s left is the text and the border. So I add my text in Century Gothic 10pt with character tracking set at -20 in order to fit into that little space.

For the border, I created a new layer and stroke it with a light 4px border using color #F7F6EF. Then I created another layer and stroke it with a different light 1px border. You don’t really need to create a new layer for borders, but I usually prefer to do so just in case I change my mind later on and it’s too late to undo. This way, I can just delete the layer whenever I want to.

Here is final result we end up with:

Example Variations Steps

Remember I mentioned something about minor fixing to get different coloring results? The rest of this tutorial will basically cover the variations I made to end up with the other two example icons show at the top of this page.

Coloring Variation #1

To get the following icon, you just have to delete the very first color texture we used in the tutorial back in Step 01. Yes, that’s all!

Coloring Variation #2

To get this icon instead, you will be skipping the blue exclusion layer in Step 05 and then adding another texture as shown further below.

Add between the first two textures used in Step 01, set to Overlay mode.

And we’re truly and completely done now, variations and all. I hope it’s been helpful for you!

Conclusion & Quick Tips

After that entire tutorial plus the variations, I hope you get the idea of how different layers can be played around with to achieve different colors. The example icons for my tutorials were meant to show what you can do with the textures, but it doesn’t mean you should always pile them all up like the way it was done here. In fact, it’s something I normally don’t do at all. But as you can see, deleting or adding an extra layer can create an entirely different color effect. All in all, fiddle around and see what you come up with. Every icon is different and you shouldn’t always do the exact same thing because it probably won’t work the same from icon to icon.

This tutorial was originally written on my graphics journal at LJ. If you’re from LJ and you have any questions, you’re always free to ask or comment at the post over there as well.

Update!

October 23, 2006: I am now also accepting comments here, so I recommend asking here instead of over at LJ if you have any questions. The version of the tutorial over there is actually older so it might not contain certain information that the one posted here would.