GraphicsMs. BrewerSpring 2013

Bellwork

• Edmodo – log on!• Quiz? Take it if you need to!

• Policies and Procedures Powerpoint in Shared Folder!

• Get to Know you document in Shared Folder!

• What does it mean to compress an image?

• Why do you think we compress images?• What do you think are the effects on

the image?

BELLWORK

Topics we’ll be Exploring…

• Graphic File Formats• Clipart• Photo Editing• Photo Manipulating• Creating and Presenting Graphics Projects• Multimedia Projects

Assignments you’ll have…

• Vocabulary Quizzes• Original Clipart• Clipart Projects• Paint Projects• Photo Editing and Manipulation • Multimedia Projects• Individual Presentations

Top ways to ACE Graphics

Complete all assignments according to the rubric.

Hand your work in on time.Complete your powerpoint

presentation when I am giving notes or explaining something new – they are graded.

Study for your tests and quizzes. They do count!

Top ways to ACE Graphics

Plan ideas in advance. Storyboards are graded.

Have a positive attitude and good work ethic

Be Creative

Be School Appropriate

Be Unique

Key Learning

Image editing skills can enhance personal and professional projects

Unit Essential Question

How can I design and create quality graphics

for publication?

Lesson Essential Question

How do I choose the best file format when saving

an image?

Vocabulary.bmp.gif.jpg.png.psd.tiff

• Lossy Compression• Lossless

Compression

So why do we compress images??

• By decreasing the image size (bytes) the screen speed is faster

• By decreasing the image size (bytes) the web page loads faster

• By decreasing the image size (bytes) the less the bandwidth consumption

Image Compression Methods

Two Types - • Lossy Compression• Lossless Compression

Lossless Compression

• The file does not discard any data when saving.

• Compression occurs by recording color changes from the pixel directly to the left.

• Each pixel maintains its own identity.

• Compression results in a sharp image that looks identical to the original.

• Can reduce a file up to 30%.

Lossy Compression

• The file loses data each time it is saved.

• Compression occurs by averaging pixels values (colors) to eliminate the amount of info needed to be saved.

• Each time you save, your image deteriorates more resulting in COMPRESSION ARTIFACTS.

• Can reduce a file up to 50%.

Compression TypesLossy

A compression type in which the image loses color data each time it is saved.

How it compresses:Averages colors so some

can be eliminated.

Compression results:Loss of quality, blurring

and compression artifacts.

Percent of reduction:

About 50%

Lossless

A compression type in which no data is lost when saving.

How it compresses:Compares each pixel with the

one before it and only records color change.

Compression results:No color loss or blurring.

Percent of reduction:

About 30%

Bellwork

Use the Internet to find the full file format names for the following file extensions:

.gif

.tiff

.jpg or jpeg

.png

.psd

.bmp

Let’s look at some images…

Image Examples

GIF – Graphics

Interchange Format Images

.gif Graphics Interchange Format

• Characteristics– Can only have 256 colors

• Compression–Lossless Compression

• Best Uses–Web Graphics (logos, banners)–Text, Line Art, Large blocks of Color

• Poor Uses–Photographs

Image Examples

BMP - Bitmap

.bmp Bitmap

• Characteristics– Older File Format–Created by Microsoft – use with MS Paint

• Compression– Lossless Compression if done through ZIP

• Best Uses–Clipart and Basic Images

• Poor Uses– If need a quick response time

Image Examples

PNG – Portable Network Graphics

.png Portable Network Graphic

• Characteristics– Newer File Format to replace .gif–Standard File Format for Paint

• Compression–Lossless Compression

• Best Uses–Web Design Image Format

• Poor Uses–Traditional Print

Image Examples

Jpg or Jpeg– Joint

Photographic Experts Group

.jpeg Joint Photographic Experts Group

• Characteristics– Uses all Colors (16.7 Million)–Recognized by all Web Browser Software

• Compression– Lossy Compression

• Best Uses–Photographs–Screen Graphics – Power Point, Web

• Poor Uses– Images with few colors, text, simple shapes

Image Examples

.psd Photoshop

Format

.psd – Photoshop Format

• Characteristics– Uses all Colors (16.7 Million)–Supports Photoshop Functions

• Compression–Lossless Compression

• Best Uses–Photoshop Work in Progress

• Poor Uses–MS Office Programs or Web Site images

Image Examples

Tiff – Tagged

Image File Format

.tiff Tagged Image File format

• Characteristics– Can use any resolution–Supports Photoshop Functions

• Compression–Lossless Compression

• Best Uses–Print Graphics

• Poor Uses–Web Images

Summary…

Compare and Contrast the file format options discussed in class on the handout provided.