Why we learn color theoryWhy we learn color theoryWhy we learn color theory Why we learn color theory

Knowing how colors are created and how gthey relate to each other lets you work more effectively in all graphic programs such y g p p gas Adobe Photoshop or Illustrator. Instead of achieving an effect by accident, g yyou’ll produce consistent results thanks to an understanding of basic color gtheory.

describing describing wavelength wavelength in in vacuumvacuum.. gg gg

W l h S d f li hWavelength = Speed of light in vacuum / Frequency.

The s eed f li ht is the el citThe speed of light is the velocity of electromagnetic waves in a vacuum, which is 300,000 km/sec Light travels slower inkm/sec. Light travels slower in other media, and different wavelengths travel at different speeds in the same media.Whenspeeds in the same media. When light passes from one media to another, it changes speed, which causes a deflection of light called grefraction.

What causes a rainbow?What causes a rainbow?What causes a rainbow?What causes a rainbow?

In a rainbow, raindrops in the air act as tiny prisms.

The angle of bending is different for different wavelengths of light.As the white light moves through thewavelengths of light. As the white light moves through the two faces of the prism, the different colors bend different amounts of light and, in doing so, spread out into a rainbowrainbow.

Approximate wavelength (in vacuum) Approximate wavelength (in vacuum) and frequency ranges for the variousand frequency ranges for the variousand frequency ranges for the various and frequency ranges for the various colorscolors

Wavelength (nm)

780 - 622 622 597

Frequency (THz)

384 - 482482 503

ColorRed

O 622 - 597597 - 577577 - 492492 - 455

482 - 503503 - 520520 - 610610 - 659

OrangeYellowGreen

Blue455 - 390 659 - 769 Violet

1 terahertz (THz) = 103 GHz = 106 MHz = 1012 Hz, 1 nm = 10-9 um = 10-6 mm = 10-3 m. The white light is a mixture of the colors of the visible spectra.

How We See:How We See:The First Steps of Human The First Steps of Human VisionVisionVisionVisionWhich part of your body lets you read the

b k f l b h k i bback of a cereal box, check out a rainbow, and see a softball heading your way?

Y E t k i t f i f ti b tYour Eyes take in tons of information about the world around you — shapes, colors, movements and more Then they send themovements, and more. Then they send the information to your brain for processing, so the brain knows what's going onso the brain knows what s going on outside of your body.

The retina is responsible for receiving lights and colors, g g ,and sending this data with optic nerves to the brain.

Scientists discovered two differentScientists discovered two different cells in the retina: the rod cells and cone cells. These cells were named because of their shape as viewed in hthe microscope.

the rod and cone cells were responsive to light.p g the retinal cones are the color receptors of the eye; and the

retinal rod cells, while not sensitive to color, are very sensitive li h l l lto light at low levels.

• Exercise Go into a closet and decrease the light level. Soon you will see only shades of gray. Slowly increase the light levels until you can begin to see colorcan begin to see color.

That proves that the cells which are responsible for lights are not sensitive to colors .

InIn thethe humanhuman eye,eye, therethere areare manymany moremore rodrod cellscells ininthethe retinaretina thanthan therethere areare conecone cellscells..

TheThe numbernumber ofof rodrod cellscells andand conecone cellscells inin animalsanimals isis oftenoften relatedrelated totothethe animal'sanimal's instinctsinstincts andand habitshabits.. ForFor example,example, birdsbirds suchsuch asas hawkshawkshavehave aa significantlysignificantly higherhigher numbernumber ofof conescones thanthan dodo humanshumans.. ThisThis letsletsg yg y ggthemthem seesee smallsmall animalsanimals fromfrom farfar away,away, allowingallowing themthem toto hunthunt forfor foodfood..NocturnalNocturnal animals,animals, onon thethe otherother hand,hand, havehave relativelyrelatively higherhigher numbersnumbersofof rodrod cellscells thatthat allowallow themthem betterbetter nightnight visionvision..

