1. EEE3112 Introduction to Multimedia Application & Technology Chapter 1: Image Development by Muhazam Mustapha, September 2012

2. Learning Outcome
By the end of this chapter, students are expected to be ready to demonstrate the required skill for CO1:
Basic theory of digital images
Perform filtering on images
Perform transformation on images
Developing images by layers
Developing images by masking

3. Chapter Content Basic Theory on Digital Image Adobe Fireworks CS6:
Workspace and Tools
Filtration
Transformation
Layers
Masks

4. Digital Image

5. Definitions There are 2 types of image: raster and vector
For our class we will cover only raster images which is defined as:
Matrix structure of pixel values
Digital image can also be viewed as electronic signals arranged in 2 dimensional structure
Dimension: width (no. pixels in horizontal direction), height (no. pixels in vertical direction)
Resolution: no. of pixels per inch of dimension
Normally the vertical and horizontal resolutions are the same for an image

6. Definitions
Pixel: smallest element that represents the color value at certain point in the image
Individual pixels

7. Image Colors
Color is the value that is represented by each pixel in an image
The color can be either black and white with gray scale or in true colors
The pixels consist of a few no. bits
The more no. bits in each pixel the color would be more realistic (or the gray scale is more smooth) – but the image size would be larger

8. Color Models Color modeling is the way we represent colors as numbers
For our class we will use the mostly used color model in digital imaging, i.e. RGB (red-green-blue) model
This model is based on the fact that any color can be produced by mixing the 3 primary colors (red, green and blue) in different intensities
This model is called additive color model because it produces new colors by adding the primary color – used in displays

9. Color Models RGB Additive Cube Blue Cyan Magenta White Black (behind)
Green
Red
Yellow

10. CMYK with black – save cost on the 3 expensive colors
Color Models
For printing machines, CMYK (cyan-magenta-yellow-black) model is used because the colors mixed in printing ink / toner act by absorbing light (subtractive)
CMYK without black
CMYK with black – save cost on the 3 expensive colors

11. Color Models
Human vision recognizes color not only as the mixture, but also as intensity (lightness), hue and saturation
To use the above color features, color scientists created 2 more color models: HSV (hue, saturation, value) and HSL (hue, saturation, lightness)

12. Primary Colors The concept of primary color depends on the model used
Only RGB and CMYK have primary colors
RGB: primaries are red, green and blue
CMYK: primaries are cyan, magenta and yellow (black is not primary)

13. Alpha Channel Also called transparency value of pixels
opposite of transparency in opacity
Transparency value indicates how much the pixel reveals the pixel behind it if overlapped
Opacity value indicates how much the pixel hides the image behind it
Alpha channel is the extra value that some image formats add to its representation of pixel besides the value of the color model it uses

14. Image Display Size
Display devices need memory to keep the images it displays
The size in bytes of the required memory is calculated as: width × height × bytes per pixel
Bytes per pixel is: no. color × bit per color / 8
alpha channel is counted as color
Example: Calculate the display size for a 4 bit gray scale image with 4 bit alpha channel with 100 pixel width and 50 pixel height
Display size = 100 × 50 × (2 × 4 / 8) = 5000 bytes

15. Image Format
Image formatting is the scheme to store pixel values in a standard way as files
Image can be stored as raw data (equivalent to or more than the display size) or compressed
In MS Windows, the raw image format is stored as bitmap format (.bmp)
The compression can be lossy or lossless:
Lossy: where compressing and decompressing of data do not restore the exact original data
Lossless: where compressing and decompressing of data do restore the exact original data

16. Image Format All practical image formats employ compression
JPEG (.jpg)
Joint Photographic Experts Group
Employs lossy compression using 2D DCT (discrete cosine transform) – a kind of Fourier transform
Doesn’t support alpha channel
Doesn’t support animation / frames
Compression and bits per pixel per color can be adjusted
Normally yields the highest compression ratio

17. Image Format GIF (.gif) Graphics Interchange Format
Proprietary of CompuServe
Palette of 256 colors approach – fixed color assigned to 1 palette value
Supports 1 bit alpha channel
Supports animation / frames
Employs lossless compression of Lempel-Ziv-Welch (LZW)
Compression can be adjusted by reducing no. palette
Image quality deteriorates significantly if no. colors is much larger than 256

18. Image Format PNG (.png) Portable Network Graphics
Open source version of GIF
Can keep true color values like in JPG or palettes like in GIF
Supports multi-bits alpha channel
Supports animation / frames
Employs lossless compression

19. Image Format Bitmap (.BMP) Other formats: TIFF, RAW, PPM, etc
Raw format – does not employ any compression
Hence it is the format that produces largest file
Does not support alpha channel nor frames
Keeps the original unprocessed color value, but least useful for internet due to its size
Other formats: TIFF, RAW, PPM, etc

20. Adobe Fireworks

21. Why not Photoshop?
Both Fireworks and Photoshop currently belong to Adobe and are image editing applications
Adobe obtained Fireworks after it acquired Macromedia, the original owner
Both uses almost the same workspace and editing approach – the key difference is in their capability to handle vector graphic (drawing)
Photoshop is less capable since it relies on Adobe Illustrator while Fireworks not
Fireworks is chosen so that we can handle drawing better

22. Workspace
Work area
Tools
Panels
Layers Panel
Properties / Filters

23. Tools Tools are used to edit the image Object Selection
Bitmap Selection – lasso & rectangle
Brush
Pencil
Rubber Stamp
Gradient
Text
Pen
Shape, Line
Color, Eye Dropper
Crop, Canvas Sizing
Check Property, Panel

24. Filter Blur Sharpen Contrast Brightness Levels Effects:
Filters are tools that make complicated effects automatically by one click
Blur
Sharpen
Contrast
Brightness
Levels
Effects:
Emboss
Shadow
Bevel
Glow

25. Transformation Scale Flip Rotate Skew Free Transform
Transformation is the process that alters geometrical look of image or layer
Scale
Flip
Rotate
Skew
Free Transform

26. Layer & Mask
Layers are logical stacking of objects used in Fireworks in an image during its development
With layers, designers can edit objects in an image independently
Mask of a layer is a non-destructive (decoupled) pixel-by-pixel definition of transparency
Layers can be blend with other layer through masking
Your skills with layers and masks are the key skills that you need in order to become a professional graphics designer

27. Minimum Skills Cropping (to choose only certain part from image)
Select the area to crop
Choose: Edit -> Crop document
Resizing (change height & width)
Choose: Modify -> Canvas -> Image size
Canvas resizing (change work area size, but the layers / elements sizes)
Canvas rotate
Choose: Modify -> Canvas -> Rotate (180/CW/CCW)

28. Minimum Skills Sharpening
For destructive, choose: (make sure the image / layer is selected) Filter -> Sharpen -> Sharpen
For non-destructive (Live Filter), do: (make sure the image / layer is selected) Click the ‘+’ sign next to the ‘Filter’ word in Properties panel (at bottom normally) -> choose filter & change parameters accordingly

29. Recipe of Effects Fireworks, however, is lacking of built-in effects
This is not a problem to the professionals as we can find numerous recipes for unlimited kind of effects from the internet, and with better control compared to built-in ones
You are required to find recipes on your own as your lifelong learning, and you are NOT to be credited for any ‘few-clicks-effects’ that you obtained from the built-in stock

30. Recipe of Effects
You can Google for any freely available tutorial on recipes in the internet
Use keywords like: adobe firework effect recipe (with the keyword of the effect you are looking for)
Some useful sites:
[Photoshop]: