DAY 4 Section 1

1
DAY 4 - Section 1
Using Text and Graphics

• Presenter Shoba Tegginmath

2
Agenda

• Using Text
• Colour and Light
• File Formats
• Image Conversion
• The Psychology of colour images
• Material from
• Theoretical Foundations of Multimedia, R.
  Tannenbaum
• Principles of interactive Multimedia, M.
  Elsom-Cook

3
Text - The Power of Meaning

• Words must be chosen carefully
• Words appear in titles, menus, navigational aids
• Test the words you plan to use
• Keep a thesaurus handy

4
Using Text in Multimedia

• Type Terminology
• Typeface

Arial Courier Times
5
Using Text in Multimedia

• Type Terminology
• Typeface
• Font
• Style

Italic Bold Underline
6
Using Text in Multimedia
Type terminology

• Typeface
• Font
• Style
• Point

Leading

• Leading

7
Using Text in Multimedia
Type terminology

• Typeface
• Font
• Style
• Point
• Leading
• Kerning

8
Using Text in Multimedia
Type terminology

• Character metrics

9
Using Text in Multimedia
Type terminology

• Character metrics
• Case
• Serif versus sans serif

serif sans serif
10
Designing with Text in Multimedia

• Strike a density balance
• Consider legibility when choosing fonts
• Avoid too many different faces
• Adjust leading and kerning for readability
• Explore colors and backgrounds
• Use anti-aliasing

11
Designing with Text in Multimedia

• Use drop caps and initial caps
• Minimize lines of centered text
• Use distorted layouts to grab attention
• Surround headlines with white space
• Distinguish text links with colors and
  underlining
• Make efficient use of screen real estate

12
Computers and Text

• The Font Wars
• Adobe PostScript
• Adobe Type Manager (ATM)
• TrueType (TT)

13
Making Pretty Text
14
Introduction Graphics and Colour

• Graphics and Colour are a key component of any
  multimedia application.
• Most of us work visually a picture is worth a
  1000 words
• Are important to backgrounds, buttons, icons,
  navigational items, maps, illustrations

15
Basics of Image Production

• There are four basic factors which determine how
  you produce your images and graphics
• screen resolution 72dpi
• your use of colour and colour palettes
• your choice of compression and file formats
• the means by which source material is converted
  to digital format (ie scanning, digital
  photography etc).

16
The Colour Wheel

• Primary Colours
• Secondary Colours
• Tertiary Colours

17
Colour Models
Light and Colour

• Define a method for specifying colour
• RGB - Red, Green, Blue
• CMY - Cyan, Magenta, Yellow
• HSV / HSB - Hue, Saturation, Value
• Colour models define a strict subset of all the
  available colours
• Some colours we cant show on a Computer monitor

18
RGB versus CMY
Light and Colour
19
Types of Images
File Types and Formats

• Line Art
• Simple black and white line work made up of
  pixels
• Grayscale
• Uses a continuous tone from black through to
  white
• Colour
• 4-bit (16 colours) 24 bit (16 million) 36 and
  beyond
• 2D or 3D
• Synthesized images

20
Types of Digital Graphics
File Types and Formats

• Raster Gifs or JPG
• Bitmaps that use pixels to identify colours and
  screen positions
• Vector graphics
• Made up of lines drawn from point to point
• Used in CAD packages (Flash)

21
Raster Graphics
File Types and Formats

• bitmaps
• images composed of discrete areas
• picture elements or pixels
• good for manipulation (editing pixels)
• problems - files can be large
• resolution
• no. pixels per display area
• more pixels better resolution

22
File Types and Formats
23
Colour Resolution
File Types and Formats

• colour depth
• amount memory allocated to each pixel (in bits)
• 4 bits 16 colours
• 8 bits 256 colours
• 24 bits 17.7 million colours
• full range of colours on display system is
  called a palette
• not always possible to get full palette
• depends on video card and configuration

24
Main File Types
File Types and Formats

• GIF - Graphics Interchange Format (.gif)
• Used extensively on the web
• Uses compression
• Supports only 256 colours (8 bit)
• Can show transparency and animation
• JPEG - Joint Picture Experts Group (.jpg)
• Used extensively on the web
• Uses compression
• Supports true colour (24 bit)
• Cannot show transparency or animation

25
An Emerging Standard - PNG
File Types and Formats

• Portable Network Graphics File Format
• Allows greater levels of loss less compression
  (patent free)
• 48-bit, true-color depth
• Supports both animation and transparency
• Used natively in Fireworks
• Supported by most modern browsers

26
Other File Types
File Types and Formats

• Tagged Image Format (.tif) bitmap
• Encapsulated Postscript (.eps) vector
• Windows bitmap (.bmp) bitmap
• PC Paint (.pic) bitmap
• Picture (.pcx) bitmap
• Targa (.tga) bitmap
• Windows metafile (.wmf) both
• Wordperfect graphics (.wpg) - bitmap

27
File Sizes and Compression
File Types and Formats

• For bitmap images (uncompressed), each pixel must
  be stored.
• For each pixel, the colour value is stored.
• The size of an image therefore is the total
  number of pixels multiplied by the number of bits
  required to store the colour of the pixels.

28
Compression
File Types and Formats

• Reduces file size quality
• Necessary to reduce the bandwidth needed
• Two kinds Lossy Lossless
• JPEG uses lossy compression
• Can set how much compression you want to use (and
  thus set the quality of the image)

29
142K
96K
56K
37K
30
28K
15K
13K
8K
31
Two out of Three rule
File Types and Formats

• These four basic factors must be considered in
  conjunction with the Two out of Three rule, which
  states
• In most projects, you can attain only two of the
  following three objectives -
• acceptable performance,
• high quality images,
• the ability to run on most computer platforms.

32
Creating Graphics
Creating Graphics

• Images can be synthesised or digitised
• Synthesised images are created by
• Rendering - creates the 2D image
• Modeling - is done in 3D

33
Digitisation
Creating Graphics

• Procedure of taking an analogue source (eg sound
  or picture) and converting to a digital format
• Four basic steps
• Scanning - the process of detecting the analogue
  signal
• Quantisation - assigning colour values to
  detected colours and intensity
• Encoding Eg. Bitmap image pixels are stored
• Reproduction - reverse of encoding

34
Psychology of Color
Psychology of Colour Images

• Red - Hot, Passion, Confidential, Stop
• Green - Envy, Nature, Go
• Blue - Cold, Sad, Sky
• Yellow - Warm, Energy, Flowers, Caution
• Brown - Dirty, Earth, Nature
• Black - Evil, Fear, Death, Cool

35
Psychology of the Image
Psychology of Colour Images

• The importance of phi
• 1.61803398874 or 8/5, 13/8
• Has both mathematic and artistic properties
• The Golden Mean or Golden Section
• L/A A/B

36
Psychology of Colour Images

• The Golden Rectangle is an extension
• Basis of 35mm film, TV screens, cinema format
  (1.331)

A
B
5
8
8
B
13
37
Proportionality of Beauty
Psychology of Colour Images
38
Harmony
Psychology of Colour Images

• Adjacent colours
• Opposite colours
• A natural scheme
• Images from color matters.com

39
Summary

• Text is a powerful way to convey your message
• Graphics and Colour are a key component of any
  multimedia application
• Many file formats and compression schemes are
  available use the best for your purposes
• The Psychology of colour images should be
  considered when building web sites and multimedia
  applications