Multimedia and Communication

Lecture #3 GRAPHICS

.And now for

Introduction to Graphics

Lecture 3 Overview
1. Intro to Graphics

Digitization Binary System Pixels Color Coding & Models Break Intro to Text Bitmap vs. Vector Graphics Image Resolution Image Bit Depth File Formats Graphics Software Using FTP Secure Shell

Which would you rather use to learn about the water cycle?

Intro to Graphics
We rely on images for

Information
Explanations Entertainment

VISUAL APPEAL

Visual Appeal Professional Layout Out LABS: How to create the graphics Learn pkg and tools to change the effects

LECTURES But need to know the concepts

Intro to Graphics: Originate?

Non-digital medium (paper copy of a photo) Scanner saves the image in a file on your computer

Outside world - PHOTOGRAPHY Digital images uploaded to a file on your computer

Create image CLIP ART IMAGES/SCENES Saves image to a file

How does a computer represent numbers and words and images and sound?

How does a computer represent numbers? How does a computer represent words? How does a computer represent images? How does a computer represent sound?

Computers only understand/speak

_________ (digits 0 and 1)

Convert Words to binary Images to binary Sound to binary Movies to binary

What is Digitization ?
Process of translating a piece of information (text, images, sound, video etc) into binary bits. ( Binary Digit)
(because thats what computers understand/speak)

Bit is the fundamental unit of information in a computer system

WHY?

Computers are built from electronic devices that have only two possible states... On (High) or OFF (low) High volt is a 1
ON

Low volt is a 0 OFF

Value of either 0 or 1 Electric signals translate into BITS (digits 0 and 1) Conversion from Analog to Digital

How many numbering systems are there?

Binary (2 Binary Digits/ BITS) 0,1,10,11,100,101, 111,1000 Octal (8 Digits or think of it as 8 number values) 0,1,2,3,4,5,6,7,10,11,12,13,14,15,16,17,20 Decimal (10 Digits) 0,1,2,3,4,5,6,7,8,9, 10,11,12,13,14,15,16,17,18,19,20 Hexadecimal (16 Digits) 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F, 10,11,12,13,14,15,16,17,18,19, 1A,1B,1C,1D,1E,1F,20

10

How many items can we represent with Binary Bits?

(How many patterns can we make using the digits 0 and 1)

If we have 1 bit

0 1

Could represent: -Black and White -True and False - Max of ____ values

If we have 2 bits

If we have 3 bits

11

0 0 0 1 1 0 1 1 00 0 00 1 01 0 01

Could represent:
-Black, Lt Gray, Drk Gray, White -Red, Blue, Yellow and Black - Max of ____ values

Could represent:

10 0 10 1 11 0 11

-days of the week but not the months of the year, WHY? -8 shades of GRAY - Max of ___

How are Images Coded?

For Gray Levels
If a pixel color is represented by 1 bits
Value

0 = Black Value 1 = White

So we say 1 bit allows for 2 colours (21 2)

12

How are Images Coded?

For Gray Levels

If a pixel color is represented by 2 bits

Value

00 = Black Value 01 = Grey Value 10 = Light Grey Value 11 = White

Thus, 2 bit allows for 4 colours (22 4 )

13

How are Images Coded?

For Gray Levels

4 bits 24 16 grey shades

0000, 0001,0010, 0100, 1000

0000

0001

0010

1111

Rule: More bits, more colors available to assign to a pixel

14

What will it look like?

# of bits 2 1 = 2 shades

http://en.wikipedia.org/wiki/Color_depth#Direct_color

http://www.modernimaging.com/bit_depth.htm

2 4 = 16 shades

2=4

shades

2 8 = 256 shades

15

So how many things can we represent with the binary system

Measurement for each bit is based on Binary system (base 2) 1 Bit is either 0 or 1
(1 bit) 21 = 2 values (0, 1) (black , white) (2 bits) 22 = 4 values (00,01,11,10) (black, light gray, dark gray, white) (3 bits) 23 = 8 values (000,001,011,111) (black, white) (4 bits) 24 = 16 values (0000,0001,0010) (8 bits) 28 = 256 values (00000000,00000001,00000010) (24 bits) 224 = approx. 16 million values
Formula is:

