I've been meaning to write another tutorial recently, but didn't think anyone cared really, since the response I've gotten has been less than stellar. Anyway, so here's a tutorial on how to make parts of an icon/graphic transparent.

I'm using Paint Shop Pro 7, but I'm sure parts can be used in Photoshop. Maybe later I'll try it there and see what happens. On to the tutorial.



I'm going to go through making an icon step by step first to show how I got there and what I do to get there, but if you know all of this and just want to get to the transparency bits, scroll down to step #21.

1. Open a New Image 200x200 pixels. 72 pixels/per inch. Transparent. 16 million color. I use this step with each and every icon I make, no exceptions, but that's me. If you do this part different and like your way, do it your way. :)

2. Open the image you want to use and crop it. I'm using this picture of Daniel Jackson (Michael Shanks) from Stargate SG-1. It's an okay picture, kind of faded though, so I'll be adjusting the colors on it. First, use your Crop tool to crop what you want and copy it then hit Undo and close that picture. Now paste it as a New Layer in your New Image from step 1.

3. Okay, now we have to make it fit into the New Image. Choose the Deformation Tool from the menu. A lined guide pops up on the image with squares at the corners and in the middle. Hold your cursor over one of the corner boxes and right click and drag it in towards the edges of the New Image. (Using the right button keeps the edges perpendicular to each other, this is handy for when you don't want to make it fit the New Image completely. The left works as well, but it doesn't keep the edges together.)

4. Okay, once we're done with that, we'll get to work on making this picture look good. This is what I cropped out, you can use it if you'd rather do that than crop your own.



5. Layer 2 is our Daniel layer. I move that layer below layer 1 and duplicate it twice. (Duplicate the original layer, rather than the copy to avoid losing image quality. A copy of a copy is never as good as a copy of an original image.) Again, this is just something I do to make pictures look richer and more colorful, you don't have to follow these steps. Skip ahead if you'd like to.

(This is a good time to save. I save my icons often because I've lost an hour's worth of work before due to power outages and crashing programs, so save often, I cannot stress this enough. Save it as a psp file, so that you can keep all the layers without having to flatten it)

6. This part, if you're not me, could be a little confusing. I know what I'm doing because I do it with every single icon I make, but when I describe it, it gets confusing. You've got Layer 2, Copy of Layer 2, and Copy of Layer 2, if you'd like to avoid some confusion, let's rename the layers. Layer 2 shall now be Yellow. The middle Layer 2 will be Middle. And the top Layer 2 will be Blue. The reasons for this will become clear once we being the color adjustments. Rename them by right clicking on the layer in the Layer Palette.

7. Turn off visibility to Blue and Middle and make sure Yellow is selected. Now, go up to Effects/Enhance Photo/Automatic Color Balance. Set the Strength to 35 for this picture, (usually I keep it at 30, but this picture is faded a bit) Remove Color Cast should not be checked, and slide the slider all the way to the left. It gives the picture an orange-ish yellow look to it, but it's all a part of the process, so don't worry. Click Okay.

8. Go back up to Effects/Enhance Photo, but this time choose Automatic Saturation Enhancement. Bias should be set to More Colorful, Strength to Stong, Skintones Present should be checked. Hit Okay.

9. Up at Effects/Enhance Photo again we choose Automatic Contrast Enhancement. Bias should be set to Darker, Strenth to Mild, and Appearance set to Bold. Click on Okay. This is what we now have.



10. That's the first step in enriching the picture. Now, click on Layer Middle and do step 7 again with this layer rather than Yellow layer. This time though, place your cursor just past the Sunlight setting and click 3 times until it moves to 6580. I use this setting because it's always on target and I can duplicate it again whenever I need to rather than trying to remember where I slid it to. Repeat steps 8 and 9 leaving the settings exactly where they are.



11. Now, click on Layer Blue and do step 7 on this layer, sliding the slider all the way to the right to 9300. Repeat steps 8 and 9, again, leaving the settings where they are. Now we have three layers that have richer colors than before.



