The document discusses various aspects of graphics used in multimedia. It describes how still images can be generated as bitmaps or vector drawings. Common file formats like JPEG, GIF and PNG are explained. Color models including RGB, HSB and CMYK are covered. Graphics are an essential part of conveying information in multimedia as images can be more effective than text alone. Elements of graphics such as lines, shapes, color and texture are also summarized.

1. Introduction to Multimedia SMM 2005 Muhd. Nabil Ahmad Zawawi Jabatan Multimedia, FSKTM, UPM [email_address] 03-89466526 http://www.fsktm.upm.edu.my/~nabil/

2. Introduction to Multimedia Chapter 4

3. Graphics Overview Key feature/element in multimedia products Most of the time, using text only is not enough to convey a message to the user. Multimedia products need attractive graphical combination and presentation Developers must understand the purpose and significance of graphics that are going to be used in their projects Also important in information delivery.

4. Graphics Overview Graphics can be developed using several methods: Illustration software Graphic/image manipulation software Acquiring through scanning or camera transfer Graphic files can be stored in various file format – each format has different purposes

5. 4.1 Elements of Graphic To create a remarkable graphics, developer must understand graphics and its elements: Lines Shapes Space Texture Color

6. Lines A mark with length and directions Continuous mark made on some surface by a moving point Types of line include: vertical , horizontal , diagonal , straight or ruled , curved , bent , angular , etc.

7. Shapes Enclosed space defined and determined by other art elements such as line , color , value , and texture Can appear as 2 dimensional ( 2D ) or 3 dimensional ( 3D )

8. Space Refers to the distance or area between , around , above , below , or within things can be described as two-dimensional or three-dimensional; as flat, shallow or as positive or negative space etc

9. Texture Surface quality or "feel" of an object, its smoothness , roughness , softness , etc Actual or Simulated

10. Texture Actual textures - can be felt with fingers Simulated textures - suggested by an artist in the painting of different areas of a picture

11. Color Produced by light of various wavelengths - when light strikes an object and reflects back to the eyes

12. Color An element of art with three properties: hue or tint (the color name) intensity (purity and strength of a color) value (the lightness or darkness of a color) Photographers measure color temperature in degrees Kelvin (K). 7200 to 8500 Rainy, Misty Daylight 8000 to 27,000 Clear Blue Sky Degrees Kelvin Description

13. Graphics Image Development Graphical images obviously play a very important role in multimedia products Images may be photograph-like bitmaps, vector-based drawings, or 3D renderings Access to the right tools and right hardware for image development is important! E.g., graphic designers like to have large, high-resolution monitors or multiple monitors

14. Graphics Image Development Still images are generated in two ways: bitmaps (or raster-based ) vector - drawn

15. Generating still images: Bitmap Bitmap - a matrix describing the individual dots that are the smallest elements (pixels) of resolution on a computer screen or printer

16. Generating still images: Bitmap Example

17. Generating still images: Bitmap Monochrome just requires one bit per pixel , representing black or white BMP – 16 KB

18. Generating still images: Bitmap 8 bits per pixel allows 256 distinct colors BMP – 119KB

19. Generating still images: Bitmap 16 bits per pixel represents 32K distinct colors (Most graphic chipsets now supports the full 65536 colors and the color green uses the extra one bit) BMP – 234 KB

20. Generating still images: Bitmap 24 bits per pixel allows millions of colors BMP – 350KB

21. Generating still images: Bitmap More bits provide more color depth , hence more photo-realism, but require more memory and processing power Graphics production software may capture in 24-bit color and convert to 8-bit

22. Generating still images: Bitmap GIF and PNG formats use a 8-bit color table allowing up to 256 color GIF – 74KB PNG – 63KB

23. Generating still images: Bitmap JPG preserves more color depth with 16 bits per pixel JPG – 19KB

24. Generating still images: Bitmap Bitmaps are best for photo-realistic images or complex drawings requiring fine detail

25. Generating still images: Bitmap Bitmaps picture and their suitability of use:- Use the native Microsoft bmp format as a raw image that will later be processed. It faster to process. Use JPEG, for photo sharing on the web because of its size and quality. GIF is normally used for diagrams, buttons, etc., that have a small number of colours It is also suitable for simple animation because it supports interlaced images. PNG is almost equal to gif except that it didn’t support the animation format.

26. How to Create Bitmap Graphics Clip Art Drawn Capture Scan

27. Generating still images: Vector-Drawn Vector-drawn - created from geometric objects such as lines, rectangles, ovals, polygons using mathematical formulas e.g., RECT 0,0,200,300,RED,BLUE says “ Draw a rectangle starting at 0,0 (upper left corner of screen) going 200 pixels horizontally right and 300 pixels downward, with a RED boundary and filled with BLUE . ”

28. Generating still images: Vector 300 pixel 200 pixel

29. Generating still images: Vector The first popular vector-drawn images were for computer-aided design (CAD) Such as AutoCAD, for aiding engineers and artists in creating complex renderings Graphic artists designing for print media use vector-drawn objects because they put rectangles and Bezier curves on paper without jaggies , exploiting high resolution printers

30. Generating still images: Vector Macromedia Freehand, Corel Draw & Adobe Illustrator are vector-drawing applications Macromedia Flash puts vector-drawing on the Web with a plug-in

31. 3D Object 3D graphics tools, such as Macromedia Extreme3D, or Form-Z, typically extend vector-drawn graphics in 3 dimensions (x, y and z) X y Z

32. 3D Object A 3D scene consist of object that in turn contain many small elements , such as blocks, cylinders, spheres or cones (described in terms of vector graphics) The more elements, the finer the object’s resolution and smoothness.

33. 3D Object Objects as a whole have properties such as shape, color, texture, shading & location. A 3D application lets you model an object’s shape, then render it completely.

34. 3D Object Modeling involves drawing a shape, such as a 2D letter, then extruding it or lathing it into a third dimension. extruding : extending its shape along a defined path lathing : rotating a profile of the shape around a defined axis

35. Extrude and Lathe

36. 3D Object Modeling also deals with lighting , setting a camera view to project shadows

37. 3D Object Rendering : produces a final output of a scene and is more compute-intensive.

38. 4.2 Colors The tools we use to describe color are different when the color is printed than from when it is projected. Projected color is additive. Printed color is subtractive.

39. Additive Color The additive reproduction process usually uses red , green and blue light to produce the other colors. No light (or color) is black. All light (all colors) is white.

40. Subtractive Color Subtractive color explains the theory of mixing paints , dyes , inks , and natural colorants to create colors which absorb some wavelengths of light and reflect others.

41. 4.2 Colors Color models : Different ways of representing information about color Example: RGB HSB CMYK

42. HSB Model Based on human perception of color, describe three fundamental properties of color: Hue Saturation (or chroma ) Brightness - relative lightness or darkness of color, also measured as % * There is no HSB mode for creating or editing images

43. HSB Model Hue - color reflected from or transmitted through an object, measured on color wheel

44. HSB Model Saturation (or chroma ) - strength or purity of color (% of grey in proportion to hue)

45. HSB Model Brightness - relative lightness or darkness of color, also measured as % 0% 50% 100% white Black

46. RGB Model Add red, green and blue to create colors, so it is an additive model. Assigns an intensity value to each pixel ranging from 0 (black) to 255 (white) A bright red color might have R 246, G 20, B 50

47. CMYK Model Based on light-absorbing quality of ink printed on paper As light is absorbed, part of the spectrum is absorbed and part is reflected back to eyes Associated with printing ; called a subtractive model Four channels: Cyan (C ), magenta (M), yellow (Y) and black (K) In theory, pure colors should produce black, but printing inks contain impurities, so this combination produces muddy brown K is needed to produce pure black, hence CMYK is four-color process printing

48. 4.2 Color Color Gamut Range of colors that a color system can display or print Different models have different gamut (RGB has the smallest gamut, approximately)

49. 4.2 Color Color Channel Photoshop shows information about color elements in different channels E.g., RGB has at least three channels; CMYK has at least four channels - at least, because Photoshop also permits “ Alpha ” channels for storing mask information A mask lets part of an image be transparent so that other layers show through

50. 4.3 Graphic Files & Application Format Most popular formats: JPEG (Joint-Photographic Experts Group) GIF (Graphical Interchange Format) PNG (Portable Network Graphic) Other formats: BMP, PSD, TIFF/TIF, TGA, EPS, PCX, ICO

51. JPEG For continuous tone images, such as full-color photographs Supports more than 16 millions of color ( 24-bit ) Uses lossy compression (averaging may lose information)

52. GIF For large areas of the same color and a moderate level of detail . Supports up to 256 colors Allows transparency and interlacing Uses lossless compression

53. PNG lossless , portable , well-compressed storage of raster images patent-free replacement for GIF also replace many common uses of TIFF Support indexed-color, grayscale, and true color images + an optional alpha channel for transparency

54. Other Formats BMP – Bitmap File Format . Native bitmap file format of the Microsoft Windows environment. PSD – Photoshop Document . Native bitmap file format of the Adobe Photoshop graphical editing application. TIFF – Tagged Image File Format . Used to exchange documents between different applications and platforms.

55. Other Formats TGA – Targa File Format . An image format designed for systems using Truevision video boards supported by MS-DOS platforms. EPS – Encapsulated PostScript file format. Adobe drawing format supported by most illustration and page layout programs.

56. Other Formats PCX – ZSoft IBM PC Paintbrush file format. One of the oldest bitmapped formats popularized by MS-DOS paint programs that first appeared in the early 1980's. ICO – Icon file format. Created by Microsoft for icons.

57. 4.4 Information Delivery Graphics are used to convey information in multimedia products. For example, a picture of an automobile engine is much more effective than text that merely describes it.

58. 4.4 Information Delivery Graphics for information delivery include: Drawn images Charts and graphs Maps Scenery People

59. 4.4 Information Delivery In each case, the image must be relevant to the overall product. Image size , color in respect to the application and other images, and positioning must all be considered when using images.

60. 4.4 Information Delivery

61. 4.4 Information Delivery

62. 4.4 Information Delivery

63. Summary The computer generates still images as bitmaps and vector-drawn images. Images can be incorporated in multimedia using clip arts, bitmap software, or by capturing, editing, or scanning images. Creating 3-D images involves modeling, extruding, lathing, shading, and rendering. Color is one of the most vital components of multimedia.