Generative Recolor with Adobe Firefly

Adobe Firefly Overview

Adobe Firefly is a new set of generative AI tools which can be accessed via https://firefly.adobe.com/ by anyone with an Adobe ID. To learn more about Firefly… have a look at their FAQ:

Image 1: Adobe Firefly

For more information about the usage of Firefly to generate images, text effects, and more… have a look at the previous articles in this series:

•      Animating Adobe Firefly Content with Adobe Animate
•        Exploring Text to Image with Adobe Firefly
•       Generating Text Effects with Adobe Firefly
•        Adobe Firefly Feature Deep Dive
•        Generative Fill with Adobe Firefly (Part I)
•       Generative Fill with Adobe Firefly (Part II)

This current Firefly article will focus on a unique use of AI prompts via the Generative recolor module.

Generative Recolor and SVG

While most procedures in Firefly are focused on generating imagery through text prompts, the service also includes modules that use prompt-driven AI a bit differently. The subject of this article, Generative recolor, is a perfect example of this.

Generative recolor works with vector artwork in the form of SVG files. If you are unfamiliar with SVG, it stands for Scalable Vector Graphics and is an XML… so uses text-based nodes similar to HTML:

Image 2: An SVG file is composed of vector information defining points, paths, and colors

As the name indicates, we are dealing with vector graphics here and not photographic pixel-based bitmap images. Vectors are often used for artwork, logos, and such – as they can be infinitely scaled and easily recolored.

One of the best ways of generating SVG files is by designing them in a vector-based design tool like Adobe Illustrator. Once you have finished designing your artwork, you’ll save it as SVG for use in Firefly:

Image 3: Cat artwork designed in Adobe Illustrator

To convert your Illustrator artwork to SVG, perform the following steps:

1.     Choose File > Save As to open the save as dialog.

2.     Choose SVG (svg) for the file format:

Image 3: Selecting SVG (svg) as the file format

3.     Browse to the location on your computer you would like to save the file to.

4.     Click the Save button.

You now have an SVG file ready to recolor within Firefly. If you desire, you can download the provided cat.svg file that we will work on in this article.

Recolor Vector Artwork with Generative Recolor

Generative recolor, like all Firefly modules, can be found directly at https://firefly.adobe.com/ so long as you are logged in with your Adobe ID.

From the main Firefly page, you will find a number of modules for different AI-driven tasks:

Image 4: Locate the Generative recolor Firefly module

Let’s explore Generative recolor in Firefly:

1.     You’ll want to locate the module named Generative recolor.

2.     Click the Generate button to get started.

You are taken to an intermediate view where you are able to upload your chosen SVG file for the purposes of vector recolor based upon a descriptive text prompt:

Image 5: The Upload SVG button prompt appears, along with sample files

3.     Click the Upload SVG button and choose cat.svg from your file system. Of course, you can use any SVG file you want if you have another in mind. If you do not have an SVG file you’d like to use, you can click on any of the samples presented below the Upload SVG button to load one up into the module.

The SVG is uploaded and a control appears which displays a preview of your file along with a text input where you can write a short text prompt describing the color palette you’d like to generate:

Image 6: The Generative recolor input requests a text prompt

4.     Think of some descriptive words for an interesting color palette and type them into the text input. I’ll input the following simple prompt for this demonstration: “northern lights”.

5.     Click the Generate button when ready.

You are taken into the primary Generative recolor user interface experience and a set of four color variants is immediately available for preview:

Image 7: The Firefly Generative recolor user interface

The interface appears similar to what you might have seen in other Firefly modules – but there are some key differences here, since we are dealing with recoloring vector artwork.

The larger, left-most area contains a set of four recolor variants to choose from. Below this is the prompt input area which displays the current text prompt and a Refresh button that allows the generation of additional variants when the prompt is updated. To the right of this area are presented various additional options within a clean user interface that scrolls vertically. Let’s explore these from top to bottom.

The first thing you’ll see is a thumbnail of your original artwork with the ability to replace the present SVG with a new file:

Image 8: You can replace your artwork by uploading a new SVG file

Directly below this, you will find a set of sample prompts that can be applied to your artwork:

Image 9: Sample prompts can provide immediate results

Clicking upon any of these thumbnails will immediately overwrite the existing prompt and cause a refresh – generating a new set of four recolor variants.

