Multimedia System & Design Ch 1, 2, 3 Multimedia

Multimedia System & Design Ch 1, 2, 3 Multimedia
M.Sc IT 2nd Semester
University of Sargodha Lyallpur Campus, Faisalabad

1. Multimedia Systems and Design BY: Aized Amin Lecturer Department of CS & IT UOS, Lyp Campus

2. C H A P T E R 1 What Is Multimedia? Multimedia Making It Work Eighth Edition by Tay Vaughan, McGraw-Hill Osborne Media; 8 Edition 2 Badar Waseer [email protected]

3. Multimedia Multimedia is any combination of: Text Art Sound Animation Video D elivered to you by computer or other electronic or digitally manipulated means . 3 Badar Waseer [email protected]

4. Definitions End user / viewer of a multimedia project—to control what and when the elements are delivered, it is called interactive multimedia . When you provide a structure of linked elements through which the user can navigate, interactive multimedia becomes hypermedia. A project is linear, starting at the beginning and running through to the end. 4 Badar Waseer [email protected]

5. When users are given navigational control and can wander through the content at will, multimedia becomes nonlinear. 5 Badar Waseer [email protected]

6. Where to Use Multimedia Multimedia in Business: Business applications for multimedia include: Presentations Training Marketing Advertising Product Demos Simulations Databases Catalogs 6 Badar Waseer [email protected]

7. Multimedia around the office has also become more commonplace. Image capture hardware is used for building employee ID and badging databases. Presentation documents attached to e-mail and video conferencing are widely available. Laptop computers and high resolution projectors are common place for multimedia presentations on the road. 7 Badar Waseer [email protected]

8. Multimedia in Schools/educational sectors Schools are perhaps the destination most in need of multimedia The U.S. government has challenged the telecommunications industry to connect every classroom, library, clinic, and hospital in America to the information superhighway. The National Grid for Learning ( NGfL ) has established similar aims for schools in the United Kingdom. 8 Badar Waseer [email protected]

9. Move away from the transmission or passive-learner model of learning to the experiential learning or active-learner model. Online classes 9 Badar Waseer [email protected]

10. Multimedia at Home Gardening Cooking Home Design Remodeling Repair to genealogy software Reunion from Leister Productions lets families add text, images, sounds, and video clips as they build their family trees. Computer with an attached CD-ROM or DVD drive or a set-top player that hooks up to the television, such as a Nintendo, X-box, or Sony PlayStation machine. 10 Badar Waseer [email protected]

11. Multimedia in Public Places Hotels Train Stations Shopping Malls Museums Libraries Grocery Stores 11 Badar Waseer [email protected]

12. Virtual Reality Convergence of technology and creative invention in multimedia is virtual reality, Place you “inside” a lifelike experience. Goggles Helmets Special Gloves 12 Badar Waseer [email protected]

13. Delivering Multimedia Multimedia requires large amounts of digital memory when stored in an end user’s library. Require large amounts of bandwidth when distributed over wires, glass fiber, or airwaves on a network. The greater the bandwidth, the bigger the pipeline, so more content can be delivered to end users quickly. 13 Badar Waseer [email protected]

14. Delivering Multimedia CD-ROM, DVD, Flash Drives CD-ROM (compact disc read-only memory) discs can contain up to 80 minutes of full-screen video, images, or sound. The disc can also contain unique mixes of: images, sounds, text, video, and animations controlled by an authoring system to provide unlimited user interaction. Multilayered Digital Versatile Disc (DVD) technology increases the capacity and multimedia capability of CDs. 4.7GB on a single-sided, single-layered disc 17.08GB of storage on a double-sided, double-layered disc. 14 Badar Waseer [email protected]

15. CD-ROM and DVD discs are interim memory technologies that will be replaced by new devices such as: flash drives that do not require moving parts. The Broadband Internet When information providers and content owners determine the worth of their products information elements will ultimately link up online as distributed resources on a data highway Actual glass fiber cables that make up much of the physical backbone of the data highway 15 Badar Waseer [email protected]

16. Chapter 1 (topics review) What is multimedia? Definitions Where to use multimedia Delivering multimedia 16 Badar Waseer [email protected]

17. C H A P T E R 2 Text Multimedia Making It Work Eighth Edition by Tay Vaughan, McGraw-Hill Osborne Media; 8 Edition 17 Badar Waseer [email protected]

18. Text Human development that began about 6,000 years ago. The first meaningful marks were scraped onto mud tablets and left to harden in the sun. Only members of the ruling classes and the priesthood were allowed to read and write the pictographic signs and cuneiforms. The earliest messages delivered in written words typically contained information vital to the management of people, politics, and taxes. 18 Badar Waseer [email protected]

