4 Working with Color - PowerPoint PPT Presentation

1 / 32
About This Presentation
Title:

4 Working with Color

Description:

Here you find tools in Photoshop and ImageReady CS2 for working with color ... A shade of red is burgundy or maroon. Shades. Hue, Tint, Shade ... – PowerPoint PPT presentation

Number of Views:27
Avg rating:3.0/5.0
Slides: 33
Provided by: cathys59
Category:

less

Transcript and Presenter's Notes

Title: 4 Working with Color


1
4Working with Color
  • Color Profiles and the Web Color considerations
    for Windows and Mac The Decline of Web-Safe
    Color Choosing Colors Creating and Saving
    Custom Swatches Recoloring Layered Images
    Copying Color as HTML

2
Introduction
  • Here you find tools in Photoshop and ImageReady
    CS2 for working with color
  • Learn tips for choosing, editing, and changing
    colors
  • Explore the color Picker, Color palette, and
    Swatches palette

3
Color Management and the Web
  • Why do images on two different computers look
    different?
  • No calibration standard for computer displays
  • Print world designers use ICC (International
    Color Consortium) profiles to be sure colors
    onscreen look the same as when theyre printed
  • ICC Profiles do not work for the Web

4
How do ICC profiles work?
  • ICC profiles are embedded into the image file
    format and provide additional information about
    the color characteristics of the image. The color
    information stays with the file so any device can
    display or print the file accurately.
  • Want more Info? ICC and Photoshop

5
Web Color
  • Microsoft and Hewlett-Packard developed a color
    space called sRGB to standardize how colors
    appear onscreen
  • The goal of sRGB is to produce a reliable and
    repeatable method for describing color that can
    be understood by computer monitors

6
Color Settings
  • Photoshop CS2 offers a preset in the Color
    Settings dialog box which uses sRG as the
    default working space and will convert any rGB
    image you open to use sRGB
  • Therefore, youll view all graphics you create
    for the Web using sRGB

7
Set the Color Setting is Photoshop
  • Edit gt Color Settings
  • Select sRGB

8
Gamma Settings
  • What is a Gamma?
  • sRGB calls for a standard setting of 2.2
  • The gamma affects the appearance of your computer
    screen by defining a midpoint for grays (values
    between white and black)
  • Windows computers use a 2.2 gamma setting
  • Macs use a 1.8 gamma setting
  • What is the Result?

9
Gamma settings Windows vs Mac
  • The result is the colors appear darker on Windows
    than they do on a Mac (subtle)

Mac (1.8)
Windows (2.2)
10
Gamma Settings on a Mac
  • If you are a Mac user, please refer to page 63,
    Color Management Considerations for Mac Users
  • And
  • Page 64, TIP Adjusting Gamma Settings on a Mac

11
Decline of Web-Safe Color
  • Concept of Web-safe color was introduced in
    mid-1990s
  • Old computers could only display 256 colors
  • Today, most computers can display millions of
    colors
  • With the ability to create millions of colors in
    different shades, hues, intensities etc

12
The Web Safe pallete was born.It was first
published and described in Lynda Weinmans book,
Designing Web Graphics (1996)Lynda.com
13
The Color Picker
  • The Color Picker dialog box is the most visual
    and comprehensive tool for choosing color.
  • Select Only Web Safe colors, Enter CMYK, HSB,
    Hexadecimal values, RGB
  • Access from clicking the foreground or background
    color in the Toolbox or click any color swatch,
    or on the Options bar

14
The Color Picker
15
The Color Palette
  • The Color Palette is an easy way to choose color
    if you know the exact RGB, HSB, CMYK, or Lab
    values you wish to use.
  • Access from Window gt Color

16
The Swatches Palette
  • The Swatches palette is an excellent way to save
    colors you wish to use in more than one image.
  • Save your custom swatches for future projects.
  • Window gt Swatches

17
The Eyedropper Tool
  • The Eyedropper lets you sample color from an
    existing image.
  • Access by selecting it in the Toolbox

18
Select Colors for your Web Site
  • Clearly define the results you want to achieve
    with color
  • Select a main color that reflects the needs of
    the project
  • Select a color scheme based on the choice of the
    central hue
  • Refine the available color choices in terms of
    the particular project or individual sensibility

19
The Color Wheel
  • Primary Hues
  • Secondary Hues
  • Intermediate Hues

20
Primary Hues
  • Red, Blue, and Yellow

21
Secondary Hues
  • Violet, Green, and Orange

22
Six Intermediate Hues
  • Red-orange, yellow-orange, yellow-green,
    blue-green, blue-violet, and red-violet

23
How to Use Color
  • Each primary, secondary, and intermediate hue is
    at a level of full saturation, or brightness,
    which means that there is NO black, white, or
    gray added.

24
How to Use Color
  • Color is described in terms of value, which is
    the lightness or darkness of a color, or the
    relative amount of white or black in a hue.

25
The Color Wheel
26
Tints
  • White added in increments to any of the twelve
    colors results in lighter values of the hue
    called tints. For example, pink is a tint of the
    primary color red.

27
Tints
28
Shades
  • The incremental addition of black or gray to a
    hue results in darker values of the hue known as
    shades. A shade of red is burgundy or maroon.

29
Shades
30
Hue, Tint, Shade
31
Colors in themselves often communicate more than
many think.
32
Whats Your Color?
Write a Comment
User Comments (0)
About PowerShow.com