Week 05, 2010
SM1001 Digital Media, Semester A
School of Creative Media ©

A Little Review

What is a Pixel?
• A little square on your screen.

What are its properties?
• It is fixed for a given resolution;
• It is an abstract value as it can change size, e.g., 800x600 or 1024x786.

How to measure Resolution?
• Pixel per inch (PPI): the higher the value the higher the resolution.

Simple Concepts

Binary: a representation of data in bit format in terms of 0 and/or 1.

1 Byte = 8 bits.

All files are measured in terms of Bytes.

However, in data transmission they are measures in terms of bit per second (bps)

Simple Concepts
Name kilobyte megabyte gigabyte terabyte
Symbol
KB
M
G
T petabyte P
Conversion Value (Bytes)
1KB = 1024bytes 2 10 = 1,024
1MB = 1024KB 2 20 = 1,048,576
1GB = 1024MB 2 30 = 1,073,741,824
1TB = 1024GB 2 40 = 1,099,511,627,776
1PB = 1024TB
2 50 =
1,125,899,906,842,624


There are three types of image depth:
• 1-bit for two-tone images, e.g., black and white;
• 8-bit for grey-scale images;
• 24-bit for full color images.

Image depths are necessary to save computer memory and processing time:
The deeper the image the higher the memory required and more processing time needed for a given image.
Why? Look on …

Example: memory requirements

A two tone image of 500x400px would require
(uncompressed!):
• 1-bit: 1 x 200,000bits/8 = 25 kbytes
• 8-bit: 8 x 200,000bits/8 = 200 kbytes (!)
• 24-bit: 24 x 200,000bits/8 = 600 kbytes (!)


At 1 bit, if your PC has a 32-bit bus (which is the basic in all current PCs and you ’ d better watch out for this before you buy a PC, as this is a major bottleneck to the performance of your PC), it can read 4 bytes at a time which for the 1-bit image, it would reazd only
25kbytes/4bytes = 6250 times.

At 24 bits, however, for such a simple image, it would have to read 24x6250=150,000 times ! And an utter waste of resources!
Of course this results in at least 24 times slower, which is unfair to your life either!

An intermediate-level introduction to the nature of color

Color, color, color…

Everything we look at has a certain color; for instance:
• This text has a color for which most will say that the text is in white color;

However, for the background it would be hard to say: Is it blue? Dark blue?
What is its color exactly?...


Three determining characteristics of color light:
 H ue (dominant frequency component);
 S aturation (excitation purity);
 L ightness (luminance).



Physically, colors are meaningful to us only in terms of visible light
Wavelengths
Time-varied representation of the HSV color wheel


Light visible to human eyes ranges in wavelength(λ)
From : 380 nanometers (nm) for violet light
To : 760 nm for red light.

Frequency is in the range of between
Red (4.3x10
14 Hertz) and
Violet (7.5x10
14 Hertz).
Note: 1nm = 10 -9 m


Two examples:
Orange color :
Notice, there is a pump that dominates the profile.
White color: notice, its profile is very flat.

This figure shows how our eye (retina) responds to different colors.
It was hypothesized that the human retina
Has three type of color cones: the Tristimulus theory .
http://www.iknow.net/CDROMs/eyephys_cdrom/light.html

Red-sensitive cones are most stimulated by light in the red to yellow range.
Blue-sensitive cones are maximally stimulated by blue and violet light.
Green-sensitive cones are maximally stimulated by light in the yellow to green range.
Note: the numbers are for wavelengths in Nanometers.

TV and computer monitors are emitted light and generate images with the RGB model.

Understanding color

Every person sees a certain shade of color differently.

Could you tell which square is red?

Understanding color
According to the computer, this shade is red, but to us we may say they are look red.

Color by numbers

How exactly does a computer say it is red?

Using 3 values (channels): Red (R), Green (G) and Blue (B) which for a color image.

Remember, each channel is an 8-bit image

Color by numbers

Different shades of color are formed by simply adding different amounts of Red, Green and Blue.

