--- canonical: https://amplience.com/developers/docs/dev-tools/guides-tutorials/product-customization/colorization/ title: Creating a colorized product image description: Amplience tutorial for how to create multiple colored product images from a single source image, from creating an asset and SVG file to making the SVG dynamic. image: https://cdn.media.amplience.net/i/ampproduct/creating-colorized-image-1?w=1200&h=630 image_width: 1200 image_height: 630 audience: Developer date_published: 2024-01-30 date_modified: 2024-02-02 --- # Creating a colorized product image This guide explains how to create multiple colored product images from a single source image. There are three parts to the process: - The creation of assets from your source product image. - The creation of an SVG file containing these assets with a combination of SVG filters applied. - Making the SVG dynamic In this tutorial we have used Adobe Photoshop to create assets and [Inkscape](https://inkscape.org/) to create the SVG. You could use any similar graphic design tool that supports the creation of an SVG, for example Adobe Illustrator. If this is your first colorization, you should allow 45-60 minutes to complete the process. More experienced users should be able to produce a colorized product in considerably less time (by re-using existing pre-configured SVGs, and swapping out the product images as needed). ## Part 1 - Creating colorization assets in Photoshop For best results, start with a noise-free, high-resolution, uncompressed product image (TIF, PNG format). JPG image files can be used but may require additional post-production to remove compression artefacts that will become visible during the colorization process. We need to create two assets from the source file; a grayscale version of the product image, and a full-colour mask that excludes any areas of the product image that you do not wish to colorize. ![Working with the image in photoshop](https://cdn.media.amplience.net/i/ampproduct/creating-colorized-image-1?w=1880&fmt=png 'Working with the image in photoshop') ### Step 1: Creating the grayscale asset - Open source image in Photoshop - Go to Image > Mode > Grayscale - Your image will lose all color information ![Creating the grayscale image](https://cdn.media.amplience.net/i/ampproduct/creating-colorized-image-2?w=1880&fmt=png 'Creating the grayscale image') - Go to Save for Web  and save the asset in 24-bit PNG format ### Step 2: Creating the product mask - Open source image in Photoshop - Using 'magic wand' or 'polygonal lasso tool', create and area of selection around the area to be masked ![Creating the product mask](https://cdn.media.amplience.net/i/ampproduct/creating-colorized-image-3?w=1880&fmt=png 'Creating the product mask') - Go to 'Select > Invert' to reverse the selection - On your Layers panel, 'Add vector mask' to the selected layer (all areas to be colourised will become transparent). - Inspect the results of your masking to ensure all the required areas of the product image are covered -- adjust the mask if necessary. ![After choosing add vector mask, all areas to be colorised will become transparent](https://cdn.media.amplience.net/i/ampproduct/creating-colorized-image-4?w=1880&fmt=png 'After choosing add vector mask, all areas to be colorised will become transparent') - Go to Save for Web and save asset in 24-bit PNG format with transparency ON You now have the assets ready for a basic colorization. You can proceed to Part 2 - constructing the SVG file. ## Part 2 - Using Inkscape to construct the SVG file When opening Inkscape for the first time, you'll see a screen similar to this: ![The initial screen in Inkscape](https://cdn.media.amplience.net/i/ampproduct/creating-colorized-image-5?w=1880&fmt=png 'The initial screen in Inkscape') - Go to 'File > Import' and navigate to your saved assets. - Select the grayscale version of your product image and click 'Open' - In the subsequent dialog you need to choose between embedding and linking your assets. Linking them reduces SVG file size significantly (as the image data is not included in the SVG XML). If you link the files, you need to ensure the assets are provided to your developer along with the SVG file otherwise the linkage is broken. Embedding will make the SVG file large (multiple MBs) but the plus side is you have only one file to deal with. Talk with your developer and decide the preferred option ![Choosing image import options](https://cdn.media.amplience.net/i/ampproduct/creating-colorized-image-6?w=350 'Choosing image import options') - Either way, after clicking 'OK', your grayscale product image will appear on the canvas are in Inkscape and will be associated with 'Layer 1' in your Layers palette. ![Renaming the layer](https://cdn.media.amplience.net/i/ampproduct/creating-colorized-image-7?w=350 'Renaming the layer') - Rename 'Layer 1' to 'Colorize' (or something meaningful as this label will appear in the SVG XML) ### Step 1 - Creating the Colorize filter Next we're going to create an SVG filter. Filters are effects that you can apply to objects within the SVG such as images, shapes and text. The colorization process requires that we combine two different filters, one that does the job of colorizing the product and one that restores black information to the image that is lost during colorization. #### Creating your first filter - In the Filter Editor palette, click the 'New' button. - 'Filter1' appears in the Filter list. ![Creating a new filter](https://cdn.media.amplience.net/i/ampproduct/creating-colorized-image-8?w=350 'Creating a new filter') - Double-click 'filter1' and rename the filter to something meaningful like 'Colorize' #### Creating your first filter effect - Go to the droplist to the right of 'Add effect' button and select 'Composite' - Click the 'Add effect' button, and you've just added your first filter effect. You'll see it represented by a blue panel labelled 'Composite' the Filter editor. - Now we need to configure it. In the Effect Parameters tab, you'll see the Composite filter is set to 'Over' operator by default. This needs to be changed to 'Arithmetic' and the K1 and K2 levels should be changed to +1.00 and +0.60 respectively. ![Adding a composite filter](https://cdn.media.amplience.net/i/ampproduct/creating-colorized-image-9?w=350 'Adding a composite filter') It now will look like nothing's happened... ![Image before the filter is applied](https://cdn.media.amplience.net/i/ampproduct/creating-colorized-image-10?w=1880&fmt=png 'Image before the filter is applied') Don't panic! That's because the filter has to be applied to the image in order for it to have any affect. - Click on your grayscale product image visible in the canvas window to the left. - A dotted line and transformation handles will indicate the image is selected. - Check the box to the left of the filter that you just created - this will apply the filter to this image, and you should see the image change appearance. #### Flood -- second filter effect This is the key filter in the colorization process.  The Hex/RGB value we assign to the Flood filter defines the color of the product. This value is parameterized by your developer so you can dynamically generate any color of product. The process of creating the Flood filter effect is similar to before: - Go to the droplist to the right of the 'Add effect' button and select 'Flood' - Click the 'Add effect' button (your product image will most likely go black at this point but don't worry - this is just temporary until we create the next filter effect). ![Adding a flood effect](https://cdn.media.amplience.net/i/ampproduct/creating-colorized-image-11?w=1880&fmt=png 'Adding a flood effect') - In 'Effect parameters' change the Flood colour to something appropriate that you wish to test (we chose blue in the example below) - leave 'opacity' setting at '1.00' ![Setting the flood color](https://cdn.media.amplience.net/i/ampproduct/creating-colorized-image-12?w=1880&fmt=png 'Setting the flood color') You'll notice a Flood filter effect appears beneath Composite, and importantly, a right-angled black line connects the two filters together (this connection was automatically created by Inkscape, but can be manually adjusted as you'll see later in this process). For now it's enough to just be aware of this feature of the filter palette ![The filter palette](https://cdn.media.amplience.net/i/ampproduct/creating-colorized-image-13?w=350 'The filter palette') #### Blend -- third filter effect The process of creating the Blend filter effect is similar to before: - Go to the droplist to the right of 'Add effect' button and select 'Blend' - Click the 'Add effect' button ![Adding a blend effect](https://cdn.media.amplience.net/i/ampproduct/creating-colorized-image-14?w=1880&fmt=png 'Adding a blend effect') - In 'Effect parameters', change Mode from 'Normal' to 'Screen' - Now we have to adjust Inkscape's preset connection between this Blend filter effect and Flood. You'll see both right-hand connectors are linked to Flood by default. We want to take the bottom of the two and connect it to the Composite filter effect. To do this, click on the arrow head to the right of the filter effect name, drag it and drop it onto the bottom of the two arrow heads to the right of the Composite. The filter effects are then connected as shown here. ![Adjusting the connection between the blend and flood filters](https://cdn.media.amplience.net/i/ampproduct/creating-colorized-image-15?w=350 'Adjusting the connection between the blend and flood filters') ![The connection is updated](https://cdn.media.amplience.net/i/ampproduct/creating-colorized-image-16?w=350 'The connection is updated') That's the tricky part done! Hopefully it's beginning to make sense now, so don't give up! #### Blend -- fourth filter effect We use a second blend filter to create a richer colorization effect. The process of creating the Blend filter effect is the similar to before: - Go to the droplist to the right of 'Add effect' button and select 'Blend' - Click the 'Add effect' button - In 'Effect parameters', change Mode from 'Normal' to 'Multiply' - There's no need to adjust any of Inkscape's connectors  -- this time the Blend is simply linked to  the one above. ![Adding a blend effect](https://cdn.media.amplience.net/i/ampproduct/creating-colorized-image-17?w=1880&fmt=png 'Adding a blend effect') **Composite -- fifth filter effect** The final filter effect. - Go to the droplist to the right of 'Add effect' button and select 'Composite' - Click the 'Add effect' button ![Adding the composite effect](https://cdn.media.amplience.net/i/ampproduct/creating-colorized-image-18?w=1880&fmt=png 'Adding the composite effect') - In 'Effect parameters', change Operator from 'Over' to 'In' - Drag the second connector from 'Composite' to 'Source Graphic' - as a result the coloured border surrounding your product will disappear ![Setting the effect parameters](https://cdn.media.amplience.net/i/ampproduct/creating-colorized-image-19?w=1880&fmt=png 'Setting the effect parameters') That's it -- you've created your colorized product image! At this point your filters should look like this: ![How the filters should look](https://cdn.media.amplience.net/i/ampproduct/creating-colorized-image-20?w=350 'How the filters should look') We still need to add the product mask layer, and another filter to bring shadowing back into the image, back you're well underway now. ### Step 2 - Creating the Monochrome filter This filter is required because the during the colorization process, black information in our product image was replaced by colour. We now need to restore some of this black (in the form of shading and shadows) to make the final colorised image more realistic. We call this filter the _Monochrome filter_. This filter has to be applied to a different layer that sits above the colorization layer. Our first job is to create a new layer in the SVG document and import the grayscale asset generated earlier into this new layer. #### Creating the Monochrome Layer - On the Layers palette, click the '+' button to create a new layer. - In the Add layer modal, name your layer 'Monochrome' (or something else meaningful) - Add this layer 'Above current' - Blend mode should be 'Normal' and leave opacity at '100.0' - Go to 'File > Import' and navigate to your saved assets. - Select the greyscale version of your product image and click 'Open' - Choose between Embed and Link - Your greyscale product image will appear on your canvas ![Creating the monochrome layer](https://cdn.media.amplience.net/i/ampproduct/creating-colorized-image-21?w=1880&fmt=png 'Creating the monochrome layer') - Ensure the image is aligned correctly with the colorized version beneath (You can switch layers on/off by clicking on the eye icon to the left of the layer name in the Layers palette - this can be helpful to check the alignment. Inkscape's also snaps objects together that are positioned in close proximity - a feature that should help you here). Now to create the filter itself... #### Creating the Monochrome filter - In the Filter Editor palette, click the 'New' button. - You'll see 'filter2' appear in the Filter list. - Double-click 'filter2' and rename the filter 'Monochrome' At this point you might want to apply the filter to the layer (although nothing will happen at this point because the filter has no effects). To do this: - Click on your greyscale product image visible in the left-hand window. - A dotted line and transformation handles will indicate the image is selected. - In the Filter Editor, check the Monochrome filter box - and we're ready to proceed to the next step ![The monochrome filter](https://cdn.media.amplience.net/i/ampproduct/creating-colorized-image-22?w=1880&fmt=png 'The monochrome filter') #### Creating the Monochrome filter effects This filter has fewer filter effects than Colorize - four to be precise. We will use the same techniques that we learnt earlier to create each effect in turn. During the process of adding the filters effects, your product image will change radically and might appear broken - this is to be expected - the final combination of filter effects is what makes the difference. #### Filter effect 1 - Color Matrix - Go to the droplist to the right of 'Add effect' button and this time select 'Color Matrix' - Click the 'Add effect' button - In 'Effect parameters' change type from 'Matrix' to 'Luminance to Alpha' ![Adding the color matrix effect](https://cdn.media.amplience.net/i/ampproduct/creating-colorized-image-23?w=1880&fmt=png 'Adding the color matrix effect') #### Filter effect 2 - Flood - Go to the droplist to the right of 'Add effect' button and select 'Flood' - Click the 'Add effect' button (your product image will most likely go black at this point but don't worry - this is just temporary until we create the next filter effect). ![Adding the flood effect](https://cdn.media.amplience.net/i/ampproduct/creating-colorized-image-24?w=1880&fmt=png 'Adding the flood effect') - In 'Effect parameters' change the Flood color to black #000000 - Leave 'Opacity' setting at 1.00 #### Filter effect 3 - Composite - Go to the droplist to the right of 'Add effect' button and select 'Composite' - Click the 'Add effect' button - Change the Operator from 'Arithmetic' to 'Out' ![Setting up the composite filter effect](https://cdn.media.amplience.net/i/ampproduct/creating-colorized-image-25?w=1880&fmt=png 'Setting up the composite filter effect') - Drag the lower to the two connector from 'Composite' to 'Color Matrix' - at this point your product will re-emerge with black information restored to the image. ![Modifying the connectors](https://cdn.media.amplience.net/i/ampproduct/creating-colorized-image-26?w=350 'Modifying the connectors') #### Filter effect 4 - Composite (again) - Go to the droplist to the right of 'Add effect' button and select 'Composite' - Click the 'Add effect' button - In 'Effect parameters', change Operator from 'Over' to 'Arithmetic' ![Adding another composite effect](https://cdn.media.amplience.net/i/ampproduct/creating-colorized-image-27?w=1880&fmt=png 'Adding another composite effect') - Change the K1, K2, K3 & K4 values to -6.00, 8.00, 1.00 & -1.80 (or thereabouts) - Drag the lower of the two connectors from 'Composite' to 'Source Graphic' ![How the connectors should look now](https://cdn.media.amplience.net/i/ampproduct/creating-colorized-image-28?w=350 'How the connectors should look now') That's all the filter effects complete. You product image should now be fully colorized and should benefit from a realistic range of tones and shadows. At this point, we generally recommend testing some colour variations to ensure the filter effects are correctly applied. This is best done by locking the Monochrome layer first (using the padlock icon in the Layer Editor palette). Then you can more easily select image asset associated with the Colorize layer. When you return to the Filter Editor, you'll see the Colorize layer has been selected. Click the Flood filter and then you are able to adjust the flood colour to perform your colour tests. Once you are happy that the colorization is working as you need, the final step is to apply the product image mask to hide those parts of the product image that shouldn't be colorized ### Step 3 - Applying the mask You might be glad to know that this is a very straightforward process (compared to creating the filters). The mask sits on top of the _monochrome_ and _colorize_ layers and its purpose is to hide the effects of these other two layers from view. That way you can select exactly what you'd like to colorise. #### Creating the Mask Layer - On the Layers palette, click the '+' button to create a new layer. - In the Add layer modal, name your layer 'Mask' (or something else meaningful) ![Creating the mask layer](https://cdn.media.amplience.net/i/ampproduct/creating-colorized-image-29?w=1880&fmt=png 'Creating the mask layer') - Add this layer 'Above current' - Blend mode should be 'Normal' and leave opacity at '100.0' - Go to 'File > Import' and navigate to your saved assets. - Select your mask image and click 'Open' - Choose between Embed and Link - Your mask image will appear on your canvas. - As before, ensure the image is aligned correctly with the versions beneath. It will snap into place if saved at the same dimensions as the other layers. ![The mask image](https://cdn.media.amplience.net/i/ampproduct/creating-colorized-image-30?w=1880&fmt=png 'The mask image') #### The finished article! You should now see the full effect of the completed SVG. By locking both the mask and monochrome layers, you can easily select the colorise layer and manipulate the flood effect colour. ![The completed SVG](https://cdn.media.amplience.net/i/ampproduct/creating-colorized-image-31?w=1880&fmt=png 'The completed SVG') ## Part 3 - Making the SVG dynamic When you are completely satisfied with the result, the SVG is ready to be parameterized. This is the process whereby a token is inserted in place of the `flood color` value. This value can be controlled dynamically, enabling any color variation to be created at will. ![The SVG is now ready to be parameterized](https://cdn.media.amplience.net/i/ampproduct/creating-colorized-image-32?w=1880&fmt=png 'The SVG is now ready to be parameterized') ![Applying color variation](https://cdn.media.amplience.net/i/ampproduct/creating-colorized-image-33?w=1880&fmt=png 'Applying color variation') ### Step 1: Parameterize the SVG As the basis of this example, a designer has created an SVG image of an armchair that includes the necessary filters to support colorization. Take a look at the [creating a colorized product image](colorization.md) tutorial for a step by step guide to creating an SVG ready for parameterization. ![The SVG armchair image used in this tutorial](https://cdn.media.amplience.net/i/ampproduct/colorization-quickstart-1?w=350 'The SVG armchair image used in this tutorial') Right click and save as to [download](https://amp-product.s3-eu-west-1.amazonaws.com/svgs/Armchair-configurator.svg) the SVG XML code for this example. When modifying the SVG XML code for this image, we will be referencing our `ampsvg` namespace. So before making any further modifications to the file, we must include the namespace definition in the list of namespaces at the head of the file like this: ```xml ` section of the SVG XML. ```xml ``` The `substitutions` tag defines a parameter named `$color` that can be provided to Dynamic Media, and it also sets the mapping of that parameter value onto the `flood-color` attribute of the flood filter that was already defined in the SVG file as shown here: (it's what defines the color of the armchair): ```xml ``` The `tokens` tag of our newly-inserted metadata instructs the application to allow the substitution parameter value to be changed via the user interface. Once parameterized, we upload the SVG to Content Hub. ### Step 2: Locate the SVG in the SVG Library In this step we locate the SVG image in the SVG Library of the application. Select the "View contact sheet" option from the menu. ![Viewing the contact sheet in the Product Customization app](https://cdn.media.amplience.net/i/ampproduct/colorization-quickstart-2?w=1880&fmt=png 'Viewing the contact sheet in the Product Customization app') This will take you to the contact sheet which will be empty at this point. Click the "Add Preview" button. ![The contact sheet will be initially empty because no variants have been created](https://cdn.media.amplience.net/i/ampproduct/colorization-quickstart-3?w=1880&fmt=png 'The contact sheet will be initially empty because no variants have been created') ### Step 3: Preview the SVG Now it's time to preview and test colorized variants of the SVG, which means: - Changing the substitution parameter value for the armchair material color. - The preview will generate automatically - Selecting pass or fail will add the preview to the contact sheet ![Previewing a variant](https://cdn.media.amplience.net/i/ampproduct/colorization-quickstart-4?w=1880&fmt=png 'Previewing a variant') ### Step 4: View the Contact Sheet Having run the preview process (Step 3) several times, we can then view the variants of the SVG image via the Contact Sheet: ![The contact sheet shows the created variants](https://cdn.media.amplience.net/i/ampproduct/colorization-quickstart-5?w=1880&fmt=png 'The contact sheet shows the created variants') ### Step 5: Publish the Image The final step of the quick-start process is to publish the image, which can be done from the SVG Library as shown here: ![Publishing the SVG](https://cdn.media.amplience.net/i/ampproduct/colorization-quickstart-6?w=1880&fmt=png 'Publishing the SVG') Note that the application supports a workflow for reviewing and approving SVG variants. See [workflow](workflow.md) for more details. ### Step 6: Manipulating the image dynamically Once the SVG is published, you can change the color dynamically by appending `?color=` to its media delivery URL. For example: ``` http://cdn.graphics.amplience.net/v1/media/graphics/i/ampproduct/Armchair-configurator?color=lightgreen ``` > **Tip:** For SVG media delivery URLs you should use the format shown above. For more information, see [URLs for SVG images](https://amplience.com/developers/docs/knowledge-center/faqs/assets/#urls-for-svg-images). ![Manipulating the SVG dynamically and displaying the rasterized image in the browser](https://cdn.media.amplience.net/i/ampproduct/colorization-quickstart-7?w=1880&fmt=png 'Manipulating the SVG dynamically and displaying the rasterized image in the browser') ## Beyond colorization... SVG filters are completely configurable. Depending on the materials used in your product range you might wish to adjust filter settings to achieve a particular effect (for example, a more gloss finish or a higher sheen on a fabric). The top Composite filter effect in Colorise layer drives these kinds of appearance and small adjustments to the K1 and K2 channels has a significant effect on the finish of the product image. In addition, the SVG technology has in-built effects many of which are familiar to Photoshop users, (Blurs, distortions, materials etc) which can easily be included to enhance your dynamically created product images. ![Additional filter settings](https://cdn.media.amplience.net/i/ampproduct/creating-colorized-image-34?w=350 'Additional filter settings') ## Troubleshooting notes ### Filters not being applied as you were expecting Ensure the correct image layer on your canvas is selected before selecting the filter in your Filter Editor. Also, make sure the filter is switched on using the checkbox. ### Product images not the right level of color saturation On the Colorise filter, adjusting the 'Opacity' level on the Flood filter effect will reduce or increase color saturation of your product images. ### Want more contrast and surface detail On the Monochrome filter, making small adjustments to the K1, K2, K3 & K4 setting of the second Composite filter effect will change the contrast, shadow level and surface details being applied.