[Tutorial] One way to make an icon

Welcome! Here's my icon tutorial. =]

DISCLAIMER: This assumes you have Photoshop CS4 or lower. I have no clue how this can be translated into Paint Shop Pro or Gimp. Sorry!

STEP ONE
[image=http://img.photobucket.com/albums/v283/mekairinek/tutorial/s1_1.jpg]
First, start up a new image. For this tutorial, we're going to do a 90x30 icon.

[image=http://img.photobucket.com/albums/v283/mekairinek/tutorial/s1_2.jpg]
Then, pick out the image you want to use. For this tutorial, we'll use this one. (Surprise, surprise...)


STEP TWO
[image=http://img.photobucket.com/albums/v283/mekairinek/tutorial/s2_1.jpg] [image=http://img.photobucket.com/albums/v283/mekairinek/tutorial/s2_2.jpg]
Depending on the dimensions and the original image's dimensions, you may need to resize it. Before you do so, go to 'Filter > Sharpen'. Just do it once. The sharpening step is optional, but I do it out of habit.

Then, crop the image to only the necessary parts. Here, we just want Bane's upper torso and not the hand holding the holocron.... or the whole logo for that matter.

STEP THREE
[image=http://img.photobucket.com/albums/v283/mekairinek/tutorial/s3_1.jpg] [image=http://img.photobucket.com/albums/v283/mekairinek/tutorial/s3_2.jpg]
Now, it's time to resize the image you want to use. In this case, I want it to have a vertical size of 90 pixels, so it'll fit snugly into the image I want to use. If you're doing this for a 30x90, you make the image's width 90 pixels and a clean 50 for either height or width for a 50x50 one.

Now -and here's where it gets tricky- select the image, press 'Ctrl + C' to copy the image and then Ctrl + V to paste it into the 90x30 blank image we created at the beginning. Don't worry about moving it around just yet.

STEP FOUR
[image=http://img.photobucket.com/albums/v283/mekairinek/tutorial/s4_1.jpg] [image=http://img.photobucket.com/albums/v283/mekairinek/tutorial/s4_2.jpg]
Now, adjust it so that it looks right in your set dimensions. This will vary, depending on your own personal aesthetic, but a general rule of thumb is to get all the important parts of the character into the icon, or at least, you see enough of them to know who they are.

DETOUR: Uh-oh. It looks like Bane doesn't *quite* fit, width-wise. In this case, use 'Edit > Free Transform' to adjust the image's dimensions. But don't go overboard, just enough so that his face will fit a little better in the icon itself. You'll see the

Now, go to 'Layers > Duplicate Layer' and you'll have a new, duplicate layer of... your current layer. (It's like my wardrobe manifesto these days: layer, layer, layer!)

.. Oddly enough, my layer's palatte isn't open. This is only because I've years of PS experience to know my way around the program and my layers too. But you'll need your layers palatte in just a moment for step five.

STEP FIVE
[image=http://img.photobucket.com/albums/v283/mekairinek/tutorial/s5_1.jpg] [image=http://img.photobucket.com/albums/v283/mekairinek/tutorial/s5_2.jpg]
With your layer duplicated, make sure your layers palatte is visible, if it's not already. Go to 'Blend Modes' and then in the drop-down menu, select 'Screen'. This, in layman's terms, jacks up the contrast/brightness of the image. As the image says, it's extremely helpful for 'dark' characters like Cad Bane (who are almost always in very dark/desaturated images).

DETOUR: If necessary, wash, rinse, repeat as many times with layer duplication and 'screen'ing if necessary. I would only use maybe 1-2 screened layers max, set at varying Opacity levels (which controls the 'transparency' of an image. I won't get into that here, however. it's too long and complicated). Using 'Screen' -and it's brethen Linear Dodge and Color Dodge'- wash out an image's colors and eventually makes it very

 

Great stuff, Mek. I've always been interested in icon-making, but never delved into it deeply enough. This tutorial makes it seem easy!

 

Thanks alot! Admittedly, I'm not very good at tutorials in general (I've had people beg me to make tutorials for how I do my artwork, but I'm so bad at explaining anything) so this was a challenge in of itself for me.

And just a couple footnotes that I'd forgotten to mention:

- Where it says 'You'll see the', it was supposed to say 'You'll see the difference in the images above'.

- I probably should have omitted the 'Don't worry about moving it around just yet' line, since obviously I hadn't thought it all the way through in the text at that point. Derrrr.

- You may need to do some additional sharpening, as evidenced by the 30x90 icon.

Other than that, it may seem highly egotistical, but I'm pleased with how this turned out.

Thanks again!

 

Very informative and well put together. I may be able to actually make an icon now.

 

Awesome tutorial, Mek! I have GIMP 2, but I think I might be able to do this with similiar tools...I hope so. And btw, great icons!

 

Wow! Thanks alot!

I really tried to make this as easy to follow as possible, so I hope it helps people. =]

 

That's a solid tutorial. Great job!

 

Yay, thank you so much!!

 

The cool thing about Save for Web is that you can use the Matte feature to get rid of jagged edges around images. If you notice on some of the JC stars and some of the JC icons, they have a white jagged edge around them. One way to get rid of that is by making the Matte color match the page background. By doing this you create a halo around the image that's the same color as the background so when you merge layers the halo blends in and gives your image nice smooth edges.

 

Yep, in those cases you'll probably have to anti-alias the image and remove the white halo by hand. That's a real pain in the neck.

 

Wow, fantastic tutorial! I could've used this so many times in the past...And I certainly will be using it in the future!

 

Nice one dude. =]

Maybe it's just me, but I only use 'Sharpen' after resizing the image to a smaller size.
Helps bring out the details.

 

I do the same thing. I never sharpen until the end.

 

Seems like mine always comes out over saturated if I sharpen at the beginning and the end.