In an 8-bit image, there are a total of 256 shades of grey (on the computer, it is known as shades with values between 0 – 255; 0 = lowest,
255 = maximum).

Computer generates colors on a monitor using an additive color system .
RED +
+
GREEN
+
+ BLUE = RGB
Image Source: cat.xula.edu/tutorials/ imaging/rgb.php

Color by numbers

Take a look at this example:
100% Red 100% Green 100% White
100% Blue

When all the colors are combined at maximum value, you get white.

Color by numbers

For the computer, “ 100% ” would mean we use one exact maximum quantity
(due to quantization) in RGB value (Red, Green ,Blue).

For example, red does not need any green or blue, so it is (255, 0, 0)
100% Red
255, 0, 0
100% Green 100% Blue
0, 255, 0 0, 0, 255
100% White
255, 255, 255

Color by numbers

With three colors (RGB) and 24-bit depth, we have up to 16.7 million colors!

Color by numbers

The four “ reds ” presented earlier have the following quantization values in the computer.
255, 0, 0
Red, Green, Blue
235, 0, 0 210, 0, 0 200, 0, 0

Color by numbers

The smaller the number the darker the shades; quantization levels indeed affect the color intensity in the Additive Color
System used by the computer.
255, 0, 0 235, 0, 0 210, 0, 0 200, 0, 0

Color inconsistency

However, the color system on computer has major problem:
Color inconsistency

On different devices (e.g., A monitor, or a projector), the same color will be shown with significant variations in color.

Fortunately this can be solved.

Color inconsistency

This situation is similar to a client asking designers to create a logo; however, the color definitions in the designers ’ minds are different from each other. This will create problems.

Let ’ s discuss with a short act...

Color inconsistency

You may imagine that you are the “ computer ” and your friends (either boy or girl will do) are the
“ monitors ” , say, Janet and Tom. Each holds a set of 16 crayon pack, but of different brand.
Janet’s pack Tom’s pack

And the story goes like this …


Color inconsistency
In Janet ’ s pack, it has 16 colored crayons:


Color inconsistency
You (the computer) tell Janet (the monitor
Janet) to paint a light green circle, she chooses the color from her range:

Color inconsistency

With this choice of light green in her pack

Janet designed a light green circle for you:

Color inconsistency

Now you ask Tom (the monitor Tom) to do the same. However, he has a different brand of crayons:

Color inconsistency

Their packs seem to have a similar range of colors, but their shades of colors are different:

Color inconsistency

In particular, the slight differences in their available shades of green

Color inconsistency

Due to this slight difference, the
same light green circle will turn out different:
Light Green Circle
Light Green Circle

Color inconsistency

But the question is, who is correct?

Without a agreed standard, it ’ s anyone ’ s guess what a correct shade of light green should look like.

This causes a lot of color inconsistency in the digital imaging world.

We need color management !


The primary goal of color management is to obtain a good match across color devices;

For example, a video which should appear the same color on a computer LCD monitor, a plasma
TV screen, and on a printed frame of video.

Color management helps to achieve the same appearance on all of these devices, provided the devices are capable of delivering the needed color intensities.

E.g http://www.northlightimages.co.uk/leicester_colour_management.html


The International Color Consortium (ICC) is a group that helps regulate and standardize the way the digital imaging industry handles color management.

Over 70 members include: Adobe, Apple,
Agfa, Kodak, Microsoft, Sun, etc.
 http://www.color.org/


Through understanding the way color works in a digital imaging workflow, the
ICC works with different companies to create color management solutions.

Famous color management companies:
• GretagMacbeth
• Pantone
• X-rite

Color complications

There are a lot of factors that affect how we can see color, mainly:
• Color gamut (the range of available colors);
• Lighting conditions (is the room lit with warm, yellowish color, or cool, bluish color light?);
• Surrounding colors ( may cause illusion)

(1) Color gamut

This is the range of colors the device can display.

The concept would be simple by imagining the following scenario:
If we have to paint 4 shades of green with only a range of 3 shades of green, we have to duplicated one of the green colors.

