Introduction to Images & Graphics JMA260. Objectives Images introduction Photoshop.

Slides:

Advertisements

Similar presentations

Introduction to Computer Graphics Raster Vs. Vector COMMUNICATION TECHNOLOGY.

Advertisements

Chapter 17 Creating Images for the Web. Chapter Lessons Learn about Web features Optimize images for Web use Create a button for a Web page Create slices.

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.

2.01 Understand Digital Raster Graphics

Graphics in the web Digital Media: Communication and Design

Introduction to Computer Graphics

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.

File Formats By Jack Turner. Raster (Bitmap) Raster or bitmap is a dot matrix data structure, containing columns of dots and rows, of a graphics image.

V Obtained from a summer workshop in Guildford County July, 2014

Introduction to Computer Graphics Raster Vs. Vector TGJ 2OI St. Christopher C.S.S. 4 Introduction to Computer Graphics.ppt.

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.

BITMAP & VECTOR GRAPHICS Art Fundamentals of Graphic Design.

Zinnia Bell. RAWimages are image files that have not yet processed, they contain minimally processed data from the image sensor of either a image scanner,

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.

Module Code: CU0001NI Technical Information on Digital Images Week -2.

Lecture 4 - Introduction to Computer Graphics

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.

Bitmap Vs. Vector Graphics. To create effective artwork, you need to understand some basic concepts about vector graphics versus bitmap images, resolution,

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?

Digital Cameras And Digital Information. How a Camera works Light passes through the lens Shutter opens for an instant Film is exposed to light Film is.

Section 8.1 Create a custom theme Design a color scheme Use shared borders Section 8.2 Identify types of graphics Identify and compare graphic formats.

Digital Multimedia, 2nd edition Nigel Chapman & Jenny Chapman Chapter 3 This presentation © 2004, MacAvon Media Productions Introduction to Computer Graphics.

+ 5 Things you need to know about images* *Images for the web.

Image formats. Basic terminologies… Pixels: Pixels are the building blocks of every digital image. a pixel is a single point in a graphic image. Resolutions:

Photoshop Photoshop works with bitmapped, digitized images (that is, continuous-tone images that have been converted into a series of small squares, or.

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.

Raster vs Vector Graphics And Other Digital Terms.

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.

Digital Imaging 101 Ann Ware. Digital Image Categories BITMAP  A vector is created by using a series of mathematically defined lines and curves rather.

Digital Imaging 101 Ann Ware

Chapter 3 Image Files © 2013 Cengage Learning. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website,

 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.

Things to Remember When working with digital images.

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.

Editing Images for the Web. Optimization/Compression Graphics optimization is important for fast web page display.

Graphics Concepts Presentation

Glencoe Introduction to Web Design Chapter 8 Web Graphics 1 A bitmap file format that is used by scanners and graphics programs for use in print.

Digital Image Editing Presented by John Hohn. File Formats JPEG – Joint Photographic Experts Group PNP – Portable Network Graphics GIF – Graphic Interchange.

Digital Graphics for Computer Games Pixels Types of Digital Graphics (Raster and Vector) Compression.

Image File Formats Harrow Computer Club – Wed, 1 Dec 2010 Bob Watson MA CMath MIMA MBCS.

13 June – Session : Graphics Different types of Graphics for the web Features of image editing software Good practice for image editing.

ITEC2110, Digital Media Chapter 3 Digital Image Processing 1 GGC -- ITEC Digital Media.

Section 8.1 Section 8.2 Create a custom theme Design a color scheme

2.01 Understand Digital Raster Graphics

2.01 Understand Digital Raster Graphics

Digital Imaging 101 Ann Ware.

DIGITAL MEDIA FOUNDATIONS

Chapter 3 Image Files © 2013 Cengage Learning. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website,

2.01 Understand Digital Raster Graphics

Introduction to raster graphics

Introduction To Photo Editing SHIELA MAE A. AQUINO SRNHS.

Bitmap vs. Vector.

Graphics Basics Ellen Eyth.

A computer display is made up of small squares, called pixels.

Digital Images.

1.01 Investigate graphic types and file formats.

Introduction to Computer Graphics

Graphics Basic Concepts.

2.01 Understand Digital Raster Graphics

2.01 Understand Digital Raster Graphics

Lecture 4 - Introduction to Computer Graphics

Presentation transcript:

Introduction to Images & Graphics JMA260

Objectives Images introduction Photoshop

Bitmapped Graphics and Vector Graphics Bitmapped Graphics Image is modeled by an array of pixel values. Rectangular (usually square) dots of color Vector Graphics Image is stored as a mathematical description of a collection of individual lines, curves and shapes making up the image.

Bitmapped Graphics and Vector Graphics Bitmapped Graphics Image is modeled by an array of pixel values. Rectangular (usually square) dots of color

Bitmapped Graphics and Vector Graphics Vector Graphics Image stored as a mathematical description of a collection of individual lines, curves and shapes making up the image. Vector

The difference between Bitmapped Graphics and Vector Graphics Vector Graphics 1. Generally smaller in file size. 2. Can be changed easily without losing quality. 3. Size is affected by objects. 4. Vector to Bitmap image conversion is simple. 5. Illustrator Bitmapped Graphics 1. Generally larger in file size. 2. Can represent a full range of images accurately. 3. Size affected by dimensions of image. 4. Bitmap to Vector conversion is difficult. 5. Photoshop

Graphic Quality and File Size Bitmap Graphics: Resizing requires a way to make the pixels larger Bitmaps do not scale well Quality is worse when resized File size becomes larger

Graphic Quality and File Size Vector Graphics: Because they are based on a mathematical equation, they scale well Quality remains the same File size remains the same

File Format Examples 2 Bitmapped good for reproducing subtle gradations of color Photographs Can have jagged edges Vector good for producing crisp outlines, such as in logos and illustrations Can be printed or displayed at any resolution without losing detail

Common File Formats (Bitmap) PSD – Photoshop TIFF—Tag Image File Format For Web GIF—Graphic Interchange Format JPEG—Joint Photographic Experts Group PNG—Portable Network Graphic

Compression | Lossy & Lossless Compression scheme (JPEG, GIF, PNG) Help reduce file size.

Compression | Lossy & Lossless Compression scheme (JPEG, GIF, PNG) Help reduce file size.

Compression | Lossy & Lossless Lossy: Makes file size smaller Eliminates information Pixels you begin with not same pixels you end up with. JPEG is a lossy compression scheme.

Compression | Lossy & Lossless Lossless compression allows exact original data to be reconstructed from compressed data. PNG and Gif are Lossless compression schemes.

Characteristics of Formats GIF Lossless, 256 colors, transparency JPEG Lossy (variable quality), millions of colors PNG Lossless, variable number of colors, W3C standard

JPEG - Quality: High File size : 19K JPEG - Quality: Low File size : 8K Background removed No Transparency

GIF - Colors: 256 File size : 44K GIF - Colors: 16 File size : 17K GIF - Colors: 2 File size : 7K

GIF Lossless, 256 colors, transparency JPEG Lossy (variable quality), millions of colors PNG Lossless, variable number of colors, transparency File Formats

Tips: Working with images Save master copy of your file as.psd. From the master, save optimized images as jpeg, gif, or png. If image is to be viewed on a computer screen – resolution is 72 dpi.

Tips: Working with images For web images always use the Save for Web command. Always resize images with Photoshop or some other imaging program - do not resize with width and height HTML tags.