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.

---

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.