Hello one and all! Welcome to Jessi’s first icon tutorial! This tutorial will show you how to master the art of icon making Jessi style. Of coarse, this isn’t the only way I make icons. Just one of many, and namely, the one my friend Kyo asked about. :P This tutorial uses Photoshop CS3 but lower versions should work fine. A note before I begin: PLEASE DO NOT RIP MY STYLE. This should give you ideas about what tools to use and what makes an icon look good, but don’t make the same icon, and call it yours. Add a bit of you too it as well. That will make it better, trust me! Also, do not redistribute this tutorial, and if you’re a webmaster who found this helpful, please link Splatterheart on you’re credits page. : ) Another note: If you see an on-screen keyboard in the demonstrations, ignore it. I can’t find the Print Screen key on my laptop. >__>; With that, let us begin!

Ok first find an avatar base you would like to use. A base please, not a render/png. If you can’t find one, try animeartbooks.com, eccentric.soulchange.com, or poisonrace.awardspace.com all great places to find bases. (yay, rhyme!) I’m using one from Poison Race’s Kingdom Hearts II set. When you find one, save it and open it in photoshop. For the purpose of this tutorial, make sure the image is 100 x 100 pixels.

Ok first I upgrade the background layer, to layer 0 (assuming you opened the actual file in PS and did not copy and paste it from another file, if you did, this will not be necessary). And then I duplicate it you can do this by right clicking the layer with your mouse and selecting “duplicate layer”. It will ask you if you want to name your layer. Name it whatever you want, I’m naming mine layer 0 copy (which should be your default name if you’ve been following thus far.) When you’re done, everything should look something like the image below.

Click to see the first sample!

Next, go to filter — > blur — > Gaussian Blur. MAKE SURE YOU’RE ON THE COPIED LAYER. Now go to the drop down menu above the layers menu and select “overlay”. You’re image should look light, pretty and be exceptionally brighter. The use of overlay is relative though. Sometimes I use screen, lighten, or color burn. It depends on the image and the feel I want to achieve. But for now, let’s stick with overlay. If your image looks to bright, adjust the opacity or switch to color burn. I’m leaving mine at overlay at 100% opacity, and 100% fill because I believe it looks best this way. If you did that, you should have something like the image below.

Here’s sample B. ;) I hope you’re clicking these things, because some important info is kept on these images!

Ok next, I use an icon texture I got from Celestial-Star.net. It’s a very flexible texture and can be used on almost any icon. If you don’t like pink, don’t worry about it because we will change the color later. For now I set it on overlay with an opacity of 73% and a fill of 68%. But I strongly recommend playing around with different settings, opacity and fill levels to see what works best with the base you choose. Below are the texture I used and what my avatar currently looks like.

Here’s our next example. ;) Read and study well!

Now more texturing. Use very smooth and colorful textures for this step. I have used some more textures from celestial star. They are from the “peachy” and “colors” sets. You can find them below, but if you use them, credit CS. I set texture II to lighten, with an opacity of 60% and a fill of 87%. Again I stress that this exact formula may not work for your image. I set texture III to soft light, opacity 95%, fill 91%. And lastly texture IV is adjusted to darken, opacity 88% and fill 90%.

The next sample will show the result of our texturing! ^-^

Next I change the colors by using the selective color tool. This is my favorite part, because I get to breathe life into my image. This may not be right for all icons, but it’s something you want to at least try with everyone you make. So go one to Layer— > New Adjustment Layer— > and Selective Color. I won’t tell you the number values I used for each color, but I will tell you to try and adjust each one. The reds, the blues, magentas, whites, blacks, and neutrals had the most effect on my icon. Below, you’ll see that I’ve turned my icon from a reddish pink to a lavender color. Toy with selective color until you achieve something close to your mental vision!

Keep on going! You’re almost done. Click this sample to view my progress and learn some tips on selective color!

Now for the text, which is my second favorite part. First off think of something catchy that fit’s the feel of the image. And then choose a color and a font that is visible and matches the icon. I have chosen Perpetua, size 12px, in italics. You may choose whatever floats your boat. But the real trick to my icon text is that I space it by 200. I’m not sure what “200” is. It could be pixels, pt, or pickles. I’m not sure, but I demonstrate how to space the lettering below.

Click to learn how to space your text!

Ok if you get all of that great! Also, for those who did not read the image, I am strongly against using text in the corner of icons. Attention should be focused toward the figure, not to the negative space in the corner. It also makes you look like you’re not creative with text. This doesn’t mean place it on top of the character, it just means you should put it in a unique place so that the eyes are drawn to the character, if you catch my drift.

Now I’ll move on to the sub text or “tiny text” as some call it. Now, some people make there text size 2 and type random crap, but I prefer not to do that. Instead, I shall use a brush I believe I downloaded from Aetherreality.net. If I’m wrong, do correct me. I make it the same color as my text and sharpen it. Then I lower the opacity. Note, that I DID put it in a new layer. There’s no point in illustrating this so I’ll move on to the boarder.

For the boarder I make a layer underneath my text layers. I change my foreground color to white and slap on a brush from hybrid-genesis.com. They have lot’s of great brushes there so thank them! The finished icon is below!

Filed under: Tutorials by Jessi