Leveraging the Image-Overlay Effect for Preview of Customized Engravings
Leveraging the Image-Overlay Effect for Preview of Customized Engravings
Visual merchandising
Layers
E-commerce
Advanced

To add custom engravings to your products, such as gadgets like watches, electronic devices, and the like, you could use the paid tools on the market. Why not leverage Cloudinary to do so? It’s a simple tool that seamlessly delivers excellent results—for free.

Here’s how. First, have ready a good image of the product to which you’d like to add custom engraving, for example, this watch:

Original

https://res.cloudinary.com/demo/image/upload/q_auto,f_auto,fl_lossy/w_250/scout-chrono.png

Now add a text layer that aligns properly to the watch.

For additional scalability, capture the text to be added in a variable:

With Text

https://res.cloudinary.com/demo/image/upload/$text_!Sample Text!/q_auto,f_auto,fl_lossy/l_text:futura_50:$(text),co_white,g_center,y_-189,x_1/w_250/scout-chrono.png

To align to the watch on which the engraving will appear, set the e_distort effect to add the necessary curvature.

{note} Skip this step if the customized object or text to be added is flat. {/note}

Round Text

https://res.cloudinary.com/demo/image/upload/$text_!Sample Text!/q_auto,f_auto,fl_lossy/l_text:futura_50:$(text),co_white,e_distort:arc:60,g_center,y_-189,x_1/w_250/scout-chrono.png

At this point, the text looks flat. To beef it up, you can add the shadow effect. However, a more effective way is to add another layer that’s slightly offset, like this:.

Layered Text

https://res.cloudinary.com/demo/image/upload/$text_!Sample Text!/q_auto,f_auto,fl_lossy/l_text:futura_50:$(text),co_black,e_distort:arc:60,g_center,y_-186,x_-2/l_text:futura_50:$(text),co_white,e_distort:arc:60,g_center,y_-189,x_1/w_250/scout-chrono.png

To improve on the effect, adjust the opacity settings for the individual layers:

Individual Layers

https://res.cloudinary.com/demo/image/upload/$text_!Sample Text!/q_auto,f_auto,fl_lossy/l_text:futura_50:$(text),co_black,e_distort:arc:60,g_center,y_-186,x_-2,o_50/l_text:futura_50:$(text),co_white,e_distort:arc:60,g_center,y_-189,x_1,o_50/w_250/scout-chrono.png

Now edit the text to whatever you desire, for example:

Shadow

https://res.cloudinary.com/demo/image/upload/$text_!The More You Know!,$arc_115/q_auto,f_auto,fl_lossy/l_text:futura_50:$(text),co_black,e_distort:arc:$arc,g_center,y_-186,x_-2,o_50/l_text:futura_50:$(text),co_white,e_distort:arc:$arc,g_center,y_-189,x_1,o_50/w_250/scout-chrono.png