(1) Color gamut

Due to the limited gamut range, to show 4
different shades, all we could is to show 3 different shades with one being duplicated.
The following is a possible arrangement.
Shade 1 Shade 2 Shade 3 Shade 1

Color gamut

Because a device usually has millions of different colors, in practice we have to refer to a 3D color space
(shown as a 2D diagram):
Different views of the same color space

(1) Color gamut


If I had 2 different devices, they would normally have different color ranges.
These two may look very similar, but they are certainly not the same.

(1) Color gamut

To see their differences, we can
overlap the two color spaces:

Color gamut

There is a slight bit near the corner that does not overlap? This means that one of the devices has a bigger range (color gamut).

(2) Lighting conditions

The lighting condition under which an object is looked at can make a difference:
Is this car blue or pink ?
FACT: It ’ s white!


This means that if you looked at a printed image under different lighting conditions, it would look different!

Under a fluorescent light (a cool source) it might look like this:


However, if you look the same photograph under a tungsten light source (warmer source):

(2) Lighting condition

In order to manage color, we need a standard light source: viewing booth.
Can produce controllable lighting conditions which allows us to
simulate certain conditions
This means that if we are printing a poster for outdoors, we can simulate the approximate lighting conditions under sunlight to see what the printout will look like

(3) Color illusions

We usually look at things from a macro-point-of-view (the whole thing rather than one small spot) at first.

This affects our perception of color because surrounding colors can trick our visual sensors: producing
illusions.

(3) Color illusions
The same red block would look orange-ish or magenta depending on its neighborhood colors.

(3) Color illusions

In fact, both those shades of red are pure red colors (255, 0, 0)!
255, 0, 0

Same Color illusion (SCI)

The SCI — also known as
Adelson's checker shadow illusion, checker shadow illusion and checker shadow — is an optical illusion published by
Edward H. Adelson,
Professor of Vision Science at MIT in 1995.

The squares A and B on the illusion are of the same color (or shade), although they seem to be different.

Same Color illusion

"When interpreted as a 3-dimensional scene, our visual system immediately estimates a lighting vector and uses this to judge the property of the material.
“ Edward H. Adelson http://web.mit.edu/persci/people/adelson/checkershadow_illusion.html

SCI Proof
The original image of the illusion.
The original image plus two stripes.
The squares marked A and B are the same shade of gray, yet they appear different.
By joining the squares marked A and B with two vertical stripes of the same shade of gray, it becomes apparent that both squares are the same.

More Proof?
1) Try putting the image in Photoshop.
Using the eyedropper tool you can determine that the RGB values of the grays in both square A and square B are 120-120-120.
2) Cut out a cardboard mask.
By viewing patches of the squares without the surrounding context, you can remove the effect of the illusion. A piece of cardboard with two circles removed will work as a mask for a computer screen or for a printed piece of paper.

More Proof?
3) Print the image and cut out the squares.
This is another way to isolate the patches form their surrounding context. Cut out each square along the edges. Remove them. Hold them side by side. Please note that some printers, especially laser printers, have "enhancement" processing that increases the contrast of edges. This can cause the printed squares to have slightly different values of gray.
4) Get a photometer.

Color illusions

How would this affect our work? If we were working in a room with red walls, our perception of color would be affected by these walls.

To do it right, we need a neutral color
• This color is {128, 128, 128} which is exactly half of
256 (2 8 ).

Color illusions


This is why many serious digital imaging professionals have their workroom walls painted with the neutral color {128, 128,
128}.
A tip, whenever you see RGB values that are all the same (e.g., 111, 111 ,111), it is a shade of grey, such as,

Summary

In the last two lectures we have discussed the basic facts about digital image:
• Binary data representations
• Bit Depth
• Resolution
• Color space
• Color consistency
• Color illusions


In order to be an effective digital artist, these are the most fundamental concepts that are simple to grasp.

Another important issue is the color-
managed workflow. This requires hands-on experience which we will try to arrange at a later stage when the color measurement device has been delivered to SCM.