: Overlay a graphic on a photo or image How would I overlay a graphic (a logo in this case) on a t-shirt and make it look like it's really there, not just superimposed (wrinkles, lines, etc?)

@Eichhorn212

Actually, I have a better idea: if you start with a white T-shirt and set its layer mode to "Multiply", you can put the logo on a lower layer and it will automatically be shaded as if it was printed on the T-shirt. Better yet, you can also change the color of the shirt itself by putting a solid color layer below the logo.

Let me demonstrate this technique. I'll start with a simple picture of a plain white T-shirt on a neutral background:



(Actually, I based it on this picture of a Wikipedia T-shirt by ArtMechanic, licensed under GFDL / CC-By-SA 3.0, and resynthesized out the original logo.)

Next, I'll duplicate the layer and cut the T-shirt out of of the upper layer, leaving only the background:



(I actually used a layer mask to make the shirt area transparent. The transparent area shows up as white above, since I saved the picture in JPEG format. Since this is just a demonstration, I didn't do a very careful job, but that could be easily fixed by editing the mask by hand.)

After that, I change the mode of the lower layer to "Multiply" and add a new white layer below it. At this point, the picture still looks exactly the same as when I started. However, I can now add some extra layers between the white bottom layer and the T-shirt, which will show up as if they were printed on the shirt. For this demonstration, I'll use the GIMP logo:



I'll also add some solid color layers below it, to show what the shirt would look like in different colors. At this point, the layers look like this:



...and the final picture, with the various color layers visible, looks like this:






(I added the blue layer after I took the screenshot of the layers dialog, and didn't bother to take it again. Note that the black layer isn't actually black — it's 85% gray. If it were completely black, you wouldn't be able to see any shading on the shirt.)

Actually, after doing this demonstration, I thought of one more trick: if, instead of using the "Multiply" mode, I'd used Layer→Transparency→Color to Alpha... on the shirt (with white as the transparent color), I could've merged the top two layers and saved the result as a transparent PNG image. Then I could've used CSS to position that image on top of any other appropriately sized image on a web page, making that image look as if it had been printed on a T-shirt!

Also, I realized only afterwards that it might've looked better if I'd made the transparent areas of the top layer just a little bit opaque (say, 5% to 15% opacity), so that, effectively, the logo and color layers would get slightly lightened. That way, even using a 100% black color layer at the bottom wouldn't totally destroy the shading on the shirt.

Vote Up Vote Down

@Lee3735518

If it's a white t-shirt and the logo doesn't have white parts that need to be visible, then you can just go to the Layers panel and switch the "Mode" setting to multiply.

Vote Up Vote Down