Visual PigmentsVisual Pigments in eyein eyeVisual PigmentsVisual Pigments in eye in eye

Pigments are found in cone cells.

There are three types of cone cells, each of which contains a visual pigment.contains a visual pigment. These pigments are called the red, blue or green visual pigment. The cone cells detect the primary colors, and the brain mixes these colors in seemingly infinitely variable proportions so that we can perceive a wide range of colorsthat we can perceive a wide range of colors.

Primary Colors “RGB”Primary Colors “RGB” yyPrimary colors are sets of colors that can be combined to make a useful range of colors.three primary colors are usually used, since human color vision is trichromatic.

th i l ll d d d bl d th ithe primary colors normally used are red, green, and blue, and their environment is the black vacuum. It is called Additive colors “phosphors lights”. It combine to gives us the white lightIt combine to gives us the white light .

But in the practical we can’t use this colors in Painting or printing we need an ink not a lightPainting or printing, we need an ink not a light

So scientists discovered another kind of colors are called Subtractive colors.

Additive color mixing

ca e Subt act ve co o s.

Subtractive color “CMYK”Subtractive color “CMYK”

For subtractive combination of colors, as in mixing ofpigments or dyes, such as in printing, the primaries normallypigments or dyes, such as in printing, the primaries normallyused are cyan, magenta, and yellowand their environment is the white Paper.It bi t i th hit l tIt combine to gives us the white a non completeBlack, So that Scientists add the black ink to thisMode of colors.

Subtractive color mixing

The combination of any two primary colors creates a secondary color.

Usage of additive color in industry Usage of additive color in industry g yg y

Television and other computer andvideo displays are a common examplevideo displays are a common exampleof the use of additive primaries andthe RGB color model.

colors chosen for the primaries are atechnological compromise betweenthe available phosphors (includingthe available phosphors (includingconsiderations such as cost andpower usage) and the need for large

l t i l t ll l tcolor triangle to allow a large gamutof colors.

the color space that is generated isThe spectrum “all colors in vacuum” p g

called an RGB color space. co o s vacuu

which human eye can define

The CIEThe CIE 19311931 color spacecolor spaceThe CIE The CIE 19311931 color spacecolor space

It defines monochromatic primarycolors with wavelengths of 435.8nm (violet), 546.1 nm (green)and 700 nm (red) The cornersand 700 nm (red). The cornersof the color triangle aretherefore on the spectral locus,pand the triangle is about as bigas it can be.No real display device uses suchNo real display device uses suchprimaries, as the extremewavelengths used for violet andgred result in a very lowluminous efficiency.

Some Examples of color spaces Some Examples of color spaces we usewe use

Search through internet.

Color PracticeColor PracticeColor Practice Color Practice

Colors are made of value, hue and t tisaturation.

By combining these properties together we can create a s ecial c l rcan create a special color .

- Value: determine how color is light or darkdark.

- Hue: determine which direction of the color spectrum is the color or wheel thecolor spectrum is the color or wheel the color is oriented to

- Saturation: is the value of color pigment- Saturation: is the value of color pigment.

The three forms of colorThe three forms of colorThe three forms of color The three forms of color

Value the most important aspect of Value the most important aspect of llcolorcolor

The Rule number 1 : Value is relative “to other values”. Value demands attention. Value speaks softly. Value annoys with noise Value has magic visual powerful effects. Value can elusive. Value pops up with contrast. Value offset from background. Value defines the invisibles Value defines the invisibles. Value is the edge that defines. Value hide details Value defined by glow y g Value plays with you Value holds its own Value ranges from black to white. Value ascends and descends. Value is pure visual definition .

Testing relativeValueTesting relativeValueTesting relative ValueTesting relative Value

Our eyes are typically drawn to point of y yp y phighest contrast .

The largest object of the high contrast e a gest object o t e g co t astdraw the most attention of the eye in general, but not always.g , y

Low contrast can move elements to the background of the elements in the imagesbackground of the elements in the images and lower the importance of that elementelement.

The small gray rectangle in all figures is a same value

The value of values.Whit i t hit- White is not white

- Black is not black

Elements that create colors Elements that create colors “S i ”“S i ”“Saturation”“Saturation” Rule Number1 : Saturation is more intense in

large areas of color. Desaturated text doesn’t read well in

saturated a large color background, unless there is a large value difference. g

Saturated text on a desaturated background reads OK. But could be improved by value.reads OK. But could be improved by value.

Saturated text flys off when the background is completely desaturated And more sois completely desaturated. And more so when it pops up with contrast.

“Hue”“Hue” Value of color :

each hue has a unique value at its peak q psaturation point here we have a x-ray view of each color’s value at their maximum saturation point

Value Of Colors

How to choose colors at hue point of view How to choose colors at hue point of view pp

Can you read the text in ease hi h i id thi fway which inside this area of

color ???

The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again.

If you convert it to grayscale mode the text is all most unreadable

Because the values of text’s color d h b k d’ land the background’s color even

closer

Creating color systems and color Creating color systems and color l i hil i hirelationships. relationships.

Shifting hues Moving hues on the color wheelMoving hues on the color wheel.

• Shifting colors gAdding Value + Saturation + Hue

• Toning colors Mixing gray (tinting + shading).

Implementation of colors Implementation of colors

RGB images use three colors, or channels, to reproduce colors on-screen. In 8-bits-per-channel images, the three p gchannels translate to 24 (8 bits x 3 channels) bits of color information per pixel. With 24-bit images, the three channels can reproduce up to 16 7 million colors per pixelcan reproduce up to 16.7 million colors per pixel.

With 48-bit (16-bits-per-channel) and 96-bit (32-bits-per-h l) i l b d dchannel) images, even more colors can be reproduced per

