1. CHAPTER 4 : MULTIMEDIA DEVELOPMENT 4.2 MULTIMEDIA ELEMENTS 4.2.2 IMAGE/graphic/picture

2. Learning Outcomes At the end of the lesson, students should be able to : Define Image Describe the purpose of using image in multimedia Describe types of image Identify sources of image Identify different types of file format

3. What is Image A graphic or graphical image is a digital representation of non-text information such as a drawing, chart or photo” (Shelly & Vermaat,2012) “Images are lines, circles, boxes, shadows, colours, and others, made by a drawing program.” (Agnew and Kellerman (1996)) According to the 'Dewan Bahasa and Pustaka' dictionary, images = something to do with painting or carving. Image are static picture which is used in presenting highly effective information. To explain concept that are difficult to be described with the use of text.

4. Purpose Of Using Image In Multimedia To present information more attractively. To illustrate ideas or concept through still pictures. to add emphasis, direct attention, illustrate concepts, and provide background content.

5. Types Of Image There are two types of images used: 1. Bitmaps (paint images) and 2. Vector (draw images).

6. Types Of Image - BITMAP 1. Bitmaps ( Paint images) Represents the image as an array of dots called pixel. Advantage: High quality pictures which is an image displayed realistically. People can share and edit an image. Easy to create Disadvantage: Quality of image can be poor when an image is enlarged. Larger file size for image Take time to load, send and receive an image It is more difficult to print bitmap images using a limited amount of spot colors

7. Quality of bitmap image when its enlarged

8. Types Of Images - VECTOR 2. Vector (draw images) Represent an image as geometric shape,such as lines,rectangles,ellipses,arcs,curves and etc. All images created are stored as set of instruction inside computer. Produced by the use of specific software and computer technology- CorelDraw,Macromedia Freehand,Adobe Illustrator.

9. Types Of Images - VECTOR Computer-aided design(CAD)programs. Graphic artists designing for the print media. 3-D animation programs. Applications requiring drawing of graphic shapes. Application of Vector-drawn Images

10. Advantages Vector images are easily scalable - quality of image not change when an image is enlarged Use less memory space Smaller file size as compared to bitmaps. It can proportionately resized without losing the integrity of original image. Disadvantages Less realistic More complicated images,bigger files & take more time to upload on the computer screen. Limited level of detail that can be presented in an image. Need time and talent to create an image. VECTOR IMAGE

11. Vector-Drawn Images v/s Bitmaps Bitmap ImageVector image Bitmap images can be used for photo realistic images Vector images cannot be used for photo realistic images Bitmaps are not easily scalable and resizable vector are easily scalable and resizable bitmap-based files require more computer memory for file storage vector files require less computer memory for file storage Bitmap/

12. Sources of Images Scanner Clip Art and Stock Photography Digital camera Produce your own image Sources Of Image

13. 1.Scan by Scanner Scanning an image or photograph is one way of getting images for ready made applications. Is able to change images, text, drawings and photograph from analog to digital forms. A good quality scans depend on the number of resolutions of the scanner. Can digitize and convert graphics to bitmap images. Can convert text document to files that can be manipulated by the computer.

14. 2.captured using Digital cameras Can produce a digital image quickly and easily. Captured images in digital form and can be uploaded into a computer instantly. These images may be manipulated. And can be imported into a authoring software when needed.

15. 3.copy from Clip Art, and Stock Photography Clip Art can be obtained from CD_ROM's and through online services. Clip Art and useful graphics are bundled together with many graphics applications. The collection of Clip Art may contain a mixture of many images or series of graphics. Also include photographs, sounds and videos. Example : Corels and Micrographic.

16. 4. Self-produced images Can produce your own image or hire graphic designers to create image that you require. Graphic designers are trained to capture the images in your mind to digital reality form. With the aid of sophisticated graphic software available in the market, graphic designers can produce attractive images with unlimited creativity.

17. File Formats JPEG/JPG - (Joint Photographer Experts Group) GIF - (Graphics Interchange file format) BMP - (Bitmap) XCF - (eXperimental Computing Facility)

18. 1. JPEG/JPG file format Jpeg format is used for colour photographs, or any pictures with many blends or gradients and can support 16millions color. Joint Photographic Experts Group, the original name of the committee that wrote the standard. Supported on the Web.

19. 1. JPEG/JPG file format Lossy compression technique,designed to compress color and grayscale continuous-tone images. Support 16 million colors. This format became popular with the invention of the digital camera.

20. 1. JPEG/JPG file format Advantages Most programs can display, open, and save JPEGs. JPEGs are great for e ‑ mail because of their small file size. Huge compression ratios mean faster download speeds Because you can vary the amount of compression used to save a JPEG, you can control the file size and image quality. Best suited for photographs and complex graphics.

21. 1.JPEG/JPG File Format Disadvantages: JPEGs automatically compress pictures. - If you use a high-compression level, the image quality can be poor Does not work well on line drawings, lettering or simple graphics. Not good with sharp edges and tends to blur them a bit - image loses clarity and sharpness

22. Example of (JPEG/JPG) file format

23. 2. GIF File Format Stand for Graphic Interchange Format (GIF/.gif). Developed by Compuserve for moving images and popular format in WWW.

24. 2. GIF File Format Standard format for web page images,support by all browser. Limited to 256 colour - unsuitable for reproducing color photographs. Is a bitmap image format.

25. 2. GIF File Format Use lossless compression,quality image is not decreased when it saved. Interlaced image

26. 2. GIF File Format Advantages:- Permit transparency and animation. Works well for simple text-based images, line drawings, screenshots, cartoons, animations or black and white graphics Used for fast loading web pages. Also makes a great banner or logo for your webpage

27. Example Images of GIF and JPEG

28. 3.BMP File Format Known as Bitmap Image File Is a Raster graphics image file format The BMP File Format is capable of storing 2D digital image Handles graphics files within the Microsoft Windows OS

29. 3.BMP File Format Advantages It can display a picture realistically. Made up out of pixels, which is basically a colored dot. People can share and edit pictures. Disadvantages It does not tend to resize very well Large file size. File can take a long time to load, send, or receive.

30. 4.XCF File Format Is the native image format of the GIMP image-editing program. It supports saving each layer, the current selection, channels, transparency, paths and guides. Mostly backward compatible.

31. 4.XCF File Format Is the native image format of the Adobe Photoshop program. It supports saving each layer, the current selection, channels, transparency, paths and guides. For example, GIMP 2.0 can save text in text layers while GIMP 1.2 can not. Text layers saved in GIMP 2.0 will open as ordinary image layers The image data saved are compressed only by a simple algorithm, but GIMP supports compressed files, using either gzip or bzip. The compressed files can be opened as normal image files.

32. Other format file for graphic.png.psd.tiff

33. Graphic Editor (software used to create and edit graphic) Adobe Photoshop GIMP CorelDraw Adobe Ilustrator

34. Define Image Describe the purpose of using image in multimedia Describe types of image Identify sources of image Identify different types of file format Summary