Ripping Palettes for Better Colors

This process extracts the color scheme from an existing work of art and arranges the colors into an organized palette image. Use this resulting image like a painter’s palette to choose colors for your own artwork or game assets.

* In this guide I used Photoshop, but you can do this in any decent graphics program like GIMP or IrfanView, etc.
* This tutorial is explicitly verbose even though the process takes just 15-30 seconds.

Examples Of This Technique In Use

Artwork by Jeff Soto + ripped palette:

Artwork by Sparth + ripped palette:

Artwork by Sheperd Fairey + ripped palette:

Ripping Palettes – Step 1

Load a source image with nice colors from which to extract the colorset.
In this case I used one of my own digital artworks.

Tip: For best results use a gorgeous work of art with a nice color scheme rather than a photograph. A photograph typically has too many colors and may yield a less useful palette.

Ripping Palettes – Step 2

Reduce the # of colors in the image by converting it to indexed color (like making a GIF!)

In Photoshop, go to Image > Mode > Indexed Color. Choose Palette: Local Selective, Peceptual, or Adaptive. Reduce the colors as low as you can go without losing any vital colors in the image.

In IrfanView, go to Image > Decrease Color Depth. Choose “custom” and try 32 colors as a starting point, going up or down as needed to avoid losing any vital colors. Then go to Image > Palette > Export Palette to save the palette which you’ll need in step 4.

* I typically use between 24 and 64 colors – use as few as possible without losing the overall color scheme of the image.

Ripping Palettes – Step 3

Load this rainbow colored palette_base.PNG image into Photoshop or IrfanView.
 (You can right-click on this image right now to save it.)

Ripping Palettes – Step 4

Apply the reduced color palette we created in Step 2 to the palette_base.PNG, resulting in a neatly organized image that looks like (and will function as) a sort of painter’s palette.

Photoshop remembers the palette you created in Step 2, so simply go to Image > Mode > Indexed Color > Palette: Previous

In IrfanView, go to Image > Palette > Import Palette and load the palette you saved in Step 2.

Ripping Palettes – Step 5

Notice the pleasing color scheme in the resulting colorset palette image. You now have an artful palette full of easily selectable harmonious colors for your own artwork or game assets.

TIP: While this colorset could be your final colors, it also works well as a starting point. If your resulting palette is too limited, you can liven up your creation with some additional spots & dashes of color that don’t exist in the colorset. Be careful, though: A good work of art rarely has a huge rainbow of colors. Most great color schemes are based on just two or three major colors at most, using just accents of other colors for enhanced interest.

TIP: Try experimenting with the resulting painter’s palette image to make it unique. Change its color with the hue/saturation tool or try adjusting it with Photoshop’s Color Balance. This can make your palette more “original”, perhaps evolving it into a set of colors that no longer resembles the source image if you prefer.

Morality vs. “Other People’s Colors”

Don’t worry too much about “color theft.” If you run this process on enough images you’ll notice a lot of repetition because there is no such thing as a truly original color scheme. Also, it’s more about how you use the colors than the colors themselves. Your resulting image will only resemble the source image if you want it to look similar.

When I use this technique my work ends up different enough that no one could ever identify the source from which I acquired the starting palette. The reduced color palette is primarily useful to ensure your selected colors fit together into a harmonious color scheme. This technique is a great way to avoid the “out of control” color you often see in art created by people without a good understanding of color theory.

Advanced Palette Ripping Techniques

1. Did your source image lose some critical colors during the automatic color reduction in Step 2? Here’s an easy fix: Convert your resulting painter’s palette image back to 24bit. With the pencil tool (no antialiasing!) simply add a scribble of each color you want to bring back to the palette. Now run the exact same process as before, except this time use your modified painter’s palette as the source image (the one you scribbled on!), and in the palettization options use Image > Mode > Indexed Color > Palette: EXACT. (Once you apply that colorset to the palette_base.PNG it will neatly re-organize your added colors into a new painter’s palette image.)

2. The quality of your resulting palette will only be as good as the quality of colors in the source image. You can’t use a bad photograph of a painting, for example, because the camera will decontrast and ruin the source colors. Palettes are best sourced from digital artworks or professional quality photos of art. (Also – you can try digitally correcting the colors in the source photograph before running the process if it’s of decent enough quality.)

3. For enhanced results, you can apply image adjustments and filters to the source image prior to extracting the palette. There’s a lot of power with this! Imagine finding an image that has almost the colors you want in your palette. Digitally adjust it until the source image has the color look you want and then use it as a source image to extract the palette. Also, some images greatly benefit from using Photoshop’s Filter > Artistic > Cutout or Filter > Pixelate > Mosaic before extracting the palette. In fact, the Mosaic filter is particularly useful when using a JPG with lossy compression artifacts as a source image.

4. For a wider variation in colors, use the full 256 colors when first converting your source image from 24bit to Indexed Color. Then re-palettize the resulting painter’s palette image with fewer colors until it has a useful amount of banding for easy color selection.
5. Try bypassing the use of other people’s colors by creating your own source image from scratch. Try scribbling together your own set of colors and using that for your source image. Make sure you blend various color combinations so the between-colors are present in your resulting painter’s palette image. (Also, try running Filter > Artistic > Cutout on your scribble before using it as a source image. That filter can help pull your scribbled colors into a more balanced palette, meaning your scribble-source-image will produce a higher quality painter’s palette image.)

6. You can force Photoshop to include colors from a separately-saved palette during the color indexing process in Step 2 if needed. (Helpful for certain situations like if you need to force certain UI colors, or mix palettes together, etc.)

7. I recommend archiving a library of your favorite painter’s palette images for easy access to your most useful color schemes.

8. Even though good artwork typically produces the most useful palettes, you can get interesting results from photographs and other sources. Try running this process on packages of candy or cereal boxes – anything with good design and/or colors. Game screenshots can have useful results, particularly with “pixel art” like you find in cell phone games or on the Nintendo DSi. Photos can work if they are particularly artful and have a somewhat limited color scheme.

9. If needed, use Photoshop’s Filter > Other > Offset to quickly arrange the colors in your painter’s palette image into a more useful layout. This is particularly useful when you have a simple color scheme where the resulting painter’s palette image almost look like a mirror image. In that case, just offset the pixels horizontally (with “wrap around” enabled) by about 64-80 pixels.
Tutorial by Junkyard Sam. All rights reserved. Junkyard Sam is an indie developer and runs Stolen Goose. Ripping Palette for Colors was originally posted in Junkyard Sam’s blog here in October 2, 2009.

Article source : www.mangatutorials.com/2011/ripping-palettes-for-better-colors