Complex transformations (video tutorial)

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

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

0:55	Step 1: Upload an image to your Cloudinary product environment. Afterwards, modify the image by editing its URL.

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).

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

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.

4:50	Step 2: Create a horizontal mirror of the image (a_hflip) to properly align the right-side portions with the larger image.

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.

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

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).

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).

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).

10:16	Step 4: Apply the distortions (e_distort:0:0:700:0:720:20:20:20).

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

12:22	Step 1: Add the f_auto parameter to the URL to serve the image in an optimal format for any browser.

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.

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.

Create a three-panel (triptych) canvas

Steps:

1. Create the left panel by cropping a third of the image from the west (w_288,h_576,c_crop,g_west) and applying a perspective warp (e_distort:0:0:288:10:288:566:0:576).|
2. Create the wrapped left edge by overlaying a narrow mirrored slice: crop a 10-pixel strip (l_sample/w_10,h_576,c_crop,g_west), mirror it (a_hflip), distort it (e_distort:0:10:10:0:10:576:0:570), then apply it as a layer positioned on the west with a slight negative offset (x_-10,g_west,fl_layer_apply).|
3. Add depth to the panel using the shadow effect (e_shadow:70,x_10,y_10).|
4. Create the center panel: crop to the same size (l_sample,w_288,h_576,c_crop), distort it (e_distort:0:10:288:20:288:556:0:566), add the mirrored 10-pixel wrap (l_sample/w_10,h_576,c_crop,g_west,x_288/a_hflip/e_distort:0:20:10:10:10:566:0:560), then apply the result at an X offset (x_308,fl_layer_apply) and add a shadow (e_shadow:70,x_10,y_10).|
5. Create the right panel: crop from the east (l_sample,w_288,h_576,c_crop,g_east), distort it (e_distort:0:20:288:30:288:546:0:556), add the mirrored wrap (l_sample/w_10,h_576,c_crop,g_west,x_576/a_hflip/e_distort:0:30:10:20:10:556:0:550), and apply it using gravity and offsets (x_-308,g_east,fl_layer_apply) plus a shadow (e_shadow:70,x_10,y_10).|

Triptych canvas final output

Full transformation URL:

Keep learning

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.