0

I noticed teespring.com uses a png that's prepped a certain way so that it acts as a mask inside its web application. Here's what the image looks like when I open it in photoshop: in photoshop

But, here's what it looks like rendered inside its web application: enter image description here

How is this masking effect achieved in photoshop?

Here's the actual image for reference: enter image description here

  • I've definitively seen a dupe of this. – WELZ May 1 '18 at 6:14
2

How to make it in Photoshop without using any flashy tricks:

Start from a photo of a white shirt. Remove the background using clipping path or other method which leave perfect solid edge. Magic wand and any color based selecting methods are usually useless for this purpose when the target is a photo:

enter image description here

The shirt without a background is one layer named Original.

Add a new empty layer "White". Make a selection in layer Original. With magic wand select the emptiness around the shirt and paint into layer "White" solid white color full of the selection. Use a big solid brush. Do not use the paint bucket.

enter image description here

Insert a new empty layer "Black". Invert the selection (reselect the emptiness, if needed, do not try to select the shirt) and paint solid black full of the selection into layer "Black":

enter image description here

Goto layer Original, select all and copy the layer content to the clipboard.

Goto layer Black and insert a layer mask.

Goto the layer mask (=click the mask icon holding Alt at the same time). Paste in place to the mask the original shirt from the clipboard (= Ctrl+Shift+V).

Invert the layer mask (Image > Adjustments > Invert). Now you should have onscreen:

enter image description here

That's the layer mask. If you clck the layer content icon and close layer Original, you see the wanted result:

enter image description here

Now you can remove layer Original, merge layers Black and White and export the image as PNG.

If you put it over any image with blending mode = Normal, the image is shown in the hole and shaded:

enter image description here

NOTE: It's useful to save the multilayer image version, too. You can apply curves to the layer mask of layer Black to find the proper shading strength.

The next step to higher realism would be to use the original shirt image as a displacement map for the inserted "Any image". That would make the wrinkles more plausible. But that's beyond the scope of this answer.

  • Legendary answer. Very, very cool. Thank you! – Adam Soffer May 2 '18 at 13:32
1

You can see exactly how it's done by looking at it. The "White Area" outside the shirt is white (100% opacity), the shirt area is transparent (to show the design underneath) and there are some shadows to overlay to give it the feeling of being a material.

To apply the mask on the web, they have layered the PNG over your artwork using SVG. There is almost definitely another step in their particular process as the mask they have in that png alone doesn't seem to shadow correctly if it is just applied as a mask. However it certainly can work with a solid background colour as your outside mask and basic shading (and highlights) within the masked area.
I've attached an example.

Background Photo Transparent Mask Result

  • Thanks, Luke. I'm interested to know how it's prepped such that it maintains those shadows that give the feeling of being a material. – Adam Soffer May 1 '18 at 3:27
  • @AdamSoffer Specifically for the web, or the mask in general? – Luke May 1 '18 at 3:28
  • Specifically for the web. – Adam Soffer May 1 '18 at 3:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.