Page 1

Multimedia Basics

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 


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:   

Written Spoken Sung

Images in Multimedia  Images can be:       

Drawings Charts Diagrams Paintings Photographs Buttons Animation or video

3rd Qtr 10%

4th Sales Qtr 9%

2nd Qtr 23%

1st Qtr 59%

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

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

Voice-over or narration Sound effects Music

Audio and the Web Delivery 

Download file  Larger

Embedded  Does

file=longer download time

not allow download - BAD

Streaming  Users

listen as the connection is made  Uses buffer  Livecasts

File Types 

.wav, .mp3

Video in Multimedia  Video can be:  

Live Recorded

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 productions     

Presentations Tutorials Games Simulations Web 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 branding provide backdrops for other activities offer a means of navigating a Web site

Good Images…     

are aesthetically pleasing communicate well use minimal bandwidth relevant to the page’s purpose are small files

Digital Imaging Concepts Pixels   

short for “pixel element” smallest unit displayed by a monitor provide 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


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 


 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 



File Types – Electronic Media Original

 GIF   

Raster Platform independent Limited to 256 colors  Use

 

for broad expanses of color – no photos

Supports transparency Lossless format  During

 GIF89a    

compression, color info is not lost

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


Image File Formats – Part 2 JPEG (Joint Photographic Experts Group)   

Raster Supports 16+ million colors Compressed automatically  Results

in image degradation

Lossy 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 object

  

Supports animation, fills, and gradients Use for line art and shapes Microsoft uses it to embed images in emailed document.

<?xml version="1.0"?> <shape xmlns="" xmlns: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 Media  

Business 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 Internet are 150+ dpi in resolution

Multimedia Basics  

Presentation about what Multimedia is!