Karen Fraser, 16G06

1
Karen Fraser, 16G06

• email, k.fraser_at_ulster.ac.uk, website,
  karenfraser.co.uk

2
Colour

• Digital Multimedia, 2nd edition
• Nigel Chapman Jenny Chapman
• Chapter 6
• Plus stuff!!

3
Need to talk about bits!

• Everything in computing is measured in bits
• A bit is the smallest unit of measurement
• 8 bits make up a byte
• 1024 bytes make up a kilobyte
• There are 8192 bits in a kilobyte
• How do we get 1024 bytes in a kilobyte?

4
Need to talk about binary!

• The principle behind digital computers. All input
  to the computer is converted into binary numbers
  made up of the two digits 0 and 1 (bits).
• For example, when you press the "A" key on your
  keyboard, the keyboard circuit generates and
  transfers the number 01000001 to the computer's
  memory as a series of pulses with different
  voltages.
• The bits are stored as charged and uncharged
  memory cells or as microscopic magnets on disk
  and tape. Display screens and printers convert
  the binary numbers into visual characters.

5
How Binary Numbers Work

• Everything is to the power of 2
• 2048 1024 512 256 128 64 32 16
  8 4 2 1
• But, for us to understand it we need to convert
  it to decimal

6
What comes after kilobyte?

• Kilobyte x 1024 is a Megabyte
• Megabyte x 1024 is a Gigabyte
• Gigabyte x 1024 is a Terrabyte
• Terrabyte x 1024 is a Pettabyte
• Pettabyte x 1024 is a Exabyte
• E xabyte x 1024 is a Zettabyte

7
Colour "depth"

• Each pixel in a bitmap contains certain
  information, usually interpreted as colour
  information. The information content is always
  the same for all the pixels in a particular
  bitmap. The amount of colour information could be
  whatever the application requires but there are
  some standards, the main ones are described next.

8
Colour "depth"

• 1 bit (black and white)
• This is the smallest possible information content
  that can be held for each pixel.
• The resulting bitmap is referred to as
  monochrome or black and white.
• The pixels with a 0 are refered to as black,
  pixels with a 1 are referred to as white.
• Note that while only two states are possible
  they could be interpreted as any two colours, 0
  is mapped to one colour, 1 is mapped to another
  colour.

9
Colour "depth"

• 8 bit greys
• In this case each pixel takes 1 byte (8 bits) of
  storage resulting in 256 different states.
• If these states are mapped onto a ramp of greys
  from black to white the bitmap is referred to as
  a greyscale image.
• By convention 0 is normally black and 255 white.
  The grey levels are the numbers in between, for
  example, in a linear scale 127 would be a 50
  grey level.

10
Colour "depth"

• 24 bit RGB
• This is the next step from 8 bit grey, now there
  is 8 bits allocated to each red, green, and blue
  component. In each component the value of 0
  refers to no contribution of that colour, 255
  refers to fully saturated contribution of that
  colour. Since each component has 256 different
  states there are a total of 16,777,216 possible
  colours.

11
Colour "depth"

• 8 bit indexed colour
• Indexed colour is a more economical way of
  storing colour bitmaps without using 3 bytes per
  pixel. As with 8 bit grey bitmaps each pixel has
  one byte associated with it only now the value in
  that byte is no longer a colour value but an
  index into a table of colours, called a palette
  or colour table.

12
Indexed Colour

• 8-bit colour only permits 256 colours
• Instead of storing (r, g, b) for each pixel,
  store an index into a palette or colour lookup
  table (CLUT)
• Index can be small, usually a single byte
• Palette stores up to 256 (for 1-byte index)
  24-bit values
• To determine colour of a pixel, look at the
  stored value, use it to look up full 24-bit (r,
  g, b) value in palette

13
Colour "depth"

• 4 bit indexed colour
• This is identical to 8 bit colour except now only
  half a byte, 4 bits are used for the index. This
  supports a table of up to 16 colours.

14
Bitmap Storage

• The most straightforward way of storing a bitmap
  is simply to list the bitmap information, byte
  after byte, row by row. Files stored by this
  method are often called RAW files. The amount of
  disk storage required for any bitmap is easy to
  calculate given the bitmap dimensions (N x M) and
  colour depth in bits (B). The formula for the
  file size in KBytes is
• where N and M are the number of horizontal and
  vertical pixels, B is the number of bits per
  pixel. The following table shows the file sizes
  of a few bitmap types if they are stored in RAW
  format.

15
Colour "depth"

• image dimensions colour depth file
  size
• 128 x 128 1 bit
  2 KB
• 8 bits
  16 KB
• 24 bits 48 KB
• 256 x 256 1 bit
  8 KB
• 8 bits
  64 KB
• 24 bits
  192 KB
• 1K x 1K 1 bit
  128 KB
• 8 bits
  1 MB
• 24 bits
  3 MB

• 128 X 128
• 16384 X 1 16384
• 16384 / 8 X 1024
• 16384 / 8192
• 2

16
A typical exam question

