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.