Multimedia and Communication

Lecture #3
GRAPHICS

1
 …….And now for

Introduction to Graphics

2
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
3
 Which would you rather use to learn
about the water cycle?

4
Intro to Graphics
We rely on images for

Information
Explanations
Entertainment

VISUAL APPEAL

5
 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

6
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

7
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
8
What is Digitization ?
•Process of translating a piece of information (text, images, sound,
video etc) into binary bits. ( Binary Digit)
(because that’s what computers “understand/speak”)

•Bit is the fundamental unit of information in a computer system

… WHY?
Computers are built from electronic •Value of either “0” or “1”
devices that have only two possible
states... On (High) or OFF (low)
• Electric signals translate into
“BITS” (digits “0” and “1”)
High volt is a 1 Low volt is a 0 • Conversion from
ON OFF
Analog to Digital

9
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)

Could represent:
 If we have 1 bit  0 -Black and White
1 -True and False
- Max of ____ values

 If we have 2 bits  00 Could represent:

01 -Black, Lt Gray, Drk Gray, White
-Red, Blue,Yellow and Black
10
- Max of ____ values
11
Could represent:
 If we have 3 bits  000 100 -days of the week but not
the months of the year,
001 101 WHY?
010 110 -8 shades of GRAY
- Max of ___ values
11 011 111
 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
 http://en.wikipedia.org/wiki/Color_depth#Direct_color
What will it look like?
http://www.modernimaging.com/bit_depth.htm
# of bits
2 1 = 2 shades 2 4 = 16 shades

2 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 Relating bits with
= Maximum number of colors available
color combinations
to assign to a pixel to represent image 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
 Step 1: ___________ image, sound,
 How often do I take a sample video, animation,
(measurement) to represent the “thing” text
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 (pîxels)
8 rows x 8 cols?

If I represent this
image
7500 samples?
75 rows x 100 cols
Trend: The more
samples taken, the
_____________
the picture
21 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 • Each pixel is given a
numerical value that
How are Colors Coded? 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
-Brighter than CMYK
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.

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 color
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

http://en.wikipedia.org/wiki/Color_depth#Direct_color
27 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 (8 bits=1 byte)
• 256 shades of green = 28 (8 bits=1 byte)
• 256 shades of blue = 28 (8 bits=1 byte)

Need 3 bytes for True Colour

(16 million colors)
1 byte for red <256 shades, 256 shades, 256 shades>
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 • Allowable symbols
#00FF00  Green 0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
#0000FF  Blue A, B, C, D, E, and F
#000000  Black
• Note: FF means 255
#FFFFFF White

Do you know the

Western Color
purple?

31
 http:/www.christiansitehosting.co
m/Hexadecimal%20Color%20Codin
32 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. Less than 100,000

B. About 1 million
C. About 10 million
D. About 100 million
E. 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,
(100 x 100 px) cameras etc
Assumption: As the image is made
larger by resizing (aka _________ ) From
not zooming larger to
• computer adds new pixels and smaller
guesses on the colour to colour the
new pixels (called __________) No
based on surrounding pixels distortion
• Squares become larger , edges
more jagged
• Quality decreases
• File size increase
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 doesn’t 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
REMINDER:
• Display more accurately on screen/paper/billboards
(can be redrawn with accuracy without loss of quality) Vector-based
• Download faster because of .svg format is _______ file
(less info recorded smaller file) recording a
• Must use a “Draw “ program – draw and edit paths mathematical
• Adobe Illustrator or Macromedia FreeHand, relationship
Corel Draw
• Common formats: .eps,
.cdr.(CorelDraw)
.dwg (Autocad)

41 http://www.eastbywest.com/pub/vectorbitmap/
So why do we need
different graphics
software?

Bitmapped- Based: Remember:

 Images from - scanners, cameras
etc Vector ->Bitmap
 Ability to edit an image’s pixels ______
 Need a “Paint” program
(bring into a Paint
 PhotoShop, PaintShop Pro, PhotoPlus, program.. And
Corel PhotoPaint, Fireworks converted to
 Photoshop v6.0 – has vector features bitmap)
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 Image Resolution

QUALITY
Image Bit Depth

43
Resolution IMAGE
QUALITY
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

• 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 Each pixel # of pixels
Resolution size per inch
100 ppi 1/100th inch 100 x100
300 ppi 1/300th inch 300 x 300
6 ppi 1/6th inch 6x6
3 ppi 1/3th inch 3x3

Which resolution
would give a finer,
less blocky result?

Increasing the resolution (ppi)

IMAGE increases the quality of detail
QUALITY
45 BUT FILE SIZE IS MUCH LARGER
Image Bit Depth
IMAGE
QUALITY
(also known as Color Depth) This translates to:
CONTROL!!
• Refers to the number of bits used to represent a
num

color of a pixel (ie 1 bit, 2 bits, 3 bits, etc). More bits you use
- more color info is stored
to describe the color of a
pixel

1 bit= 2 colors Thus

values 0,1=black,white  Quality
 File Size Increases

4 bit = 16 colors (= 24) 0000,0001,0010,0100 ….

8bit = 256 colors (= 28) 00000000,11111111,00000001 ….

16bit = 65,536 (= 216)

24bit = 16,777,216 (= 224) True Color
46
Image Bit Depth http://en.wikipedia.org/wiki/Color_depth#Direct_color

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

# of bits
2 1 = 2 shades 2 4 = 16 shades

2 2=4 shades 2 8 = 256 shades

47
 Image Bit Depth

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

Bits per Pixel: 16 Bits per Pixel: 24

Maximum Colors: 65,536 Maximum Colors: 16,777,216
(high color) (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 _____________Editors
• Also known as DRAWING programs • Also known as PAINT programs
• work with vector images • work with bitmap 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
• 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, Examples: Adobe Photoshop, Corel

CorelDraw, Macromedia Freehand 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:

http://www.bittbox.com/illustrator/illustrator-the-tilde-trick/
http://www.charlescarver.com/gall2.htm
50
 Graphics Software – Adobe Photoshop

Photo/Image Editors
(Paint programs)

• work with bitmap

images
• for the Web or for
special effects to
Shows
bitmapped photos.

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

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)

a) #FFFFFF 1. White
b) #00FF00 2. Black
c) #FAFAFA 3. Dark Gray
d) (0,0,255) 4. Light Gray
e) (0,0,0) 5. Medium Gray
f) (14,14,14) 6. Bright Green
g) (125,125,125) 7. Bright Blue

53
 Next Lecture
• Capturing Digital Images via Scanning
and Digital Cameras

• Image Optimization Techniques

54