Web Image Basics Comp 140 December 2. Vector Graphics Can be repositioned or resized – Will not diminish output quality Typically stored in AI, EPS, PICT.

Slides:



Advertisements
Similar presentations
Multimedia Mr. Sanchez.
Advertisements

Web Design Vocab 3 PNG, JPG, GIF, MP3, MPEG.
L.Ghadah R. Hadba CT1514-L1.  Computer Graphics :refers to processing of creating a new image from Geometry, Lighting parameters, Materials and Textures.Using.
Graphics CS 121 Concepts of Computing II. What is a graphic? n A rectangular image. n Stored in a file of its own, or … … embedded in another data file.
Images.
Graphics in the web Digital Media: Communication and Design
Graphics and Animation Chapter 8. 8 Graphics in Multimedia Graphics are an element that virtually all multimedia applications include.
Graphics and Images September 28, Unit 3.
Raster vs Vector and Image Resolution By Josh Gallagan.
File Formats The most common image file formats, the most important for cameras, printing, scanning, and internet use, are JPG, TIF, PNG, and GIF.
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.
Digital Images. Scanned or digitally captured image Image created on computer using graphics software.
 Scanned or digitally captured image  Image created on computer using graphics software.
Faculty of Sciences and Social Sciences HOPE Website Development Graphics Stewart Blakeway FML 213
File Formats COM 366 Web Design & Layout. Native file format –Format native to software program –.psd > PhotoShop default Preserves layers –Use “Save.
Module Code: CU0001NI Technical Information on Digital Images Week -2.
THE COLORS OF LIGHT RED, GREEN and BLUE
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.
Presentation Design: Graphics. More About Color “Bit depth” of colors -- This is based on the smallest unit of information that a computer understands.
1 Perception, Illusion and VR HNRS 299, Spring 2008 Lecture 14 Introduction to Computer Graphics.
Digital Image: Representation & Processing (2/2) Lecture-3
SOFTWARE TYPES Word processing Page layout Paint Draw.
Multimedia Elements II Graphics, Digital Video. UIT - Multimedia Production2 Multimedia Elements Multimedia elements include: Text Graphics Animation.
Information Processes and Technology Multimedia: Graphics.
+ 5 Things you need to know about images* *Images for the web.
Raster Graphics. An image is considered to be made up of small picture elements (pixels). Constructing a raster image requires setting the color of each.
Computer Images Can store color info about each pixel, but makes file BIG Compression for Web 15.
Graphics workshop Library and Information Services University of St Andrews.
Photoshop Photoshop works with bitmapped, digitized images (that is, continuous-tone images that have been converted into a series of small squares, or.
ADOBE PHOTOSHOP VECTOR VS RASTER. Pixel A pixel is the fundamental unit of an image in Photoshop. It is a small square block of color. An image often.
Web Graphics. Colours and Display Graphics and Modems 28.8kbps = 3.6 KB per second 36 KB takes 10 seconds to load. Pixels and color.
2D Graphics Theory & Principles. Single Point Smallest addressable area on screen or digital image.
File Formats and Vector Graphics. File Types Images and data are stored in files. Each software application uses different native file types and file.
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.
Graphics & Images What File Format Do I Use?. Graphics & Images …..are visual images presented on some form of media (drawings, print, web, digital video)
 Scanned or digitally captured image  Image created on computer using graphics software.
Multimedia. What is a graphic?  A graphic can be a: Chart Drawing Painting Photograph Logo Navigation button Diagram.
Images. Digital Images Rectangular arrays of pixel data Pixel - picture element, smallest addressable part of the frame buffer. Color depth - the depth.
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.
Digital Images are represented by manipulating this…
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.
Graphics Concepts Presentation
Exploring Web Design Chapter 1. Objectives Develop a new perspective of the WWW Learn what makes a website good or bad Discover how to apply objective.
Digital Image Editing Presented by John Hohn. File Formats JPEG – Joint Photographic Experts Group PNP – Portable Network Graphics GIF – Graphic Interchange.
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.
HTTP transaction with Graphics HTML file + two graphics files.
WEB GRAPHICS EXPLORING COMPUTER SCIENCE - LESSON 3-4.
Graphics and Image Data Representations 1. Q1 How images are represented in a computer system? 2.
Chapter 3 Image Files © 2013 Cengage Learning. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website,
Introduction to Graphics
Introduction to raster graphics
2.01 Investigate graphic image design.
Graphics Basics Ellen Eyth.
"Digital Media Primer" Yue-Ling Wong, Copyright (c)2013 by Pearson Education, Inc. All rights reserved.
Digital Images.
Image File Size and File Compression
Digital Images.
Graphics and Animation
Saving Images from Fireworks
1.01 Investigate graphic types and file formats.
Graphics Basic Concepts.
Photoshop: Creating and Preparing Images for the Web
2.01 Investigate graphic image design.
2.01 Investigate graphic image design.
Graphics and Animation
2.01 Investigate graphic image design.
Presentation transcript:

Web Image Basics Comp 140 December 2

Vector Graphics Can be repositioned or resized – Will not diminish output quality Typically stored in AI, EPS, PICT or WMF formats – Only SVG is supported by browsers – Check out

Raster Graphics Used primarily by web designers Built from pixels (picture elements) – Perfectly square – All same size – Display only one color at a time

Resolution Expression of image quality measured in the number of pixels that fit in one inch (ppi) Don’t have to be above 72 ppi At least 300 ppi for printing Size – The larger the image, the more pixels needed – Full size images for web pages not found too often

Color Monochrome – 1 bit color Black or white – 4 bit color Upto 16 colors Dithering intersperses and juxtoposes available color to create an illusion of more color – 8 bit color uses upto 256 colors or 256 shades of gray Websafe colors included – 16 bit - 65,000 colors – 24 bit – 16.7 million colors – ?

Raster Images JPG, GIF, PNG GIF (Graphical Interchange Format) – 256 colors – 72 ppi JPEG ( Joint Photographic Experts Group) – Famous for its patented selectable image compression algorithm – May damage image quality PNG (portable network graphic) – Supports unlimited resolution, 32 bit color and full alpha and index transparency – Alpha transparency less of a concern as newer browsers can handle it