(x bits) 2x = y values
16

So how many things can we represent with the binary system 2x = y values =
# of combinations = Maximum number of colors available

to assign to a pixel to represent image

Relating bits with color combinations for an image

1 bit = 21 =colors to represent color of each pixel 8 bits = 28 - max of 256 colours 24 bits = 224= max of 16 million colors

17

Digitizing: Converting Analog to Digital

Conversion is a 2 step process: Consider digitizing an image, sound, video, animation, text etc... And storing it on the computer

Thing means image, sound, Step 1: ___________ video, animation, How often do I take a sample text (measurement) to represent the thing How many parts will I break the thing up into)

Step 2: ___________ How many discrete values will I use to represent each part of the thing

18

Sampling for Images Sampling

How many parts (pixels) will I break the image up into?

When images taken from scanner, digital camera, graphics application are stored on computer: Represented by a grid (column/rows) of squares called pixels (Picture elements) Pixel is _________ image component and thus shows the smallest detail

19

Sampling for Images

Original Image

If I represent this image with 4 samples (= 4 pixels?)

20

Sampling for Images

If I represent this image with around 64 samples (pxels) 8 rows x 8 cols?

If I represent this image 7500 samples? 75 rows x 100 cols

21

Trend: The more samples taken, the _____________ the picture becomes

Quantizing for Images

Quantizing How many discrete values (bits) will I use to represent each pixel represents the ____combinations
Each pixel is given a numerical value that represents the corresponding colour Use binary measurement scale 0,1 = 21 00,01,10,11 = 22 000, 001, 010 .. =23

22

Quantizing for Images

How are Colors Coded?

Each pixel is given a numerical value that represents the corresponding colour

IF I have 1 bit to represent the colour of each

pixel (square) (only have ___ colours)

IF I have 8 bits to represent the colour of each

pixel (square)(have _____ colours)

IF I have 24 bits to represent the colour of

each square (have about _______colours)

23

Quantizing for Text (Letters/Punctuation)

How many bits do we need to represent text?

Based on 8 bits (= 1 BYTE) How many possible combinations if using 8 bits? = 28 = 256 values

Each letter represented by 1 byte Called the ASCII code system

DOG would be encoded as: D 01000100 O 01001111 G 01000111

24

So.. How is color handled?

25

Color Models
Used for _______
___________ Model (RGB): -Primary colors are Red, Green, Blue -adding light to a black background(monitor) in order to obtain color shades

http://www.sketchpad.net/basics4.htm

Used for __________

_________ Model (CMYK)
Cyan, magenta, yellow Uses Printing Ink - when applied to paper removes (subtracted) from a white background
Commercial print is built on CMYK plates and inks.

-Brighter than CMYK

26

Did you know?

Why use RGB rather than CMYK model for web?

Since cathode ray tube devices, such as computer monitors, display color with red, green and blue light, this is the color system of the Web.

RGB

The red, green, and blue (RGB) color system can represent a large portion of the color spectrum by mixing these three primary colors on a monitor

color

27

http://en.wikipedia.org/wiki/Color_depth#Direct_color http://www.modernimaging.com/bit_depth.htm

How are Colors Coded? True color

Uses 24 bit color representation = 224 = ________colors
When we assign a color to a pixel, color can be expressed in:

1. RGB code
2. Hexadecimal code

28

RGB Notation
Each pixel is represented by 3 values ex. Light yellow=<255,255,127>

RGB Syntax: Each value ranges from 0 255 0 represents ___________ 255 represents _________
256 color shades= 28 bits
29

RGB Notation
Red = <255, 0, 0> Green = <0,255,0> Blue = <0, 0, 255> White = <255,255,255> Black = <0,0,0>

What does it mean: 256 shades of red = 28 256 shades of green = 28 256 shades of blue = 28

(8 bits=1 byte) (8 bits=1 byte) (8 bits=1 byte)

