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
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:
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
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
Original
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
Distorted
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
Distorted
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="http://www.daa.com.au/~james/dia-shapens" 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 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