19. The Power of Meaning Single word may be masked in many meanings. Nails Mine Break etc... It is important to develop accuracy and conciseness in the specific words you choose. In multimedia, these are the words that will appear in your: titles menus navigation aids narrative/story or content. 19 Badar Waseer [email protected]

20. It’s important to design labels for: title screens, menus buttons or tabs Its required to use words that have the most precise and powerful meanings to express what you need to say. GO BACK! is more powerful than Previous TERRIFIC! may work better than That Answer Was Correct. 20 Badar Waseer [email protected]

21. About Fonts and Faces Typeface Font size Font style Kerning: is the spacing between character pairs Cases: upper and lower Case sensitive: meaning that the text’s upper- and lowercase letters must match exactly to be recognized. 21 Badar Waseer [email protected]

22. Serif vs. Sans Serif Serif versus sans serif is the simplest way to categorize a typeface. Sans is French for “without”. The serif is the little decoration at the end of a letter stroke. Times, New Century Schoolbook, Bookman, and Palatino are examples of serif fonts. Helvetica, Verdana, Arial, Optima, and Avant - Grade are sans serif. 22 Badar Waseer [email protected]

23. Using Text in Multimedia Imagine designing a project that used no text at all. You would need to use many pictures and symbols to train your audience how to navigate through the project. Certainly voice and sound could guide the audience, but users would quickly tire of this: Greater effort is required to pay attention to spoken words than to browse text with the eye. 23 Badar Waseer [email protected]

24. Choosing Text Fonts For small type, use the most readable font available. Use as few different faces as possible in the same work But vary the weight and size of your typeface using italic and bold styles where they look good. In text blocks, use pleasing line spacing: Lines too tightly packed are difficult to read. Vary the size of a font in proportion to the importance of the message you are delivering. 24 Badar Waseer [email protected]

25. Choosing Text Fonts In large-size headlines, adjust the spacing between letters (kerning) so that the spacing feels right. Explore the effects of different colors and of placing the text on various backgrounds. Use anti-aliased text where you want a gentle and blended look for titles and headlines. In computer graphics , antialiasing is a software technique for diminishing jaggies - stairstep -like lines that should be smooth. Jaggies occur because the output device , the monitor or printer , doesn't have a high enough resolution to represent a smooth line. 25 Badar Waseer [email protected]

26. Font Editing and Design Tools Special font editing tools can be used to make your own type Communicate an idea or graphic feeling exactly. With these tools, professional typographers create distinct text and display faces. Graphic designers, publishers, and ad agencies can design instant variations of existing typefaces. 26 Badar Waseer [email protected]

27. Font Editing and Design Tools www.fontfoundry.com www.larabiefonts.com Fontlab Font Forge Bird Font Font Struct Type Light Font Constructor Explore yourself Open source freeware 27 Badar Waseer [email protected]

28. How to use Fontfoundry 28 Badar Waseer [email protected]

29. 29 Badar Waseer [email protected]

30. 30 Badar Waseer [email protected]

31. TASK 1 Install 3 new font styles and write 4 lines paragraph with each style 31 Badar Waseer [email protected]

32. TASK 2 Create a new document in a word processing application. Next, type in a line of text and copy the line five times. Now change each line into a different font. Recopy the entire set of lines three times. Finally, change the size of the first set to 10-point text, the second set to 18-point text, and the third set to 36-point text. Which of the smallest lines of text is most readable? Which line of text stands out the most? 32 Badar Waseer [email protected]

33. TASK 3 Access a computer. Identify program that allow you to manipulate text. Write some text (your introduction) in varied styles and fonts. Print the results. For each, list: The program’s name (highlight various text processing application names). The ways in which that program allows you to change text. Can you easily change the font? the color? the style? the spacing? 33 Badar Waseer [email protected]

34. C H A P T E R 3 Images 34 Badar Waseer [email protected]

35. Images Still images may be small or large, or even full screen. They may be colored, placed at random on the screen, evenly geometric or oddly shaped. Still images are generated by the computer in two ways: As bitmaps (or paint graphics) and As vector-drawn (or just plain “drawn”) graphics. 35 Badar Waseer [email protected]

36. Images Bitmaps may also be called “raster” images. Likewise, bitmap editors are sometimes called “painting” programs. In computer graphics, a raster graphics image is a dot matrix data structure (representing a generally points of color, viewable via a monitor, paper, or other display medium..) A raster is technically characterized by the width and height of the image in pixels Vector editors are sometimes called “drawing” programs 36 Badar Waseer [email protected]

37. 1 pixel in a color monitor Pixels Each pixel is actually composed of three dots a red, a blue and a green one. 37 Badar Waseer [email protected]

