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
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
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
What is an Image?
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.
Each pixel is a numerical value
If a pixel color is represented by If a pixel color is represented by 1 bit1 bit only onlyValue 0 = BlackValue 0 = BlackValue 1 = White Value 1 = White
If a pixel color is represented by If a pixel color is represented by 2 bits2 bitsValue 00 = BlackValue 00 = BlackValue 01 = GreyValue 01 = GreyValue 10 = Light GreyValue 10 = Light GreyValue 11 = WhiteValue 11 = White
How are Colors Coded?Gray Levels
9
1-bit color Actually even with only black and white (no
gray), an image can look surprisingly realistic:
http://
How are Colors Coded?Gray Levels
More bits, more shadesMore bits, more shades (grey levels) (grey levels)
4 bits 4 bits 2 244 16 grey shades 16 grey shades (0000, 0001,0010, 0100, 1000 etc.(0000, 0001,0010, 0100, 1000 etc.
How are Colors Coded?Gray Levels
In “true color”, each pixel represents some color shade
Uses 24 bits representation = 16 million colors
Color can be expressed in:
1. RGB code
2. Hexadecimal code
How are colors coded?
• Each pixel is represented by 3 values
• ie. Light yellow = <255,255,127>
• Syntax: Each value:• ranges from 0 – 255• 256 color shades= ? bits
RGB Code:
How are colors coded?
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
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
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
Graphics are categorized as being either
Bitmap or Vector
Types of Graphics
Affects how the graphics are displayed on a computer screen
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
Bitmap Graphics As the image is made larger
• Dots become larger , edges more jagged• Quality decreases• File size increase
Advantages of using a small image rather than a larger one: it is clear
Disadvantages: small
Types of Graphics
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
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.
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
Vector Graphics 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: - ___________________
Types of GraphicsTypes of Graphics
Vector GraphicsAs the image is enlarged
•Dots become larger , edges still clean, crisp•Quality is maintained •File size increase
Types of GraphicsTypes of Graphics
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.
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
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).
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
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.
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".
Ordered We can express the patterns in compact
form as the order of dots added: pixels Threshold
8 3 4 7 8 9 6 1 2 6 1 2 7 5 9 5 4 3 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.
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.
Floyd-Steinberg There many ways to scan the image.
Example left to right top to bottom.
There are many ways to distribute the errors
X 7 This is the Floyd and Steinberg 3 5 1 error diffusion filter. X represents the pixel you are currently
scanning
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.jpg8 colors
– no dither - 8 colors
– dither -
Dithering TechniqueDithering Technique
• Can lower download time
• 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
File Formats
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
File Formats: Native Files
CDR - CorelDRAW CPP - Corel Photo-Paint PSD - Adobe Photoshop PDD - Adobe PhotoDeluxe AI - Adobe Illustrator AUP – AudacityMVMM - MoviemakerUFO - Ulead PhotoImpact PSP - Paint Shop Pro
Examples of Native File
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)
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
Goal: reduce file sizeThus …downloads faster images
GIFs – “Lossless “ compressionGIFs – “Lossless “ compression does not get blurry or messy does not get blurry or messy this compression never degrades the image this compression never degrades the image
qualityquality. .
SAVE SAVE
Image Optimization:Image Optimization: COMPRESSION TECHNIQUESCOMPRESSION TECHNIQUES
47
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
48
First lets see how a BMP might store it! 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
49
Can you guess one way a GIF might Can you guess one way a GIF might accomplish compression?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,0,(0,100)
HINT
(200,0)(0,0)
(200,100)
50
Solution:Solution:
0,0,
Record:
startx,starty,endx,endy,color0,50,200,100, #FFFF00 0,0,80,50, #FFFF00 80,0,130,20, #FFFF00 130,0,200,50, #00CC99 80,20,130,50, #FFFF00
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!
(200,0)
(200,50)(0,50)
(0,0)
(200,100)(0,100)
(80,0)
(80,50) (130,50)
(130,0)
(130,20)(80,20)
51
Looks for patternsEx. 123451234512345
If “1” represents pattern 12345 Compresses it to “1111”
Builds a decoding hash table 0 13245 1 22345 2 23423 3 11223
Etc.
Another Algorithm for .gif
Pattern:13245234232234511223
0213
Common image format used on the internet Cross platformJPEG 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
FILE FORMATS: FILE FORMATS: Joint Photographic Expert Group assumptions (JPEG)
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
54
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.
How does a JPEG perform compression?How does a JPEG perform compression?
Observations:
1. The quality of a JPEG file is proportional to the file size
95% compression = 2KB5% quality
75% compression = 6KB25% quality
50% compression = 9KB50% quality
25% compression = 12KB75% quality
0% compression = 50KB100% quality Quality
File Size
Compression (smaller value)
Quality
File Size
2. A higher image quality setting (has a lower compression value) results in less data being discarded.
JPGs – “Lossy compression”JPGs – “Lossy compression”
56
Image Optimization:Image Optimization: Compression Compression Technique - .JPGTechnique - .JPG
Quality
File Size
Compression
Quality
File Size
Design Considerations - continuedDesign Considerations - continued
Compression: 10Size: 29,864 Bytes.
Compression: 20Size: 19,100 Bytes
Compression: 30Size: 11,543 Bytes
Compression: 40File size: 7,742 Bytes
Image Optimization – reduce Download timeImage Optimization – reduce Download time
When should I use .JPG and .GIF???
.GIF.GIF .JPG.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
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.
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.
--- 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)
Interlacing TechniqueInterlacing Technique Downloading Fast