Need some more help with displacement map.

Zilla

Sorry for another thread but i did not understand what i did wrong in previous tries.

This time i have a very simple thing. All i want help is placing the same size label into the displacement map of same size, feel free to resize the label if that's what it takes to make it work.

https://res.cloudinary.com/dkaxmhco0/image/upload/v1716467267/1294_2000_label.jpg

Into

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

Stephen

Hi,

What problem are you having using the displacement map? I tried a simple example, and it appears to work as expected:

https://res.cloudinary.com/dkaxmhco0/image/upload/e_displace,l_1294_2000_map.png,y_-1/1294_2000_label.jpg

You can then apply that via a layer onto another image, like the example in the documentation:

https://res.cloudinary.com/dkaxmhco0/image/upload/h_2000/l_1294_2000_label/e_displace,l_1294_2000_map.png,y_-1,fl_layer_apply/sample.jpg

Or starting with that and then underlaying another image behind it like the example you had before:

https://res.cloudinary.com/dkaxmhco0/image/upload/e_displace,l_1294_2000_map.png,y_-1,fl_layer_apply/h_400/u_sample,g_south_east/1294_2000_label.jpg

If you're not familiar with chained transformations or the use of the layer_apply flag used there, there are additional examples in the main documentation:
https://cloudinary.com/documentation/image_transformations#chained_transformations

https://cloudinary.com/documentation/layers#layer_transformation_syntax

If you encounter some problem, please let us know exactly what isn't working as documented, and the steps we can follow to reproduce that.

I'm afraid we cannot perform implementation or consultation work, but if something isn't working correctly we can certainly help to investigate and resolve the issue

Regards,

Stephen

Zilla

Hi, stephen.

Thanks for the answer again.

So in the above image the issue is that there's no distort effect to it, as you can see the label image isn't bending like the gradient is.

The image just got placed flat in the gradient map making it look more like an underlay.

I am trying to get it to bend along with the displacement map so it looks natural and distorted.

Stephen

In my example I just specified y as -1 and no value for x, but you’ll likely need to adjust those according to your requirements, because those affect how the color values in the displacement map affect each pixel of the image that the map is applied to:

https://cloudinary.com/documentation/effects_and_artistic_enhancements#displacement_maps

> The final displacement of each pixel in the base image is determined by a combination of the red and green color channels, together with the configured x and/or y parameters

There’s then a table explaining exactly how each pixel value is set.

Regards,

Stephen

Zilla

Is there any alternative easier way to do this, where i can wrap an image around a curved base like the gradient i sent, so any image i add is automatically takes form of the gradient base.

Stephen

Hi,

For the use-case of adding artwork onto a product, the method that will likely provide the best result is to use a displacement map created by a graphic designer based on the product image and how artwork should be added to that product.

This is a complex feature that is also part of media editing software like Photoshop, or ****, and tools like ImageMagick ( e.g. https://legacy.imagemagick.org/Usage/mapping/#displacement_maps - In that third-party documentation, our feature is close to the "Unified Distortion Image" example except that the example there use 3 channels instead of 2)

You may also need to rotate the overlay to match the shape of the product image which isn't something that was in the other examples you sent:

https://cloudinary.com/documentation/effects_and_artistic_enhancements#rotating_images

https://cloudinary.com/documentation/transformation_reference#a_angle

If your requirements aren't suitable for using a displacement map or you can't implement it for other reasons, other features can be used to distort and adjust an overlay's shape, such as the "distort" effect

https://cloudinary.com/documentation/effects_and_artistic_enhancements#distort
https://cloudinary.com/documentation/transformation_reference#e_distort

There's also a specific example here in an old blog post showing something like your earlier product customization example created via the distort effect:

https://cloudinary.com/blog/how_to_dynamically_distort_images_to_fit_your_graphic_design

Again, you may need to rotate to align the distorted overlay with the product

Regards,

Stephen

Zilla

Thanks for the answer, in your documentation i found something - https://support.cloudinary.com/hc/en-us/articles/360024257791-Transforming-PSD-layers-with-self-referencing-variable

Is this something i can use to replace the "Smart Object" in the psd file. This way i can just replace the smart object and the mockup will be ready.

atdatu

Hi @Zilla ,

You can reference a specific layer in the PSD file, add effects and transformations on it but you cannot "replace" what was in the PSD file. I hope that makes sense.

Regards.