Analogous colours

1
Recap from last week

• Analogous colours
• Any three colours which are side by side on a 12
  part colour wheel
• Complementary
• Any two colours positioned directly opposite each
  other on the colour wheel
• Triadic
• Colours at the points of a triangle
• Split complementary
• A colour and the two colours adjacent to its
  complementary

2
Complementary
Analogous
Split complementary
Triadic
3
Multimedia Applications

• Image types and compression

4
Graphic File Formats

• A wide variety of graphic/image file formats
  exist e.g. jpg, bmp, gif, psd
• Some are software dependent
• Others are cross-platform, independent formats
• Different file formats use different ways of
  representing graphical information
• Two main image file types bitmap and vector

5
Bitmap images

• Also known as raster images
• Based on a grid of pixels
• Each pixel has a specific location, colour (RGB)
  and brightness value assigned to it
• Image quality depends on resolution (number of
  pixels) and colour depth (amount of information
  in each pixel)
• Can represent subtle graduations of shade and
  colour

6
Bitmap images

• 3 characteristics of a bitmap image
• Dimension
• Colour model
• Bit depth (colour depth)
• Dimension number of pixels wide/high
• Not a physical size in inches
• Colour model decoder that tells how to
  translate a pixel value into a colour or shade of
  gray
• Grayscale - 0 is black, 255 is white

7
Bit Depth

• Each pixel is represented by a number of ones and
  zeros
• The number of ones and zeros determines the range
  of possible values per pixel, and therefore the
  total number of colours
• 1-bit image can only store a 1 or 0 per pixel, so
  can only be black or white
• 2 bits of data give you 4 possibilities (00, 01,
  10, 11)
• 8 bits of data give you 256 possible values
• 24 bits gives over 16 million possible colours
• Three 8-bit values per pixel (1 for each R G B)
• 256 x 256 x 256 16,777,216 colours
• jpeg, tiff, bmp, gif, psd

8
Bitmap images

• Resolution dependent so lose quality and detail
  if they are rescaled, or displayed on a different
  resolution screen
• Appropriate for artwork created in painting
  programs and for continuous-tone images such as
  photographs
• To get good print quality it has to be a
  hi-resolution file, which means a large file
• Good screen display at 100ppi but needs
  150-300ppi for good quality print

9
Vector images

• Object-oriented graphics - use mathematical
  formulas (instead of pixels) to describe shapes,
  colours, and placement
• eg for a line the program may store point of
  origin, length, thickness, orientation, colour
• Resolution independent
• Always render at the highest quality as resizing
  is done mathematically
• Crisp at any size or resolution
• Suited to line art, type and graphics that may
  need to be scaled, such as logos
• Generally produce smaller files than bitmaps

10
Vector images

• Have editable attributes such as fill and line
  colour
• Vectors can be transformed (skewed, stretched,
  rotated, etc)
• Unsuitable for photo-realistic images as they
  dont represent continuous subtle tones of a
  photograph
• Tend to depict more cartoon-style images
• You can apply bitmapped textures to vectors to
  make them more photo-realistic

11
Vector shape

• Line end points stored as mathematical values

Line endpoints (0, 1) and (12, 31)
y coordinates corresponding to each integer value
can be calculated as x is stepped from 0 to 12
Output devices are based on pixels
12
Vector shape

• To draw a circle of radius r a program needs
  information on
• the radius r
• the location of the centre point of the circle
• stroke line style and colour (may be transparent)
  
• fill style and colour (may be transparent)

13
Vector shapes created with drawing package
Bitmap image
14
(No Transcript)
15
Bitmap vs Vector

• A number of bitmap file formats are
  inter-changeable between different software
  packages e.g. jpeg
• Many vector files tend to be limited to the
  software in which theyve been created e.g.
  specific CAD programmes

16
Resolution

• Refers to how finely a device approximates a
  continuous image using finite pixels
• Often defined in pixels per inch (ppi) or dots
  per inch (dpi)
• The more pixels, the smaller each pixel size

17
Resolution and bitmaps

• Bitmaps are an array of pixel values
• Have pixel dimensions but no physical dimensions
• Physical size of displayed image will depend on
  resolution of display device

128/72 1.8 (inches) 45 mm size
of this square displayed on this monitor
18
Resolution

• Same image will appear smaller on monitor with
  higher resolution

19
Scaling graphics 2

• Bitmaps
• If scaled up from natural size, each logical
  pixel must be mapped to more than one physical
  pixel on output device
• Effectively increases size of logical pixel

To double linear dimensions, each pixel value is
used to set value of four pixels on display
20
Bitmap
Quality affected by scaling or changing resolution
21
Common Web file types

• Most common image file types used on the web are
• GIF (Graphics Interchange Format)
• JPEG (Joint Photographic Experts Group)

22
JPEG GIF

• JPEG stores full colour information (24 bits per
  pixel 16 million colours)
• GIFF only stores 8 bits per pixel (256 colours or
  less)
• JPEG not so good for sharp edges eg row of black
  pixels next to row of white pixels

23
GIF

• Runs of same colour pixels are coded as
  ColourNumberOfPixels (run-length encoding)
• Run-length encoding is a form of lossless
  compression
• Good for storing images where there are lots of
  same colour pixels (logo, diagram)
• Creates perfect reproduction of original
• Lossless compression

24
GIF

• Not suitable for colour photographs or other
  continuous images with many colours
• Good for animations
• Good for images that rely on web-safe colours
• Web-safe colours 216 colours that display
  consistently on any computer monitor capable of
  displaying at least 8-bit colour (256 colours)
• Use for any web image that does not need jpeg
  quality and detail

25
Image suitable for GIF format

• Blocks of solid colour, repetitive pixels

26
GIF info easy to store
Easy to store data using run-length encoding
27
JPEG

• Joint Photographic Experts Group
• Can display true-colour (up to 16 million
  colours)
• Particularly good for full-colour or gray-scale
  images of realistic scenes (eg photographs)
• Lossy compression

28
JPEG

• Not so good for line drawings, cartoons, and
  other simpler images
• You can choose how much you want to compress the
  file (variable ratios)
• The more you compress, the more quality will be
  lost file size vs image quality

29
Group Project

• Have you done research on file formats suitable
  for tv?
• Have you considered the fact that the logo will
  be used full screen as well as in the top corner?
• Have you tried your logo out in Premiere over
  some video footage?

30
Select the correct format for tv
31
Title safe area in the centre