> ## Documentation Index
> This page is part of the Image and Video APIs product. Fetch the complete documentation index for Image and Video APIs at: https://cloudinary.com/documentation/llms-image-and-video-apis.txt?referrer=docpage and then use it to discover all relevant pages before exploring further.
> If your task extends beyond this product, fetch the top-level index covering all Cloudinary products and topics at: https://cloudinary.com/documentation/llms.txt?referrer=docpage

# Complex transformations (video tutorial)

## Overview

The [transformations](transformation_reference) 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](transformation_reference#l_layer). 

## 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.
{videoTranscript:publicId=training/m-tutorial-canvas}

## 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
{table:class=tutorial-bullets}|  | 
| --- | --- |
| | **Step 1:** [Upload an image](upload_images) to your Cloudinary product environment. Afterwards, modify the image by [editing its URL](image_transformations#transforming_media_assets_using_dynamic_urls).|

{table:class=tutorial-bullets}|  | 
| --- | --- |
| | **Step 2:** [Reduce the image dimension](resizing_and_cropping) to 700 x 500 pixels (<code>w_700,h_500) and then [crop the image to fill the newly created space](image_crop_modes#fill) (<code>c_fill).|

{table:class=tutorial-bullets}|  | 
| --- | --- |
| | **Step 3:** Apply an identically sized [overlay of the image](layers#image_overlays) (<code>w_700,h_500,c_fill,l_art-creative-graffiti), including a reduced [opacity amount](transformation_reference#o_opacity) (<code>o_60) and [a narrow, white border around it](transformation_reference#bo_border) to emphasize the canvas edges (<code>bo_1px_solid_rgb:FFFFFF).|

### Create the right border of the canvas

{table:class=tutorial-bullets}|  | 
| --- | --- |
| | **Step 1:** Reduce the image width to the appropriate size for the right side, which is 20 pixels (<code>w_20). Then, [apply a true crop](transformation_reference#c_crop_resize) of the image's right side by [focusing it on the east portion](transformation_reference#g_gravity) (<code>c_crop,g_east). The image is then cropped down to a 20-pixel-wide sliver.|

{table:class=tutorial-bullets}|  | 
| --- | --- |
| | **Step 2:** Create [a horizontal mirror of the image](transformation_reference#a_mode) (<code>a_hflip) to properly align the right-side portions with the larger image.|

{table:class=tutorial-bullets}|  | 
| --- | --- |
| | **Step 3:** Apply [a series of distortions](transformation_reference#e_distort) (<code>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.|

{table:class=tutorial-bullets}|  | 
| --- | --- |
| | **Step 4:** [Add the long transformation to the overlay layer](transformation_reference#fl_layer_apply) (<code>fl_layer_apply). To do so, place it on the right side (<code>g_east) and make a few slight adjustments to where it lies on the [image's X and Y axes](transformation_reference#x_y_coordinates) (<code>x_-20,y_9).|

### Create the bottom border of the canvas

{table:class=tutorial-bullets}|  | 
| --- | --- |
| | **Step 1:** Create an identical overlay similar to the one you just created for the right border (<code>w_700,h_500,c_fill,l_art-creative-graffiti,o_60,bo_1px_solid_rgb:FFFFFF).|

{table:class=tutorial-bullets}|  | 
| --- | --- |
| | **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 (<code>h_20) and extending the width to be longer than the original to allow for the eventual transformations (<code>w_700) of the distortions. Additionally, ensure that the crop is focused on the southern portion of the image (<code>c_crop,g_south).|

{table:class=tutorial-bullets}|  | 
| --- | --- |
| | **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 (<code>a_vflip).|

{table:class=tutorial-bullets}|  | 
| --- | --- |
| | **Step 4:** Apply the distortions (<code>e_distort:0:0:700:0:720:20:20:20).|

{table:class=tutorial-bullets}|  | 
| --- | --- |
| | **Step 5:** Apply this layer (<code>fl_layer_apply). Be sure to add it to the bottom of the original (<code>g_south) and to properly align it against its X and Y axes (<code>y_-1).|

### Optimize the project for web delivery

{table:class=tutorial-bullets}|  | 
| --- | --- |
| | **Step 1:** Add the <code>f_auto parameter to the URL to serve the image in an [optimal format](transformation_reference#f_auto) for any browser.|

{table:class=tutorial-bullets}|  | 
| --- | --- |
| | **Step 2:** Add the <code>q_auto parameter to ensure that the image is served at a [favorable quality](transformation_reference#q_auto), rendering it to be optimally small without sacrificing aesthetics.|

{table:class=tutorial-bullets}|  | 
| --- | --- |
| | **Step 3:** If the original image was of a person, you could use the <code>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](face_detection_based_transformations#face_detection_based_cropping).|

## Keep learning

> **READING**:
>
> * Get even more details in our [blog post](https://cloudinary.com/blog/turning_a_flat_image_into_a_three_dimensional_canvas_with_cloudinary#variables), including steps on adding variables to the transformation.

> * Learn how to properly apply overlays and other image transformations in our [Fundamentals for Developers course](https://training.cloudinary.com/courses/cloudinary-fundamentals-for-developers).

> * Review our [transformation reference](transformation_reference) to see all of the possibilities for transforming images and videos.

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

[Transformation Basics](transformation_basics_tutorial)

Learn the basics of a transformation URL

[Named Transformations](named_transformations_tutorial)

Simplify & standardize complex delivery URLs

[Optimization Tips](optimization_tips_tutorial)

Tips for delivering optimized images

&nbsp;

&nbsp;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.
&nbsp;