Who invented the World Wide Web? – Tim Berners Lee 1991
▯ also invented URL in 1990
(1969) Arpanet start of internet
when designing a webpage think about crap! :
Contrast, Repetition, Alignment, Proximity
interactivity user has control over the application/ experience is active rather than passive like TV
hyperlinking index allows for jumping around sections/ web pages or other locations on the same page
When creating a multimedia application you need:
developmental systems systems used by a multimedia developer to create applications
user systems systems used to play back/ view/ user the multimedia application
internet (machines, cords, hardware) / World Wide Web (software)
Printer should be set to 300dpi when printing images
First motion picture ever recorded between 18801890
The very first graphical browser for the WWW Mosaic
1 animated movie Toy Story
1996 digital cameras became affordable
1914, Rotoscoping is an animation technique in which live action video is traced to create animation that
mimics the live action.
2007 Google surpasses Microsoft as most valuable brand
Serif: San Serif:
Has a fine line to finish a letter stroke No line added
human eye finds these easier to read best for headings
(i.e. Times new Roman, Courier) (i.e. Comic, Arial) Kerning space between letters (i.e. AW vs. HN)
Tracking adjusting distance between letters
Case save upper case for headlines
Leading – amount of vertical space between lines
“Points” are for printing, when printing images; you should set your printer resolution to 300 dpi (dots
- When printing an image, the image must be printed at a size that has a minimum of 300 ppi
_ _ _ _ _ _ 0 1 2 3 4 5 6 7 8 9 A B C D E F
RED GREEN BLUE Black White
biggest number: F, thus presence F colour most
if # is 0, than no colour at all
Computers only understand/speak “Binary”
▯computers run by electricity, and can better understand getting a high volt and a low volt. High volt is 1,
low volt is 0
Converting Analog to Digital
step 1: Sampling – how often do I take a sample (measurement) how many parts the “thing” broken up
step 2: Quantizing – how many values of colour will I use to represent the “thing” (i.e.
• The more samples you have the better quality picture you have
Samples on a scanner are measured by dpi (dots per inch)
Samples on a monitor are measured as ppi (pixels per inch)
Megapixel – how many millions of pixels you can capture in a photograph on your digital camera
more megapixels = larger image with little loss in quality
1. How many pixels is an image that is 800 pixels by 800 pixels?
= 640000 pixels 2. How many megapixels is that image?
=1/2 megapixels * how do you find this answer?
3. How big would this image be if you printed it out 200 dpi?
= 4in x 4in * how? ▯(800 ÷ 200)(800 ÷ 200)
= 4 inches
4. How big would this picture be if you printed it out 100 dpi?
= 8in x 8in * how?
5. How many colours can you represent with 4 bit colour?
= 2 = 16 * why 2?
Screen Resolution is the number of pixels across by the number of pixels down that a screen is currently
Average ppi is 72ppi – which will print out about the same size picture as seen on the monitor.
Dpi/Ppi makes no affect on file size!
Resizing an image ▯ Resampling
1. How many pixels will a 4in by 6in image be if we scan it in at 100dpi?
=(4 x 100)(6 x 100)
=240 000 pixels
2. How many things can you represent with a 5 bit depth (5 bits)?
= 2 = 32
3. What is the smallest value that you should set the dpi for an image that you plan to print?
* = 300dpi
4. When converting analog to digital what two things do you have to do the analog data?
= Sampling & Quantifying
(a computer always does this when it need to represent something)
5. How big will the following image be when printed? 600 pixels by 900 pixels, printed at 300 dpi?
= 2in by 3in
6. What bit depth do you need to represent a black and white image?
=1 bit Subtractive Model CMY Additive Model RGB
Used for printing use on monitors
Cyan, Magenta, Yellow adding light to a black background (the monitor)
Ink when applied removes (subtracts) the white Red, Green, Blue
True colour = need 3 bytes (one for red/green/blue)
If the numbers are the same; its grey
2 ways to encode True Colours▯ 1.) 2.) Hexadecimal Code
*10 million colours are visible in the human eye spectrum
Index colour ▯not true colour (8 bit colour, good for cartoon animations)
Bitmapped Images Vs. Vector Graphics
- Also called roaster graphics - Made of individual, scalable objects
- Resolution dependent - Objects consist of lines, curves, and shapes
- Larger file size when images are enlarged - No distortion when image is enlarged
and become distorted
- Defined by line attributions
- Designed by pixel attributions
You can covert a vector graphic into a bitmapped image, but you cannot easily convert a bitmapped image
into a vector graphic image.
Types of compression:
Loseless – compress the original into less bits and bytes, without losing any information about the original
image. Not information is lost! (GIF is loseless!) Lossy when compression occurs some of the original information is lost. Selected proportions are image are
discarded. Cannot get discarded information back.
Uncompressed file format:
• Bmp ( for Windows)