10 Minutes with Flash: Custom, Portable Color Palettes
- Sampling Color
- Transporting Color Palettes
- Adding Your Own Colors
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
In this installment of the "10 Minutes with Flash" series, we'll rid ourselves of the pesky Web 216-color palette that Flash uses by default and replace it with our own custom color palette that can be reused in other projects. The Web 216 palette really isn't necessary these days because computers made in the past several years support "true color," enabling us to use millions of colors in our designs instead of the 216 colors formerly considered "Web safe."
When creating a color palette from a range of millions, the major caveat is that it can be extremely difficult, to say the least, to choose colors that go well together. One way to get around this is to find a photograph or another image that contains colors you like and then sample from it.
Images Are Everywhere
As a designer, I keep thousands and thousands of images handy for use in designs, and any one of them can serve as an excellent starting point for creating custom color palettes. How did I get so many images? Well, I take a lot of my own photographs, but I also check out the shelves of my local computer stores for stock photography packages. Getting royalty-free stock photography online can be quite expensive, but there are always boxes full of images at stores that carry software, and they are always an inexpensive alternative to purchasing single images online.
The Big Box of Art, for example, contains 615,000 images and costs under $100, whereas a single image on a stock photography site can cost $80 or more. Not every image in this box will be amazing or even usable (but many of them will be), and the ones that aren't can still be used for creating color palettes. You can also crop out part of an image and use that instead.
Here's how it works.
Sampling Color
To find the perfect colors for a project, I often start with a photograph. Background images are usually best for this purpose because they generally contain similar colors that already go well together. Let's start by importing an image.
Launch Flash, create a new blank document, and save it as color_sample.fla to your hard drive.
Choose File > Import and locate an image that contains several complementary colors that you like. If you want, use Figure 1 for your image. Simply right-click on the image and choose Save Image to Desktop (or the most reasonable variation of that sentence) from the contextual menu.
When the image is done being imported, make sure that it fills up the Stage by resizing it with the Property inspector or Free Transform tool. The larger the image is, the easier it is to pick colors from it.
Open the Color Swatches panel by choosing Window > Design Panels > Color Swatches. The panel displays the Web 216 color palette by default.
Open the Color Swatches Options menu, as shown in Figure 2, and choose Clear Colors. This clears the Web 216 palette and leaves only black and white as available colors.
Click the Fill Color icon in the Toolbar and roll your mouse pointer over to the Stage (the pointer appears as an eyedropper icon). Choose any color you like by clicking it. If you're using the image I supplied for this article, sample.jpg, choose a shade of green.
Click inside the Color Swatches panel once to add the chosen color to the palette.
Repeat the two previous steps several times, choosing colors that go well together (it's up to you to determine what will look good). I chose five different shades of green, from very light to very dark.
Save your work.
From the Color Swatches Options menu, choose Save Colors to open the Export Color Swatch dialog box.
Name your color palette custom_colors.clr and save it in the same directory as your FLA file.
Close color_sample.fla.
)
Figure
1 I have no idea what this is a photo of, but it sure is pretty.
)
Figure
2 Get rid of the pesky Web 216 palette.