Guardar PSD a PNG con transparencias de capa pierde efectos de capa

Tengo un PSD de una maqueta de camisa que tiene varias capas de efectos para luces y sombras, y luego capas para los colores de la camisa.

Lo que estoy tratando de hacer es usar esto en un editor basado en web donde puedo establecer programáticamente el color de fondo sin tener que cargar una imagen separada por color: el PNG base sería una superposición que permitiría que el color se muestre.

Necesito guardar la maqueta en un PNG transparente sin colores de camisa, solo las luces y las sombras.

Sin embargo, cuando guardo como PNG o guardo para web como PNG sin ninguna de las capas de color de la camiseta visible, el PNG resultante no mantiene la transparencia.

Aquí está el archivo de muestra: https://www.dropbox.com/s/f1j5bj4nk48l9l0/tee-mockup.psd

El grupo de sombreado está configurado para pasar a través, y las capas en él están configuradas para esquivar color, filtrar, quemar color y multiplicar.

No puedo por mi vida cómo guardar esto como un PNG con transparencias/efectos de capa intactos. Sé que esto es posible porque muchos editores en línea usan maquetas como esta. ¿Hay un método específico para hacer esto? Cualquier ayuda es muy apreciada. ¡Gracias!

Hola Pat, bienvenido a GDSE y gracias por tu pregunta. Si desea obtener más información sobre el sitio, consulte el centro de ayuda o comuníquese con uno de nosotros en el chat una vez que su reputación sea suficiente (20). ¡Sigue contribuyendo y disfruta del sitio!
Hola Pat, el enlace que has proporcionado me da un error 404 No encontrado, ¿podrías comprobar si es correcto?

Respuestas (2)

Los modos de fusión dentro de Photoshop NO se traducen al formato PNG . No es una cuestión de "cómo". Es una cuestión de si es imposible en base a la tecnología actual.

Para que un PNG funcione correctamente, todas las capas de Photoshop deben configurarse Normalpara el modo de fusión. Esto significa que debe evitar el uso de modos de fusión al configurar las cosas en Photoshop.

Los modos de fusión usan cálculos entre capas para formular una apariencia.
Esencialmente, Photoshop hace un cálculo:
(this pixel / blending mode) + Underlying pixel = appearance

En el formato PNG, no hay comunicación entre capas. Dentro de un PNG todo es 1 capa y un píxel es un color y un alfa, eso es todo. No puede decirle a un PNG que "altere el color de este píxel en función del píxel debajo de él" porque el PNG no reconoce ningún píxel debajo.

En resumen, simplemente no puede lograr interacciones entre capas usando imágenes PNG. Si usa PNG para resaltar y sombrear, lo mejor que puede hacer es crear píxeles oscuros y claros, luego ajuste el alfa para esos píxeles, pero simplemente no puede usar los modos de fusión.

Gracias por la info. Desafortunadamente, no puedo elegir cómo se configuran las capas: el cliente proporcionó un PSD de maqueta en el mismo formato/diseño que el PSD de ejemplo que compartí. Lo que necesito saber es cómo exportar el PSD a formato NG para que las sombras/iluminación de la maqueta aún tengan transparencia. Gracias por cualquier consejo.
@PatFriedl Como publiqué... no puedes . La tecnología actual no le permitirá guardar un PNG con modos de fusión. No tiene más remedio que modificar el psd e incluso entonces, nunca obtendrá la misma apariencia que al usar los modos de fusión en Photoshop. simplemente no es posible. No es una cuestión de pasos adecuados. Lo que usted (o su cliente) está pidiendo es imposible.
Para que conste, los otros "editores en línea" usan múltiples imágenes... una imagen para cada color de una prenda. O están usando cosas como Flash y SWF en algunos casos. No superponen un PNG sobre un fondo de color.
En realidad, no lo son: teespring.com, teechip.com, represent.com y muchos más usan una imagen muy similar a la que hay en el PSD que compartí. Esta es la imagen superpuesta que se usa en el editor de Teepsring: d1b2zzpxewkr9z.cloudfront.net/images/products/apparel/… Y esta es la que se usa en Represent.com: d2v48i7nl75u94.cloudfront.net/blanks/thunder/… Si guarda esas imágenes , verás que son superposiciones. Así que sé que esto se puede hacer, pero no estoy lo suficientemente versado en PS para lograrlo. Gracias
Sí ... como dije, píxeles oscuros y claros con un alfa ... no modos de fusión.

Debe establecer la opacidad de cada capa en el modo de fusión normal en un valor que produzca el efecto más cercano si pudiera estar en su modo de fusión. Inserte una capa de fondo con el mismo color o imagen que el fondo del sitio web y podrá verificar fácilmente el efecto, pero cuando guarde todo el psd en png, no olvide hacer que el fondo no sea visible.