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'm trying to create two states for an image. I have a color transparent png icon and I need a duplicate of it that is a 'white' transparent png. This will be used in for a mouseover effect in CSS (fading from one to the other). I've seen the end result of this before but am not sure how to go about actually producing this myself.

I do not need B&W or desat, but need pure 'white' transparent version that when a single color layer is put underneath it then detail of the white transparent icon is shown.

Can someone tell me how to achieve this in photoshop or similar?

Thanks!

share|improve this question

migrated from photo.stackexchange.com Apr 26 '11 at 19:39

This question came from our site for professional, enthusiast and amateur photographers.

    
Is this on-topic? I don't see any relevancy to photography. Would Super User be better? –  Reid Oct 31 '10 at 21:37
    
I don't think this is on topic, I'm afraid, it's not a photography related question. –  John Cavan Oct 31 '10 at 21:40
    
I'm sorry, but this is not on-topic here at Photo.SE. We don't deal with CSS or general image editing, and this falls under both of those categories (despite the use of photoshop.) You might have better results at superuser.com. You might also try looking through sites at area51.stackexchange.com, and see if there is a beta site that might offer you better help. I am going to close this question as off-topic. –  jrista Oct 31 '10 at 21:42

3 Answers 3

Two different approaches:

  1. Use the Magic wand selector to select the transparent area (as a non-contiguous selection)
  2. Invert the selection
  3. Draw a white filled rectangle over the icon or Fill the selection with white
    • the selection should prevent edits outside the icon area.

OR

  1. Lock the transparency/alpha layer. (This must be done from the layers palette)

    enter image description here

  2. Draw a white filled rectangle over the icon or Fill the image with white

    • the transparency lock prevents any changes to the transparency (i.e. the alpha channel)

alt textalt text

Either way, I'm not sure how the result is going to be useful to you.

share|improve this answer
    
+1 for the better solution :) –  Shizam Oct 31 '10 at 21:09
1  
thx for the responses and direction to other SE areas. –  chillster01uk Oct 31 '10 at 22:29
1  
I think the latter method is faster and more accurate, would recommend it! –  koiyu Apr 26 '11 at 21:33
    
why not just add the layer style -> color overlay to white? –  Sisir Jun 20 '11 at 8:45

Roddy's answer gives a very quick, but destructive, method.

If you'd wish to maintain layers — even just the background layer — in your source files, consider creating a new fully white layer that is a Clipping mask for the icon-layer itself. If you later need to edit the icon-layer, using clipping mask will always fill the new pixels with white, or remove the unnecessary ones.

When you're about to export the icon, you can toggle the visibility of the clipping mask to export both png's from the same source file.

share|improve this answer

In eight keystrokes. This solution requires CS4 or higher.

If your image is one single layer, only do steps 4 and 6-8. On Windows use CTRL instead of CMD.

  1. Fn+F7 or F7 (open the layer panel)
  2. ALT+CMD+a (select all layers)
  3. CMD+g (put the layers into a folder)
  4. CMD+SHIFT+n (create a new layer)
  5. CMD+] (moves the new layer out of the folder)
  6. d (changes to default black/white bg and fg colors)
  7. CMD+delete (fills new layer with white)
  8. ALT+CMD+g (clips the new color to the layer or folder immediately below it)
share|improve this answer
    
+1 for "action-able" all keystroke non-destructive approach. –  Farray May 6 '11 at 15:47

Your Answer

 
discard

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