2Multimedia Defined Issues Identify the Use Integration of text, still and moving images, and sound to communicate.IssuesTimeLonger downloadsBigger learning curve for designerSearch engine unfriendlyBalance choices for the purposeIdentify the UseAskWho 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?
3Words in MultimediaWords can be:WrittenSpokenSung
4Images in Multimedia Images can be: Drawings Charts Diagrams Paintings PhotographsButtonsAnimationor videoNote: images will be discussed in depth further into this lecture.
5Sound in Multimedia Sound, also called audio, can be: Voice-over or narrationSound effectsMusic
6Audio and the Web Delivery File Types Download file Embedded Streaming Larger file=longer download timeEmbeddedDoes not allow download - BADStreamingUsers listen as the connection is madeUses bufferLivecastsFile Types.wav, .mp3
8Video and the Web Requires high bandwidth and player Types File Types Download, streamingInternet TVFile Types.avi, .flv, .mov, .mpg,
9Multimedia Productions Defined:Storytelling through the use of text, still and moving images, and sound.Types of multimedia productionsPresentationsTutorialsGamesSimulationsWeb pages
10Understand image file formats and when to use an image file type. Working with ImagesUnderstand image file formats and when to use an image file type.
11Image Importance Images… Good Images… illustrate content are crucial for name recognition and brandingprovide backdrops for other activitiesoffer a means of navigating a Web siteGood Images…are aesthetically pleasingcommunicate welluse minimal bandwidthrelevant to the page’s purposeare small files
12Digital Imaging Concepts Pixelsshort for “pixel element”smallest unit displayed by a monitorprovide color information
13Color Models Color Models RGB - red, green, blue CMYK Grayscale handles image colors and display differentlychosen based on purposeRGB - red, green, blueused for electronic display modeformat: R, G, B in decimal and hexadecimal formor FF0000CMYKCyan, Magenta, Yellow, black (K)used for print mediaNote: never go from CMYK to RGBGrayscale256 shades of grayeach pixel has a brightness value.0=black, 255=white
14Resolution Defined: Output resolution The number of pixels present in a monitor’s height and width or dots per inch (dpi)The higher the resolution the more detailMonitor Resolutions800x600, 72 or 96dpi1024x768, 72 or 96dpi1162x864, 72 or 96dpiLCD Monitors have fixed resolutionsOutput resolutionDictated by the output device
16Graphic Formats Bitmaps/Raster Vector Most common OriginalBitmaps/RasterMost commonEach color is an individual valueComposed of small squaresLarge images = large file sizesUse for photos, drop shadows, soft or blurry edgesDistorts when stretchedSub-typesJPG, GIF, PNGVectorColor is a mathematical equationSize changes force mathematical re-calculationIncreasing the image does not increase the file sizeUse for line art, shapes and illustrationsDoes not distort because color is recalculatedAI, WMFDistorted
17File Types – Electronic Media OriginalGIFRasterPlatform independentLimited to 256 colorsUse for broad expanses of color – no photosSupports transparencyLossless formatDuring compression, color info is not lostGIF89aAnimated gifStatic images together in motionDoes not require a plug-inDistorted
18Image File Formats – Part 2 JPEG (Joint Photographic Experts Group)RasterSupports 16+ million colorsCompressed automaticallyResults in image degradationLossy formatAs compression increases, colors are dropped from the imageWill display differently on a MAC
19Image File Formats – Part 3 PNG (Portable Networks Graphic)Combines the best of GIF and JPEGSupports compression and high bit depth280 thousand billion colorsPage Description Languages (PDF)Describes the layout of a printed page of graphics and textRequires a Adobe Reader plugin to view online
20Image File Formats – Part 4 SVG (Scalable Vector Graphics)Uses XML to describe shapes in 2DAllows the image to become an objectSupports animation, fills, and gradientsUse for line art and shapesMicrosoft uses it to embed images in ed 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, ,3.0769" /></svg:svg></shape>
21Image File Formats – Print Media Business cards, brochures, flyers, etc.FormatsEpsEncapsulated PostscriptTif or tiffTagged Image File FormatPctPicture FilePrint Media files…cannot be used on the Internetare 150+ dpi in resolution