> ## 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. # Step 3: Your first transformations Your Kickstart Progress: Intro Step 1 Step 2 Step 3 Step 4 Step 5 Optimization is just the tip of the iceberg of what you can do with Cloudinary URL API parameters. **Transformations** can adjust, improve or even redesign the look, feel and visual experience, of any original image or video to meet your UI needs — think of transformations as having your own personal programmatic UX designer. Once you decide what types of transformations you want to apply for a particular use case, you can use that same transformation definition on multiple, even thousands of assets, so it's kind of like having infinite UI designer genies at your beck & call. Let's start by adding some fun visual transformations onto the image you optimized in [Step 2](dev_kickstart_optimize). * [Task 1: Add a grayscale effect to your image](#task_1_watch_what_happens_when_you_add_a_grayscale_effect_parameter_to_your_image) * [Task 2: Add a border to your black and white image ](#task_2_now_add_a_border_to_your_black_and_white_image) * [Task 3: Add a text layer](#task_3_now_add_a_text_layer) * [Task 4: Change the format](#task_4_change_the_format) ***~4 minutes*** --- ### Task 1: Watch what happens when you add a grayscale effect parameter to your image Make sure you've got the URL (with your cloud name) from [Step 2](dev_kickstart_optimize) open in a browser tab: https://res.cloudinary.com//image/upload/c_scale,w_500/q_auto/f_auto/cld-sample-4.jpg 1. Add `/e_grayscale` just **before** the `/c_scale,w_500` component and reload the URL. > **TIP**: > > Each transformation **component** (the transformation parameters between each `/ /`) is applied to the result of the previous component. In this task, you applied the effect transformation **action** to the original, and then the resizing action followed by the optimization action were applied to the grayscaled image. --- ### Task 2: Now add a border to your black and white image 1. **After** `/e_grayscale`, add `/bo_40px_solid_green` and reload the URL. --- ### Task 3: Now add a text layer Now you'll add the text: `Good morning!` on your image, including definitions for font, size, weight, alignment and color of the text layer. For layer transformations, you also need a `layer_apply` component that tells Cloudinary where and how to apply the defined layer and closes the layer definition (it acts like the closing parentheses of your layer transformation). For this example, you'll place it at (set its **gravity** to) the bottom right, offset by 60px in each direction. 1. Just **after** the border transformation component (`/bo_…`), but before the resize (`/c_scale`) component, paste the string below: `/l_text:Arial_100_bold_alignment_center:Good%0Amorning!,co_orange/fl_layer_apply,g_south_east,x_60,y_60` 2. Let's bring back the color. Delete the `e_grayscale` transformation component from your delivery URL and reload it. What's happening in this LONG text layer transformation? Some transformations have several options you can apply. Text layers in particular have many. Additionally, all layer transformations are unique in that they need a definition for what to include in the layer and what that layer should look like, and then a **layer_apply** flag that gives instructions on where and how to place the layer on the original. Let's walk through it: * `l_text`: Indicates that the type of layer you want to apply is a text layer. * `Arial_100_bold_alignment_center`: These are text styling options for font type, size, weight, and alignment. There are quite a few [text layer styling options](transformation_reference#styling_parameters) available (expand the linked section to see all options). * `Good%0Amorning!`: The last option in the text layer transformation is always the text itself. In a URL, spaces need to be replaced with the relevant encoding. In this case, you're using `%0A` for a non-breaking space. * `co_orange`: This is a qualifier parameter (one that adjusts the default behavior of the action it's with). This one changes the color of the text. Some action transformations have required qualifiers. For example, when you resize an image, you must always provide at least one qualifier parameter that instructs the resize action on the height, width, and/or aspect ratio to use. Other action parameters have optional qualifiers. Some action parameters don't work with any qualifiers. The [transformation reference](transformation_reference) provides detailed information on exactly which qualifiers each action parameter supports, and conversely, the qualifier parameters show which action parameters they can be used with. * `fl_layer_apply`: This is a flag that tells Cloudinary where to place the layer. Since you can also apply multiple chained transformation components to layers - for example, you might want to resize and apply one or more effects to an image layer - the fl_layer_apply flag also acts as an end-parentheses, indicating where transformations the apply to the layer end. Everything after the fl_layer_apply component will apply on the base asset. * `g_south_east`: This is the 'gravity' parameter that tells Cloudinary to place the text layer in the bottom right corner of the base asset. * `x_60,y_60`: These are adjustments on the gravity placement. These values are an instruction to move the layer 60px on the X axis and 60px on the Y axis relative to the original gravity location. In the case that the gravity is south and east, then positive x & y values move up & left from there. Learn more about [image layers](layers) and [video layers](video_layers). --- ### Task 4: Change the format Converting any image or video from one format to another is as easy as just changing the file extension! 1. Remove the `/f_auto` from your URL, and change the extension of your URL from `.jpg` to `.png` and reload the URL. If you try to download or inspect, you'll see that you're now delivering a PNG file. 2. Put the `/f_auto` back (after `/q_auto`) and reload. Now the format you actually deliver will be the one that Cloudinary's auto-format mechanism deems best for the requesting browser given the image, but taking into consideration the requested **.png** extension. If the image had any transparent or partially transparent pixels, the resulting format would also be one that supports transparency. For example, it would be likely to deliver a WEBP or AVIF file in most browsers, though it may still deliver PNG if that's deemed the best supported format for the requesting browser. But since this image doesn't have transparency, the resulting auto-format will be the one that results in the most performant file size. For example, depending on your account setup, the delivered image is likely to be a JPG or AVIF. Check your results Here's what your transformed images should look like: Original (Optimized) Add grayscale Add a border Add a text layer and remove grayscale Convert to PNG More on transformations * Just a reminder that these transformed assets are **not** stored in your account. These new variants are cached on Cloudinary servers and on CDN endpoints, and can be delivered at any time via that URL. If the CDN doesn't yet/no longer has that variation cached, the CDN just (re)requests it from the Cloudinary cache or when needed, Cloudinary regenerates it on the fly from the latest version of the original asset in your account. [Learn more about the service architecture.](solution_overview#service_architecture) * The transformation parameters in your URL can be either **action** parameters that actively change something on the original (aka base) asset, or **qualifier** parameters, which fine-tune or adjust the default behavior of an action parameter and have no impact on their own. In general, it's best practice to include only one action parameter in each URL component (most of our SDKs enforce this practice). Qualifier parameters, conversely, must be included in the same component as the action parameter they qualify. Both action and qualifier parameters have at least one value and sometimes have a number of options and values, some of which may be required and others optional. For example: * In the `/c_scale,w_500` component, `c_` is an **action** parameter that resizes an asset. `scale` is its value. The `w_` **qualifier** parameter defines the width attribute to be applied for the resize **action**. * In the text layer component (from task 3), the `l_` is the layer **action** that causes a layer to be added to the base asset. It has several options and values that control the type of layer (text in this case), styling definitions, and the actual text to include, while `co_` is an optional **qualifier** that adjusts the default (black) color of the text layer. [Learn more about action and qualifier parameters.](image_transformations#parameter_types) * The transformations you performed here are only a tiny subset of the many creative, improvement, and generative AI transformations that Cloudinary offers for images and videos. Check out all of them in the [Transformation Reference](transformation_reference).   > **Mark your progress:**: > > I applied an effect transformation > I applied a border transformation > I added the text layer transformation > I converted my image to other formats   I'm ready for the next step    ⇒