Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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?

share|improve this question
1  
what's the format of the icons? are those .icns, .ico or plain images? –  jackJoe Apr 12 '11 at 8:42
    
Could you provide an example how does one icon look like? Do they have transparency in their current form? And in what format are the originals; are they, for example, layered? Couldn't they be used? –  koiyu Apr 12 '11 at 10:06
    
It's a png with no transparency. –  user1038 Apr 12 '11 at 11:55
    
Hmmm... 4 answers and I can't upvote anyone yet; just pick an answer. –  user1038 Apr 13 '11 at 2:36

4 Answers 4

up vote 3 down vote accepted

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!

share|improve this answer

open your icon in photoshop.then create a new document 30*30 make sure there is no background layer. you can make transparent background by selecting in start.

enter image description here or hiding the colored background layer after making the document. save your work hope this is clear to you..

share|improve this answer

in case the image doesn't have a transparent background (which is the case), you have some ways to do this (all in Photoshop):

Common: make sure the image is in RGB mode, and make sure it is in a layer (you can copy the contents to a new layer and remove the background "layer" so you only have one layer containing the icon; then:

Cut out the background (can be achieved in many ways, one is to delete the background with the eraser (not very accurate), another is to select the background (with the magic wand, or via creating a clipping path, or even using the lasso tool) and deleting the background.

You can also create a layer mask and paint over the background, this will "erase" the background.

Finally, go to file > save for web > select PNG 24 and check the transparent background. That's it!

All of these are sort of generic ways, and it depends on your knowledge of Photoshop, but I'm sure you'll take some of these pointers and choose one.

share|improve this answer

Take your existing icon, and make sure it's not locked, or the background layer.

Then, create a new layer, and make sure your icon is above the background layer.

Using a selection tool, or the pixel-brush eraser, clean any white backdrop or noise behind the icon you are trying to isolate.

Now, CTRL-A to select all pixels of the background layer and press DEL to empty the layer contents. You should now see a bunch of squares, representing transparency.

Do not flatten the image! Photoshop will give you a white background.

When you export, there's no need to save for web, just File -> Save As, then select the file-type PNG.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.