Image & Video APIs
Menu

Complex transformations (video tutorial)

Last updated: Nov-24-2025

Overview

The transformations you can apply to images with Cloudinary are practically endless. You can even render any flat image to appear three-dimensional and framed on a canvas.

In this tutorial, you'll learn how to apply aesthetic styling to an image with a series of overlays.

Video tutorial


This video is brought to you by Cloudinary's video player - embed your own!
Use the controls to set the playback speed, navigate to chapters of interest and select subtitles in your preferred language.

Tutorial contents

This tutorial presents the following topics. Click a timestamp to jump to that part of the video.

Upload an image and apply initial transformations

Jump to this spot in the video 0:55 Step 1: Upload an image to your Cloudinary product environment. Afterwards, modify the image by editing its URL.
Jump to this spot in the video 1:52 Step 2: Reduce the image dimension to 700 x 500 pixels (w_700,h_500) and then crop the image to fill the newly created space (c_fill).
Jump to this spot in the video 2:20 Step 3: Apply an identically sized overlay of the image (w_700,h_500,c_fill,l_art-creative-graffiti), including a reduced opacity amount (o_60) and a narrow, white border around it to emphasize the canvas edges (bo_1px_solid_rgb:FFFFFF).

Create the right border of the canvas

Jump to this spot in the video 3:58 Step 1: Reduce the image width to the appropriate size for the right side, which is 20 pixels (w_20). Then, apply a true crop of the image's right side by focusing it on the east portion (c_crop,g_east). The image is then cropped down to a 20-pixel-wide sliver.
Jump to this spot in the video 4:50 Step 2: Create a horizontal mirror of the image (a_hflip) to properly align the right-side portions with the larger image.
Jump to this spot in the video 5:09 Step 3: Apply a series of distortions (e_distort:0:0:20:20:20:520:0:500) to stretch the right side so as to create slants for generating the three-dimensional appearance.
Jump to this spot in the video 7:05 Step 4: Add the long transformation to the overlay layer (fl_layer_apply). To do so, place it on the right side (g_east) and make a few slight adjustments to where it lies on the image's X and Y axes (x_-20,y_9).

Create the bottom border of the canvas

Jump to this spot in the video 8:53 Step 1: Create an identical overlay similar to the one you just created for the right border (w_700,h_500,c_fill,l_art-creative-graffiti,o_60,bo_1px_solid_rgb:FFFFFF).
Jump to this spot in the video 9:36 Step 2: Slice off a portion of the overlay's bottom to start creating the bottom border, setting the height to the same amount of pixels as the right border's width (h_20) and extending the width to be longer than the original to allow for the eventual transformations (w_700) of the distortions. Additionally, ensure that the crop is focused on the southern portion of the image (c_crop,g_south).
Jump to this spot in the video 9:57 Step 3: Make the bottom border a mirror image of the original so that the larger image seamlessly aligns with this border layer. To do so, add a vertical flip transformation to the URL (a_vflip).
Jump to this spot in the video 10:16 Step 4: Apply the distortions (e_distort:0:0:700:0:720:20:20:20).
Jump to this spot in the video 11:47 Step 5: Apply this layer (fl_layer_apply). Be sure to add it to the bottom of the original (g_south) and to properly align it against its X and Y axes (y_-1).

Optimize the project for web delivery

Jump to this spot in the video 12:22 Step 1: Add the f_auto parameter to the URL to serve the image in an optimal format for any browser.
Jump to this spot in the video 13:33 Step 2: Add the q_auto parameter to ensure that the image is served at a favorable quality, rendering it to be optimally small without sacrificing aesthetics.
Jump to this spot in the video 13:57 Step 3: If the original image was of a person, you could use the g_face parameter and apply it to each image in the URL, including the overlay layers. This will ensure the subject's face is the focal point.

Keep learning

Related topics

If you like this, you might also like...

Check out the Cloudinary Academy for free self-paced Cloudinary courses on a variety of developer or DAM topics, or register for formal instructor-led courses, either virtual or on-site.

AltStyle によって変換されたページ (->オリジナル) /

✔️ Feedback sent!

✖️
How helpful was this doc page?

Thanks for submitting your rating. We got it!
We'd love to hear more. Tell us what you liked and how we can make this page even better:

*

Cloudinary is committed to protecting your information security. For details, see our privacy policy.

For additional assistance, open a support request.

Error

Unfortunately there's been an error sending your feedback.

Rate this page: