Images

1. Images • Understand the visual elements that make up the MM screen

2. Which would you use to learn about water cycle?

3. Manipulate images: • Scale images to different size • Color or make images transparent • Placed behind or in front of other objects • Blend the colors • Add effects

4. So You Want to be a Designer? • How to create the graphics • Learn packages and tools to change the effects • But need to know the concepts

5. Originate Graphics Non-digital medium (paper copy of a photo) Outside world Create image

6. What is an Image? • An image is represented by a grid (matrix) of squared Picture elements called pixels • A pixel is the smallest image component and thus shows the smallest detail • Arranged in column and rows

7. Each pixel is a numerical value A 640-by-480 screen is capable of displaying 640 distinct dots on each of its 480 (rows) lines, or about 300,000 pixels. A 800-by-600 screen is capable of displaying 480,000 pixels.

8. How are Colors Coded?Gray Levels • If a pixel color is represented by 1 bit only • Value 0 = Black • Value 1 = White • If a pixel color is represented by 2 bits • Value 00 = Black • Value 01 = Grey • Value 10 = Light Grey • Value 11 = White

9. How are Colors Coded?Gray Levels • 1-bit color • Actually even with only black and white (no gray), an image can look surprisingly realistic: http://

10. How are Colors Coded?Gray Levels • More bits, more shades (grey levels) • 4 bits  24  16 grey shades • (0000, 0001,0010, 0100, 1000 etc.

11. How are Colors Coded?Gray Levels 2-bit color

12. Color Model

13. How are colors coded? In “true color”, each pixel represents some color shade Uses _______ representation = 16 million colors Color can be expressed in: • RGB code • Hexadecimal code

14. How are colors coded? RGB Code: • Each pixel is represented by 3 values • ie. Light yellow = <255,255,127> • Syntax: Each value: • ranges from 0 – 255 • 256 color shades= _____bits

15. Before you start • Plan your approach: Do not start drawing images, importing clip files, or using ready made screens. • Instead outline your project and graphic ideas first. • Make flow charts • Storyboard the project using stick figures • Use index cards

16. Before you start • Organize your tools: most authoring systems provide the tools to create the graphic objects. If one of the tools are not included, there will be a way to import it. • Multiple monitors: It is helpful to have multiple monitors or high resolution screen during development of a MM project since: • You may need to open different windows (stage, score, … etc) • You may want to open different application

17. Making still pictures • Still pictures may be the most important media in the project • They are two types of images • Bitmap: used for real images & complex drawing • Victor shape: used for regular geometric shapes The appearance of both depends on the hardware resolution (number of points/inch) • Image files are huge and saved compressed • Director uses file such as: BMP, GIF, JPEG, PNG, TIFF

18. Types of Graphics Graphics are categorized as being either Bitmap or Vector Affects how the graphics are displayed on a computer screen

19. Bitmap • Is a simple information matrix describing the screen pixels. One bit is used to describe monochrome screens. • More bits are needed to describe color screens. • For example 8 bits per pixel supports 256 different colors and • 24 bits per pixel supports 16,7772,216 colors. • The screen pixels are redrawn in 1/60 second. That is 60 times per second

20. Bitmap Graphics • Matrix of ‘pixels’ • Difficult to re-size • Suitable for photographs

21. Types of Graphics Bitmap Graphics As the image is made larger (resize not zoomed) • Dots become larger , edges more jagged • Quality decreases • File size increase Advantages of using a small image rather than a larger one: ______________________________________________ Disadvantages:

22. Activity • Draw an oval in MS Paint, then select it and resize it, watch what happens (bitmapped)

23. Where do bitmaps come from? How are they mad? • Make it from scratch with paint program • Grab a bitmap from an active screen and paste it into a paint program or your project • Capture a seen from TV using video capturing • Scan a photo or artwork • Film a seen using digital camera • From suppliers of clip arts

24. Clip art • If you do not want to create your own images, you can get bitmaps from suppliers of clip art. • They come on CDs or downloaded from the internet. • Once obtained, a bitmap can be manipulated and it is properties (such as: size, brightness, hue تدريج اللون, contrast, and color depth) can be altered. • There are image editors allowing bitmap editing.

25. Image/Graphics Editing • Adobe Photoshop • Allows layers of images, graphics and text • Includes many graphics drawing and painting tools • Sophisticate lighting effects filter • A good graphics, image processing and manipulation tool • Macromedia Freehand • Graphics drawing editing package • Many other editors in public domain and commercially

26. Victor shapes • Most MM authoring systems provide tools to draw victor shape such as lines, rectangles, and polygons • Objects are stored and described using vectors • Used in • Creating complex and geometric rendering needed by architects • Designing print media since putting a rectangle on a screen is the same as putting it on paper. • 3-D animation.

27. Victor-Drawn objects versus Bitmaps

28. Converting between images

29. Types of Graphics Vector Graphics • Image is represented withlines and arcs that have a mathematical relationship • describes the drawing of the shape To draw a: Line- starting point, _________________ Rectangle:- start point, ______________ Circle:- ___________________

30. Types of Graphics Vector Graphics As the image is enlarged • Dots become larger , edges still clean, crisp • Quality is maintained • File size increase

31. Activity • Draw an oval in Adobe Illustrator, then select it and resize it, watch what happens (vector based)

32. Dithering I • Dithering is the process that a program uses when it cannot display the full range of colors in a particular image. • For example, if a gradient is to be displayed on a system that does not have the hardware needed to display all of the shades that make up the gradient (see first figure) then the software may dither the image (see the second figure).

33. Dithering II • Each pixel must be replaced with a corresponding pixel in the target palette. • Adjacent pixels are examined and intermediate colors may be used • Dithering software is built into most bitmap editing/processing software • Algorithms: • Random • Average • Ordered • Floyd-Steinberg

34. Average • The Average Dithering is a basic two-level algorithm for halftone image. • Choosing a certain constant gray level, in  particular the average value of image pixels, and using it as a global threshold in deciding whether a pixel should be quantized to 0 or to 1. • All pixels whose intensity level lies above the average value (the threshold) are quantized to 1; all others get a value of 0. • This method is simple to implement but it has a disadvantage: quantization contouring is quite perceptible. 

35. Random • It is not really acceptable as a production method, but it is very simple to describe and implement. • For each value in the image, simply generate a random number 1..256; if it is greater than the image value at that point, plot the point white, otherwise plot it black. • This generates a picture with a lot of "white noise", which looks like TV picture "snow".

36. Ordered • We can express the patterns in compact form as the order of dots added: •   8 3 4 and 1 7 4 • 6 1 2 5 8 3 • 7 5 9 6 2 9 • Then we can simply use the value in the array as a threshold. • If the value of the pixel (scaled into the 0-9 range) is less than the number in the corresponding cell of the matrix, plot that pixel black, otherwise, plot it white. This process is called ordered dither.

37. Floyd-Steinberg • The error dispersion technique is very simple to describe: for each point in the image, first find the closest color available. Calculate the difference between the value in the image and the color you have. • Now divide up these error values and distribute them over the neighboring pixels which you have not visited yet. • When you get to these later pixels, just add the errors distributed from the earlier ones, clip the values to the allowed range if needed, then continue as above. • There are many ways to distribute the errors and many ways to scan the image. Example left to right top to bottom. • X 7 This is the Floyd and Steinberg • 3 5 1 error diffusion filter. • X represents the pixel you are currently scanning

38. Dithering III

39. Dithering Technique • Can lower download time

40. Dithering Technique • Can lower download time • Dithering is the most common method of reducing the color range of images down to the 256 (or fewer) colors seen in 8-bit images 8 colors – no dither - 8 colors – dither - Onion.jpg

41. File Formats • wide variety ofFile Formats • different file formats are suitable for different purposes Universally supported files • Universally supported by graphics industry • Examples: .JPG, .GIF Proprietary files( Native Files ) • Default file format used by a specific software application. • can be Bitmap or vector formats • Examples: . Photoshop, AutoCAD, MacPaint

42. File Formats: Native Files • Features: • not meant to be transferred to other applications • software-specific image properties can only be retained when an image is saved in the software's native format ie. Layering is preserved in Photoshop • When an image is being sent to another application it should be converted or exported to another native or universal

43. Examples of Native File CDR - CorelDRAW CPP - Corel Photo-Paint PSD - Adobe Photoshop PDD - Adobe PhotoDeluxe AI - Adobe Illustrator AUP – Audacity MVMM - Moviemaker UFO - Ulead PhotoImpact PSP - Paint Shop Pro

44. Graphics Interchange Format (GIF) • Devised initially for transmitting graphical images over phone lines via modems • Uses the Lempel-Ziv Welch algorithm (a form of Huffman Coding), modified slightly for image scan line packets (line grouping of pixels) • Limited to only 8-bit (256) color images, suitable for images with few distinctive colors (e.g., graphics drawing)

45. GIF • Better for flat color fields: clip art, cartoons, etc. • Transparent color setting • Transparency is the feature of the GIF89a format which allows for the specification of one of the colors in the palette to be ignored while processing the image for display purpose • Animated GIFs • Allows timed display of images in sequence, giving the effect of animation • Interlaced delivery downloads low resolution image before whole image arrives • It is a mechanism that makes images appear faster on-screen • First pass has pixel rows 1, 9, 17, etc (every eighth row) • Second pass has rows 5, 13, 21, etc. (every remaining fourth row) • Third pass has rows 3, 7, 11, 15, etc. (every remaining odd row) • Fourth pass has rows 2, 4, 6, etc. (all the even-numbered rows) • Cross platform

46. By Changing the Color Depth • Can lower download time IF CHANGE BIT DEPTH 8-> 5 BITS ORIGINAL

47. GIFs – “Lossless “ compression does not get blurry or messy this compression never degrades the image quality. Image Optimization:COMPRESSION TECHNIQUES Goal: reduce file size Thus …downloads faster images SAVE SAVE

48. How does a GIF do it’s compression? • Assume this is an image we want to compress. Say the image is 100 pixels high and 200 pixels wide, so we would have to store info about 20,000 pixels. • We need to store the color of every pixel • NOTE: • the yellow is: #FFFF00 • the green is: #00CC99 100 pixels high 200 pixels wide

49. First lets see how a BMP might store it! • BMP has no compression –large file • A BMP stores the information about each pixel, one at a time, so the BMP file would look something like this:(Starting at the top, left corner, going left to right, ending at the bottom right) • Each color is 1 byte, so that is 20,000 bytes of information we are storing #FFFF00#FFFF00#FFFF00#FFFF00#FFFF00…#FFFF00#00CC99#00CC99…#FFFF00 YellowWithGreen.bmp

50. Can you guess one way a GIF might accomplish compression? • Can anyone think of a way to store the data about the color of each pixel, without losing any information (lossless compression) and do it in less than 20,000 bytes (0,100) 0,0, (200,100)  HINT (0,0) (200,0)