facebook google plus twitter
Webucator's Free Color Theory Tutorial

Lesson: Implementing Color

Welcome to our free Color Theory tutorial. This tutorial is based on Webucator's Color Theory course.

Building the color palette and applying it to a project are two skills that are often handled by two different people. Often the application of the color palette requires extensive knowledge of the software platforms being used by the developers.

Lesson Goals

  • Create an interactive color scheme in Photoshop or Illustrator.
  • Apply the color palette and keep a good ratio of white space.

Create Color Palette

Based on your medium, the type of presentation of your color palette will vary. A good color palette will have a few common properties.

  • Clearly labeled color swatches.
    • RGB
    • CMYK
    • Hexadecimal decimal (web safe)
  • Properly organized in hierarchal use.
  • Notations for special directions.

Many of the individuals that will be using your color palette will benefit from having an electronic copy so they may "sample" the color and then apply them to project mockups in programs such as Photoshop, Illustrator, InDesign, and Dreamweaver.

If you are working with a physical project, an electronic form is still helpful as many designers use computer mockups to display the end results with the client.

Mechanics of a Color Scheme

Color Schemes may be represented in many ways. Using a tool such as Photoshop or Illustrator, we can create a very interactive color scheme.

Create a color scheme in Photoshop:

  1. Open Photoshop.
  2. Use the implementing-color\Exercises\colorPalette.psd.
  3. Make sure you can see the Color panel and the Swatch panel.
    1. Window >Color.Window Color
    2. Window > Swatches. Window Swatches
  4. Create color swatches by mixing colors and saving them as a swatch.
    1. Double-click the color chip. Mix a shade of blue. Click OK.Color Picker
    2. In the Swatches panel, click the Create New Swatch icon.Create New Swatch Icon in Swatches Panel
    3. Name the color, click OK.Color Swatch Name Dialog Box
    4. The aqua blue color chip is now in the Swatches panel.Aqua Blue Color Chip in Swatches Panel
  5. Save as for designers and developers.
    1. File > Save As "MyColorPalette.psd".Save As Dialog Box
    2. Use the paintbrush to create a visual. Make sure to properly label the colors per their use.Color Palette

White Space

Once we have our color palette, we need to use caution and not oversaturate the application of the colors as every medium can benefit from empty space, often called white space.

The philosophy of less is more embodies the spirit of white space. In a physical space a few items really does bring attention to the focal point.

Before: Too much in one space, hard to focus on any one thing.Room with Too Much White Space2013 Tracy Berry

After: Removal of most of the objects allows the main artwork to be seen.Room with Proper White Space2013 Tracy Berry

In a web project, the product/message should be the focal point. The clean, simple design allows the focus to be on the content, not the design.Web Page with White Space2013 Tracy Berry

In a marketing piece, the balance of empty space vs. content should be balanced based on the type of project it is. See the two-page brochure below and notice the use of white space and balance..Brochure Cover with Proper White SpacePage 2 of the trifold brochure:Page 2 of Brochure with Proper White Space

Creating an Electronic Color Scheme

Duration: 15 to 25 minutes.

In this exercise, you will create a color scheme in Photoshop or Illustrator (you may use any graphics program with a color selection). Note that the solution assumes Photoshop:

  1. Open any graphic program and build a color palette that may be saved out as a file that can be sent to any designer or developer.

Solution:

One possible solution:

  1. Open Photoshop.
  2. Use the implementing-color\Exercises\colorPaletteCreate.psd.
  3. Make sure you can see the Color Panel and the Swatch Panel.
    1. Window >Color.Window Color
    2. Window > Swatches. Window Swatches
  4. Create color swatches by mixing colors and saving them as a swatch.
    1. Double-click the color chip. Mix a shade of blue. Click OK.Color Picker
    2. In the Swatches Panel, Click the Create New Swatch icon.Create New Swatch Icon in Swatches Panel
    3. Name the color, click OK.Color Swatch Name Dialog Box
    4. The Dark Blue color chip is now in the Swatches panel.Dark Blue Color Chip in Swatches Panel
  5. Save as for designers and developers.
    1. File > Save As "MyColorPaletteCreate.psd"Save As Dialog Box
    2. Use the Paintbrush to create a visual. Make sure to properly label the colors per their use.Color Palette