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:

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 Bitmap or Vector
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
Victor shape
Bitmap
Size: describing a colored square
Needs about 30 bytes
40k byte in 256 colored
When using animation
Takes less time
Takes longer time
Scalable
Without loosing quality
The quality may change
Used
Geometric objects
For oddly shaped with fine details

28. Converting between images

29. Types of Graphics Vector Graphics To draw a:
Image is represented with lines 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 ; 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:
  and
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 This is the Floyd and Steinberg
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
Onion.jpg
8 colors – no dither -
8 colors – dither -

41. Universally supported files Proprietary files ( Native Files )
File Formats
wide variety of File 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. Image Optimization: COMPRESSION TECHNIQUES
Goal: reduce file size
Thus …downloads faster images
GIFs – “Lossless “ compression
does not get blurry or messy
this compression never degrades the image quality.
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)

51. Record:
startx,starty,endx,endy,color 0,50,200,100, #FFFF00 0,0,80,50, #FFFF00 80,0,130,20, #FFFF ,0,200,50, #00CC99 80,20,130,50, #FFFF00
Solution:
0,0,
(200,100)
(0,100)
Store:
startx= 1 byte starty = 1 byte endx = 1 byte endy = 1 byte color = 1 byte Each shape: record 5 bytes Multiply by 5 shapes = 25 bytes!
(0,50)
(80,50)
(130,50)
(200,50)
(130,20)
(80,20)
(200,0)
(0,0)
(80,0)
(130,0)

52. Another Algorithm for .gif
Looks for patterns Ex
If “1” represents pattern 12345
Compresses it to “1111”
Builds a decoding hash table
Etc.
Pattern:
0213

53. FILE FORMATS: Joint Photographic Expert Group assumptions (JPEG)
Common image format used on the internet
Cross platform
JPEG stores full color information:
max of 24 bits/pixel (224 = 16 million colors )
Larger file sizes in comparison with .gif (because of bit depth 2 24)
....Larger file size but Full color scheme!
.jpg

54. Graphics file format: JPEG
A standard for photographic image compression and best for scanned photographs
Suitable for continuous tone images
JPEG image format stores an approximation of the original image.
Lossy compression which allows user to set the desired level of quality/compression
Areas with a lot of edge detail, where the contrast between short distances is high, will be given more 'attention'
Progressive JPEG downloads rough image before whole image arrives

55. How does a JPEG perform compression?
The designers of the JPEG compression algorithm realized that the human eye is more sensitive to brightness details than to fine color details. Thus JPG conversion programs
Try to save information about the brightness (give it more weight). If it finds two adjacent pixels with very similar colors, it will store both those pixels with the same color and discard the other color.
Human eyes process visual information are much more aware of detail of edges than gradual changes in surface-related color and/or texture variance.

56. JPGs – “Lossy compression”
Observations:
The quality of a JPEG file is proportional to the file size
0% compression = 50KB 100% quality
Quality
File Size
A higher image quality setting (has a lower compression value) results in less data being discarded.
Compression (smaller value)
Quality
File Size
25% compression = 12KB 75% quality
50% compression = 9KB 50% quality
75% compression = 6KB 25% quality
95% compression = 2KB 5% quality

57. Image Optimization: Compression Technique - .JPG
Quality
File Size
Compression
Quality
File Size

58. Compression Technique - .JPG
Quality
File Size
Compression Technique - .JPG
Compression
Quality
File Size

59. Design Considerations - continued
Does it show that much of a difference?
Will it matter on the web?

60. Design Considerations - continued
Compression: 10 Size: 29,864 Bytes.
Compression: 20 Size: 19,100 Bytes
Compression: 30 Size: 11,543 Bytes
Compression: 40 File size: 7,742 Bytes

61. Image Optimization – reduce Download time
When should I use .JPG and .GIF???
.GIF
.JPG
line art, logos, or illustrations
(preserves sharp detail) -significantly better on images with only a few distinct colors, such as line drawings and simple cartoons)
photos, computer game screenshots, stills from a movie
(realistic shots – JPG is superior to GIF for storing full-color or gray-scale images of "realistic" scenes)
8 bit color resolution max
24 bit color resolution (higher compression that .gif)
Lossless compression
“Lossy” format
Supports Dithering
Does not support dithering
Allows for transparency
Does not support transparency
Interlace process
Progressive jpeg
Animation
Not for animation

62. Other graphics file format
TIFF
Tagged Image File Format (TIFF)
Supports attachment of additional information (referred to as “tags”) provides a great deal of flexibility.
The most important tag is a format signifier: what type of compression etc. is in use in the stored image
TIFF can store many different types of image: 1-bit, grayscale, 8-bit color, 24-bit RGB, etc.
TIFF is a lossless format (when not utilizing the new JPEG tag which allows for JPEG compression
PNG
PNG format: standing for Portable Network Graphics —meant to supersede the GIF standard, and extends it in important ways.
Support for up to 48 bits of color information —a large increase.

63. Other graphics file format
Microsoft Windows: BMP
A system standard graphics file format for Microsoft Windows
Used in PC Paintbrush and other programs
It is capable of storing 24-bit bitmap images
PDF
Portable Document Format
Created by Adobe Systems  and used for representing documents in a manner independent of the application software, hardware, and operating system
Each PDF file encapsulates a complete description of a fixed-layout 2D document that includes the text, fonts, images, and 2D vector graphics which compose the documents.

64. Interlacing Technique Downloading Fast
--- How images are downloaded to your screen
Applies to .GIF files
Is a process by which the image is drawn in a series of passes rather than all at the same time (file size bigger)

65. Transparency Applies to .GIF files
allows the page background to display through the image so the image appears to have no visible border around it.

66. 3-D Drawing & Rendering
3-D objects are created or imported to MM project.
Ways of creating 3-D objects:
Using building components such as cones, cylinders, and cubes
Create a 2-D shapes and extrude it or lathe it
Once created it can be edit it (change its textures & color) to make it realistic
When 3-D scenes are modeled, lights are sat up to create diffuse انتشار الضوء or shadow; then a background is added and a camera view is set.
After scene is modeled, it must be rendered it to final output.

67. Panoramas
Viewing a single surrounding image as if you are inside the picture and able to look in all directions and zoom in features.
360 degree images are arranged as a sequence where the right edge attached to the left edge