Next, is a dropdown selection which allows the choice of color harmony:

Image 10: A number of color harmonies are available

Choosing to align the recolor prompt with a color harmony will impact which colors are being used based off a combination of the raw prompt – guided by harmonization rules. An indicator will be added along with the text prompt.

For more information about color and color harmonies, check out Understanding color: A visual guide – from Adobe.

Below is a set of eighteen color swatches to choose from:

Image 11: Color chips can add bias to your text prompt

Clicking on any of these swatches will add that color to the options below your text prompt to help guide the recolor process. You can select one or many of these swatches to use.

Finally, at the very bottom of this area is a toggle switch that allows you to either preserve black and white colors in your artwork or to recolor them just like any other color:

Image 12: You can choose to preserve black and white during a recolor session or not

That is everything along the right-hand side of the interface. We’ll return to this area shortly – but for now… let’s see the options that appear when hovering the mouse cursor over any of the four recolor variants:

Image 13: The Generative recolor overlay

Hovering over a recolor variant will reveal a number of options:

•        Prominent colors: Displays the colors used in this recolor variant.
•        Shuffle colors: Will use the same colors… but distribute them differently across the vector artwork.
•        Options: Copy to clipboard is the only option that is available via this menu.
•        Download: Enables the download of this particular recolor variant.
•        Rate this result: Provide a positive or negative rating of this result.

We’ll make use of the Download option in a bit – but first… let’s make use of some of the choices present in the right side panel to modify and guide our recolor.

Modifying the Prompt

You can always change the text prompt however you wish and click the Refresh button to generate a different set of variants. Let’s instead keep this same text prompt but see how various choices can impact how it affects the recolor results:

Image 14: A modified prompt box with options added

Focus again on the right side of the user interface and make the following selections:

1.     Select a color harmony: Complementary

2.     Choose a couple of colors to weight the prompt: Green and Blue violet

3.     Disable the Preserve black and white toggle

4.     Click the Refresh button to see the results of these options

A new set of four recolor variants is produced. This set of variants is guided by the extra choices we made and is vastly different from the original set which was recolored solely based upon the text prompt:

Image 15: A new set of recolor variations is generated

Play with the various options on your own to see what kind of variations you can achieve in the artwork.

Downloading your Recolored Artwork

Once you are happy with one of the generated recolored variants, you’ll want to download it for use elsewhere. Click the Download button in the upper right of the selected variant to begin the download process for your recolored SVG file.

The recolored SVG file is immediately downloaded to your computer. Note that unlike other content generated with Firefly, files created with Generative recolor do not contain a Firefly watermark or badge:

Image 17: The resulting recolored SVG file

That’s all there is to it! You can continue creating more recolor variants and freely download any that you find particularly interesting.

Before we conclude… note that another good use for Generative recolor – similar to most applications of AI – is for ideation. If you are stuck with a creative block when trying to decide on a color palette for something you are designing… Firefly can help kick-start that process for you.

Author Bio

Joseph is a Teaching Assistant Professor, Instructor of Technology, University of Colorado Boulder / Adobe Education Leader / Partner by Design

Joseph Labrecque is a creative developer, designer, and educator with nearly two decades of experience creating expressive web, desktop, and mobile solutions. He joined the University of Colorado Boulder College of Media, Communication, and Information as faculty with the Department of Advertising, Public Relations, and Media Design in Autumn 2019. His teaching focuses on creative software, digital workflows, user interaction, and design principles and concepts. Before joining the faculty at CU Boulder, he was associated with the University of Denver as adjunct faculty and as a senior interactive software engineer, user interface developer, and digital media designer.

Labrecque has authored a number of books and video course publications on design and development technologies, tools, and concepts through publishers which include LinkedIn Learning (Lynda.com), Peachpit Press, and Adobe. He has spoken at large design and technology conferences such as Adobe MAX and for a variety of smaller creative communities. He is also the founder of Fractured Vision Media, LLC; a digital media production studio and distribution vehicle for a variety of creative works.

Joseph is an Adobe Education Leader and member of Adobe Partners by Design. He holds a bachelor’s degree in communication from Worcester State University and a master’s degree in digital media studies from the University of Denver.

Author of the book: Mastering Adobe Animate 2023