sccc.premiumdw.com

WEB200 » Creating Tints & Shades in Illustrator

Tints & Shades are a fabulous way to expand your two or three color palette into an extensive array of colors. They will allow you to create much more depth in your web design.

This tutorial will walk you through creating Tints & Shades using Adobe Illustrator (CS3):

Download: Extending Your Color Palette with Tints & Shades | Premium Design Works

Step One: Importing Your Colors

Let’s say a company gives you their logo as an Illustrator vector file.

In this file, let’s say they have designated their Pantone colors:

If they have used Pantone colors in their logo, you should find them in the swatches palette:

This swatch palette can then be imported into another Illustrator document that you can create your Tints & Shades from.

Let’s start by creating a new Illustrator document:

Now that you have created a new document, you can open the logo file as a swatch palette.

You do this by going to Window > Swatch Libraries > Other Library:

You will then be asked to select a library to open. Choose your logo file:

You should now see your logo file opened up as a new swatch palette:

Step Two: Customizing Your Palette

If you are at all like me, you find the default colors in the swatches palette to be annoying to look at all of the time.

What I typically do is delete all of the unused colors from my palette so I can find the ones I am using with ease.

To delete the unused colors from your swatches palette you need to “Select All Unused” from the palette’s option menu:

Then “Delete Swatches” to remove them:

You should now have a clean swatches palette to start working from:

You can then import your colors from your logo file to your Tints & Shades file by simply clicking and dragging them over:

Once you have moved your Pantone colors into your swatches palette, you may need to convert them from CMYK to RGB.

Simply double click on the swatch to open the Swatch Options.

Once the Swatch Options is open, change the Color Mode to RGB:

Once you have done this you should see the RGB icon next to your colors in your swatches palette:

NOTE: Since we are working in the web environment we should change all of our swatches to RGB mode.

Step Three: Making your Tints & Shades

Let’s make some Tints & Shades!

First, you will need to make ten squares for each color in your palette:

Now that you you have done that, open the color palette by choosing Window > Color.

When you open the color palette, select a swatch from your library.

You will notice that if your color is a spot color, you will see a slider that can adjust percentages of a color:

Type in a new value of 80% into the slider. Then drag the color to your swatches palette:

With that done, you can select one of your squares and change it to the new 80% tint:

You can then repeat these steps for the values of 60%, 40% and 20% to create the rest of your tints:

To create our first shade, we will need to go back to our color palette. But, this time we will need to add some black to the color.

To do so, choose CMYK from the options menu in the color palette:

Then, change the black or “K” slider to 20% and drag that color to your swatches palette:

Unfortunately, Illustrator does not rename the new tone swatch very well.

To keep things organized, let’s rename the swatch to a more logical name:

You can now select a square to create your first 20% black shade:

Repeat these steps to create your 40%, 60% and 80% black shades.

You can then repeat these steps to create tints and shades for all of your colors:

Congratulations! You have just learned how to expand your color palette using Tints & Shades!

Download: Extending Your Color Palette with Tints & Shades | Premium Design Works

See Also: Color Palette | Premium Design Works