How to overlay an image on top of non-transparent pixels only?

Options
dstrogiy
dstrogiy Member Posts: 2 ✭
edited June 28 in Developer APIs

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:

Untitled Image
Screenshot 2024-06-22 at 2.33.12 PM.png

Thanks in advance!

Tagged:

Answers

  • Cloudinary Team
    Cloudinary Team Administrator, Cloudinary Staff Posts: 141 admin
    Options

    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 insights

  • dstrogiy
    dstrogiy Member Posts: 2 ✭
    Options

    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!

  • Cloudinary Team
    Cloudinary Team Administrator, Cloudinary Staff Posts: 141 admin
    Options

    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 insights

Categories