Graphics Ms. Brewer Spring 2013
description
Transcript of Graphics Ms. Brewer Spring 2013
![Page 1: Graphics Ms. Brewer Spring 2013](https://reader035.fdocuments.in/reader035/viewer/2022081515/56816291550346895dd2fecf/html5/thumbnails/1.jpg)
GraphicsMs. BrewerSpring 2013
![Page 2: Graphics Ms. Brewer Spring 2013](https://reader035.fdocuments.in/reader035/viewer/2022081515/56816291550346895dd2fecf/html5/thumbnails/2.jpg)
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!
![Page 3: Graphics Ms. Brewer Spring 2013](https://reader035.fdocuments.in/reader035/viewer/2022081515/56816291550346895dd2fecf/html5/thumbnails/3.jpg)
• 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
![Page 4: Graphics Ms. Brewer Spring 2013](https://reader035.fdocuments.in/reader035/viewer/2022081515/56816291550346895dd2fecf/html5/thumbnails/4.jpg)
Topics we’ll be Exploring…
• Graphic File Formats• Clipart• Photo Editing• Photo Manipulating• Creating and Presenting Graphics Projects• Multimedia Projects
![Page 5: Graphics Ms. Brewer Spring 2013](https://reader035.fdocuments.in/reader035/viewer/2022081515/56816291550346895dd2fecf/html5/thumbnails/5.jpg)
Assignments you’ll have…
• Vocabulary Quizzes• Original Clipart• Clipart Projects• Paint Projects• Photo Editing and Manipulation • Multimedia Projects• Individual Presentations
![Page 6: Graphics Ms. Brewer Spring 2013](https://reader035.fdocuments.in/reader035/viewer/2022081515/56816291550346895dd2fecf/html5/thumbnails/6.jpg)
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!
![Page 7: Graphics Ms. Brewer Spring 2013](https://reader035.fdocuments.in/reader035/viewer/2022081515/56816291550346895dd2fecf/html5/thumbnails/7.jpg)
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
![Page 8: Graphics Ms. Brewer Spring 2013](https://reader035.fdocuments.in/reader035/viewer/2022081515/56816291550346895dd2fecf/html5/thumbnails/8.jpg)
Key Learning
Image editing skills can enhance personal and professional projects
![Page 9: Graphics Ms. Brewer Spring 2013](https://reader035.fdocuments.in/reader035/viewer/2022081515/56816291550346895dd2fecf/html5/thumbnails/9.jpg)
Unit Essential Question
How can I design and create quality graphics
for publication?
![Page 10: Graphics Ms. Brewer Spring 2013](https://reader035.fdocuments.in/reader035/viewer/2022081515/56816291550346895dd2fecf/html5/thumbnails/10.jpg)
Lesson Essential Question
How do I choose the best file format when saving
an image?
![Page 11: Graphics Ms. Brewer Spring 2013](https://reader035.fdocuments.in/reader035/viewer/2022081515/56816291550346895dd2fecf/html5/thumbnails/11.jpg)
Vocabulary.bmp.gif.jpg.png.psd.tiff
• Lossy Compression• Lossless
Compression
![Page 12: Graphics Ms. Brewer Spring 2013](https://reader035.fdocuments.in/reader035/viewer/2022081515/56816291550346895dd2fecf/html5/thumbnails/12.jpg)
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
![Page 13: Graphics Ms. Brewer Spring 2013](https://reader035.fdocuments.in/reader035/viewer/2022081515/56816291550346895dd2fecf/html5/thumbnails/13.jpg)
Image Compression Methods
Two Types - • Lossy Compression• Lossless Compression
![Page 14: Graphics Ms. Brewer Spring 2013](https://reader035.fdocuments.in/reader035/viewer/2022081515/56816291550346895dd2fecf/html5/thumbnails/14.jpg)
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%.
![Page 15: Graphics Ms. Brewer Spring 2013](https://reader035.fdocuments.in/reader035/viewer/2022081515/56816291550346895dd2fecf/html5/thumbnails/15.jpg)
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%.
![Page 16: Graphics Ms. Brewer Spring 2013](https://reader035.fdocuments.in/reader035/viewer/2022081515/56816291550346895dd2fecf/html5/thumbnails/16.jpg)
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%
LosslessA 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%
![Page 17: Graphics Ms. Brewer Spring 2013](https://reader035.fdocuments.in/reader035/viewer/2022081515/56816291550346895dd2fecf/html5/thumbnails/17.jpg)
BellworkUse the Internet to find the full file format
names for the following file extensions:.gif.tiff.jpg or jpeg.png.psd.bmp
![Page 18: Graphics Ms. Brewer Spring 2013](https://reader035.fdocuments.in/reader035/viewer/2022081515/56816291550346895dd2fecf/html5/thumbnails/18.jpg)
Let’s look at some images…
![Page 19: Graphics Ms. Brewer Spring 2013](https://reader035.fdocuments.in/reader035/viewer/2022081515/56816291550346895dd2fecf/html5/thumbnails/19.jpg)
Image ExamplesGIF –
Graphics Interchange
Format Images
![Page 20: Graphics Ms. Brewer Spring 2013](https://reader035.fdocuments.in/reader035/viewer/2022081515/56816291550346895dd2fecf/html5/thumbnails/20.jpg)
.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
![Page 21: Graphics Ms. Brewer Spring 2013](https://reader035.fdocuments.in/reader035/viewer/2022081515/56816291550346895dd2fecf/html5/thumbnails/21.jpg)
Image ExamplesBMP - Bitmap
![Page 22: Graphics Ms. Brewer Spring 2013](https://reader035.fdocuments.in/reader035/viewer/2022081515/56816291550346895dd2fecf/html5/thumbnails/22.jpg)
.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
![Page 23: Graphics Ms. Brewer Spring 2013](https://reader035.fdocuments.in/reader035/viewer/2022081515/56816291550346895dd2fecf/html5/thumbnails/23.jpg)
Image ExamplesPNG – Portable
Network Graphics
![Page 24: Graphics Ms. Brewer Spring 2013](https://reader035.fdocuments.in/reader035/viewer/2022081515/56816291550346895dd2fecf/html5/thumbnails/24.jpg)
.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
![Page 25: Graphics Ms. Brewer Spring 2013](https://reader035.fdocuments.in/reader035/viewer/2022081515/56816291550346895dd2fecf/html5/thumbnails/25.jpg)
Image ExamplesJpg or Jpeg–
Joint Photographic Experts Group
![Page 26: Graphics Ms. Brewer Spring 2013](https://reader035.fdocuments.in/reader035/viewer/2022081515/56816291550346895dd2fecf/html5/thumbnails/26.jpg)
.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
![Page 27: Graphics Ms. Brewer Spring 2013](https://reader035.fdocuments.in/reader035/viewer/2022081515/56816291550346895dd2fecf/html5/thumbnails/27.jpg)
Image Examples.psd
Photoshop Format
![Page 28: Graphics Ms. Brewer Spring 2013](https://reader035.fdocuments.in/reader035/viewer/2022081515/56816291550346895dd2fecf/html5/thumbnails/28.jpg)
.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
![Page 29: Graphics Ms. Brewer Spring 2013](https://reader035.fdocuments.in/reader035/viewer/2022081515/56816291550346895dd2fecf/html5/thumbnails/29.jpg)
Image ExamplesTiff –
Tagged Image File
Format
![Page 30: Graphics Ms. Brewer Spring 2013](https://reader035.fdocuments.in/reader035/viewer/2022081515/56816291550346895dd2fecf/html5/thumbnails/30.jpg)
.tiff Tagged Image File format• Characteristics– Can use any resolution–Supports Photoshop Functions
• Compression–Lossless Compression
• Best Uses–Print Graphics
• Poor Uses–Web Images
![Page 31: Graphics Ms. Brewer Spring 2013](https://reader035.fdocuments.in/reader035/viewer/2022081515/56816291550346895dd2fecf/html5/thumbnails/31.jpg)
Summary…
Compare and Contrast the file format options discussed in class on the handout provided.