Need some help with displacement effect.

Zilla

Need some help, trying to get this displacement working, but unable to do so. I made the displacement map put it but for some reason the map is distorted.

The background i need - https://res.cloudinary.com/dkaxmhco0/image/upload/v1716311455/main_background.jpg

the label that needs to be cropped and added to the main background - https://res.cloudinary.com/dkaxmhco0/image/upload/v1716353197/label.jpg

the displacement map - https://res.cloudinary.com/dkaxmhco0/image/upload/v1716354034/map_new.png

Here's what i have got till now. - https://res.cloudinary.com/dkaxmhco0/image/upload/c_crop,g_south,h_550,w_349/l_map_new,e_displace,y_1/w_1294,h_2000/u_main_background/v1525075622/label

As you can see the label is distorted and not showing how it should. Please help.

Stephen

Hi,

It looks like the shape and size of your displacement map don't match the label that you're trying to overlay.

There's an example here in the documentation: https://cloudinary.com/documentation/effects_and_artistic_enhancements#displacement_maps

To apply that to your example, you'd need to resize the label to match the displacement map, apply the map to the label so it's distorted into the shape you need, then apply the result of that as a new layer on top of the product image (like the mug example in the documentation)

It may also be possible to use a single displacement map that's based on the overall output, but in that case you'd still need to resize the label and position it in the correct place for the displacement map to apply to it: https://cloudinary.com/documentation/layers#layer_transformation_syntax

Regards,
Stephen

Zilla

The displacement map is in exact size and location it needs to be. You can view it here. -

https://res.cloudinary.com/dkaxmhco0/image/upload/v1716354034/map_new.png

Zilla

Maybe something i am doing wrong in the url? -

https://res.cloudinary.com/dkaxmhco0/image/upload/c_crop,g_south,h_550,w_349/l_map_new,e_displace,y_1/w_1294,h_2000/u_main_background/v1525075622/label

Please view this url that i tried making.

Stephen

Hi again,

It appears that the problem is that you're not sizing the two images correctly relative to each other and are cropping out much of the label before applying the displacement map.

In this example, your "label" image is 349 x 727px, and the place in the "main_background" image where the label should appear is approximately 480x760, not accounting for the changed shape.

I recommend using the method shown in the documentation, which is to use a displacement map that matches the shape that the artwork must have before being placed on the product, then add the result of that to the product image.
It should also be possible to have a displacement map based on the shape of the final output but I think that will be harder to make work unless all the artwork images are identically sized and you don't need to crop any part of the artwork before combining the layers and then applying the map.

Regards,

Stephen

Zilla

"It should also be possible to have a displacement map based on the shape of the final output but I think that will be harder to make work unless all the artwork images are identically sized and you don't need to crop any part of the artwork before combining the layers and then applying the map"

All labels will have same size. what if i use a not cropped version of it -

https://res.cloudinary.com/dkaxmhco0/image/upload/v1716355866/label_new.jpg

The above label doesnt need to be cropped and is already cropped to size.

I also tried using the above image, it's still getting weirdly cropped.

https://res.cloudinary.com/dkaxmhco0/image/upload/l_map_new,e_displace,y_1/w_1294,h_2000/u_main_background/v1525075622/label_new

In the above url the displacement map is in exact size and location it needs to be, overall file dimensions is also exact, and the label_new is also sized according to the displacement map.

Zilla

Here's a bigger displacement map if needed-

https://res.cloudinary.com/dkaxmhco0/image/upload/v1716384258/kd18kcrbegpyqf3pidtf.png

I can do the rest, but just need help putting the label image in this displacement map correctly.

Stephen

Hi,

There's a guide here to chained transformations which I recommend checking: https://cloudinary.com/documentation/image_transformations.html#chained_transformations
In your example, you're taking the label image, applying the displacement map, resizing the result to 2000x1294, then underlaying the "main_background" image beneath it.

You can see the result of each step in that chain separately here by looking at the URL with each step added:

https://res.cloudinary.com/dkaxmhco0/image/upload/label_new

https://res.cloudinary.com/dkaxmhco0/image/upload/l_map_new,e_displace,y_1/label_new

https://res.cloudinary.com/dkaxmhco0/image/upload/l_map_new,e_displace,y_1/w_1294,h_2000/v1525075622/label_new

https://res.cloudinary.com/dkaxmhco0/image/upload/l_map_new,e_displace,y_1/w_1294,h_2000/u_main_background/v1525075622/label_new

If I understood the intended output correctly, the main problem is that the label is not being resized to match the approximate dimensions of the displacement map before you apply it so it's cropping out lots of the label- if so, you can learn about the options for cropping and resizing here and should adjust the label before applying the map: https://cloudinary.com/documentation/resizing_and_cropping#resize_and_crop_modes

Regards,

Stephen

Zilla

What size i need to make what, very confused literally. I tried this -

https://res.cloudinary.com/dkaxmhco0/image/upload/e_displace,l_kd18kcrbegpyqf3pidtf,y_-1,x_-1/label_new

No background, just the displacement map and the label. But as you can see its not working correctly still.

Zilla

I was able to get till this now, i first cropped the label image to an exact size, then used it.

However the image is not getting distorted, so still looks flat.

Stephen

Hi again,

The label and the displacement map still aren't aligned.

You need to normalise the label so it becomes the same dimensions that you built the displacement map to work with and/or change the displacement map to work with the size of label that you'll be providing.

In that most recent example URL, I can see you added the 'mpad' crop/resize method, but you didn't specify any size, so that has no effect and you're still using the original size of the label - this returns an identical response:

https://res.cloudinary.com/dkaxmhco0/image/upload/l_map_new,e_displace,y_-1/w_1294,h_2000/u_main_background/v1525075622/uhmlvh6r3sggkurxxcub

Regards,

Stephen

Zilla

Here's the label -

https://res.cloudinary.com/dkaxmhco0/image/upload/v1716388958/uhmlvh6r3sggkurxxcub.pngHere's the displacement map -

https://res.cloudinary.com/dkaxmhco0/image/upload/v1716354034/map_new.png

both are using the same dimensions and positioning. 544 width and 810 height. I still dont understand what am i missing here.

Zilla

If you can make it work, please help me.

Zilla

I can send the psd if needed. I've spent the whole day trying to make it work, but it just doesnt.

Here's the psd file for the mockup. - https://www.mediafire.com/file/3b81ld69onzsbnw/_MOCKUP.psd/file

Stephen

Hi,

I'm afraid that this isn't something we can help with from our side.

If I understand what you're trying to do correctly, you need a displacement map that's built for the size of the artwork that you'll be providing. That displacement map will then change the artwork into the correct shape for adding to the product image, and then you'll add the result to the product image as an overlay (or, in your example, you could also underlay the product image underneath that re-shaped artwork)

We have an example of that here, where the displacement map and artwork are used to make the artwork into the correct shape to add onto the mug, then it's added to the mug: https://cloudinary.com/documentation/effects_and_artistic_enhancements#displacement_maps

The problem with your URLs is that your artwork doesn't match the displacement map you're using, so you most likely need to make a new displacement map that takes artwork of known dimensions and reshapes it fits into the correct place on the product image.

If anything about Cloudinary's features isn't working as documented, you can reach us here or via our support site, but I'm afraid that we cannot implement transformation logic or create your media

Regards,

Stephen