pixel. In addition to being the default mode for new Photoshop images, the RGB model is used by computer p g y pmonitors to display colors. This means that when working in color modes other than RGB, such as CMYK, Photoshop converts the CMYK image to RGB for display on-screenconverts the CMYK image to RGB for display on screen.

Converting between color modes Converting between color modes

You can change an image from its original mode(source mode) to a different mode (target mode).

When you choose a different color mode for animage, you permanently change the color values ing , y p y gthe image. For example, when you convert an RGBimage to CMYK mode, RGB color values outsidethe CMYK gamut (defined by the CMYK workingspace setting in the Color Settings dialog box) areadjusted to fall within gamutadjusted to fall within gamut.

As a result, some image data may be lost and can’t bed if h i f CMYKrecovered if you convert the image from CMYK

back to RGB.

ChoosingChoosing colorscolorsChoosing Choosing colorscolors

About foreground and background colorsCh l i h lb Choose colors in the toolbox

Choose colors with the Eyedropper toolC Adobe Color Picker overview

Choose a color with the Adobe Color Picker Choose web-safe colors Choose a CMYK equivalent for a non-printable

lcolor

Choosing colorsChoosing colorsChoosing colorsChoosing colors

Choose a spot colorp Change the color picker Color panel overview Color panel overview Select a color in the Color panel

S l l i h S h l Select a color in the Swatches panel Add and delete color swatches Manage swatch libraries Share swatches between applicationspp

Color and tonal adjustments Color and tonal adjustments

Viewing histograms and pixel values Understanding color adjustmentsUnderstanding color adjustments Adjusting image color and tone Targeting images for pressg g g p Matching, replacing, and mixing colors Applying special color effects to images

What is blending modeWhat is blending modeWhat is blending mode What is blending mode

We always found a blending mode in most y gof graphic programs and wonder what it is mean?!!

So before demonstrate it we will make an experiment with three circles and watch pout the result of blending it with the background g

There are three circle over colored There are three circle over colored b k d th fi t i l ib k d th fi t i l i 100100% bl k th% bl k thbackground, the first circle is background, the first circle is 100100% black, the % black, the second one is second one is 5050% gray and the third is white % gray and the third is white