Need 3 bytes for True Colour (16 million colors) <256 shades, 256 shades, 256 shades> 1 byte for red 1 byte for green <28, 28 , 28> 1 byte for blue 30 256 x 256 x 256 = ~16 million

Hexadecimal Notation
Notation is: #RRGGBB
#FF0000 Red #00FF00 Green #0000FF Blue #000000 Black #FFFFFF White Allowable symbols 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, and F
Note: FF means 255

Do you know the Western Color purple?

31

http:/www.christiansitehosting.co

32

m/Hexadecimal%20Color%20Codin g%20Chart.gif

http://www.321webmaster.com/hex-to-rgb.php

Are they the same color?

RGB = <66,00,99>
Hexadecimal = #660099

You CAN convert from:

RGB to Hexadecimal Hexadecimal to RGB

Nice conversion utility: Bookmark it! http://www.321webmaster.com/hex-to-rgb.php

33

Question
Does anyone know approximately how many colours the human eye can discern (detect)?
A. B. C. D. E.

Less than 100,000 About 1 million About 10 million About 100 million About 500 million

34

Watch this

Painting the Mona Lisa http://www.youtube.com/watch?v=uk2sPl _Z7ZU&mode=related&search=

35

Types of Graphics
Graphics are categorized as being either:

Bitmap

or

Vector

Affects how the graphics are displayed on a computer screen in terms of 1. ________________ 2. ________________ 3. _________________

36

Types of Graphics - Bitmap

Bitmap Graphics
(_____________) Bitmapped images are made up of small squares called pixels.

Editing pixels = changing color, shade and brightness

Bitmapped Images come from

- __________, ______________
37

Types of Graphics - Bitmap

Bitmap Graphics
Images from

If you start with a small image scanners, cameras etc (100 x 100 px)
Assumption: As the image is made larger by resizing (aka _________ ) not zooming computer adds new pixels and guesses on the colour to colour the new pixels (called __________) based on surrounding pixels Squares become larger , edges more jagged Quality decreases File size increase

From larger to smaller

No distortion

Advantages of a small image on the web: Shorter time needed to display it on the 38 screen because file size is smaller

Types of Graphics Vector

Vector Graphics
Image is represented with lines and arcs that have a _________ relationship
describing the drawing of the shape

To draw a: ________ :- starting point, direction, length ________: - start point, width, height ________: - center and radius

39

Types of Graphics Vector

It doesnt matter what size the image is !! As the image is resized larger smaller Edges clean, crisp No distortion going up/down in size Quality is maintained File size increases (if resized larger) Advantage: Ideal for producing artwork which frequently needs to be presented in different sizes or colors.

Examples?
40

So why do we need different graphics software? Vector or Bitmapped? Vector-based:

Suitable for drawings that will be sized often Greater control and precision with free-hand tool Display more accurately on screen/paper/billboards (can be redrawn with accuracy without loss of quality) Download faster because of .svg format Must use a Draw program draw and edit paths Adobe Illustrator or Macromedia FreeHand, Corel Draw Common formats: .eps, .cdr.(CorelDraw) .dwg (Autocad)
(less info recorded smaller file)

REMINDER: Vector-based is _______ file recording a mathematical relationship

41

http://www.eastbywest.com/pub/vectorbitmap/

So why do we need different graphics software? Bitmapped- Based:

Images from - scanners, cameras

Remember:
Vector ->Bitmap ______
(bring into a Paint program.. And converted to bitmap) --------------------------

etc
Ability to edit an images pixels Need a Paint program PhotoShop, PaintShop Pro, PhotoPlus, Corel PhotoPaint, Fireworks Photoshop v6.0 has vector features as well Common bitmap file formats: .jpg, .gif, .png, .tiff, and .bmp

Bitmap > Vector ______ once a bitmap always a bitmap

42

http://www.eastbywest.com/pub/vectorbitmap/

In this next section

Now that we know what a pixel is

What affects image quality?

IMAGE QUALITY
Image Resolution Image Bit Depth

43