12. In the Layer Palette, slide the Opacity for Blue and Middle all the way to 0. The Yellow layer is our base layer. Now, slide the Middle layer's opacity to something that looks good to you. I set mine to 40. It's deep and rich, but still has a bit of a yellow cast to it. So, now we do the same for Blue layer. This one usually goes up less the Middle layer, unless a lot of blue is needed. There's already a lot of blue in this picture, so I set mine to 20. Looks pretty good. Now we turn off visibility to Layer 1 and right click one of the other layers and choose Merge/Merge Visible. This is what we now have.



13. It's time to resize the picture to icon size. If you're not doing an icon, then you don't need to do this step, or you can resize it to the size you need. We're doing it to standard icon-size: 100x100. Go up to Image/Resize and use these settings:

Pixel Size - 100x100
Resize Type - Smart Size
Resize All Layers - Checked
Maintain Aspect Ratio - Checked

Click Okay.

14. I usually try to brighten and soften the picture at this point. There are a few ways to go about it. The one I was oh-so fond of for quite a while, and the one I just learned. The old way, which I still occasionally use becuase the techniques give you different results, is the Brightness/Contrast route. Duplicate your merged layer and go up to Colors/Adjust/Brightness/Contrast and set Brightness to 35, Contrast to 50. Then go up to Effects/Blur/Gaussian Blur set to 7. Lower the opacity of the top layer until you like it. I set mine to 45 and then Merged the two layers. This is what it looks like:



14a. Or you can do the other step which brightens the image significantly. Sometimes too much, which is why I use the other way, sometimes in conjunction with this step. If you did the Brightness/Contrast way and wish to do this way now, Undo until you get back to before you Brightened the duplicate layer. Go to Effects/Blur/Gaussian Blur and set it around 1.8 (this is what I got from someone else's tutorial, though I sometimes use 2) and hit Okay. Now change the Blend Mode of that layer to Screen. Ooo, pretty. A bit harsh perhaps, but that's why we work on layers in between the Screen layer and the Merged layer. Right now, it looks like this:



15. Move the Screen layer above Layer 1 and we'll work on brushes and flood filling. Recently I've been in a pale color mood, so I use tans and pale greens, browns, those sorts of colors, but you don't have to. I'm using them as reference for this tutorial, and the effects that come from those colors will be unique to those colors. I generally begin with Flood Filling Layer 1 with either green or my favorite tan color. I have specific colors that I've saved in the Color Palette (yay PSP for giving us that option) and I use them often. For this icon, I'm using a blue/grayish color.

R - 102
G - 150
B - 168

15a. I flood-filled Layer 1 and then went up to Effects/Texture Effects/Blinds. Set to Width 2, Opacity 30, and Horizontal unchecked for this one. Color - Black, Light From Top/Left checked. That doesn't really make a huge difference though, so either or. And if you want Horizontal lines, check that. I wanted Vertical lines though, so I left it unchecked. I went through all the Blend Modes and, as usual when I do this step, I chose Soft Light set to 100 Opacity. It's personal preference though, so whatever you want. :) This is what I now have:



16. Add a layer above Layer 1 and, if you're following along with me, use this color:

R - 205
G - 181
B - 123

Again, you don't have to. This is just what I'm using. Flood Fill the newest layer and go back up to Effects/Texture Effects/Textures. I'm using one I saved, but it's the base for the Presets of Plastic Wrinkles. I just fiddled with the settings and came up with this, which I named Paper Bag and use often.

Settings for Paper Bag:

Texture - #15
Size - 100
Smoothness - 15
Depth - 14
Ambience - 0
Shininess - 0
Color - White
Angle - 315
Intensity - 25
Elevation 50

If you want to save it, just set it to how you want it and click on Save As, then give it a name and click Okay. It's always there when you want to use it. All right, I chose Paper Bag, which is the settings above, and clicked on Okay. I went through all the Blend Modes again, and a few looked okay, but I liked Hard Light most of all. Only problem is that it's covering Daniel's face and doesn't look great that way. So I'm going to erase it from his face and leave it only in the background.

17. Making sure the Paper Bag layer is selected, it should be layer 3, zoom in on it and lower the opacity until you can see through it to Daniel below. Choose your Eraser and set it to something like this:

Shape - Round
Size - 14 (this can be changed as needed)
Hardness - 25
Opacity - 100
Step - 1
Density - 65

These are just what I use. I change them occasionally. I'm not spectacularly knowledgable about what settings are perfect in Opacity, Hardness and Density. It's just what I currently have it at, and it works for me because it softens the edge being erased rather than being a hard cutting edge that looks crappy. So, now we carefully erase everything from on top of Daniel, being especially careful on the edges. When you're done, crank the Opacity back up and take a look. Fix any missing parts if you missed some, or Undo if you messed up.

(A good thing about PSP is that it gives you the Undo option and Command History, letting you pick exactly where you want to go back to.)

This is what I now have:



18. I added another layer on top of the paper bag layer and now I'm going to apply a brush. I have a lot of brushes, and I don't remember where I got them all from, so I can't point you to the exact brush, but if you really have to know, email me and I can try to track it down for you. Some I made myself, so if I use any of the ones I made and you want it, I'll email it to you. So, I'm using this color as my foreground color:
(this is one of my favorite colors to use)
R - 135
G - 149
B - 135

And as my background color, another favorite:
R - 167
G - 118
B - 89

In fact, all of the colors I've used so far are on my favorites list, so I use them quite often.

(The brush I'm using is one of my own. I'll put it up here, all you have to do to use it, if you want it, is open it as an image in PSP and then go to Seletions/Select All, then click on your Paint Brush and in the Tool Palette, choose Custom and in the dialogue that pops up, click on Create. It'll save it as a custom brush for you.)



19. With the brush above, I set the Size to 100, the Opacity to 75, Step 25, and Build Up is checked. I clicked randomly about the picture with both colors until it fills the layer, but not completely. You want definition and texture, layers of color. I went through all the Blend Modes and wasn't satisfied with any of them, so I did a Gaussian Blur of 1, (which I do a lot of times anyway) and then went through them again. This is something I do a lot. It's trial and error really. I think I like the Blend Mode Color now, since it spread the colors out a bit more with the blur and the brown now covers more of Daniel's jacket, giving it a more even appearance. But this is just me, I'm really into the pale neutral colors lately and it looks good with the colors I used, kind of tannish/brown, so this is what I'm going to use. You can do yours differently of course. This is what I now have:



20. I'm adding another layer to give the picture more depth. Using the same brush, I switch the colors to more of my favorites: the Foreground is

R - 254
G - 240
B - 224

And the Background color is the same as the Paper Bag Layer:

R - 205
G - 181
B - 123

I right click the Background color once on the right and once on the left, and then do the same with the Foreground color. I checked out the Motion Blur at 0, 40 strength, and 90, 40 strength, but I didn't like it much. So I'm going to instead do Wind. It's under Effects/Geometric Effects/Wind all the way at the bottom. The settings on this one is: 20/From Right, hit Okay. Then go back to it again, and change it to From Left, and hit Okay again. Nice.

I went through a lot of searching here, and almost went back and deleted this step because it wasn't looking good for me. But after a lot of Blend Modes and Opacities and Image Flipping, I finally got something I like. First I set the Blend Mode to Hard Light, then I went to Image/Mirror and then zoomed in and Erased Daniel again, so we can see him. Then I went back to Motion Blur and set the strength to 20 and the Angel to 90 to soften the edges of the eraser since Hard Light makes the difference more visible and jagged. Now I like it. So, this is what I now have:



And after all that I'm about to do the transparent bits.

FINALLY! I'm sure those of you actually here for the transparency bits are cursing my thoroughness in detailing the previous parts, but some people like to know those things, and rather than have them ask me after reading this, I'll just write it all out now. :)

________________TRANSPARENCY SECTION__________________

21. Copy of Merged should be your top layer at this point, for those of you following the complete tutorial, for those not, just go by your top layer. Now, create a new layer above Copy of Merged.

We need to decide what we want transparent and if we want it lined. I like the natural look of torn edges, but I also like the precise straight edges. For this, I'm going to do the tearing effect, with a lined edge faded to look natural. Hopefully. ;)