We will try to blend these circles with the basecolored background in some blending modes.g gWatch out how it affect on appearance of each circle!!

To show you what each effect does I’ve blended the following two photosTo show you what each effect does I’ve blended the following two photos

Try to mix these layer with all blending modes and see the result:-

Bl d LBase Layer Blend Layer

Demonstration of blending modesDemonstration of blending modes How the Multiply blending mode works:

“multiplies the color values in the layer and divides the result by the maximum pixel value of either 8 bit or 16 bit pixels. The resulting image is never brighter than the original ”than the original.Simply put: All white pixels in the blended layer disappear.

Effects of the Screen blending mode:“ f ”“multiplies the inverse brightness values of the colors in all layers.”Simply put: All the black pixels in the blended layer disappear.

Effects of the Overlay blending mode:Effects of the Overlay blending mode:“mixes colors between layers, preserving the highlights and shadows to reflect the light and dark areas of the layer colors.”Simply put: Blended layer adds intensity to the layer underneath.

The Dodge blending mode“Brightens the resulting color based in the original color. The lighter the original g g g g gcolor, the brighter the resulting color. Pure black in original layer does not change the underlying layer. Pure white in original usually changes the underlying color to white.”Simply put: Lightens overall while top layer colors bottom layerSimply put: Lightens overall, while top layer colors bottom layer.

The Burn blending mode“Darkens the resulting color based on the original layer color. The darker the original layer, the darker the resulting color. Pure white in the original layer does not change the underlying color. Pure black in the original layer usually changes the underlying color to black.”Simply put: Darkens overall while top layer colors bottom layerSimply put: Darkens overall, while top layer colors bottom layer.

The Hard Light blending mode“Multiplies or screens the resulting color depending on the original color IfMultiplies or screens the resulting color depending on the original color. If underlying color is less than 50% gray, the layer lightens it as if it were screened. If underlying color is greater than 50% gray, the layer darkens it it as if it were multiplied.”Simply put: Reduces contrast, adds color.

The Soft Light Blending ModeDarkens or lightens resulting colors, depending on the layer color. If underlying color is lighter than 50% gray the layer lightens If underlying color is darker thancolor is lighter than 50% gray, the layer lightens. If underlying color is darker than 50% gray, the layer darkens.’Simply put: Vintage with color!

Difference blending mode“subtracts the channel values of the layer and underlying colors and displays the absolute value of the result.”Simply put: In either layer black has no effect and white inverts the other layer’s colorSimply put: In either layer, black has no effect and white inverts the other layer s color.

Darken Only blending mode“Compares the channel values of the underlying and layer color and displays the darker of the two. Can cause color shifts.”Simply put: shows pixels from the blended layer unless the pixels underneath are darker.

Lighten Only blending modeLighten Only blending modeThe Lighten Only blending mode is very similar, but with one obvious difference. Adobe’s definition is that Lighten Only “compares the channel values of the underlying and layer colors and displays the lighter of the two. Can also cause a color shift.”Simply put: shows pixels from the blended layer unless the pixels underneath are lighter.

Addition blending mode“combining the color values of the [blended] layer and underlying colors. The resulting color is lighter than original. Pure black does not change underlying color. White in base layer is never changed.”White in base layer is never changed.Simply put: “lightens the base image, ignores black, and keeps the top layer’s color.”

Hue“Creates resulting colors with the luminance and saturation of the underlying

l d th h f th l l ”colors and the hue of the layer colors.”Simply put: colors on top replace colors below. “change only hue for the new layer”

Saturation“creating resulting color with the luminance and hue of the underlying colors and the saturation of the layer colors”. Simply put: Top color determines saturation level for the layer below.

color“create resulting colors with the “luminance of the underlying colors” and the “hue & saturation of the layer colors”. This preserves the gray levels of the image.”Simply put: colors on top replace everything but pure black below.