1. GRAPHICS

2. Topic Outline What is graphic. Resolution. Types of graphics. Using graphic in multimedia applications.

3. What is Graphic? Pictures of people, places, artwork & photographs. Diagram of buildings and equipment. Charts and graphs, curves. Backgrounds, 3D photo.

4. Resolution Refer to quality capability of a graphic output device (monitor) or input device (scanner). Sometimes refer to the number of color that an image can display.

5. Color Resolution Called depth (specifies the number of bits used in an image file to store color information). 8-bit, 2 8, 256 combination. 8–bit system is called 256-value system. 8-bit display also called as 256-color display. It use 8 bits( a byte) to display each dot of color (pixel). 24-bit display is 3 byte available to store color value. It display 16 million color value and known as true color.

6. Graphics in Multimedia Applications Graphical images - used to add emphasis, direct attention, illustrate concepts, and provide background content

7. Types of Graphics Two types of graphics : 1)Draw-type graphics or vector graphics – represent an image as a geometric shape 2)Bitmap graphics – represents the image as an array of dots, called pixels

8. Draw Type/Vector Graphics ◦ fail size smaller than bitmap ◦ Resize, rotate, no distortion Image is stored as a set of mathematical equations. Equations define curves, lines and shapes. Based on drawing elements or objects.

9. Draw Type/Vector Graphics Consist of line drawings include items such as lines, rectangles, ellipses, arcs, curves and etc. Packages that allow to create vector graphics include : ◦ CorelDraw. ◦ Macromedia Freehand. ◦ Adobe Illustrator.

10. Creation of Still Images (continued) Draw Type/Vector Graphics Used in the following areas: o Computer-aided design (CAD) programs o Graphic artists designing for the print media o 3-D animation programs o Applications requiring drawing of graphic shapes

11. Bitmap Graphics Bitmaps – array of dots or pixels ◦ Picture is stored as a set of pixels. High quality pictures Photo realistic Fail size larger than vector graphic

12. Creation of Still Images (continued) Bitmap Graphics Bitmap is derived from the words “bit,” which means the simplest element in which only two digits are used, and “map,” which is a two-dimensional matrix of these bits. A bitmap is a data matrix describing the individual dots of an image.

13. Bitmap Graphics Color Depth: Determine by how much data in bits is used to determine the number of colors. ◦ 1 bit (2 1 )= 2 colors. ◦ 4 bit (2 4 )= 16 colors. ◦ 8 bit (2 8 )= 256 colors. ◦ 16 bit (2 16 )= 65,536 colors. ◦ 24 bit (2 24 )= 16,777,216 colors.

14. Bitmap Graphics Software to edit bitmapped graphics are ◦ Adobe Photoshop ◦ Windows Paintbrush ◦ Fractal Design Painter Are images that are made up of a set of bits or pixels and can include images that come from a scanner, a photographs or images captured from a video camcorder or the TV.

15. Available binary Combinations for Describing a Color 24 bits depth. Millions of colors. Dithered to 8 bits. Adaptive palette of 256 colors. Dithered to 4 bits. 16 colors. Dithered to 8-bit gray-scale. 256 shades of gray. Dithered to 4-bit gray-scale. 16 shades of gray. Dithered to 1-bit. Two colors, black and white. Creation of Still Images (continued) Bitmap Graphics

16. Creation of Still Images (continued) Vector-drawn images versus bitmaps Vector images use less memory space and have a smaller file size as compared to bitmaps. For the Web, pages that use vector graphics in plug-ins download faster and, when used for animation, draw faster than bitmaps.

17. Creation of Still Images (continued) Vector-drawn images versus bitmaps Vector images cannot be used for photorealistic images. Vector images require a plug-in for Web- based display. Bitmaps are not easily scalable and resizable.

18. More Graphics Clip Art ◦ Libraries of clip art are available online Digitized Pictures ◦ Pictures are transformed into bitmaps ◦ Can be still pictures or moving pictures

19. Graphic File & Image Bitmap formats. Vector format. Compressed formats.

20. Graphic Image File Sizes Image file sizes can become large, you must balance the need for quality images with the need for small file sizes

21. Bitmap Format Common file for graphics. The easiest files to import and export across platforms.

22. Vector Formats Windows metafile is a common vector type image which is generated by processing vector commands by graphic functions in the window OS. File formats include the type of file, sizing, number of objects and the data.

23. Compressed File Format Compression file can be used to reduce the file size, to speed transmission for networked applications or store large numbers of images on CD, others.

24. Compressed File Format Graphic Interchange Format (GIF). ◦ Developed by Compuserve for moving images and popular format in WWW. ◦ Limited to 256 colors. ◦ Include information about the file format, layout of the data, image characteristics (height, width), color depth, color table (palette) and the image data.

25. Compressed File Format Tagged Image File Format (TIFF) ◦ Very high compression capability. ◦ Good for black and white images. ◦ Used extensively in publishing and fax applications.

26. Compressed File Format Joint Photographic Experts Groups (JPEG and JPG). ◦ A 24-bit color image in small size file. ◦ Used commonly in WWW.

27. Image Sizes It refer to height and width of the images and measure in inch, cm, dot or others units. WIDTH HEIGHT

28. Image Sizes It also determine the display form and time requirement to display on the screen. EX: 640 pixel x 480 pixel. 1280 pixel x 1024 pixel.

29. Using Graphic for Multimedia Purpose : ◦ Images should be useful and meaningful to the application. ◦ Avoid images with little relation with the content. ◦ Don’t use many images in single display. Quality : ◦ Careful with color depth especially for applications display on lower color capability. ◦ Aware with image size and avoid bright color.

30. Using Graphic for Multimedia Cost : ◦ Copyright and ownership of graphics will determine who is to be paid.

31. Graphics Software Drawing programs – used to create draw- type graphics. Example Adobe Illustrator Paint programs – used to create bitmap images. Example Paint Shop Pro Image editing programs – useful in making changes, or applying textures or patterns to existing images. Example Photoshop.

32. Graphic Image Sources Alternative image sources ◦ Clip art ◦ Stock photographs ◦ Video images ◦ Still images ◦ Scanned images ◦ Photo CD’s ◦ Screen-capture programs

33. Image Sources and Input Scanner : ◦ Have the ability to digitize an image opens up a world of graphic sources. ◦ Scan images, photo, newspaper articles, magazines pictures and etc. Digital cameras : ◦ - Take a photo and download to pc and do editing straight away.

34. Image Sources and Input The Web : ◦ WWW have a lot of source of images and content. ◦ Can be download and edited after request from the owner. Clip Art : ◦ Include clip photo, video clips and animation clip. ◦ Corels Professional Photos CD-ROM series and Photodex’s Picture factory series, MetaCreations and Photo Disc and etc.

35. Clip Art from Web ArtToday (Zedcor) Professional Images http://www.arttoday.comhttp://www.arttoday.com http://www.barrysclipart.com/ http://www.clipart.co.uk/index.shtml http://www.1clipart.com/ http://www.free-clip-art.com/