Tutorial: How to extract a colour scheme from a photograph

Today I picked up on a neat little trick on how to extract a colour palette from a photograph. Imagine you stumble upon a gorgeous photo (or piece of digital art) which has this special colour scheme. You could use the eyedropper tool to extract each colour individually but there’s a slicker way of doing it. This tutorial teaches you how to convert a photo into a fully functional colour swatch palette using photoshop and illustrator.

intial photo
this is the photograph I got from flickr with nice warm colours which I want to use in a vector design. The first step is to open it in Photoshop.

mosaic 1
For CS3 users only: make a duplicate and convert the picture into a smart object. This way you can edit the mosaic effect without messing up the original photo.

mosaic 2
Go to filters > Pixelate > Mosaic and vary the cell size until you’re happy with the result. In my case 113 did the job. This is it for the Photoshop part.

import to Illustrator
The next step is to import our mosaic grid into Illustrator. If you’ve got an Ai file (preferably with the same, or larger dimensions) open you can simply drag an drop the layer from Photoshop.

live trace
This is were the magic happens. Making sure you have the content selected hit “Live Trace”.

option and expand
Choose the “Photo High Fidelity” Preset from the Live Trace options. The default setting of 64 for Max Colours should be enough. Change it if you used a smaller cell size for the Mosaic filter. Now hit Expand.

add colours
With the expanded mosaic still selected open the Swatches palette and from the option menu choose “Add Selected Colors”. That’s it. Now you’ve imported the colours from your intial photograph into the swatches gallery in Illustrator. Save it so you can use it for different projects.

Written by Franz Jeitz

Franz Jeitz is a freelance designer and owner of Fudgegraphics. Originally from Luxembourg he now lives in London. Franz loves design, music and is a tea enthusiast. Follow him on Twitter.

Promote Post

Google Buzz

Join the Discussion:

9 Awesome Responses so far
  1. WilR

    Nice tut, sometimes i just skip the applying the mosaic filter in photoshop by making the image really small in illustrator and rasterizing it :P

  2. Tina Frissora

    The steps in CS3 Illustrator were a bit different, but easy enough to figure out. I wanted to use the swatches created from the photo in PhotoShop, so I saved them from Illustrator and dragged the .ase file into the open PhotoShop window and they appeared in my swatches! Very cool! Thanks!

  3. Design Wannabe

    This is a brilliant way of doing it. Much better than color picking.. regards, LaDonna.
    .-= Design Wannabe´s last blog post: Toxel =-.

  4. Carrie schrepfer

    Have you used the Adobe Kuler? It does the same thing, but a bit more specific (i.e. do you want warm tones, cool tones, vibrant tones, etc.)

    I love it.

  5. Cristina E

    Brilliant! …I had a “duh” moment reading this!

These Sites link here:

  1. Heads Up Seven Up Blogroll - June 16 | GrandmasterB dot com
  2. Hytrin.
  3. Color Palettes of Game Advertisements in German Video Game Entertainment Magazins | MINDsPAGE
  4. You are now listed on FAQPAL

Leave a Reply