How to overlay an image on top of non-transparent pixels only?
I'm trying to create a realistic t-shirt mockup. The 3 elements that I have working so far are:
1) t-shirt image
2) artwork
3) displacement map for the artwork (to match t-shirt folds)
I am trying to add a shadow layer, which can essentially be a semi-transparent PNG. However, I can't figure out how to place it only on top of the artwork - it goes over the actual shirt, which I don't want.
Is there a way to overlay another layer only on top of the visible pixels of the displaced artwork?
Here's what I have right now:
Cloudinary link:
Thanks in advance!
Answers
-
Hi there,
Thanks for reaching out.
Would you mind sharing the URL ( or public id ) of the shadow image that you want to overlay? I can work with it and see what I can come up with.
Also, it would be great if you could share what you tried, so I can use that as a starting point and make adjustments from there.
I look forward to your reply.
Kind regards,
Tia
Helpful Links For You
💬 Share questions, connect with other users in our Cloudinary Community forums and Discord server!
🧑🎓 Join our Cloudinary Academy for free courses, workshops and other educational resources.
📄 Read our documentation for in-depth details on Cloudinary product features and capabilities
📰 Check out the Cloudinary blog for the latest company news and insights1 -
Hey Tia, I think I figured it out. Basically, instead of trying to overlay something over the displaced arwork, I separated highlights from the base image, and am just overlaying on top of entire canvas. thanks anyway!
0 -
Hi there,
You're welcome 😊
Kind regards,
Tia
Helpful Links For You
💬 Share questions, connect with other users in our Cloudinary Community forums and Discord server!
🧑🎓 Join our Cloudinary Academy for free courses, workshops and other educational resources.
📄 Read our documentation for in-depth details on Cloudinary product features and capabilities
📰 Check out the Cloudinary blog for the latest company news and insights0
