Last updated: Jan-15-2023
On this page:
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.
This video is brought to you by Cloudinary's video player - embed your own!
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.|
Step 2: Reduce the image dimension to 700 x 500 pixels (
Step 3: Apply an identically-sized overlay of the image (
Create the right border of the canvas
Step 1: Reduce the image width to the appropriate size for the right side, which is 20 pixels (
Step 2: Create a horizontal mirror of the image (
Step 3: Apply a series of distortions (
Step 4: Add the long transformation to the overlay layer (
Create the bottom border of the canvas
Step 1: Create an identical overlay similar to the one you just created for the right border (
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 (
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 (
Step 4: Apply the distortions (
Step 5: Apply this layer (
Optimize the project for web delivery
Step 1: Add the
Step 2: Add the
Step 3: If the original image was of a person, you could use the
- Get even more details in our blog post, including steps on adding variables to the transformation.
- Learn how to properly apply overlays and other image transformations in our Fundamentals for Developers course.
- Review our transformation reference to see all of the possibilities for transforming images and videos.
If you like this, you might also like...
Transformation BasicsLearn the basics of a transformation URL
Named TransformationsSimplify & standardize complex delivery URLs
Optimization TipsTips for delivering optimized images
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.