MULTIMEDIA and COMMUNICATIONS Computer Science CS1033ab Lecture

1
A Vision of Students Today

• MULTIMEDIA and COMMUNICATIONSComputer Science
  CS1033a/bLecture 3Graphics (part 1)
• Instructors Laura Reid (section 001)
• Vivi Tryphonopoulos (section 002)

2
Todays Agenda
Lecture 3 GRAPHICS

• Announcements
• Assignment 1 Sample posters from last year
• Warm-up
• Intro to Graphics
• Digitization
• Pixels
• Color Coding Models
• Break ?
• Intro to Text
• Bitmap vs. Vector Graphics
• Image Resolution
• Image Bit Depth
• File Formats
• Graphics Software
• File Transfer Overview, Problems, Solutions for
  Assignments

3
Announcements

• Lab 1 and Lab 2 may be a bit long for some
• Photoshop is huge, we will just be doing a taste
  of it, dont worry if you dont know it all (or
  even 1/3 of it ?)
• Lab 3 Continuing on with Graphics
• How to superimpose images and bring them together

4
Announcements

• Assignment 1
• Posted on course website Worth 10
• Due Friday, May 22, 2009 by 1000
• Details Course website http//www.csd.uwo.ca/cou
  rses/CS1033/assignments.html

5
The Good, the Bad and the Ugly
6
Assignment 1

• ONCE YOUR ASSIGNMENT IS COMPLETE (building the
  ad)
• Follow the instructions listed on the Course
  Website(under Assignment 1 Posting area)
• Fill out the Submission Form
• Upload all your files to publish.uwo.ca as
  demonstrated in lab 1
• Create the required .txt file and the submission
  form.
• Log onto http//webct.uwo.ca
• Click on assignments, assignment 1, upload the
  .txt file
• Click on the submit button
• NOTE you will get 0 if you forget the submission
  form or forget to give references

7
Warm Up Questions

• Is the following font serif or sans
  serif? Hello there

Hello there Hello there Hello there
8
Warm Up Questions

• ASSUME that
• If you printed off a MS Word page (8 ½ by 11 in)
• 1 inch margin on the top
• ½ inch margin on the bottom
• the page contained a font of size 36
• leading was 0 (no space between the lines)
• QUESTION
• How many lines of text could you fit on the page
  to be printed?

9
FACT
For print it doesnt matter if you print from a
Windows machine or a Mac, 72 point font size on
paper is always 1 high. If you sent this MS
Word Document to a printer and measured between
the lines, it would be one inch.
1 high
p
1 high
Gap accommodates different Font Types Ex. Arno
Pro Display
10

• IF (8.5 x 11 paper)
• 1 inch margin on the top
• ½ inch margin on the bottom
• the page contained a font of size 36
• leading was 0

• Answer
• Actual Size of paper

1 high
p
1 high
Gap accommodates different Font Types Ex. Arno
Pro Display


11

• .And now for
• Introduction to Graphics

12
Intro to Graphics
What can you learn from this?
13
Which would you rather use to learn about the
water cycle?
14
Intro to Graphics
We rely on images for Information Explanations En
tertainment
VISUAL APPEAL
15
So You Want to be a Designer?

• FOCUS ON
• How to create the graphics
• Learn pkg and tools to change the effects
• But need to know the concepts

16
Graphics Originate?
Non-digital medium (paper copy of a photo)
Outside world
Create image
17
What is Digitization?
Digitization refers to the process of translating
a piece of information (text,images, sound
recording, or video) into binary bits.
What is a BIT?
18
What is Digitization?
Electronic hardware is either On or Off
Electric signals translate into BITS Digits
0 and 1
19
What is Digitization?
Based on 8bits Binary

• MEASUREMENT SYSTEM
• Binary system (base 2)
• Has two digits 0 and 1

A byte is collection of 8 bitsSo with 8 bits
there are (28) 256 possible combinations of
0s and 1s
21 2 values (0, 1) 22 4 values (00, 01, 11,
10) 23 8 values (000, 001, 011,111) 24 16
values (0000, 0001, 0010) 28 256 values
20
What is an Image?

