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

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

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

Digital Image

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

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

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

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

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

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

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)

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)

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

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

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

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

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

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

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

Adobe Fireworks

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

Workspace Work area Tools Panels Layers Panel Properties / Filters

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

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

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

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

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)

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

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

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: http://adobe-fireworks.wonderhowto.com/ http://www.smartwebby.com/free_tutorials/adobe_fireworks_CS4_tutorials/ [Photoshop]: http://tutorial-index.com/blog/category/top-tutorials-of-the-week/