38. Bitmaps VS Vector-Drawn Bitmaps are used for photo-realistic images and for complex drawings requiring fine detail. Vector-drawn objects are used for lines, boxes, circles, polygons and other graphic shapes that can be mathematically expressed in angles, coordinates, and distances. 38 Badar Waseer [email protected]

39. Bitmaps VS Vector-Drawn The appearance of both types of images depends on Display Resolution Capabilities of your computer’s graphics hardware and monitor. Both types of images are stored in various file formats Can be translated from one application to another or from one computer platform to another. 39 Badar Waseer [email protected]

40. Bitmaps A bit is the simplest element in the digital world. An electronic digit that is either on or off, black or white, or true (1) or false (0). This is referred to as binary, since only two states (on or off) are available. A map is a two dimensional matrix of these bits. A bitmap, then, is a simple matrix of the tiny dots that form an image and are displayed on a computer screen or printed. 40 Badar Waseer [email protected]

41. Bitmaps 4 bits for 16 colors 8 bits for256 colors 15 bits for 32,768 colors 16 bits for 65,536 colors 24 bits for 16,772,216 colors. Thus, with 2 bits, for example, the available zeros and ones can be combined in only four possible ways and can, then, describe only four possible colors 41 Badar Waseer [email protected]

42. Bitmaps Together, the state of all the pixels on a computer screen make up the image seen by the viewer. 42 Badar Waseer [email protected]

43. Bitmaps Here, each cube represents the data required to display a 4 × 4–pixel image (the face of the cube) at various color depths (with each cube extending behind the face indicating the number of bits— zeros or ones—used to represent the color for that pixel). Bitmap is a data matrix that describes the characteristics of all the pixels making up an image. 43 Badar Waseer [email protected]

