> ## Documentation Index
> Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt
> Use this file to discover all available pages before exploring further.

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

## 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}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=55 :player=cld} | **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}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=52 :player=cld} | **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](resizing_and_cropping#fill) (<code>c_fill).|

{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=2 :sec=20 :player=cld} | **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}|  | 
| --- | --- |
|{videotime:id=media :min=3 :sec=58 :player=cld} | **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}|  | 
| --- | --- |
|{videotime:id=media :min=4 :sec=50 :player=cld} | **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}|  | 
| --- | --- |
|{videotime:id=media :min=5 :sec=09 :player=cld} | **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}|  | 
| --- | --- |
|{videotime:id=media :min=7 :sec=05 :player=cld} | **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}|  | 
| --- | --- |
|{videotime:id=media :min=8 :sec=53 :player=cld} | **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}|  | 
| --- | --- |
|{videotime:id=media :min=9 :sec=36 :player=cld} | **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}|  | 
| --- | --- |
|{videotime:id=media :min=9 :sec=57 :player=cld} | **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}|  | 
| --- | --- |
|{videotime:id=media :min=10 :sec=16 :player=cld} | **Step 4:** Apply the distortions (<code>e_distort:0:0:700:0:720:20:20:20).|

{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=11 :sec=47 :player=cld} | **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}|  | 
| --- | --- |
|{videotime:id=media :min=12 :sec=22 :player=cld} | **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}|  | 
| --- | --- |
|{videotime:id=media :min=13 :sec=33 :player=cld} | **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}|  | 
| --- | --- |
|{videotime:id=media :min=13 :sec=57 :player=cld} | **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
    Learn the basics of a transformation URL 
  

  
  
  
    Named Transformations
    Simplify & standardize complex delivery URLs 
  

  
  
  
    Optimization Tips
    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;