1 / 41

Colour Use In Digital Media

Colour Use In Digital Media. Damien Markey. Colour. All visual media depend on colour Black text on a white background is common for printed matter but less so in multimedia Correct choice of colour is important we must consider visual implications technological requirements

ivanbritt
Download Presentation

Colour Use In Digital Media

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Colour Use In Digital Media Damien Markey

  2. Colour • All visual media depend on colour • Black text on a white background is common for printed matter but less so in multimedia • Correct choice of colour is important • we must consider • visual implications • technological requirements • To do this well we must understand both

  3. Visible Spectrum • No matter how the colour is generated we depend on the eye and brain to interpret it • Our eyes detect electromagnetic waves in the range Violet (400nm) to Red (700nm) • We can distinguish about 17 million different colours • colours do not merely mean different wavelengths • most sources emit a mixture of wavelengths

  4. Language of Colour • Dominant wavelength, purity, luminance • dominant wavelengthis the wavelength of the colour that we see -it corresponds to the concept of hue • puritycorresponds roughly to the saturation of the colour • i.e., proportion of dominant wavelength in the mix of wavelengths making up the colour • luminanceis the amount of light – brightness • We can typically distinguish • about 128 hues and 20 levels of saturation

  5. Perception • People have three types of receptors in the retina sensitive to red, green and blue light • But the blue receptors are approximately 40 times less sensitive to variations than the red and green ones • This means that we perceive equally intense amounts of different wavelengths differently • the eyes' response can be represented by the luminosity curve

  6. Mixing Colours: Light • White light contains all visible wavelengths • additive colours • start from black and add colour • red, green, and blue are called primary colours • cannot be created by mixing other light colours

  7. Secondary Colours - Light • mixing primary colours produces secondary colours • red plus green gives yellow • green plus blue gives cyan • blue plus red gives magenta

  8. Mixing Colours: Pigment/Print • Black pigment absorbs all visible wavelengths • subtractive colours • Start from white and subtract wavelengths • red, blue, and yellow are called primary colours • They cannot be created by mixing other pigment colours

  9. Secondary colours – Pigment/Print • Mixing primary colours produces secondary colours • red plus blue gives violet • blue plus yellow gives green • yellow plus red gives orange

  10. But with pigments… • It’s an approximation – not accurate • The theory is weak but in practice it just about works • Red absorbs green and blue light • Blue absorbs red and green light • Pigments don't mix perfectly and don't produce something with the combined characteristics just some molecules with one characteristic and some with another

  11. Paint • So mixed together equally their molecules all absorb the green and half absorb the red and half absorb the blue - result a dark purplish colour • Pigments used in paints aren't pure • Painters don't just use red, blue and yellow

  12. Print Colours • Printers, which must use a fixed set of pigments, typically use specially prepared pigments called Commercial Primaries. • Cyan, Magenta, Yellow • Light colours as opposed to the dark red and blue • The secondary colour produced by mixing two primary colours is called the complementary colour to third primary • yellow & violet, red & green, blue & orange

  13. Complementary Colours • Complementary colours balance each other giving an exciting contrast • yellow and violet are an extreme light-dark contrast • red and green at the same saturation have the same brightness • Complementary pigment colours each absorb their complement's colour • yellow absorbs blue; cyan absorbs red; magenta absorbs green

  14. Colour Models • CIE (Commission International L'Eclairage) colour space -1931 (CIE XYZ) • based on the tri-stimulus theory • a relatively complex mathematical model includes all visible colours • that includes monitor colours and printer colours • often referred to as LAB which is actually a derivative created in 1976

  15. LAB colour • LAB is luminosity, a, b • a is a colour range from deep green to vivid pink • b is a colour range from bright blue to burnt yellow • they are subtractive

  16. RGB • RGB - a simple mathematical model • each colour is represented by three values • R, G & B each between 0 and 255, or 0% to 100% • e.g. 100% R, 0% G, 0% B is pure, saturated, intense red • used on computers as monitors use these three colours

  17. CMYK • CMYK (Cyan, Magenta, Yellow, Black) • used in printers - four colour ribbons/inks • commercial subtractive primaries • each removes complementary colour from the reflected light • e.g., cyan equals minus red, etc.

  18. CMYK v RGB • so screen image can easily be converted to print • e.g. 70% R, 10% G, 35% B needs 30% C, 90% M, 65% Y . • 100% C, 100% M, 0% Y is pure Blue - in theory at least

  19. YUV • YUV (luminance, blue and red colour difference) • Y is derived from Red, Green & Blue values in proportion to theeyes' sensitivity to them – complex • Y with zero U & zero V gives shades of grey • black and white TV picture • U and V are differences between Blue and Y, & Red and Y

  20. YUV componentvideo • For PAL,Y = 0.30R + 0.59G + 0.11B • and U = 0.493(B-Y), V = 0.877(R-Y) • e.g., Y = .11, U = 0.43877, V = -0.09647 means 100% Blue and 0% Red,0% Green, i.e., pure Blue • U and V combined together provide chrominanceor chroma – C • less accurate means of recording colour values • RGB, CMYK and YUV are hardware based

  21. HSB (hue, saturation, brightness) • HSB (hue, saturation, brightness) is user oriented: • based on artist's tint, shade and tone • 360 hues: red at 0, yellow at 60, green at 120, cyan at 180, blue at 240, magenta at 300 • saturation and brightness between 0 & 1 • brightness of 0 is always black • saturation of 0 is always grey: from black to white

  22. HSL • saturation and brightness of 1 is a pure shade • e.g. H=0, S=l, B=l is pure Red • also HSL (hue, saturation, luminance) and HLS (hue, lightness, saturation)

  23. Colour Monitors • Three electron guns exciting red, green and blue phosphors painted on reverse of screen • Phosphors arranged in trios • sets of three closely positioned dots forming a single spot - a triad commonly called a pixel (picture element) • Number of triads varies with size of screen and quality • dot pitch is spacing between triads - .30mm to .23mm • Additive mixing process

  24. Colour Monitors 2 • Variation in strength of electron beam gives various intensities of colour • cannot display all colours visible to human eye • Maximum intensity of each gun produces white; minimum produces black • the white point is a measure of the colour produced when all three guns are at full power - i.e. the monitors idea of white • in fact, this is normally some what blue • the white point is normally specified as a colour temperature

  25. Colour Temperature • The normal colour temperature for a computer monitor is 9300°K • This a high-intensity white for viewing under normal office lighting conditions • 10,000°K is the temperature of open shade in clear skylight • 7500°K is normally called "daylight" • 6500°K is a value typically for televisions - somewhat red

  26. Gamma Correction • modern quality monitors permit the user to choose the value to match their actual situation and adjust the relative values of red, green and blue • Gamma correction: a gamma correction value adjusts for the non-linearity of phosphor excitation • effectively changing gamma has a similar effect to shifting the mid-point in Photoshop's Curves dialogue • Gamut • Range of colours representable within a colour model • Profiles

  27. Colour Profiles • The ICC (International Colour Consortium) has defined a standard form of profile • Modern software can read these profiles and apply them and most devices now come supplied with ICC profile(s) • gamma-correction can be applied to each gun independently to alter the colour values sent to a computer monitor to match up to the theoretical values

  28. Colour Profiles - 2 • software that uses gamma correction applies it to the values sent to the graphics card in order to better reproduce the range of colours on the particular monitor • Standard values are 1.8 on Macs and 2.2 in Windows

  29. LCD Screens • Similar arrangement using active LCDs (TFTs) rather than passive phosphers • Dot pitch typically 0.27mm

  30. sRGB Colour Space • The default working-space Photoshop has opted for is sRGB (standardised RGB) and the most important change in colour space it involves is the move from the previous 1.8 gamma used by Photoshop to a new 2.2 gamma • The difference this causes can be seen if you swap between default sRGB space and the previous space - now called "Apple RGB" - with the RGB Setup dialogue

  31. Palettes • Mac and Windows systems are designed around a 24-bit RGB colour model • Even if the graphics mode in use isn't 24-bit the system derives the colours used from the 16.7M available in the 24-bit system • If the graphics mode uses a smaller range some method of identifying which colours are within the smaller range must be used • One method is to use a CLUT (colour look -up table)

  32. Palettes - 2 • Called a palette on a Windows system • Images stored using palette information are called palettised or indexed • Palettes are most commonly 8-bit • The bits that specify the colours actually specify a palette value • The palette holds the actual 24-bit colour value

  33. WWW Palette Issues • There are default 256 colour palettes for Macs and Windows • Statistically selected as the most frequently needed colours • But these are not identical • Only 216 of the colours are the same - the "Web safe" palette • Netscape Navigator uses a 216 colour palette

  34. WWW Palette Issues 2 • Internet Explorer uses the Windows' 256 colour palette • The Windows' 256 colour palette includes 20 "system" colours • Any other palette used under Windows must include these 20basic colours • These are used by Windows for its own components

  35. Preparation of Media • All media must be prepared for the appropriate colour depth • this affects images, graphics, animation and video • For MM it depends on the colour depth chosen for the project • This may be 256 colours • may be more for known purpose/specialist audience • For WWW it can be as low as 256 colours as a general rule

  36. Preparation of Media - 2 • however, many users have more colours available and browsers will automatically re-map high colour images to 256 colours • so the trade-off is between colour fidelity and download time • if supplying 16- or 24-bit images test view them in all common browsers at 256 colours • if not reduce them to 256 colours • remember the 216 "web-safe" colours - use web palette if appropriate • warn viewers before they access large images

  37. Identification of colours • Use hexadecimal RGB to identify colours, • FFOOOO is pure red • Use the colour picker (available in most programs to identify an existing colour that you wish to identify

  38. Flash import • Flash will import: • Images - Bitmapped: BMP, GIF, JPEG, PICT, PNG, TIFF, PSD, TGA • Images - Vector: Encapsulated Postscript (EPS), Adobe Illustrator (AI), AutoCAD Drawing Exchange Format (DXF),Freehand (FH7 - FH10), Windows Metafile (WMF), Enhanced Windows Metafile (EMF) and Shockwave Flash (SWF)

  39. Flash 2 • Flash uses 24-bit colour depth • Animation: Animated GIF • Video: QuickTime (.MOV), Video for Windows (.AVI), Digital Video, MPEG, Window Media Video (.MVA or .ASF). Flash Video (.FLV) • Flash will create and colour: • Text • Images • Vectors • Animation

  40. WWW Pages • Images are restricted to: GIF, JPEG and PNG • GIF are 256 colours • JPEG are 16.7 million colours • PNG are usually 16.7 million colours

  41. Colour Values for Television Digital Video • Unlike computers the range of colour (extreme black to extreme white) used on TVs does not correspond to the range used on computers • So while we use: • 0,0,0 for the RGB values for black and 255,255,255 for the RGB values for white on computers for still images and video • for video intended for TV use the values 16,16,16 and 235,235,235

More Related