44. Bitmaps Image 1 is 24 bits deep (millions of colors) Image 2 is dithered (reducing the color range of images down to the 256 (or fewer) to 8 bits using an adaptive palette (the best 256 colors to represent the image) Image 3 is also dithered to 8 bits, but uses the Macintosh system palette (an optimized standard mix of 256 colors). Image 4 is dithered to 4 bits (any 16 colors) 44 Badar Waseer [email protected]

45. Image 5 is dithered to 8-bit gray-scale (256 shades of gray) . Image 6 is dithered to 4-bit gray-scale (16 shades of gray) . Image 7 is dithered to 1 bit (two colors—in this case, black and white). Bitmaps 45 Badar Waseer [email protected]

46. Bitmap Sources Make a bitmap from scratch with a paint or drawing program. Grab a bitmap from an active computer screen with a screen capture program, and then paste it into a paint program or your application. Capture a bitmap from a photo or other artwork using a scanner to digitize the image. Once made, a bitmap can be copied, altered, e-mailed, and otherwise used in many creative ways. 46 Badar Waseer [email protected]

47. Awareness bout images download You can also download an image bitmap from a web site Legal rights protecting use of images from clip libraries fall into three basic groupings. Public domain images Royalty-free images Rights-managed images 47 Badar Waseer [email protected]

48. Task 4 Use Paint application of MS windows to: Make a single file of Pakistan Currency in ascending order (Rs1 coin to rs.5000 note) 48 Badar Waseer [email protected]

49. Vector Drawing Most multimedia authoring systems provide for use of vector-drawn objects such as: Lines, rectangles, ovals, polygons, and text. Computer-aided design (CAD) programs have traditionally used vector-drawn object systems Graphic artists designing for print media use vector-drawn objects. Programs for 3-D animation also use vector-drawn graphics. 49 Badar Waseer [email protected]

50. How Vector Drawing Works A vector is a line that is described by the location of its two endpoints. Vector drawing uses Cartesian coordinates where a pair of numbers describes a point in two-dimensional space: Horizontal and vertical lines (the x and y axes) The numbers are always listed in the order x , y. In three-dimensional space, a third dimension—depth— is described by a z axis (x , y , z). 50 Badar Waseer [email protected]

51. Image Compression Typically, image files are compressed to save memory and disk space. Many bitmap image file formats already use compression within the file itself For example; GIF, JPEG, and PNG. NEF ( Nikon Electronic Format ) files are the RAW file formats from digital photos taken by Nikon cameras. 51 Badar Waseer [email protected]

52. Image Compression Types Image formats can be separated into three broad categories: Lossy Compression Lossless Compression Uncompressed 52 Badar Waseer [email protected]

53. Uncompressed Format Uncompressed formats take up the most amount of data, but they are exact representations of the image. 53 Badar Waseer [email protected]

54. Lossy Compression Lossy compression algorithms take advantage of the inherent limitations of the human eye and discard invisible information Lossy compression, as its name implies, does not encode all the information of the file When it is recovered into an image, it will not be an exact representation of the original. It is able to compress images very effectively compared to lossless formats, as it discards certain information. 54 Badar Waseer [email protected]

55. L ossless compression Lossless compression algorithms reduce file size without losing image quality Lossless compression will encode all the information from the original When the image is decompressed, it will be an exact representation of the original. There is no loss of information in lossless compression It is not able to achieve as high a compression as lossy compression, in most cases. 55 Badar Waseer [email protected]

56. The bottom version of the photo is compressed with a poor-quality lossy compression algorithm. It will be noticeably smaller in file size than the above image. 56 Badar Waseer [email protected]

57. Task 5 Explore RAW file format Differentiate between GIF, JPEG, TIF, PNG, RAW and BMP. List name of compression algorithms used by these image formats. Which of above formats are so-called bitmap graphics? Which of above formats are lossy or lossless? 57 Badar Waseer [email protected]

58. JPEG (Joint Photographic Experts Group) JPEG images are the most common image type. Come across in your travels around the web. Image compression way has been approved by the photo graphics expert group. To be the best format for an internet-displayed photographic image. 58 Badar Waseer [email protected]

59. JPEG (benefits & downfalls) Benefits Small image size Viewable from the internet Uses millions of colors Perfect for most images Downfalls High compression loses quality Every time a JPEG is saved, it loses more and more of the picture 59 Badar Waseer [email protected]

60. GIF (Graphics Interchange Format) GIF images are truly the internet standard for any type of small, simple file. The most common use for a GIF is for menu buttons or icons for a webpage. The reason being that GIFs are extremely tiny in file size and have no complex colors Any other file which is made up of only use a few basic, flat colors will want to use GIF compression. 60 Badar Waseer [email protected]

61. GIF (benefits & downfalls) Benefits Supported by all web browsers Very small file size Quick to load Useful for Transparencies and Animations Downfalls Only basic colors can be used Makes complex pictures look horrible No detail allowed in images 61 Badar Waseer [email protected]

62. PNG (Portable Network Graphics) PNG is one of the most popular raster formats on the Internet. In 1995 during Usenet conference it was suggested to develop this format as an alternative to the popular GIF format. PNG format popular among web designers. This is the only format that allows you to get images with a transparent background. 62 Badar Waseer [email protected]

63. PNG (benefits & downfalls) Benefits PNG supports a large number of colors. PNG-8 (256 colors) and PNG-24 (about 16.7 million Colors) Small size files. Minimum compression loss. Format is suitable for storage of intermediate versions of the image. When you re-save image, quality is not lost Downfalls Doesn’t support animation Can not store multiple images in one file 63 Badar Waseer [email protected]

64. Online Image compression Tools Optimizilla (only JPEG and PNG) http://optimizilla.com/ Image Optimizer (also download free) http://www.imageoptimizer.net/Pages/Home.aspx Compressor.io [ lossy and lossless (only jpeg and PNG)option] https://compressor.io/compress 64 Badar Waseer [email protected]

65. Task 6 Use at least two online image compression tools to compress your image file and write your findings in word processing application by using sarif and sans sarif styles. Original image size and format Size after compression Effect of compression on image Experience of using compression tool Save same image into different image formats and compare their size. (you may use Paint tool of windows OS) Overall observation 65 Badar Waseer [email protected]

66. ImageJ Free at: http://rsb.info.nih.gov/ij/index.html Overview Java program Interface a bit awkward because it is free Expandable via plug-ins Covers all basic editing and many advanced - very advanced Scientific quality image editor Used in many technical applications It can read many image formats including TIFF, GIF, JPEG, BMP, DICOM, FITS and ‘raw’. 66 Badar Waseer [email protected]

67. Basic ImageJ Interface Menus and Tool bars File Open, Save, Save As, Revert Edit Cut , Copy , Paste , Selection, Options Image Basic Image Editing Process More Advanced Image Editing Options Shapes are for selection or drawing. The “A” is for adding text. 67 Badar Waseer [email protected]

68. File/New 68 Badar Waseer [email protected]

69. Photoshop or Corel PaintShop VS CorelDraw or illustrator Photoshop is a raster graphics editing program Photoshop can be used to edit photos, create graphics for web and paint illustrations. Raster means it's based on pixels. Image enhancement (brightness, contrast, color correction, applying brushes, filters, etc.) 69 Badar Waseer [email protected]

70. Photoshop or Corel PaintShop VS CorelDraw or illustrator CorelDraw vector graphics tools Used primarily for designing logos and graphics for print, as well as cartoons that use fewer color transitions. Vectors are scalable, which means that whatever you create in vectors you can resize to a billboard size if you wanted to. Making new graphics (vectors), i.e., shapes and designs. In general, it means, making everything from scratch. We can even make our own font through these tools! 70 Badar Waseer [email protected]