8

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?

Improve this question
4
  • Is this on-topic? I don't see any relevancy to photography. Would Super User be better?
    – Reid
    Commented Oct 31, 2010 at 21:37
  • I don't think this is on topic, I'm afraid, it's not a photography related question.
    – John Cavan
    Commented Oct 31, 2010 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
    Commented Oct 31, 2010 at 21:42
  • Someone already posted it, seems that adding a "Colour Overlay" layer style should be the best and quickest solution, yet... depends on the type of image content, would you mind updating by adding a preview of the original png or something so we can help you better? Thanks!
    – Sam
    Commented Feb 24, 2016 at 16:46

3 Answers 3

Reset to default
11

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.

Improve this answer
2
  • 1
    I think the latter method is faster and more accurate, would recommend it!
    – Jari Keinänen
    Commented Apr 26, 2011 at 21:33
  • why not just add the layer style -> color overlay to white?
    – Sisir
    Commented Jun 20, 2011 at 8:45
6

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.

Improve this answer
5

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)
Improve this answer
1
  • +1 for "action-able" all keystroke non-destructive approach.
    – Farray
    Commented May 6, 2011 at 15:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.