¿Cómo creo máscaras de imagen png en Photoshop?

Noté que teespring.com usa un pngque está preparado de cierta manera para que actúe como una máscara dentro de su aplicación web. Así es como se ve la imagen cuando la abro en Photoshop:en photoshop

Pero, así es como se ve renderizado dentro de su aplicación web:ingrese la descripción de la imagen aquí

¿Cómo se consigue este efecto de enmascaramiento en photoshop?

Aquí está la imagen real para referencia:ingrese la descripción de la imagen aquí

Definitivamente he visto un engaño de esto.

Respuestas (2)

Cómo hacerlo en Photoshop sin usar ningún truco llamativo:

Comienza con una foto de una camisa blanca. Elimine el fondo utilizando un trazado de recorte u otro método que deje un borde sólido perfecto. La varita mágica y cualquier método de selección basado en el color suelen ser inútiles para este propósito cuando el objetivo es una foto:

ingrese la descripción de la imagen aquí

La camiseta sin fondo es una capa llamada Original.

Agregue una nueva capa vacía "Blanco". Haz una selección en la capa Original. Con la varita mágica, seleccione el vacío alrededor de la camisa y pinte en la capa "Blanco" el color blanco sólido lleno de la selección. Usa un cepillo grande y sólido. No utilice el cubo de pintura.

ingrese la descripción de la imagen aquí

Inserta una nueva capa vacía "Negra". Invierta la selección (vuelva a seleccionar el vacío, si es necesario, no intente seleccionar la camisa) y pinte negro sólido completo de la selección en la capa "Negro":

ingrese la descripción de la imagen aquí

Ir a la capa Original, seleccionar todo y copiar el contenido de la capa al portapapeles.

Ir a la capa Negro e insertar una máscara de capa.

Vaya a la máscara de capa (= haga clic en el icono de la máscara manteniendo presionada la tecla Alt al mismo tiempo). Pegue en la máscara la camiseta original del portapapeles (= Ctrl+Shift+V).

Invierte la máscara de capa (Imagen > Ajustes > Invertir). Ahora deberías tener en pantalla:

ingrese la descripción de la imagen aquí

Esa es la máscara de capa. Si hace clic en el icono de contenido de la capa y cierra la capa Original, verá el resultado deseado:

ingrese la descripción de la imagen aquí

Ahora puede eliminar la capa Original, fusionar las capas Blanco y Negro y exportar la imagen como PNG.

Si lo pones sobre cualquier imagen con modo de fusión = Normal, la imagen se muestra en el agujero y sombreada:

ingrese la descripción de la imagen aquí

NOTA: También es útil guardar la versión de la imagen multicapa. Puede aplicar curvas a la máscara de capa de la capa Negra para encontrar la fuerza de sombreado adecuada.

El siguiente paso hacia un mayor realismo sería utilizar la imagen de la camiseta original como un mapa de desplazamiento para la "Cualquier imagen" insertada. Eso haría que las arrugas fueran más plausibles. Pero eso está más allá del alcance de esta respuesta.

Respuesta legendaria. Muy muy genial. ¡Gracias!

Puedes ver exactamente cómo se hace mirándolo. El "área blanca" fuera de la camisa es blanca (100 % de opacidad), el área de la camisa es transparente (para mostrar el diseño debajo) y hay algunas sombras para superponer para darle la sensación de ser un material.

Para aplicar la máscara en la web, han superpuesto el PNG sobre su obra de arte usando SVG. Casi definitivamente hay otro paso en su proceso particular, ya que la máscara que tienen en ese png solo no parece sombrear correctamente si solo se aplica como máscara. Sin embargo, ciertamente puede funcionar con un color de fondo sólido como máscara exterior y sombreado básico (y reflejos) dentro del área enmascarada.
Adjunto un ejemplo.

Foto de fondo Máscara transparente Resultado

Gracias, Lucas. Me interesa saber como se prepara para que mantenga esas sombras que dan la sensación de ser un material.
@AdamSoffer ¿Específicamente para la web o la máscara en general?
Específicamente para la web.