Resolution
Image Resolution:
The number of pixels per square inch Controlled through graphics pkg when asked to create an image
In Photoshop, decide on intent of image

IMAGE QUALITY

For web: set to _____ ppi

Lower resolution, smaller file size, faster download time

For printing: set to _______ ppi or

more. Higher resolution means bigger file size

44

Image Resolution
If Resolution Each pixel size # of pixels per inch

100 ppi

1/100th inch

100 x100

300 ppi
6 ppi 3 ppi

1/300th inch
1/6th inch 1/3th inch

300 x 300
6x6 3x3

Which resolution would give a finer, less blocky result?

45

IMAGE QUALITY

Increasing the resolution (ppi) increases the quality of detail

BUT FILE SIZE IS MUCH LARGER

Image Bit Depth

(also known as Color Depth)
num

IMAGE QUALITY
This translates to: CONTROL!!

Refers to the number of bits used to represent a More bits you use color of a pixel (ie 1 bit, 2 bits, 3 bits, etc).

- more color info is stored to describe the color of a pixel Thus Quality File Size Increases

1 bit= 2 colors

values 0,1=black,white

4 bit = 16 colors 8bit = 256 colors

(= 24) 0000,0001,0010,0100 . (= 28) 00000000,11111111,00000001 .

True Color

46

16bit = 65,536 (= 216) 24bit = 16,777,216 (= 224)

Image Bit Depth

# of bits 2 1 = 2 shades

http://en.wikipedia.org/wiki/Color_depth#Direct_color

http://www.modernimaging.com/bit_depth.htm

2 4 = 16 shades

2=4

shades

2 8 = 256 shades

47

Image Bit Depth

Bits per Pixel: 1 Image Bit Depth (BPP) Maximum Colors: 2 Bits per Pixel: 4 Maximum Colors: 16 Bits per Pixel: 8 Maximum Colors: 256

Bits per Pixel: 16 Maximum Colors: 65,536 (high color)

Bits per Pixel: 24 Maximum Colors: 16,777,216 (true color)

You can save space when designing images for

the web
48

Graphics Software
What software would you use to create Vector or Bitmap Images?
_____________ program
Also known as DRAWING programs work with vector images vector-based drawing programs allow more flexibility when creating artwork that is to be resized or must go through multiple edits. logos, for example, should be created in illustration programs

_____________Editors
Also known as PAINT programs work with bitmap images bitmap graphics tools are needed for working with photos, scans, or other "realistic" images. usually superior for final output of images for the Web or for many special effects to photos.

Examples: Adobe Illustrator, CorelDraw, Macromedia Freehand

Examples: Adobe Photoshop, Corel Photo-Paint, Jasc Paint Shop Pro

49

Graphics Software Adobe Illustrator

Illustration (Drawing programs)

work with vector images Examples: Adobe Illustrator CorelDraw Macromedia Freehand

Some cool vector images:

50

http://www.bittbox.com/illustrator/illustrator-the-tilde-trick/ http://www.charlescarver.com/gall2.htm

Graphics Software Adobe Photoshop

Photo/Image Editors
(Paint programs) work with bitmap images for the Web or for special effects to photos. Examples: Adobe Photoshop Corel Photo-Paint
Jasc Paint Shop Pro

Shows bitmapped

51

Warm-up Questions
Question: How many things can you represent with a 5 bit depth (5 bits)?

Question: What is the smallest value that you should set the dpi for an image that you plan to print?
Question: When converting analog to digital what two things to you have to do to analog data? Question: What bit depth do you need to represent a black and white image?

52

Warm-up Questions
1.

Match the following Hex codes and RGB triples to the correct colors: (note: equal amounts of red, blue and green make gray) 1. White 2. Black 3. Dark Gray 4. Light Gray 5. Medium Gray 6. Bright Green 7. Bright Blue

a) #FFFFFF b) #00FF00 c) #FAFAFA d) (0,0,255) e) (0,0,0) f) (14,14,14) g) (125,125,125)

53

Next Lecture
Capturing Digital Images via Scanning and Digital Cameras Image Optimization Techniques

54