¿Cómo convierto un PNG transparente de color a PNG transparente blanco (no blanco y negro)?

8

Estoy tratando de crear dos estados para una imagen. Tengo un icono png transparente de color y necesito un duplicado que sea un png transparente 'blanco'. Esto se usará para un efecto de mouseover en CSS (desvanecimiento de uno a otro). He visto el resultado final de esto antes, pero no estoy seguro de cómo producirlo yo mismo.

Yo no necesito B & W o desaturación, pero necesito versión transparente pura 'blanco' que cuando una sola capa de color se pone debajo de ella a continuación, los detalles del icono blanco transparente se muestra.

¿Alguien puede decirme cómo lograr esto en Photoshop o similar?


fuente
¿Esto es sobre el tema? No veo ninguna relevancia para la fotografía. ¿Super User sería mejor?
Reid
No creo que esto sea un tema, me temo, no es una pregunta relacionada con la fotografía.
Lo siento, pero esto no está en el tema aquí en Photo.SE. No tratamos con CSS ni con la edición general de imágenes, y esto se incluye en ambas categorías (a pesar del uso de Photoshop). Es posible que tenga mejores resultados en superuser.com. También puede intentar buscar en los sitios en area51.stackexchange.com, y ver si hay un sitio beta que pueda ofrecerle una mejor ayuda. Voy a cerrar esta pregunta como fuera de tema.
jrista
Alguien ya lo publicó, parece que agregar un estilo de capa "Superposición de color" debería ser la mejor y más rápida solución, pero ... depende del tipo de contenido de la imagen, ¿le importaría actualizar agregando una vista previa del png original o algo así? podemos ayudarte mejor? ¡Gracias!
Sam

Respuestas:

11

Dos enfoques diferentes:

  1. Use el Magic wandselector para seleccionar el área transparente (como una selección no contigua)
  2. Invertir la selección
  3. Dibuje un rectángulo relleno de blanco sobre el icono o Fillla selección con blanco
    • la selección debería evitar ediciones fuera del área del icono.

O

  1. Bloquee la capa de transparencia / alfa. (Esto debe hacerse desde la paleta de capas)

    ingrese la descripción de la imagen aquí

  2. Dibuje un rectángulo relleno de blanco sobre el icono o Fillla imagen con blanco

    • el bloqueo de transparencia evita cualquier cambio en la transparencia (es decir, el canal alfa)

texto alternativotexto alternativo

De cualquier manera, no estoy seguro de cómo el resultado será útil para usted.

Farray
fuente
1
Creo que el último método es más rápido y más preciso, ¡lo recomendaría!
Jari Keinänen
¿por qué no simplemente agregar el estilo de capa -> superposición de color al blanco?
Sisir
6

La respuesta de Roddy da un método muy rápido, pero destructivo.

Si desea mantener capas, incluso solo la capa de fondo, en sus archivos de origen, considere crear una nueva capa completamente blanca que sea Clipping maskpara la capa de iconos en sí. Si luego necesita editar la capa de iconos, el uso de la máscara de recorte siempre llenará los nuevos píxeles con blanco o eliminará los innecesarios.

Cuando esté a punto de exportar el icono, puede alternar la visibilidad de la máscara de recorte para exportar ambos png desde el mismo archivo de origen.

Jari Keinänen
fuente
5

En ocho pulsaciones de teclas. Esta solución requiere CS4 o superior.

Si su imagen es una sola capa, solo realice los pasos 4 y 6-8. En Windows use CTRL en lugar de CMD.

  1. Fn+ F7o F7(abre el panel de capas)
  2. ALT+ CMD+ a (seleccione todas las capas)
  3. CMD+ g(poner las capas en una carpeta)
  4. CMD+ MAYÚS + n(crear una nueva capa)
  5. CMD+ ](mueve la nueva capa fuera de la carpeta)
  6. d (cambia a los colores predeterminados bg y fg en blanco y negro)
  7. CMD+ delete(llena la nueva capa con blanco)
  8. ALT+ CMD+ g(recorta el nuevo color a la capa o carpeta inmediatamente debajo de ella)
jaime
fuente
+1 para el enfoque no destructivo "accionable" de todas las pulsaciones de teclas.
Farray