Noté que teespring.com usa un png
que 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:
Pero, así es como se ve renderizado dentro de su aplicación web:
¿Cómo se consigue este efecto de enmascaramiento en photoshop?
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:
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.
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":
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:
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:
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:
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.
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.
Welz