SMAD 307

1
SMAD 307
Graphics/Still Images

• Multimedia for the Web

2
Pixels

• Pixel is Short For Picture Element
• A Pixel is the Smallest Unit of Video
  Information
• Each Pixel is made up of a Red, Green and Blue
  Dot
• Here's How a Monitor Creates Pixels...

3
Pixels

• Every Image is Made Up of Pixels
• Here's How Pixels Look in a Graphics Application

4
Pixels Are Like Pointilism

• Georges Seurat-French Impressionist Painter,
  1859-1891
• Gray Weather"

5
Bit Depth/Pixel Depth

• Definition The Number of Bits Assigned to Each
  Pixel
• This Represents the Number of Different Colors an
  Image Can Have

6
Bit Depth/Pixel Depth

• Image Quality is Related to How Many Different
  Colors There Can Be
• The Higher the Pixel Depth, The Greater the
  Number of Colors Available

24-Bit Pixel Depth 224 16,777,216 Colors
16-Bit Pixel Depth 216 65,536 Colors
8-Bit Pixel Depth 28 256 Colors
7
Bit Depth/Pixel Depth

• 1-Bit Pixel Depth 2 Combinations
• (Zero or One)
• 0 Represents Black
• 1 Represents White

8
Image Size

• aka Resolution
• Image Size is Measured in Pixels
• Horizontal X Vertical

9
Image Size

• Fewer Pixels Means...

Scaling
Cropping
10
Computer Color (Additive Color)

• A Pixel's Color is Determined by R,G,B (Red,
  Green, Blue)
• 256 Levels of Each Color (Starting with Zero)

11
Hexadecimal Color

• A Way of Creating 256 Colors with Fewer
  Characters
• Uses a "Hexadecimal" System Instead of "RGB"
  System

12
Hexadecimal Color

• Photoshop Shows Both RBG and Hexadecimal Values

13
How Many Different Colors?

• Whether You Use "RGB" or "Hexadecimal"

14
3 Color Modes

• Images Can Use Different Amounts of Colors
• More Colors Better Quality
• More Colors Bigger File Size, Longer Download

16,777,216 Colors- "24-Bit Color"- "Millions of
Colors"- "True-Color"- "RGB Color"
65,536 Colors- "16-Bit Color"- "Thousands of
Colors"- "High Color"
256 Colors- "8-Bit Color"- "Hundreds of
Colors"- "Indexed Color"
15
Which Color Modes for Which Images?

• Some Images Require 24-Bit Color (Millions of
  Colors)
• Some Images Don't (256 Colors is Plenty)

Lots of Colors
A Few Colors
16
GIF or JPG?

• Photographic Images should be stored as JPG
• (16-Million Colors)

24-Bit Bird
8-Bit Bird

• GIF
• 8-bit color
• Reduces file size via fewer colors
• And lossless compression

• JPG
• 24-bit color
• Reduces file size via compression
• Never reopen and resave JPGs

X
17
GIF or JPG?

• Drawn artwork should be stored as GIF
• (256 Colors)

24-Bits
8-Bits

• GIF
• 8-bit color
• Reduces file size via fewer colors
• And lossless compression

• JPG
• 24-bit color
• Reduces file size via lossy compression
• Never reopen and resave JPGs
• Compression cascades will result

X
18
Web Images

• Always save TWO Versions of an Image

PSD Multiple Layers
Web Image GIF or JPG
19
Optimizing JPGs

• Varying compression amounts
• Tradeoffs File Size vs. Quality

• Image is magnified 6X
• Compression is not as perceptible at actual size

20
Optimizing GIFs

• GIFs Can Use Fewer Than 256 Colors
• Reduce the Bit Depth

21
Dithering

• Blending of 2 Colors to Make it Appear There Are
  More
• Too Much GIF Optimization
• Occurs When Using Too Few Colors
• Bit-depth it Too Low

22
GIFs Support Transparency

• A Color (or Colors) Can Be Made Transparent
• .GIF87a Didn't Support (CompuServe GIF format
  from 1987)
• .GIF89a Supports Transparent Backgrounds
• Photoshop GIFs are GIF89a Today

Non-Transparent
Transparent
23
Resolution/Screen Size

• of Pixels, Horizontally and Vertically a
  Computer Can Display
• Lowest Common Denominator (LCD) is 800 X
  600(Used to be 640 X 480)
• Don't Create Pages that Go Beyond 800 Pixels
  Width

24
Anti-Aliasing

• Low Resolution Displays Will Give "Jaggies"
• Anti-Aliasing Smooths Out Jaggies
• Diagonal Angles on Text are Worst

Transparent