• A certain raster image is 256 pixels in each of
  the x and y dimensions. Each pixel is one of 16
  colours. Calculate the total amount of storage
  required for this image. Candidates are advised
  to explain their reasoning and show intermediate
  calculations
• 256 x 256 65,536 pixels
• 16 colours requires 4 bits per pixel
• 65,536 x 4 262,144 bits
• divide by 8 to get bytes
• 32,768 bytes
• divide by 1024 to get kb
• 32kb

17
Typical exam questions

• You can be told the numbers of bits needed for
  colour
• Or
• You can be told how many colours there are and
  you have to work out how many bits you need
• Or
• You can be asked how many colours there are based
  on the total storage size

18
A typical exam question
Compare and contrast the RGB and CMYK colour
models, including an illustration of the RGB
colour model. Give an example of a situation in
which you would use each model.
19
Differences between rgb cmyk
Inked paper absorbs or reflects specific
wavelengths. Cyan, magenta and yellow pigments
serve as filters, subtracting varying degrees of
red, green and blue from white light to produce a
selective gamut of spectral colors. CMYK is
subtractive
Computer monitors emit color as RGB (red, green,
blue) light. Although all colors of the visible
spectrum can be produced by merging red, green
and blue light, monitors are capable of
displaying only a limited gamut (i.e., range) of
the visible spectrum. RGB is additive.
20
Colour Palettes

• Ideally choose 256 most important colours in an
  image to store in its palette
• When 24-bit image is reduced to indexed colour,
  some colours may be missing from the palette
• Replace missing colour by nearest, may lead to
  posterization
• Dither use pattern of dots and optical mixing
• Web-safe palette 216 colours guaranteed to
  reproduce accurately on all platforms and browsers

21
Complementary Colours

• Subtract additive primary from white gives its
  complement
• Equivalently, add other two additive primaries
• C GB W-R
• M RB W-G
• Y RG W-B
• Cyan, magenta and yellow are subtractive primary
  colours (mixing ink/paint)

22
CMYK Colour

• Real inks do not correspond to ideal subtractive
  primaries
• Combining three inks for black is undesirable
• Printers use four process colours, cyan, magenta,
  yellow and black
• CMYK gamut is not the same as RGB
• Implications for using images prepared for print
  (CMYK) on the Web (RGB)

23
HSV

• Alternative way of specifing colour
• Hue (roughly, dominant wavelength)
• Saturation (purity)
• Value (brightness)
• Model HSV as a cylinder H angle, S distance from
  axis, V distance along axis
• Basis of popular style of colour picker

24
Why is colour so important?

• Colour COMMUNICATES
• Transfers a message
• Does not need a verbal explanation
• Traffic lights
• Red stop
• Green go
• Road signs
• Red Danger

25
Why is colour so important?

• Your sites must create a reaction/response from
  the viewer
• Colour can be used to achieve this as well as ...
• Typography
• Layout
• Hierarchy
• Navigation
• Visuals
• Content and so on

26
Why do I need to know about colour?

• Good designers use the principles of colour to
  make sure they have the correct colour
  combination for their designs
• You are able to judge which colours
  complement/contrast
• You know which colours create a cold or warm
  effect
• You will be able to judge which colours create an
  ordered/chaotic affect
• You will have started to think as a designer and
  made decisions for a reason
• You will understand more about how important
  colour is to almost everything
• You will be able to justify your decisions when
  questioned further

27
Warm colours and cold colours?
http//www.johndcampbell.com/colour_schemes_wheel.
htm
The colour wheel can be divided into 2 sections
The warm colours positioned on the right hand
side of the wheel The cool colours positioned
on the left
28
Why would you use the colour grey?

• As a background colour because it is neutral
• What kind of visual impact would this colour
  create?
• When combined with other colours it can create a
  strong visual appearance which reflects
  professionalism and possibly order!
• What kind of websites use the cool colours?
• Formal
• Business
• What type of websites would use the primary
  colours?
• Childrens

29
Places to think about your choice of colour

• The colour scheme used within charts and visuals,
  buttons and navigational menus
• Can improve the visual consistency of your design
  or presentation
• No more than three colours should ever be used
  within one design unless you intend to break the
  rules of conformity
• An overuse of colour will cause distraction

30
Typography

• Type choice will be vital to the development of
  your designs (everything you use or create within
  the sites communicate)
• Communicate the information effectively
• Be legible from the desired viewing distance
• Be the most suitable typeface for the design
  situation i.e. (how it will be viewed i.e.
  computer screen)
• Be representative of your sites/presentations'
  theme or content
• Be simple to read (if thats your sites
  intention)

31
To read type takes a longer period of time to
interpret than visuals
32
Typography what needs to be considered?

• These factors include
• Alignment
• Type size and style
• Kerning the adjustment of space between type
• Leading Spaces of lead inserted between the
  lines of type to fix line spacing
• Placement
• Proximity
• Amount of type
• Words per line
• Colour - should be used where possible to speed
  up the interpretation process

33
Next week

• Introduction to Flash