Presentation

1
Presentation Integration of Images into
Multimedia

• Properties of image types
• Interactive Images of multiple types
• Alpha Channels
• Compression
• Web Introduction
• Dreamweaver
• Fireworks
• Images in Flash movies
• Images in Director
• Image batch processing

2
Resolution of bitmap images

• X by Y
• 0,0 at top left of any image
• Must be delivered in their native size, Decide
  this first!
• Zooming?? BBDO
• Artefacts on resizing Photoshop zoom
• Quality drop on scaling up DW scale
• Attention to detail Every pixel counts

3
Bit depth colour profile

• A computer graphics term describing the number of
  bits used to represent the colour of a single
  pixel in a bitmapped image. This concept is also
  known as bits per pixel (bpp), particularly when
  specified along with the number of bits used.
  Higher colour depth gives a broader range of
  distinct colours.
• 8-bit colour (28 256 colours)
• Colour profile or palette describes the base
  colours used to produce others available. RGB,
  CMYK, Indexed, Custom

4
Miscellany

• Pixels or line based (vector). photographic /
  diagramatic
• Interactive or dynamic images are possible
  Liquid
• Still image formats, Display formats
• Properties of PSD / JPG / GIF / PNG / BMP / GIF
• Putting Images on the web and into interactive
  software
• Web Introduction
• Further Compression in 2nd party apps
• Alt Text (Accessibility)
• Flash in Html, Swf delivery format

5
Properties of image formats

• PSD
• Native Photoshop format
• Saves Layers
• Bit depth
• Text (as editable text)
• Paths (shapes)
• Channel data
• BMP
• Saves UN-compressed flat pixel data
• No alpha
• JPG
• Saves compressed flat pixel data only
• No alpha
• GIF
• Saves compressed flat pixel data
• Web colours (256)
• 1 bit alpha channel (on or off)
• PNG
• Saves compressed flat pixel data

6
Alpha Channels

• Each pixel of an image carries colour data about
  the RGB values of the image at that point
• Some image types (as aforementioned) have a 4th
  channel that carries alpha data RGBA
• The alpha channel of an image defines its
  transparency / opacity at any given point

• GIF images have a 1 bit alpha channel which means
  the transparency can have only two values, either
  1 or 0. This gives rise to a harsh edge between
  elements that are 100 transparent and those that
  ate 0 transparent (100 opaque).
• PSD and PNG images have 24 and 8 bit alpha
  channels respectively. These are able to store
  more data and hence able to display a gradation
  of transparency, effectively displaying a
  variation in thickness of image layers.

7
Image Compression
8
Image Treatment in Dreamweaver

• Very easy to integrate images into websites in
  Dreamweaver.
• Images must be
• of a type supported by the OS
• of a type supported by the browser
• of a colour depth supported by the hardware
• Very easy to make dynamic / interactive
• HTML is auto-generated most of the time
• Demo Tutorial elements on interactivity
• Redefine image size best results power of 2
• Rollover Alt text

9
Image Treatment in Flash

• Further compression controlled from single point
  or individually per image
• Possible linkage to external image source
• Can be slow to render large bitmap files esp if
  they are moving
• Can trace bitmaps into vector art.
• Can be tinted, faded and edited somewhat
• Runtime masking

10
Image Treatment in Fireworks

• Fireworks is used to create image heavy websites.
• Layout slicing
• Auto Alt text
• Auto rollover creation
• Compression control and comparison

11
Image Treatment in Director

• No additional compression
• Large files
• Good deep level colour control
• RGB, Forecolor, Fillcolor, Backcolour
• Imaging lingo to create custom images on the fly
  liquid, bumble
• Runtime masking
• Quad manipulation

12
Photoshop Batch Processing

• Image transformation / manipulation of multiple
  files in the same way.
• Quick setup and control
• Macro recording of actions
• Easily create custom frame by frame animations