Lesson 9: Web Graphics. Objectives Distinguish between vector and raster graphic types Identify and choose appropriate image file formats, including browser-compatibility.

Slides:



Advertisements
Similar presentations
Introduction to Computer Graphics Raster Vs. Vector COMMUNICATION TECHNOLOGY.
Advertisements

Multimedia for the Web: Creating Digital Excitement Multimedia Element -- Graphics.
2.01 Understand Digital Raster Graphics
2.02 Understand Digital Vector Graphics
WHAT IS SVG?. SVG stands for Scalable Vector Graphics SVG is used to define vector-based graphics for the Web SVG defines the graphics in XML format SVG.
Image Representation CS105. Data Representation Text representation – ASCII character set – Unicode – Data compression Images!
Copyright © 2006 by The McGraw-Hill Companies, Inc. All rights reserved. McGraw-Hill Technology Education Copyright © 2006 by The McGraw-Hill Companies,
Graphics and Animation Chapter 8. 8 Graphics in Multimedia Graphics are an element that virtually all multimedia applications include.
Ann Ware Digital Imaging 101. Digital Image Categories BITMAPVECTOR A bitmap is an image created with pixels (small squares of color) The number of pixels.
How do bitmapped graphics differ? Bitmaps are the most common type of picture format. Vector images are inherently different from bitmap images.
Introduction to Computers Section 11A. home Types of Graphics File Bitmap Vector.
Fonts Typeface Typography. Leading Spacing between lines.
Digital Art is Interactive Visual Art. How has art been changed because of technology ?
WHAT IS IT AND WHY SHOULD I CARE? 2.0.  GRAPHICS  Draw-type graphics (also called vector graphics) represent an image as a geometric shape made up of.
Bitmap vs. Vector How computers work with photographs and drawings.
Chapter 3 Survival Techniques. Goals Discover that being an Illustrator artist is more than just knowing the tools Develop a basic understanding of the.
Graphic Images 101. Painted on a grid Drawn mathematically.
Minard Saladino By:. Introduction: Illustrator is a vector-based imaging program. Unlike PhotoShop, which deals in pixels (raster images), this one deals.
Dedicated Vector and Bitmap editing software.
Module Code: CU0001NI Technical Information on Digital Images Week -2.
Objective Understand concepts used to create digital graphics. Course Weight : 15% Part Three : Concepts of Digital Graphics.
Getting the Basics Graphics for the Web McIntyre, Period 2 Kellogg, Period 5.
Presentation Design: Graphics. More About Color “Bit depth” of colors -- This is based on the smallest unit of information that a computer understands.
SOFTWARE TYPES Word processing Page layout Paint Draw.
TYPES OF GRAPHICS TECHNOLOGICAL DESIGN. GRAPHIC DESIGN DEFINITION Visual problem solving that utilizes shapes, images, text, color, etc. to communicate.
Graphics and Animation Multimedia Projects Part 2.
Multimedia in Web Images. A Picture Tells A Thousand Words Forms of Images Photograph Painting Symbol Logo Flag Map Diagram Functions Provide facts Explain.
Computer Concepts 2014 Chapter 8 Digital Media. 8 Chapter Contents  Section B: Bitmap Graphics  Section C: Vector and 3-D Graphics Chapter 8: Digital.
Art Historical Data. Creating data from images Images as data Objects as data Data in digital images Raster (pixel display) Vector Other Data about images.
GRAPHICS. Topic Outline What is graphic. Resolution. Types of graphics. Using graphic in multimedia applications.
Designing Your Clock Face. Objectives STUDENTS WILL BE ABLE TO: 1.Explain the differences between RASTER and VECTOR graphics. 2.List at least two examples.
2D Graphics Theory & Principles. Single Point Smallest addressable area on screen or digital image.
Types of Graphics  Vector Individual scalable objects defined by mathematical equations  Bitmap Pixels (tiny, single-colored square) in a grid Most.
Chapter 2 File Format Objectives (1 of 2) Identify the difference between vector based graphics and bitmap-based graphics Clarify bitmap and vector graphic.
Vector vs. Raster Objectives:
Multimedia def. Many forms. Multimedia Text Hyperlinks Images Audio Animation Video Text Hyperlinks Images Audio Animation Video.
Digital Imaging 101 Ann Ware. Digital Image Categories BITMAP  A vector is created by using a series of mathematically defined lines and curves rather.
Vector Graphics Multimedia Technology. Object Orientated Data Types Created on a computer not by sampling real world information Details are stored on.
Graphic Format Factors
Chapter 2 File Format Objectives (1 of 2) Identify the difference between vector based graphics and bitmap-based graphics Clarify 3 types of vector programs.
Digital Imaging 101 Ann Ware
Introduction to Vector Graphics and Adobe Illustrator CS3
Introduction To Technology.  In computer graphics, there are two type of graphics:  Raster  Vector.
Chapter 12 Web Publishing. Goals Become an image optimization master Get a handle on Web file formats, including SVG and SWF Learn about Web image color.
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.
Chapter 8B Graphics and Multimedia. 8B-2 Graphic File Formats Bitmapped images –Most common image type –Also called raster images –Image is drawn using.
Graphics Concepts Presentation
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 Graphics for Computer Games Pixels Types of Digital Graphics (Raster and Vector) Compression.
Introduction to the Computer Graphics Anton V. Kudinov, Assistant professor of Computer Engineering Department.
Raster vs. Vector 2.02 Understand Digital Vector Graphics.
RASTERIZING SHAPES IN PHOTOSHOP RASTERIZE: A process in Photoshop of converting a vector image into a bitmap (or raster) image VECTOR: A vector image is.
Computer Graphics Lesson 2 July 12, 2005 Image Formats What are some formats you are familiar with? There are 4 basic image format types: Uncompressed.
Bitmap vs. Vector How computers work with photographs and drawings.
Digital Imaging 101 Ann Ware.
Types of Graphics Technological Design.
RESEARCH AND APPLY GRAPHIC DESIGN TECHNIQUES #3
Lecture Week 4 Images.
Some terms to become familiar with:
Graphics and Animation
1.01 Investigate graphic types and file formats.
Graphics Basic Concepts.
MED 2001 Advanced Media Production
Digital Media Objective
Web Programming– UFCFB Lecture 7
chapter 29: Creating Web Graphics
Graphics and Animation
Presentation transcript:

Lesson 9: Web Graphics

Objectives Distinguish between vector and raster graphic types Identify and choose appropriate image file formats, including browser-compatibility issues and lowest common denominator in audience usability Identify Scalable Vector Graphics (SVG) characteristics Identify accessibility issues and solutions related to Web images and animation

Digital Imaging Concepts Pixels Color depth Image resolution Palettes –Dithering

Raster vs.Vector Graphics Raster graphics –Also known as bitmap graphics –Use small dots to create images and colors –Best for photographs and realistic graphics Vector graphics –Store information about image in mathematical instructions that are interpreted and displayed –Best for line art, shapes and illustrations

Graphics Applications Vector-based drawing programs Paint programs

Image File Formats

Creating and Optimizing Images Web images and accessibility Image optimization Image slicing and splicing

Summary Distinguish between vector and raster graphic types Identify and choose appropriate image file formats, including browser-compatibility issues and lowest common denominator in audience usability Identify Scalable Vector Graphics (SVG) characteristics Identify accessibility issues and solutions related to Web images and animation