Make ur own textures

Here's another tutorial to make texture for your icons. Uses Photoshop CS and delves into some advanced features but I think it's worth a try.
Image hosted by Photobucket.com



This tutorial was done in Photoshop CS. I think that it should translate to most other graphics programs without any problems and I’m not sure of the terminolgy in other programs.


Image hosted by Photobucket.com

Find an image, any image…

For this I picked a picture of my favorite Angel character – yes. Doyle.

Image hosted by Photobucket.com

Create a new layer above the picture. Make sure it is set to use the previous layer as a clipping mask. In Photoshop this is done by choosing to create a new layer and making sure to the checkbox that says “Use previous layer as clipping path” is checked.


If someone knows the term in PSP please let me know.

Make and fill it with a bright color. Be sure to pick a color that will enhance your picture. Change the blend mode to Hard Light.

Image hosted by Photobucket.com

And you get a picture of Doyle with a nice cast over the entire picture. If you think it’s too dark, wait for a while. That will be corrected later on.

Image hosted by Photobucket.com

Create a new layer above the fill layer. Again make sure it’s used as a clipping layer to the layers below.

Image hosted by Photobucket.com

Now I’m going to create the texture for the overlay. It’s a method to create brushed metal and when used in various blend modes give nice texture to icons.</li>

  • Make sure your colors are black and 50% grey.

  • Call up the gradient editor. Click on the the first gradient [foreground to background].

  • Place four more stops along the bottom of the gradient and make each stops color as shown.

  • Click OK



Image hosted by Photobucket.com

Press and hold the shift key to ensure the gradient will be a 45° angle. Drag from the top left to the bottom right. There you have it, a nice gradient covering Doyle’s face.

Image hosted by Photobucket.com

But I want some more texture in the mix. So I call up the Add Noise filter. Make sure the Gaussian radio button is active and the Monochrome checkbox is off. Then move the amount slider till you get some noise but not too much.

Image hosted by Photobucket.com

Now it looks like a fuzzy gradient. But that will be taken care of soon.

Image hosted by Photobucket.com

Call up the Motion Blur filter. Set the angle to 45°, the same as the gradient, and set the Distance to an amount that looks good.

Image hosted by Photobucket.com

That’s definitely better than a plain old gradient.

Now let’s apply this texture to the picture.

Image hosted by Photobucket.com

Set the blend mode of the fuzzy, noise ridden gradient to Overlay and all of a sudden that texture is incorporated into the color below and on top of Doyle.

Image hosted by Photobucket.com

But overall I think the picture is a little too dark. But just lighting it or duplicating the layer and screening it would not do what I want. So I add a Curves adjustment layer to the mix. Again, make sure it’s used as a clipping group.

Image hosted by Photobucket.com

Now let’s adjust the overall tone of the color and texture. Click and grab the left dot and bring it up to the middle. This helps lighten the picture without blowing out all the whites. I added a second point just cause that was what I thought it needed.

Image hosted by Photobucket.com

And the final picture comes out like this.

Image hosted by Photobucket.com

I add some headline and subText elements, fiddle with it a bit, and have a finished icon.

If you’d like to know how the text was done, let me know. That’s an entirely different tutorial than the base icon.