Graphic Format Factors

Slides:



Advertisements
Similar presentations
Raster Graphics 2.01 Investigate graphic image design.
Advertisements

Unit 30- Digital Graphics THEORY P2 and D2
2.01 Understand Digital Raster Graphics
2.02 Understand Digital Vector Graphics
Guilford County SciVis V106.01
Manipulating Images Image A visual representation of something that is seen in real life. It can be two-dimensional or three-dimensional A visual representation.
Part A Multimedia Production Rico Yu. Part A Multimedia Production Ch.1 Text Ch.2 Graphics Ch.3 Sound Ch.4 Animations Ch.5 Video.
BITMAP & VECTOR GRAPHICS Art Fundamentals of Graphic Design.
Graphics Ms. Brewer Spring Bellwork Edmodo – log on! Quiz? Take it if you need to! Policies and Procedures Powerpoint in Shared Folder! Get to Know.
Understanding Web Graphics Web Design Section 5-4 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development.
1 Creating Web Graphics Outline 2.1 Graphics Types 2.2 Vector Graphics 2.3Bitmapped Graphics 2.4Graphics for the Web 2.5 GIF (Graphics Interchange Format)
File Formats COM 366 Web Design & Layout. Native file format –Format native to software program –.psd > PhotoShop default Preserves layers –Use “Save.
Image Storage Bitmapped Graphics – in which an image is represented as a collection of dots Vector Graphics – in which an image is represented as a set.
All About File Formats Mr. Butler John Jay High School Department of Technology.
Presentation Design: Graphics. More About Color “Bit depth” of colors -- This is based on the smallest unit of information that a computer understands.
8 Using Web Graphics Section 8.1 Identify types of graphics Identify and compare graphic formats Describe compression schemes Section 8.2 Identify image.
Understanding Images on the Computer How do images work and why?
Files, File Format Folders Paths, URL Absolute Addresses Relative Addresses © Ms. Masihi.
Graphics and Images Communicating Information : Documents and Publications.
Digital File Formats ACCT-IGD-10: Students will generate and manipulate various graphic imaging processes. ACCT-IGD-15: Students will identify and produce.
Computer Images Can store color info about each pixel, but makes file BIG Compression for Web 15.
10 | Graphics COM 366 Web Design & Production. Native file format –Format native to software program –psd > PhotoShop default Preserves layers –Use “Save.
File Formats and Vector Graphics. File Types Images and data are stored in files. Each software application uses different native file types and file.
Unit 1: Task 1 By Abbie Llewellyn. Vector Graphic Software (Corel Draw) Computer graphics can be classified into two different categories: raster graphics.
Graphics on the Web How much do you want to know?? Terry Griffin.
Color and Images. Color The natural colors we see and the colors we see on computer monitors are different. CMYK -natural RGB -monitor.
FILE TYPES FOR WEB DESIGN 1 HOW SHOULD I SAVE?. GRAPHICS INTERCHANGE FORMAT (GIF) Best used for flat-color, sharp-edged art or text Clip art, logos Compression.
Raster Graphics 2.01 Investigate graphic image design.
File Types. Terms Multimedia- the integration of text, sound, video and/or animation into a document Letters, brochures, newsletters, web pages or presentations.
Images.  Images include graphics, such as backgrounds, color schemes and navigation bars, and photos and other illustrations  An essential part of a.
Color and Images. Color The natural colors we see and the colors we see on computer monitors are different. ______ -natural ______ -monitor.
Image File Formats. What is an Image File Format? Image file formats are standard way of organizing and storing of image files. Image files are composed.
Introduction to Images & Graphics JMA260. Objectives Images introduction Photoshop.
21 st Century Technology. Painting Uses Pixels Quality of image Changes Drawing Uses Vectors or Lines Quality of Image Does NOT Change.
Digital File Formats By Ali Aslam. JPEG JPEG Stands for Joint Photographic Experts Group. JPEG uses a lossy compression routine. Lossy compression means.
Digital Graphics for Computer Games Pixels Types of Digital Graphics (Raster and Vector) Compression.
GIF vs. JPEG GIF and JPEG (JPG) image formats are different. You should know which to use when. Here are some examples.
Raster vs. Vector 2.02 Understand Digital Vector Graphics.
WEB GRAPHICS EXPLORING COMPUTER SCIENCE - LESSON 3-4.
Missing Assignments 1.01 Song Lyrics: Alexis 1.02 Quiz: Alexis Constitution Day: Alexis, Asia, Bradley 2.02 Geometric Garden: Marlin 2.02 Image Trace:
2.01 Investigate graphic image design.
Graphic Format Factors
2.01 Understand Digital Raster Graphics
2.01 Understand Digital Raster Graphics
Understanding Web Graphics
Graphic Format Factors
2.01 Understand Digital Raster Graphics
Introduction to raster graphics
1.01 Investigate graphic types and file formats.
2.01 Investigate graphic image design.
A computer display is made up of small squares, called pixels.
Digital Images.
1.01 Investigate graphic types and file formats.
2.01 Understand Digital Raster Graphics
Graphic Format Factors
Graphic Format Factors
2.01 Investigate graphic image design.
2.01 Understand Digital Raster Graphics
2.01 Investigate graphic image design.
Graphic Format Factors
2.01 Investigate graphic image design.
Graphic Format Factors
2.01 Investigate graphic image design.
2.01 Investigate graphic image design.
Graphic Format Factors
Graphic Format Factors
2.01 Investigate graphic image design.
2.01 Investigate graphic image design.
Graphic Format Factors
Presentation transcript:

Graphic Format Factors 2.01 Understand Digital Raster Graphics

Graphics Graphics - anything on the page that is not actual text, from simple line drawings to fully active images found on the World Wide Web. There are many different graphic file formats. The format you choose depends on several factors.

Two Major Types of Graphics Raster Graphics Made of Pixles Vector Graphics Made of Lines and Shapes

Factors that Affect Graphic Format Color depth Compression Portability Transparency

Color Depth The number of colors per pixel that can be contained in an image. Most graphics editing programs will allow you to set the color depth for your image. Different graphic formats contain different numbers of colors per pixel. Examples: Teachers: Color Depth here refers to the number of colors that can be contained in the image. It is not referring to the number of colors which can be displayed on a computer monitor. Just for Fun (supplemental, not required): If you would like to integrate math into your curriculum, you could have students calculate the number of colors which can be displayed in an image based on the bits of color. To calculate this, raise 2 to the power of the color resolution. (Because each bit can contain 2 pieces of data: 1 or 0). So 8-bit color = 2^8 = 256 color possibilities per pixel. 1-bit color = 21 = 2 colors 8-bit color = 28 – 256 colors 16-bit color – 216 = 65.5 thousand colors 1-bit Color 2 Colors Per Pixel 8-bit Color 256 Colors Per Pixel 16-bit Color 65.5 Thousand Colors Per Pixel 24-bit Color 16.7 Million Colors Per Pixel

Compression Compression refers to how an image is saved in order to reduce the file size. The greater the compression, the lower the quality Two types: Lossless Reduces the file size without losing any pixel data Quality is not compromised Lossy Alters and/or eliminates some data The more the image is reduced, the more the quality is degraded Teacher Note: Lossy compression deletes some of the data that it deems unnecessary since the human eye is not very sensitive to changes in color over small distances.

Lossless Compression Before Compression After Compression Teacher Note: Lossless compression looks for recurring patterns and replaces each occurrence with an abbreviation. If there isn’t a lot of redundant information, then the file size may not be decreased very much. Lossless compression is used when it is important for the compressed image to look exactly like the original image. After Compression Notice that there is no difference, no data has been lost.

Lossy Compression Notice that each time the image is saved, the quality is degraded. Original . . . . . . Final compression Teacher Note: In lossy compression, the more times you save the image, the more data that is eliminated and the more the quality of the image is degraded. So every time you save a JPG file, the quality is degraded more. To prevent this, make all of the editing changes in the editing software program’s native format or in a bitmap format before saving the final image as a JPG or other compressed format which uses lossy compression. In the third image, the image is very pixelated.

Portability How easily you can open, modify, and view the files on computers using different operating systems, software and browsers.

Transparency Allows the background color of an image to be “eliminated” or made transparent so that the background behind the image can be seen. It makes part of the image invisible, or “see-through.” Teacher Note: To illustrate this concept, hold up a photograph on a piece of paper and hold a piece of colored paper behind it. You cannot see the color through the image. Next, hold up a transparency with a piece of colored paper behind it. The background color does change.

Factors to Consider When Choosing a Graphic File Format Which file format is best for a particular application? Or Output? How important is the quality of the image when transferred, copied, or displayed? How important is the speed at which the image transfers or loads? How important is file size? Teacher Note: The answers to these questions will help determine which graphic file type should be used.