Image and Graphics

This detailed mind map presents the foundational concepts and techniques of digital imaging and graphics. It covers various aspects such as image technology, color models like RGB and CMYK, and image file formats. The map further explores bitmap and vector images, delineating their differences and appropriate use-cases. It also touches upon more advanced topics like image editing, web graphics, and the interplay between pixels and resolution, providing a comprehensive overview for anyone interested in the field of digital graphics and image processing.

Edited at 2023-11-21 08:02:00

WS9HaU1k

Image and Graphics

WS9HaU1k

Recommended to you
Outline

design method
- 117
- 2
- 1
Oliveettom
wireframe magnata FC
- 350
- 1
Roy Mustang
Runway Curls
- 70
- 1
Captain O Captain
(8) Scaling and Instrument Design
- 93
- 1
- 1
Captain O Captain
The Design of App
- 173
- 5
- 1
Fiona_
Cardboard Chair Design
- 93
- 1
Fiona_
Learning Design and Technology
- 104
- 3
Fiona_
The Design Process
- 206
- 7
Fiona_
Design and Worldviews
- 65
- 1
- 1
Fiona_
Design Technology
- 175
- 1
Study Smarter

Image and Graphics

Images : A digital image consists of a matrix of pixels

Pixel - the smallest element on a digital image - each pixel contains a small area of the image

Each pixel contains a combination of RGB values

The total number of pixels is the resolution of a picture or a display monitor

Resolution measures how much detail an image can have

Image resolution is the number of pixels in an image (320 x 240 = 76800 pixels)

Display (Monitor) resolution - refers to number of dots per inch (dpi) on a monitor (Windows have 96dpi resolution)

Output resolution - refers to numbers of dpi on a hard copy output device (Printers have 300dpi or 600dpi resolution)

Byte - the smallest useful object for storing numbers on a computer - a byte represents eight bits, each pixel requires 24 bits to store all its color information

Sampling - to digitized an image

Bitmap images

- photo realistic images e.g scanned photo

- each pixel requires one byte for each color index for a total of three bytes per pixel

Monochrome just requires one bit per pixel (0 or 1), representing black or white

Dithering is often used for displaying monochrome images

Grayscale - each pixel stored as a byte (between 0 to 255)

a dark pixel may be value of 10, a bright one may be 240

- more bits, more colour, the size will be bigger

- the extra byte of data for each pixel is used to store an alpha value representing special effect information

Bitmapped graphics are huge entities, and they become bigger still as they get better looking

BMP (bitmap image file) is a system dependent format - capable of storing 24-bit bitmap images

Vector Graphics

- graphics shapes such as lines, boxes, circles, polygons that can be mathematically expressed in angles, coordinate and distances

- objects can be represented by their attributes, such as size, colour, location (known as vector graphics or vector drawing)

Languages for describing vector graphics : PostScript and VRML (Virtual Reality Markup Language)

SVG (Scalable Vector Graphics) for describing two-dimensional graphics in XML - allows shapes, images and text

Advanced Image Editing

Image editing programs allow you to insert and remove images from photos

Enable you to alter and distort images, add and delete elements

Morphing blends two images so that one seems to "melt" into the other

Standard System Independent Format

GIF (GIF87a, GIF89a) : Graphics Interchange Format limited to only 8 bit colour images, suitable for images with few distinctive colours

Supports interlacing & GIF89a supports simple animation and transparency index

JPEG - a standard for photographic image compression created by Joint Photographic Experts Group ; for continuous tone images, such as full-colour photographs

Lossy compression which allows user to set the desired level of quality/compression

TIFF : Tagged Image File Format stores many different types of images (e.g grayscale, bitmap) ; a typically lossless format

PNG - Portable Network Graphics support up to 48 bits per pixel (more accurate colours) and also support progress display through 8x8 blocks

Support description of gamma-correction & alpha-channel for controls such as transparency

Gamma & Colour Palette

Gamma refers to the overall brightness of the display of a computer monitor

The higher the gamma value, the darker the display

The relationship of voltage and the light intensity

Colour palette is an index table for available colours in an indexed colour system

Colour Look-Up Tables (LUTs) store only the index of the colour LUT for each pixel

RGB Values

Decimal - ranging from 0 to 255 ; 51-51-255

255-255-0 -> yellow ; 255-0-255 -> magenta ; 0-255-255 -> cyan ; 127-127-127 -> light gray ; 255-255-255 -> white ; 0-0-0 -> black

Hexadecimal - only six characters to describe RGB color ; 3333FF

Percentage ; 20%-20%-100%

Image Size Calculation : [(Height in pixels) x (length in pixels) x (bit depth)] / 8 x 1024 = image size in kilobytes (KB)

Bit-Depth = Color-Depth ; number of colours = 2^(bit-depth)

Bit-depth is the number of bits (also called "Color resolution"

Colour Models

Additive Colour : RGB - mixing two colours results in a brighter colour

Substractive Colour : CYMK - mixing two colours creates a darker colour

The primary colours are cyan, magenta, yellow - where 3 inks overlap, results in black or gray (e.g colour model for printer's ink)

HSB (hue, saturation, brightness) and HSL (hue, saturation, lightness) specify colours as an angle from 0-360 degrees on a colour wheel and SBL as percentages

Image Techniques

Dithering - a process whereby the colour value of each pixel is changed to the closest matching colour value in the palette, using a mathematical algorithm

This techniques groups a number of pixels together, say 4, to form a cluster. When viewed from distance, the cluster will look like a single block of a colour

Anti-aliasing - technique to reduce the staircase effect, works by filling in pixels that are half filled with different levels of gray or matching gray, the result is sharper edges