• An image is represented by a grid (array, matrix)
  of squared Picture elements called pixels
• A pixel is the smallest image component and thus
  shows the smallest detail
• Arranged in column and rows

21
Each pixel is a numerical value corresponding to
a
A 640-by-480 screen is capable of displaying 640
distinct dots on each of its 480 (rows) lines, or
about 300,000 pixels.
A 800-by-600 screen is capable of displaying
480,000 pixels.
22
How are Colors Coded?Gray Levels

• If a pixel color is represented by 1 bit only
• Value 0 Black
• Value 1 White

• If a pixel color is represented by 2 bits
• Value 00 Black
• Value 01 Grey
• Value 10 Light Grey
• Value 11 White

23
1-bit color
How are Colors Coded?Gray Levels

• Actually even with only black and white (no
  gray), an image can look surprisingly realistic

http//
24
How are Colors Coded?Gray Levels
2-bit color
25
How are Colors Coded?Gray Levels

• More bits, more shades (grey levels)
• 4 bits ? 24 ? 16 grey shades
• (0000, 0001,0010, 0100, 1000 etc.

26
How are Colors Coded?Gray Levels
2 2 4 shades
of bits
2 1 2 shades
2 4 16 shades
http//en.wikipedia.org/wiki/Color_depthDirect_co
lor
http//www.modernimaging.com/bit_depth.htm
27
How are Colors Coded? Gray Levels

• 8 bits ? 28 ? 256 gray levels (shades)

A normal greyscale image has a bit color depth of
256 grey levels
Magnified
28 256 shades
28
Color Model
How is color handled?
29
http//www.sketchpad.net/basics4.htm
Color Model
Used for Printing
Used for Web

• Additive Model (RGB)
• Primary colors are Red, Green, Blue
• ____________ to a black background in order to
  obtain color shades

• Subtractive Model (CMYK)
• Cyan, magenta, yellow
• ______________ from a white background

30
How are colors coded?
In true color, each pixel represents some color
shade Uses _______ representation 16
million colors

• Color can be expressed in
• RGB code
• Hexadecimal code

31
How are colors coded?
RGB Code

• Each pixel is represented by 3 values
• ie. Light yellow lt255,255,127gt
• Syntax Each value
• ranges from 0 255
• 256 color shades _____ bits

32
How are colors coded?
RGB Code
ltR,G,Bgt
lt255,255,127gt Light yellow
Red lt255, 0, 0gt Green lt0,255,0gt Blue
lt0, 0, 255gt
33
How are colors coded?
So how many colors in the spectrum?
If based on this model Red lt255, 0,
0gt Green lt0,255,0gt Blue lt0, 0, 255gt

• 256 colors
• 255 colors
• 25,500 colors
• 16 million colors
• 25 million colors

34
How are colors coded?
Hexadecimal Code

• consists of 16 unique symbols 0, 1, 2,
  3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, and F
• color represented by 6 digits ie. FFCC66

35
How are colors coded?
Hexadecimal CodeWhen would you use it?

• In a Web page with HTML

In a Graphics pkg
36
Red ltFF0000gt Green lt 00FF00gt Blue
lt0000FFgt Web-safe colors Only 1, 3, 6, 9, C,F
http/www.christiansitehosting.com/Hexadecimal20C
olor20Coding20Chart.gif
37
How are colors coded?
Are they the same color? Hexadecimal
660099 RGB lt66,00,99gt
??

• You can convert from
• RGB to Hexadecimal
• Hexadecimal to RGB
• Nice utility Bookmark it!
• http//www.colorcombo.com/bghex.html

38
Which of the following represents the Western
Color purple?
Answer
RGB to Hex converter http//www.telacommunications
.com/nutshell/rgbform.htm
39
Why use RGB rather than CMYK model or web?
Did you know?

• ______________________________
• 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.

http//en.wikipedia.org/wiki/Color_depthDirect_co
lor
http//www.modernimaging.com/bit_depth.htm
40
Break ?

• Painting the Mona Lisa
• http//www.youtube.com/watch?vuk2sPl_Z7ZUmodere
  latedsearch

41
Types of Graphics
Graphics are categorized as being either Bitmap
or Vector
Affects how the graphics are displayed on a
computer screen
42
Types of Graphics

• Bitmap Graphics
• Bitmapped images are made up of small squares
  called pixels.
• Editing pixels changing ______________________
  _________________

43
Types of Graphics

• Bitmap Graphics
• As the image is made larger (resize not zoomed)
• Dots become larger , edges more jagged
• Quality decreases
• File size increase
• Advantages of using a small image rather than a
  larger one
• _______________________________________________
• Disadvantages
• _________________________________________________

44
Types of Graphics

• Vector Graphics
• Image is represented with lines and arcs that
  have a mathematical relationship
• describes the drawing of the shape
• To draw a
• Line - starting point, _________________
• Rectangle - start point, ______________
• Circle - ___________________

45
Types of Graphics

• Vector Graphics
• As the image is enlarged
• Dots become larger , edges stil clean, crisp
• Quality is maintained
• File size increase

46
Activity

• Draw an oval in MS Paint, then select it and
  resize it, watch what happens (bitmapped)
• Draw an oval in Adobe Illustrator, then select it
  and resize it, watch what happens (vector based)

47
So why do we need different graphics software?
Types of Graphics

• Vector Graphics
• Geared towards drawings
• Greater control and precision with free-hand tool
• Display more accurately on screen
• Download faster because with the support of
  Macromedia's Flash and Scalable Vector Graphics
  (SVG) formats
• Produce smaller files that download faster
• More details in vector-based illustrations
• Must use a Draw program draw and edit paths
• Adobe Illustrator or Macromedia FreeHand, Corel
  Draw
• Bitmapped- Based ability to edit an images
  pixels
• images from - scanners, cameras etc
• Need a Paint program
• PhotoShop, PaintShop Pro, PhotoPlus
• But Photoshop v6.0 vector features in it

Vector-based is smaller file
Remember
48
Graphic Attributes
So what else affects Image Quality?
Image Resolution Image Bit Depth
IMAGE QUALITY
49
Graphic Attributes

• Image Resolution

• Image Resolution (ppi) (also known as dpi)
• the number and spacing of pixels in an image
• the number of pixels per square inch on a
  computer-generated display

50
Graphic Attributes
Image Resolution
Which resolution would give a finer, less blocky
result?
51
Graphic Attributes
Image Resolution
What happens when you increase of pixels ?
7x4 grid
52
Graphic Attributes
Image Resolution

• Comparison for different output delivery
• Web set to 72 dpi
• Laser Printers - 300 600 dpi
• High end imagesetters 1200 dpi, 2400 dpi, or
  higher (printed for newspapers and magazines)

53
Graphic Attributes
Image Resolution
So what does this mean? Image size refers to
the physical dimensions of an image.
FIXED

• IF Number of pixels in an image is FIXED!
• decreasing the size of an image increases its
  resolution (crisper edges)
• increasing the size of an image decreases its
  resolution (pixelated, jagged)

54
Graphic Attributes
Image Bit Depth (aka ___________)

• Maximum number of colors used to represent an
  image

1 bit 2 colors (21) Black /white 4
bit 16 colors   (24) 8 bit 256 colors
(28) 16bit 65,536 (216 )24bit
16,777,216 (224 ) True Color
Review
This translates to CONTROL!! More bits you use
the ______________ info stored to describe the
color of a pixel ? Quality ________ ?
________ file size

• For each pixel recording amount of digital
  storage space used to record information about
  the color of a pixel

55
Graphic Attributes
Image Bit Depth (aka Color Depth)

56
Question

• Does anyone know approximately how many colours
  the human eye can discern (detect)?
• Less than 100,000
• About 1 million
• About 10 million
• About 100 million
• About 500 million

ANSWER
57
File Formats

• wide variety of File Formats
• different file formats are suitable for different
  purposes

• Universally supported files
• Universally supported by graphics industry
• ie. ______________

• Proprietary files( Native Files )
• Default file format used by a specific software
  application.
• can be Bitmap or vector formats ex.
  _______________________________

58
File Formats

• Native Files
• default file format used by a specific software
  application

PROPRIETARY CDR - CorelDRAW CPP - Corel
Photo-Paint PSD - Adobe Photoshop PDD - Adobe
PhotoDeluxe AI - Adobe Illustrator AUP
Audacity MVMM - Moviemaker UFO - Ulead
PhotoImpact PSP - Paint Shop Pro

• Features
• not meant to be transferred to other applications
• software-specific image properties can only be
  retained when an image is saved in the software's
  native format ie. Layering is preserved in
  Photoshop

When an image is being sent to another
application it should be converted or exported to
a _____________
59
File Formats
.DWG
60
File Formats
61
File Formats
62
File Formats
Choose graphic file formats based on the
TASK! On-Line Publishing (Web) vs Printing Match
the format to the task by starting with the right
format or by converting other artwork to the
desired format
63
Sources of Graphics
To use graphics in a multimedia application, and
work with it in an application graphics must be
in a DIGITIZED FORM

Digitized Cameras, CamcordersCaptures images and
digitizes them into computer images through its
software
ScannersDigitizes drawings, illustrations and
even 3-D objects into computer images using its
software

Internet Sites Free clipart, On-line stock photo
library ( for image use)
64
Types of Graphic Programs

• Photo/Image Editors ( aka Paint programs)
• work with _________________
• bitmap graphics tools are needed for working with
  photos, scans, or other "realistic" images
• Although illustration programs can export images
  in bitmap formats, paint programs are still
  usually superior for final output of images for
  the Web or for many special effects to
  photos.Examples Adobe Photoshop, Corel
  Photo-Paint, Jasc Paint Shop Pro

• Illustration (aka Drawing programs)
• work with _________________
• 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
• Examples Adobe Illustrator, CorelDraw,
  Macromedia Freehand

65
GRAPHIC SCREEN SHOTS

ADOBE ILLUSTRATOR

• Illustration (Drawing programs)
• work with vector images
• Examples
• Adobe Illustrator
• CorelDraw
• Macromedia Freehand

66

• Some cool vector images
• http//www.bittbox.com/illustrator/illustrator-the
  -tilde-trick/
• http//www.charlescarver.com/gall2.htm

67
GRAPHIC SCREEN SHOTS

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

68
SERVERS UPLOADING
GOAL Transfer files to the Server

• Advantages of a Server
• Connected
• Always available
• Accessibility
• Taken care of

69
Panther Publish

• Panther the computer (server) that will be
  hosting your website
• Host name panther.uwo.ca
• To actually SEE the website on the Internetthe
  address to get at your website from the Internet
• http//www.publish.uwo.ca/username
• http//www.publish.uwo.ca/vtryphon/ad.jpg
• http//www.publish.uwo.ca/username/welcome.html

70
S-FTP using Secure Shell

• OBJECTIVE
• You are expected to hand in your assignments by
  placing your files on the server
• Get application and install it
• http//www.uwo.ca/its/sitelicense/ssh/

• Its actually 2 programs in 1
• Shell Client can type in commands by hand
• But its in Unix, so well stay away from it as
  much as possible
• File Transfer Client allows us to transfer
  files to Panther
• Just like moving a file from one folder to
  another in Windows

71
Setting Permissions

• PROBLEM Sometimes you cant see your files on
  the Internet becase the files are locked after
  you uploaded
• SOLUTION 1 We will have to change file
  permissions
• Connect using Secure Shell client
• Every time you upload a new file,go to the
  Secure Shell window and type in publish

72
Setting Permissions

• SOLUTION 2 We will have to change file
  permissions
• Connect using Secure File Transfer client (S-FTP)
• Every time you upload a new file,change the
  permission rights on that file or folder

Right-click on the cs033 folder and select
Properties. This is where you will set up the
permissions on your folder to make it viewable by
anyone on the Internet (by default, it was
probably set up so that only you can view it, for
security reasons).
73
Setting PermissionsMethod 2 - continued
Make sure that, at the bottom of the properties
window, the Read and Execute columns are all
checked for Owner, Group, and Other. To confirm,
the Permissions mode field should read 755.
74
Next Lecture

• Image Optimization Techniques
• Start Web Design