Advertisement


Convert icon to a transparent png


Question

I have a set of icons that I resized to 30x30. Now I want to use them for my iPhone TabBar as specified here:

http://www.idev101.com/code/User_Interface/sizes.html

How can I make these transparent png's, or add transparency, in Photoshop or Gimp so they appear properly in my TabBar?

2011/04/12
1
1
4/12/2011 4:36:00 AM

Accepted Answer

Also, one way is creating a transparent layer below the base layer(make it movable by, e.g., cloning it (CTRL+J in Windows) then deleting/hiding the original base layer) and then setting the Blend If options for the base layer. (You can get to Layer Styles Menu by double clicking the empty space in Layers Panel or from the Top Menu: Layer > Layer Style > Blending Options...) Works really well if you got like sharp edges and white background or a specific color you want to be transparent. More control than with magic selection tool with practically no added pain. (Ok, well maybe couple steps...)

Pros:

  • Very Precise
  • Easy and fast to use, get rid of white background in no time.
  • No ugly brushing errors.

Cons:

  • Can make unwanted parts of the image transparent, e.g., highlighs, lens-flares and such. If this happens you need to consider copy/pasting those spots to a separate layer if you still feel this would be the easiest way around.
  • If the background, that should be transparent, is complex with full of colors/luminance, you won't do much with this.

Usage: Use the Arrow-style sliders under the gradients at the bottom of the Blending Options page in Layer Styles, inside the 'Blend If' area. Adjusting "This Layer" will make the bright or dark areas of the adjusted layer transparent. Adjusting "Underlying Layer" will use the Layer below current one to translate it's own brightness values to this layers transparency. (Useful if you, e.g., want to add texture to only the brightest parts of the underlying layer.)

ALT+click n drag to split the arrows for smoother transparency edge.

You can also drag the arrows so that the black arrow is more to right than the white arrow. This way you can make a midrange transparent.

Layer Styles "Blending Options" Menu

The Blend If is set to gray by default, but you can make adjustments to separate color channels as well and Photoshop will remember them even if you switch back and forth, so you can make adjustments to all the separate layers and to the gray at the same time. Downside of this is that you can't really use this as a greenscreening method, because you can't tell Photoshop to make only the areas that have all three, e.g., red 150-180, green 31-37 and blue 123-140, transparent. Photoshop will make the transparency changes to any pixels that have any of the adjusted color channel values in them, so even gray gradient gets transparency into it when you adjust only green channel.

And heres a quick example of a very hard to extract dark gray blob made gradually transparent from white background. I spent +/- 2 seconds to adjust the sliders for this one (a split white arrow with quite wide spread in the Gray channel). It will lose some detail, yes, but imagine trying to brush it transparent - no way!

Just a quick example.

You can use these sliders for very cool effects as well. Good Luck!

2011/04/13
4
4/13/2011 5:58:00 AM