Multimedia

Mr. Sanchez

Multimedia Defined

Integration of text, still and moving images, and sound to communicate.

Issues Time Longer downloads Bigger learning curve for designer Search engine unfriendly Balance choices for the purpose

Identify the Use Ask

Who is your audience and what is your message? How will the setting or interface look? Which multimedia elements fit into the interface and compliment the message? What is the outcome expected?

Words in Multimedia Words can be:

WrittenSpokenSung

Images in Multimedia

Images can be: Drawings Charts Diagrams Paintings Photographs Buttons Animation

or video

Note: images will be discussed in depth further into this lecture.

1st Qtr59%

2nd Qtr23%

3rd Qtr10%

4th Qtr9%

Sales

Sound in Multimedia Sound, also called audio, can be:

Voice-over or narrationSound effectsMusic

Audio and the Web

DeliveryDownload file

Larger file=longer download timeEmbedded

Does not allow download - BADStreaming

Users listen as the connection is made Uses buffer Livecasts

File Types .wav, .mp3

Video in Multimedia

Video can be:LiveRecorded

Video and the Web

Requires high bandwidth and player Types

Download, streaming Internet TV

File Types .avi, .flv, .mov, .mpg,

Multimedia Productions

Defined:Storytelling through the use of text, still and moving

images, and sound.

Types of multimedia productionsPresentationsTutorialsGamesSimulationsWeb pages

Working with Images

Understand image file formats and when to use an image file type.

Image Importance

Images… illustrate content are crucial for name recognition and brandingprovide backdrops for other activities offer a means of navigating a Web site

Good Images…are aesthetically pleasingcommunicate welluse minimal bandwidth relevant to the page’s purposeare small files

Digital Imaging Concepts

Pixelsshort for “pixel element”smallest unit displayed by a

monitorprovide color information

Color Models Color Models

handles image colors and display differently chosen based on purpose

RGB - red, green, blue used for electronic display mode format: R, G, B in decimal and hexadecimal form 255.0.0 or FF0000

CMYK Cyan, Magenta, Yellow, black (K) used for print media

Note: never go from CMYK to RGB

Grayscale 256 shades of gray each pixel has a brightness value.

0=black, 255=white

Resolution

Defined: The number of pixels present

in a monitor’s height and width or dots per inch (dpi)

The higher the resolution the more detail

Monitor Resolutions 800x600, 72 or 96dpi 1024x768, 72 or 96dpi 1162x864, 72 or 96dpi

LCD Monitors have fixed resolutions

Output resolution Dictated by the output device

Bitmap/Raster Image

Vector Image

Graphic Formats Bitmaps/Raster

Most common Each color is an individual value Composed of small squares Large images = large file sizes Use for photos, drop shadows, soft or blurry

edges Distorts when stretched Sub-types

JPG, GIF, PNG Vector

Color is a mathematical equation Size changes force mathematical re-calculation Increasing the image does not increase the file size

Use for line art, shapes and illustrations Does not distort because color is recalculated Sub-types

AI, WMF

Original

Distorted

File Types – Electronic Media GIF

Raster Platform independent Limited to 256 colors

Use for broad expanses of color – no photos Supports transparency Lossless format

During compression, color info is not lost

GIF89a Raster Animated gif Static images together in motion Does not require a plug-in

Original

Distorted

Image File Formats – Part 2

JPEG (Joint Photographic Experts Group)

RasterSupports 16+ million colorsCompressed automatically

Results in image degradationLossy format

As compression increases, colors are dropped from the image

Will display differently on a MAC

Image File Formats – Part 3

PNG (Portable Networks Graphic) Combines the best of GIF and

JPEG Supports compression and high bit

depth 280 thousand billion colors

Page Description Languages (PDF) Describes the layout of a printed

page of graphics and text Requires a Adobe Reader plugin to

view online

Image File Formats – Part 4

SVG (Scalable Vector Graphics)Uses XML to describe

shapes in 2D Allows the image to

become an objectSupports animation,

fills, and gradientsUse for line art and

shapesMicrosoft uses it to

embed images in emailed document.

<?xml version="1.0"?>

<shape xmlns="http://www.daa.com.au/~james/dia-shape-ns" xmlns:svg="http://www.w3.org/2000/svg">

<name>Circuit - NPN Transistor</name> <icon>npn.xpm</icon> <connections>

<point x="0" y="0"/> <point x="6" y="-4"/> <point x="6" y="4"/>

</connections> <aspectratio type="fixed"/> <svg:svg width="3.0" height="3.0">

<svg:line x1="0" y1="0" x2="3" y2="0" /> <svg:line x1="3" y1="-3" x2="3" y2="3" /> <svg:line x1="3" y1="-2" x2="6" y2="-4" /> <svg:line x1="3" y1="2" x2="6" y2="4" /> <svg:polyline points="5,4 6,4

5.6154,3.0769" /> </svg:svg>

</shape>

Image File Formats – Print Media

Print MediaBusiness cards, brochures, flyers, etc.Formats

Eps– Encapsulated Postscript

Tif or tiff– Tagged Image File Format

Pct– Picture File

Print Media files… cannot be used on the Internetare 150+ dpi in resolution

End