Embed Size (px)
Citation preview
Digital MediaDigital Media
SM1001 Digital Media, Semester SM1001 Digital Media, Semester A A School of Creative Media ©School of Creative Media ©
Week 05, 2011
A Little ReviewA Little Review What is a Pixel?What is a Pixel?
• A little square on your screen.A little square on your screen.
What are its properties?What are its properties?• It is fixed for a given resolution;It is fixed for a given resolution;• It is an abstract value as it can change size, It is an abstract value as it can change size,
e.g., 800x600 or 1024x786.e.g., 800x600 or 1024x786.
How to measure Resolution?How to measure Resolution?• Pixel per inch (PPI): the higher the value the Pixel per inch (PPI): the higher the value the
higher the resolution.higher the resolution.
Simple ConceptsSimple Concepts BinaryBinary: a representation of data in bit format in : a representation of data in bit format in
terms of terms of 00 and/orand/or 11..
1 Byte1 Byte = = 88 bits. bits.
All files are measured in terms of All files are measured in terms of BytesBytes..
However, in data transmission they are measures However, in data transmission they are measures in terms of in terms of bit per secondbit per second (bps) (bps)
Simple ConceptsSimple Concepts
NameName SymbolSymbol ConversionConversion Value (Bytes)Value (Bytes)
kilobytekilobyte KBKB 1KB = 1024bytes1KB = 1024bytes 221010 = 1,024 = 1,024
megabytemegabyte MM 1MB = 1024KB1MB = 1024KB 222020 = 1,048,576 = 1,048,576
gigabytegigabyte GG 1GB = 1024MB1GB = 1024MB 223030 = 1,073,741,824 = 1,073,741,824
terabyteterabyte TT 1TB = 1024GB1TB = 1024GB 224040 = 1,099,511,627,776 = 1,099,511,627,776
petabytepetabyte PP 1PB = 1024TB1PB = 1024TB225050 = =
1,125,899,906,842,6241,125,899,906,842,624
What and why image depthsWhat and why image depths There are three types of image depth:There are three types of image depth:
• 1-bit for two-tone images, e.g., black and 1-bit for two-tone images, e.g., black and white;white;
• 8-bit for grey-scale images;8-bit for grey-scale images;• 24-bit for full color images.24-bit for full color images.
Image depths are necessary to Image depths are necessary to save save computer memory and processing timecomputer memory and processing time: :
The deeper the image the higher the memory The deeper the image the higher the memory required and more processing time needed for required and more processing time needed for a given image.a given image.
Why? Look onWhy? Look on……
Example: Example: memory requirementsmemory requirements
A two tone image of 500x400px would require A two tone image of 500x400px would require ((uncompressed!uncompressed!):):
• 1-bit: 1 x 200,000bits/8 = 1-bit: 1 x 200,000bits/8 = 25 kbytes25 kbytes
• 8-bit: 8 x 200,000bits/8 = 8-bit: 8 x 200,000bits/8 = 200 kbytes200 kbytes (!) (!)
• 24-bit: 24 x 200,000bits/8 = 24-bit: 24 x 200,000bits/8 = 600 kbytes600 kbytes (!) (!)
Example:Example:Processing time requirementsProcessing time requirements
At 1 bit, if your PC has a At 1 bit, if your PC has a 32-bit bus32-bit bus (which is the basic in (which is the basic in all current PCs and youall current PCs and you’’d better watch out for this before d better watch out for this before you buy a PC, as this is a major bottleneck to the you buy a PC, as this is a major bottleneck to the performance of your PC), it can read 4 bytes at a time performance of your PC), it can read 4 bytes at a time which for the 1-bit image, it would reazd only which for the 1-bit image, it would reazd only 25kbytes/4bytes = 6250 times.25kbytes/4bytes = 6250 times.
At 24 bits, however, for such a simple image, it would have At 24 bits, however, for such a simple image, it would have to read 24x6250=150,000 times ! And an utter waste of to read 24x6250=150,000 times ! And an utter waste of resources!resources!
Of course this results in Of course this results in at leastat least 24 times slower, which is 24 times slower, which is unfair to your life either!unfair to your life either!
SM1001 – Week 5SM1001 – Week 5Digital Imaging Digital Imaging
(Part 2 of 2)(Part 2 of 2)
An intermediate-level introduction to An intermediate-level introduction to the nature of color the nature of color
Color, color, color…Color, color, color… Everything we look at has a certain color; for Everything we look at has a certain color; for
instance:instance:
• This text has a color for which most will say This text has a color for which most will say that the text is in that the text is in white colorwhite color;;
However, for the background it would be hard to However, for the background it would be hard to say: Is it say: Is it blue? Dark blue? blue? Dark blue?
What is its color What is its color exactlyexactly?...?...
Visible LightVisible Light Three determining characteristics of Three determining characteristics of
color light:color light:
HHue (dominant frequency component);ue (dominant frequency component);SSaturation (excitation purity);aturation (excitation purity);LLightness (luminance).ightness (luminance).
What is color?What is color? Physically, colors are meaningful to
us only in terms of visible light Wavelengths
Time-varied representation of the HSV color wheel
Visible Light:Visible Light:Wavelengths and FrequenciesWavelengths and Frequencies
Light visible to human eyes ranges in wavelength(Light visible to human eyes ranges in wavelength(λλ)) FromFrom: 380 nanometers (nm) for : 380 nanometers (nm) for violetviolet light lightToTo: 760 nm for : 760 nm for redred light. light.
Frequency is in the range of betweenFrequency is in the range of between RedRed (4.3x10(4.3x101414Hertz) and Hertz) and VioletViolet (7.5x10(7.5x1014 14 Hertz).Hertz).
Note: 1nm = 10Note: 1nm = 10-9-9mm
Color LightColor Light Two examples:Two examples:
White color: notice, its profile is very flat.
Orange color: Notice, there is a pumpthat dominates the profile.
Color PerceptionColor Perception
This figure shows how our eye (retina) responds to different colors.
It was hypothesized that the human retinaHas three type of color cones:the Tristimulus theory.
http://www.iknow.net/CDROMs/eyephys_cdrom/light.html
Color Perception: Color Perception: Tristimulus TheoryTristimulus Theory
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.
Color Space: RGBColor Space: RGB
TV and computer monitors are emitted light andgenerate images with the RGB model.
Additive Colors (RGB)Additive Colors (RGB)
Understanding colorUnderstanding color
Every person sees a certain shade of Every person sees a certain shade of color differently.color differently.
Could you tell which square is Could you tell which square is redred??
Understanding colorUnderstanding color
According to the computer, this shade is red, but to us we may say they are look red.
Color by numbersColor by numbers How exactly does a computer say it is How exactly does a computer say it is redred??
Using 3 values (channels): Red (R), Green (G) and Using 3 values (channels): Red (R), Green (G) and Blue (B) which for a color image. Blue (B) which for a color image.
Remember, each Remember, each channelchannel is an 8-bit image is an 8-bit image
Color by numbersColor by numbers
Different Different shadesshades of color are formed of color are formed by simply by simply addingadding different amounts different amounts of Red, Green and Blue. of Red, Green and Blue.
In an 8-bit image, there are a total of In an 8-bit image, there are a total of 256 shades of grey (on the 256 shades of grey (on the computer, it is known as computer, it is known as shadesshades with with values between 0 values between 0 –– 255; 255; 0 = lowest, 0 = lowest, 255 = maximum255 = maximum).).
Additive Colors: Additive Colors: an examplean example
RED + +GREEN BLUE = RGB
Image Source: cat.xula.edu/tutorials/ imaging/rgb.php
Computer generates colors on a monitor using an additive color system.
++
Color by numbersColor by numbers
Take a look at this example:Take a look at this example:
When all the colors are combined at When all the colors are combined at maximum value, you get maximum value, you get white.white.
100% Red 100% Green 100% Blue 100% White
Color by numbersColor by numbers For the computer, For the computer, ““100%100%”” would mean we would mean we
use use one exact maximum quantityone exact maximum quantity (due to (due to
quantization)quantization) in RGB value (Red, Green ,Blue). in RGB value (Red, Green ,Blue).
For example, red does not need For example, red does not need anyany green green or blue, so it is (255, 0, 0)or blue, so it is (255, 0, 0)
100% Red 100% Green 100% Blue 100% White
255, 0, 0 0, 255, 0 0, 0, 255 255, 255, 255
Color by numbersColor by numbers
With three colors (RGB) and 24-bit With three colors (RGB) and 24-bit depth, we have up to depth, we have up to 16.7 million16.7 million colors!colors!
Color by numbersColor by numbers
The four The four ““redsreds”” presented earlier presented earlier have the following quantization have the following quantization values in the computer.values in the computer.
255, 0, 0 235, 0, 0 210, 0, 0 200, 0, 0
Red, Green, Blue
Color by numbersColor by numbers The smaller the number the The smaller the number the darkerdarker the the
shades; shades; quantization levelsquantization levels indeed affect indeed affect the color intensity in the the color intensity in the Additive Color Additive Color SystemSystem used by the computer. used by the computer.
255, 0, 0 235, 0, 0 210, 0, 0 200, 0, 0
Color inconsistencyColor inconsistency However, the color system on However, the color system on
computer has major problem: computer has major problem: Color inconsistencyColor inconsistency
On different devices (e.g., A monitor, On different devices (e.g., A monitor, or a projector), the same color will be or a projector), the same color will be shown with significant variations in shown with significant variations in color. color.
Fortunately this can be solved.Fortunately this can be solved.
Color inconsistencyColor inconsistency
This situation is similar to a client This situation is similar to a client asking designers to create a logo; asking designers to create a logo; however, the color definitions in the however, the color definitions in the designersdesigners’’ minds are different from minds are different from each other. This will create problems. each other. This will create problems.
LetLet’’s discuss with a short act...s discuss with a short act...
Color inconsistencyColor inconsistency You may imagine that you are the You may imagine that you are the ““computercomputer”” and and
your friends (either boy or girl will do) are the your friends (either boy or girl will do) are the ““monitorsmonitors””, say, , say, JanetJanet and and TomTom. Each holds a set . Each holds a set of 16 crayon pack, but of different brand. of 16 crayon pack, but of different brand.
And the story goes like thisAnd the story goes like this……
Janet’s pack Tom’s pack
Color inconsistencyColor inconsistency In JanetIn Janet’’s pack, it has 16 colored s pack, it has 16 colored
crayons:crayons:
Color inconsistencyColor inconsistency You (the computer) tell Janet (the monitor You (the computer) tell Janet (the monitor
Janet) to paint a Janet) to paint a light green circlelight green circle, , sheshe chooses the color from her range:chooses the color from her range:
Color inconsistencyColor inconsistency With this choice of With this choice of light greenlight green in her in her
packpack
Janet designed a light green circle for you:Janet designed a light green circle for you:
Color inconsistencyColor inconsistency Now you ask Tom (the monitor Tom) to do Now you ask Tom (the monitor Tom) to do
the same. However, he has a different the same. However, he has a different brand of crayons:brand of crayons:
Color inconsistencyColor inconsistency
Their packs seem to have a similar Their packs seem to have a similar range of colors, but their shades of range of colors, but their shades of colors are different:colors are different:
Color inconsistencyColor inconsistency
In particular, the slight differences in In particular, the slight differences in their available shades of greentheir available shades of green
Color inconsistencyColor inconsistency
Due to this slight difference, the Due to this slight difference, the samesame light green circlelight green circle will turn out will turn out different:different:
Light Green Circle
Light Green Circle
Color inconsistency: ResultColor inconsistency: Result
Color inconsistencyColor inconsistency But the question is, who is correct?But the question is, who is correct?
Without a agreed standard, itWithout a agreed standard, it’’s anyones anyone’’s guess s guess what a what a correct shade of light greencorrect shade of light green should should look like.look like.
This causes a lot of This causes a lot of color inconsistencycolor inconsistency in the in the digital imaging world.digital imaging world.
We need We need color managementcolor management !!
Color managementColor management The primary goal of color management is to obtain a The primary goal of color management is to obtain a
good match across color devices; good match across color devices;
For example, a video which should appear the same For example, a video which should appear the same color on a computer LCD monitor, a plasma TV color on a computer LCD monitor, a plasma TV screen, and on a printed frame of video. screen, and on a printed frame of video.
Color management helps to achieve the same Color management helps to achieve the same appearance on all of these devices, provided the appearance on all of these devices, provided the devices are capable of delivering the needed color devices are capable of delivering the needed color intensities.intensities.
E.g E.g http://www.northlight-images.co.uk/leicester_colour_http://www.northlight-images.co.uk/leicester_colour_management.htmlmanagement.html
Color managementColor management
Color managementColor management
Color managementColor management
International Color ConsortiumInternational Color Consortium
The International Color Consortium (ICC) is The International Color Consortium (ICC) is a group that helps regulate and a group that helps regulate and standardize the way the digital imaging standardize the way the digital imaging industry handles color management.industry handles color management.
Over 70 members include: Adobe, Apple, Over 70 members include: Adobe, Apple, Agfa,Agfa, Kodak, Microsoft, Sun, etc. Kodak, Microsoft, Sun, etc.
http://www.color.org/http://www.color.org/
International Color ConsortiumInternational Color Consortium
Through understanding the way color Through understanding the way color works in a digital imaging workflow, the works in a digital imaging workflow, the ICC works with different companies to ICC works with different companies to create color management solutions.create color management solutions.
Famous color management companies:Famous color management companies:• GretagMacbethGretagMacbeth• PantonePantone• X-riteX-rite
Color complicationsColor complications There are a lot of factors that affect how we can There are a lot of factors that affect how we can seesee
color, mainly:color, mainly:
• Color gamutColor gamut (the range of available colors); (the range of available colors);
• Lighting conditionsLighting conditions (is the room lit with warm, (is the room lit with warm, yellowish color, or cool, bluish color light?);yellowish color, or cool, bluish color light?);
• Surrounding colorsSurrounding colors ( may cause illusion( may cause illusion))
(1) Color gamut(1) Color gamut This is the range of colors the This is the range of colors the devicedevice can can
display.display.
The concept would be simple by imagining The concept would be simple by imagining the following scenario:the following scenario:
If we have to paint If we have to paint 4 shades of green4 shades of green with only a range of 3 shades of green, with only a range of 3 shades of green, we have to duplicated one of the green we have to duplicated one of the green colors.colors.
(1) Color gamut(1) Color gamut Due to the limited gamut range, to show 4 Due to the limited gamut range, to show 4
differentdifferent shades, all we could is to show 3 shades, all we could is to show 3 different shades with one being different shades with one being duplicated. The following is a possible duplicated. The following is a possible arrangement.arrangement.
Shade 1 Shade 2 Shade 3 Shade 1
Color gamutColor gamut
Because a device usually has millions Because a device usually has millions of different colors, in practice we of different colors, in practice we have to refer to a 3D color space have to refer to a 3D color space (shown as a 2D diagram):(shown as a 2D diagram):
Different views of the same color space
(1) Color gamut(1) Color gamut If I had 2 different devices, they would If I had 2 different devices, they would
normally have different color ranges.normally have different color ranges. These two may These two may looklook very similar, but they very similar, but they
are certainly not the same.are certainly not the same.
(1) Color gamut(1) Color gamut
To see their differences, we can To see their differences, we can overlapoverlap the two color spaces: the two color spaces:
Color gamutColor gamut There is a slight bit near the corner There is a slight bit near the corner
that does not overlap? This means that does not overlap? This means that one of the devices has a that one of the devices has a biggerbigger range (color gamut).range (color gamut).
(2) Lighting conditions(2) Lighting conditions The lighting condition under which an The lighting condition under which an
object is looked at can make a difference:object is looked at can make a difference:
Is this car Is this car blueblue or or pinkpink? ?
FACT: ItFACT: It’’s s whitewhite!!
This means that if you looked at a This means that if you looked at a printed image under different lighting printed image under different lighting conditions, it would look different!conditions, it would look different!
Under a fluorescent light (a cool Under a fluorescent light (a cool source) it might look like this:source) it might look like this:
(2) Lighting conditions(2) Lighting conditions
However, if you look the same photograph However, if you look the same photograph under a tungsten light source (warmer under a tungsten light source (warmer source):source):
(2) Lighting conditions(2) Lighting conditions
(2) Lighting condition(2) Lighting condition In order to manage color, we need a In order to manage color, we need a
standard light source: standard light source: viewing boothviewing 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 print-out will look like
(3) Color illusions(3) Color illusions
We usually look at things from a We usually look at things from a macro-point-of-view (the whole thing macro-point-of-view (the whole thing rather than one small spot) at first. rather than one small spot) at first.
This affects our perception of color This affects our perception of color because surrounding colors can trick because surrounding colors can trick our visual sensors: producing our visual sensors: producing illusionsillusions..
(3) Color illusions(3) Color illusions
The same red block would look orange-ish or magenta depending on its neighborhood colors.
(3) Color illusions(3) Color illusions
In fact, both those shades of red are In fact, both those shades of red are pure red colors (255, 0, 0)!pure red colors (255, 0, 0)!
255, 0, 0
Same Color illusion (SCI)Same Color illusion (SCI) The SCI The SCI —— also known as also known as
Adelson's checker shadow Adelson's checker shadow illusion, checker shadow illusion, checker shadow illusion and checker illusion and checker shadow shadow —— is an optical is an optical illusion published by illusion published by Edward H. Adelson, Edward H. Adelson, Professor of Vision Science Professor of Vision Science at MIT in 1995.at MIT in 1995.
The squares A and B on The squares A and B on the illusion are of the same the illusion are of the same color (or shade), although color (or shade), although they seem to be different.they seem to be different.
Same Color illusionSame Color illusion "When interpreted as a 3-dimensional scene, our "When interpreted as a 3-dimensional scene, our
visual system immediately estimates a lighting visual system immediately estimates a lighting vector and uses this to judge the property of the vector and uses this to judge the property of the material.material.““ Edward H. Adelson Edward H. Adelson
http://web.mit.edu/persci/people/adelson/checkershadow_illusion.htmlhttp://web.mit.edu/persci/people/adelson/checkershadow_illusion.html
SCI ProofSCI Proof
The original image of the illusion.The original image of the illusion.
The squares marked A and BThe squares marked A and B
are the same shade of gray, are the same shade of gray,
yet they appear different.yet they appear different.
The original image plus two stripes.The original image plus two stripes.
By joining the squares marked A and BBy joining the squares marked A and B
with two vertical stripes of the samewith two vertical stripes of the same
shade of gray, it becomes apparentshade of gray, it becomes apparent
that both squares are the same.that both squares are the same.
More Proof?More Proof?1) Try putting the image in Photoshop.1) Try putting the image in Photoshop.
Using the eyedropper tool you can determine Using the eyedropper tool you can determine that the RGB values of the grays in both that the RGB values of the grays in both square A and square B are 120-120-120.square A and square B are 120-120-120.
2) Cut out a cardboard mask.2) Cut out a cardboard mask.
By viewing patches of the squares without the By viewing patches of the squares without the surrounding context, you can remove the surrounding context, you can remove the effect of the illusion. A piece of cardboard effect of the illusion. A piece of cardboard with two circles removed will work as a mask with two circles removed will work as a mask for a computer screen or for a printed piece of for a computer screen or for a printed piece of paper.paper.
More Proof?More Proof?3) Print the image and cut out the squares.3) Print the image and cut out the squares.
This is another way to isolate the patches This is another way to isolate the patches form their surrounding context. Cut out form their surrounding context. Cut out each square along the edges. Remove each square along the edges. Remove them. Hold them side by side. Please note them. Hold them side by side. Please note that some printers, especially laser that some printers, especially laser printers, have "enhancement" processing printers, have "enhancement" processing that increases the contrast of edges. This that increases the contrast of edges. This can cause the printed squares to have can cause the printed squares to have slightly different values of gray. slightly different values of gray.
4) Get a photometer.4) Get a photometer.
Color illusionsColor illusions How would this affect our work? If we were How would this affect our work? If we were
working in a room with red walls, our perception working in a room with red walls, our perception of color would be affected by these walls.of color would be affected by these walls.
To do it right, we need a neutral colorTo do it right, we need a neutral color• This color is {128, 128, 128} which is exactly half of 256 This color is {128, 128, 128} which is exactly half of 256
(2(288).).
Color illusionsColor illusions This is why many serious digital imaging This is why many serious digital imaging
professionals have their workroom walls professionals have their workroom walls painted with the neutral color {128, 128, painted with the neutral color {128, 128, 128}.128}.
A tipA tip, whenever you see RGB values that , whenever you see RGB values that are are all the sameall the same (e.g., 111, 111 ,111), it (e.g., 111, 111 ,111), it is a shade of is a shade of greygrey, , such as,such as,
SummarySummary
In the last two lectures we have In the last two lectures we have discussed the basic facts about discussed the basic facts about digital image:digital image:• Binary data representationsBinary data representations• Bit DepthBit Depth• ResolutionResolution• Color spaceColor space• Color consistencyColor consistency• Color illusionsColor illusions
SummarySummary
In order to be an effective digital artist, In order to be an effective digital artist, these are the most fundamental concepts these are the most fundamental concepts that are simple to grasp.that are simple to grasp.
Another important issue is the Another important issue is the color-color-managed workflowmanaged workflow. This requires hands-. This requires hands-on experience which we will try to arrange on experience which we will try to arrange at a later stage when the color at a later stage when the color measurement device has been delivered measurement device has been delivered to SCM.to SCM.