22. On your new top layer, choose the Paint Brush with these settings:

Size - 1
Shape - Round
Hardness - 100
Opacity - 100
Step - 1
Density - 100
Color - Black

I drew where I wanted the transparent edges to be and this is what I got. Now, if you like what you did and want to use this more than once, you can save it as a Mask and use it whenever you want to. This is how. Take the simple line drawing you have and flood fill the middle in white, and the outer edge with black. Now go up to Mask/New/From Image. In the dialogue box use: This Window and Source Luminance and hit Okay. Now you have a white image in the middle with the outer edges of black gones. This is what we want. Go back up to Mask/Save to Disk and type in a name. (If it won't save, then make sure you deleted the asterisk in the file name.) Now you have a transparent mask you can use whenever you want to by going up to Mask/Load From Disk and choosing the one you made.

However, that doesn't keep the outline, and I would like an outline on my icon. So, I Undo back to the point where I flood filled. You now have your single black line again.

23. Because I want the black part to be natural looking, not blatantly out there, I changed the Blend Mode to Overlay. Soft Light was good too, but I liked Overlay better. So, now we need to fill the outer edge in with a color that isn't in the image at all in order to make it transparent. A bright orange, or neon green, something that has no chance of being in the image, then Flood Fill the transparent area. I'm using a hot pink:

R - 249
G - 1
B - 100

Now, flood fill the outer edge and, if you're done with the icon, we'll move onto saving it. However, (I hear the collective groan out there) I want to add text to my icon, so I go all the way down to the bottom layer and click on it, the Create a New Layer so that it's above the bottom layer. (If the pink layer is distracting to you, turn off visibility to it and proceed.)

24. Flood fill the new layer with a color that you want the outline on the text to be, (I usually use black) and then turn off the Foreground color. Make the Background color the color you want your text to be. I'm using the tan color from previous parts

R - 205
G - 181
B - 123

Click on your Text tool and then your image, making sure to place it above where the transparency will be. (Or, I suppose you could put it on the transparent part and that would be cool. Hmm)

I'm not doing that though. I want a simple text, so I'm using 04b, set to 6, Floating, Antialias off. I left the pink layer on so I could place the text above that spot. When you have your text, make sure it's all on the icon and then go to Selection/Modify/Expand, and set it to 1. Go over to Edit/Copy/Paste as New Layer and then unselect.

Now shut off all the upper layers and delete the black-filled layer. Move your text to where you want it to be and make sure you like it. If not, keep moving it until you do. If it's not visible under all those layers, try changing the Blend Mode or duplicating it and doing 2 different Blend Modes like Multiply underneath and Screen on the upper one. If that still doesn't help, you can either carefully erase the area around the text and hope that works or move the layer up until you can see it. I left mine where it was, left the Blend Mode on Normal and went from there.

25. Okay, once you're sure you're done, I suggest saving it again as a psp file once last time, and then proceeding. Just in case it gets messed up, you'll have the chance to redo it without starting over. Right click and choose Merge/Merge All.

26. Problem. When I changed the black lined layer to Overlay (I thought this might happen) it let other colors bleed through so Undo the Merge and change the mode back, or duplicate the layer and switch the Blend Mode to Normal. Same result either way. Now Merge again, and forget that I'm not perfect, lol.

27. Go to File/Export/Gif Optimizer. Here's where the transparency works or doesn't. In the Transparency tab click on:
Areas That Match This Color - (the color you used for the transparent flood fill, I used R - 249, G - 1, B - 100) Tolerance 1.

In the Partial Transparency tab, use these settings:
Use Error Diffusion Dither - Checked
No, use the existing transparency at 100% opacity - Checked

In the Colors tab:

256 colors
0% dithering
Optimized Median Cut

Format - Interlaced

Hit Okay and we're done! Whoo. That took a long time. Usually, since these steps are almost automatic for me, it doesn't take too too long to make an icon, it's just following a tutorial and learning new things that makes it feel like hours and hours have gone by. But, check out the nifty new icon I made following this tutorial to the letter.