Bitmap Vs Vector Graphics Web-safe Colours Image compression Web graphics formats Anti-aliasing Dithering & Banding Image issues for the Web

Size: px
Start display at page:

Download "Bitmap Vs Vector Graphics Web-safe Colours Image compression Web graphics formats Anti-aliasing Dithering & Banding Image issues for the Web"

Transcription

1

2 Bitmap Vs Vector Graphics Web-safe Colours Image compression Web graphics formats Anti-aliasing Dithering & Banding Image issues for the Web

3 Bitmap Vector (*Refer to Textbook Page 175 file formats)

4 Bitmap images are made up of individual dots (called pixels). Each pixel contains colour information which tells the video display system how to display the pixel. Image files are organised as rows and columns X pixels wide by Y pixels high. Image resolution refers to the size of the image [ e.g. 340(W) x 240(H) ].

5 Benefits Complex images can be displayed more quickly Drawbacks File size tends to be large Bitmaps difficult to resize

6 Total number of colours that can be displayed on screen is limited by the system s graphics hardware The number of bits of colour information for each pixel determines the number of colours that can be displayed. 1 2 (black/white) Line drawings K M True colour (*Refer to Textbook Page 163)

7 !" # $ %! For Example in HTML #FFFFF = white #000000= Black (*Refer to Textbook Page 175)

8 If using it Download faster. If not using it Download slower. Looks better for solid colours. Colour dithers (small colour speckles). Dither increases the file size.

9 Line based graphics For drawing lines, boxes, circles, polygons, and other graphic shapes Examples are found in CAD, and 3D models (e.g. Macromedia Freehand, Adobe Illustrator, Macromedia Flash) Stores the shapes as a set of instructions instead of dots

10

11 Benefits File size is smaller Displays correctly no matter what image resolution Drawbacks Cannot deliver photo-realistic detail Takes a longer time to display complicated graphics

12 A 320x240 image in 24 -bit colour will be 225KB To resolve file size problem, use data compression Compression involves two parts: compression and decompression (codecs) Two types of codecs: lossless and lossy

13 Lossless: Produce output that is exactly the same before and after the file is compressed and decompressed E.g. PKZip, WinZip, Stuffit Lossy: Data/Image will undergo a loss of information after compression and decompression Greater compression ratios are achieved Works by eliminating information that is difficult for the eye to detect

14 Image Formats Most common image formats used on the web are GIF and JPEG Types of image can be inferred from the filename suffix:.gif,.jpg,.png (portable network graphics)

15 Graphics Interchange Format Can store b/w, greyscale and colour images Limited to a maximum of 256 colours (8 bit colours) Two common versions of GIF: GIF87A and GIF89A Only GIF89A supports transparency, interlacing, animation. (*Refer to Textbook Page )

16 Non-interlaced GIF Vs Interlaced GIFs With an interlaced file, the picture is rearranged so that the browser can display large, coarse chunks of the image very quickly like a mosaic.

17 GIF use a compression scheme known as LZW compression, which looks to pattern of data. GIF compression searches for changes along a horizontal axis.

18 Horizontal lines 6.7k Vertical lines 11.5k 72% bigger Dithering noise 56k 8x bigger

19 Joint Photographic Experts Group An ISO standard (JPEG & Progressive JPEG) Used for photographic images with many different colours Uses RGB colour scheme to store colour information => max 16.7 millions of colours Uses Lossy codec (*Refer to Textbook Page 178)

20 Allows for varying degrees of compression with a corresponding loss of image quality Compression ratios of 10:1 can be achieved with no visible loss of image quality. Compression ratios of 100:1 or greater are possible (up to 95%)

21 ! A standard JPEG is not interlaced. However you can save an image as a Progressive JPEG instead. It also has a range of quality settings.

22 10% compression 30k 90% compression 3k

23 " Portable Network Graphic (Macromedia Fireworks) PNG developed by Thomas Boutell, 1994 Supports 24 bit file format Offers masking (like transparent GIF89A) Supports only Netscape 4.04 and Explorer 5.0

24 Gif87a Gif89a JPEG Progr. PNG JPEG Native support in most browsers Lossless compression Supports transparent backgrounds Supports interlacing Supports animation Max. No. of Colours M 16.7 M 16.7 M

25 # Graphics (e.g. cartoons, text, symbols) with solid colours Use Gif Photographic or illustrations with many tones, shades and colours Use Jpeg

26 $

27 $ (*Refer to Textbook Page Anti Aliasing)

28 %% Original Image Dithering is the process that a program uses when it cannot display the full range of colors in a particular image. An alternative to dithering is to use only the colors to which the software has access. This can result in banding.

29 %% When an image with lots of colours is converted to an image with less colours, the loss in image quality can take 2 forms: Dithering 32 colours Banding 32 colours Original 128 colours

30 & In computer imaging and display screens "gamma refers to the degree of contrast between the midlevel gray values of an image. >Example: lighting of the computer monitor Its like putting up a painting, and making sure the lighting is correct.

31 ' &% The size determines the effect and repetition. GIF and JPEG format.

32 ' &%

33

34

35 Bandwidth Length of time to download images Display Quality Users will browse with a variety of video display systems File Format Image file formats must be supported on all target platforms (e.g. jpg, gif, png)

36 ()????? So, why is it important to use web-safe colours in backgrounds and graphics in web development?

37 The Answer: So that even people with 8-bit monitors can see the graphics and background without dithering (kind of spotty), and be assured that graphics will look as good as possible on every other computers. (*Refer to Textbook Page )

38 Define Create Optimise - Purpose / Theme - Type (Banner, Buttons, Animations, etc) - Digitise / Produce - Edit / Enhance - Compress Implement

39 $%%*% URLs Web Style Guide: Graphics Graphics: Image Production Gif or Jpeg? Super Color Chart

LECTURE 03 BITMAP IMAGE FORMATS

LECTURE 03 BITMAP IMAGE FORMATS MULTIMEDIA TECHNOLOGIES LECTURE 03 BITMAP IMAGE FORMATS IMRAN IHSAN ASSISTANT PROFESSOR IMAGE FORMATS To store an image, the image is represented in a two dimensional matrix of pixels. Information about

More information

INTRODUCTION TO COMPUTER GRAPHICS

INTRODUCTION TO COMPUTER GRAPHICS INTRODUCTION TO COMPUTER GRAPHICS ITC 31012: GRAPHICAL DESIGN APPLICATIONS AJM HASMY hasmie@gmail.com WHAT CAN PS DO? - PHOTOSHOPPING CREATING IMAGE Custom icons, buttons, lines, balls or text art web

More information

LECTURE 02 IMAGE AND GRAPHICS

LECTURE 02 IMAGE AND GRAPHICS MULTIMEDIA TECHNOLOGIES LECTURE 02 IMAGE AND GRAPHICS IMRAN IHSAN ASSISTANT PROFESSOR THE NATURE OF DIGITAL IMAGES An image is a spatial representation of an object, a two dimensional or three-dimensional

More information

Developing Multimedia Assets using Fireworks and Flash

Developing Multimedia Assets using Fireworks and Flash HO-2: IMAGE FORMATS Introduction As you will already have observed from browsing the web, it is possible to add a wide range of graphics to web pages, including: logos, animations, still photographs, roll-over

More information

Raster (Bitmap) Graphic File Formats & Standards

Raster (Bitmap) Graphic File Formats & Standards Raster (Bitmap) Graphic File Formats & Standards Contents Raster (Bitmap) Images Digital Or Printed Images Resolution Colour Depth Alpha Channel Palettes Antialiasing Compression Colour Models RGB Colour

More information

B.Digital graphics. Color Models. Image Data. RGB (the additive color model) CYMK (the subtractive color model)

B.Digital graphics. Color Models. Image Data. RGB (the additive color model) CYMK (the subtractive color model) Image Data Color Models RGB (the additive color model) CYMK (the subtractive color model) Pixel Data Color Depth Every pixel is assigned to one specific color. The amount of data stored for every pixel,

More information

Bitmap Image Formats

Bitmap Image Formats LECTURE 5 Bitmap Image Formats CS 5513 Multimedia Systems Spring 2009 Imran Ihsan Principal Design Consultant OPUSVII www.opuseven.com Faculty of Engineering & Applied Sciences 1. Image Formats To store

More information

Fundamentals of Multimedia

Fundamentals of Multimedia Fundamentals of Multimedia Lecture 2 Graphics & Image Data Representation Mahmoud El-Gayyar elgayyar@ci.suez.edu.eg Outline Black & white imags 1 bit images 8-bit gray-level images Image histogram Dithering

More information

4 Images and Graphics

4 Images and Graphics LECTURE 4 Images and Graphics CS 5513 Multimedia Systems Spring 2009 Imran Ihsan Principal Design Consultant OPUSVII www.opuseven.com Faculty of Engineering & Applied Sciences 1. The Nature of Digital

More information

MOTION GRAPHICS BITE 3623

MOTION GRAPHICS BITE 3623 MOTION GRAPHICS BITE 3623 DR. SITI NURUL MAHFUZAH MOHAMAD FTMK, UTEM Lecture 1: Introduction to Graphics Learn critical graphics concepts. 1 Bitmap (Raster) vs. Vector Graphics 2 Software Bitmap Images

More information

Digital Images. Digital Images. Digital Images fall into two main categories

Digital Images. Digital Images. Digital Images fall into two main categories Digital Images Digital Images Scanned or digitally captured image Image created on computer using graphics software Digital Images fall into two main categories Vector Graphics Raster (Bitmap) Graphics

More information

Graphics for Web. Desain Web Sistem Informasi PTIIK UB

Graphics for Web. Desain Web Sistem Informasi PTIIK UB Graphics for Web Desain Web Sistem Informasi PTIIK UB Pixels The computer stores and displays pixels, or picture elements. A pixel is the smallest addressable part of the computer screen. A pixel is stored

More information

Topics. 1. Raster vs vector graphics. 2. File formats. 3. Purpose of use. 4. Decreasing file size

Topics. 1. Raster vs vector graphics. 2. File formats. 3. Purpose of use. 4. Decreasing file size Topics 1. Raster vs vector graphics 2. File formats 3. Purpose of use 4. Decreasing file size Vector graphics Object-oriented graphics or drawings Consist of a series of mathematically defined points that

More information

Picsel epage. Bitmap Image file format support

Picsel epage. Bitmap Image file format support Picsel epage Bitmap Image file format support Picsel Image File Format Support Page 2 Copyright Copyright Picsel 2002 Neither the whole nor any part of the information contained in, or the product described

More information

HTTP transaction with Graphics HTML file + two graphics files

HTTP transaction with Graphics HTML file + two graphics files HTTP transaction with Graphics HTML file + two graphics files Graphics are grids of Pixels (Picture Elements) Each pixel is exactly one color. At normal screen resolution you can't tell they are square.

More information

Color, graphics and hardware Monitors and Display

Color, graphics and hardware Monitors and Display Color, graphics and hardware Monitors and Display No two monitors display the same image in exactly the same way 1. Gamma settings - hardware setting on a monitor that controls the brightness of the pixels

More information

Specific structure or arrangement of data code stored as a computer file.

Specific structure or arrangement of data code stored as a computer file. FILE FORMAT Specific structure or arrangement of data code stored as a computer file. A file format tells the computer how to display, print, process, and save the data. It is dictated by the application

More information

Indexed Color. A browser may support only a certain number of specific colors, creating a palette from which to choose

Indexed Color. A browser may support only a certain number of specific colors, creating a palette from which to choose Indexed Color A browser may support only a certain number of specific colors, creating a palette from which to choose Figure 3.11 The Netscape color palette 1 QUIZ How many bits are needed to represent

More information

Images and Graphics. 4. Images and Graphics - Copyright Denis Hamelin - Ryerson University

Images and Graphics. 4. Images and Graphics - Copyright Denis Hamelin - Ryerson University Images and Graphics Images and Graphics Graphics and images are non-textual information that can be displayed and printed. Graphics (vector graphics) are an assemblage of lines, curves or circles with

More information

CHAPTER 3 I M A G E S

CHAPTER 3 I M A G E S CHAPTER 3 I M A G E S OBJECTIVES Discuss the various factors that apply to the use of images in multimedia. Describe the capabilities and limitations of bitmap images. Describe the capabilities and limitations

More information

A raster image uses a grid of individual pixels where each pixel can be a different color or shade. Raster images are composed of pixels.

A raster image uses a grid of individual pixels where each pixel can be a different color or shade. Raster images are composed of pixels. Graphics 1 Raster Vector A raster image uses a grid of individual pixels where each pixel can be a different color or shade. Raster images are composed of pixels. Vector graphics use mathematical relationships

More information

Dr. Shahanawaj Ahamad. Dr. S.Ahamad, SWE-423, Unit-06

Dr. Shahanawaj Ahamad. Dr. S.Ahamad, SWE-423, Unit-06 Dr. Shahanawaj Ahamad 1 Outline: Basic concepts underlying Images Popular Image File formats Human perception of color Various Color Models in use and the idea behind them 2 Pixels -- picture elements

More information

Chapter 3 Graphics and Image Data Representations

Chapter 3 Graphics and Image Data Representations Chapter 3 Graphics and Image Data Representations 3.1 Graphics/Image Data Types 3.2 Popular File Formats 3.3 Further Exploration 1 Li & Drew c Prentice Hall 2003 3.1 Graphics/Image Data Types The number

More information

CMPT 165 INTRODUCTION TO THE INTERNET AND THE WORLD WIDE WEB

CMPT 165 INTRODUCTION TO THE INTERNET AND THE WORLD WIDE WEB CMPT 165 INTRODUCTION TO THE INTERNET AND THE WORLD WIDE WEB Unit 5 Graphics and Images Slides based on course material SFU Icons their respective owners 1 Learning Objectives In this unit you will learn

More information

15110 Principles of Computing, Carnegie Mellon University

15110 Principles of Computing, Carnegie Mellon University 1 Overview Human sensory systems and digital representations Digitizing images Digitizing sounds Video 2 HUMAN SENSORY SYSTEMS 3 Human limitations Range only certain pitches and loudnesses can be heard

More information

1. Describe how a graphic would be stored in memory using a bit-mapped graphics package.

1. Describe how a graphic would be stored in memory using a bit-mapped graphics package. HIGHER COMPUTING COMPUTER SYSTEMS DATA REPRESENTATION GRAPHICS SUCCESS CRITERIA I can describe the bit map method of graphic representation using examples of colour or greyscale bit maps. I can describe

More information

ITP 140 Mobile App Technologies. Images

ITP 140 Mobile App Technologies. Images ITP 140 Mobile App Technologies Images Images All digital images are rectangles! Each image has a width and height 2 Terms Pixel A picture element Screen size In inches Resolution A width and height DPI

More information

Adobe Fireworks CS4 Kalamazoo Valley Community College February 25, 2010

Adobe Fireworks CS4 Kalamazoo Valley Community College February 25, 2010 Adobe Fireworks CS4 Kalamazoo Valley Community College February 25, 2010 Introduction to Fireworks CS4 Fireworks CS4 is an image editing program that can handle both vector (line art/logos) and raster

More information

Sampling Rate = Resolution Quantization Level = Color Depth = Bit Depth = Number of Colors

Sampling Rate = Resolution Quantization Level = Color Depth = Bit Depth = Number of Colors ITEC2110 FALL 2011 TEST 2 REVIEW Chapters 2-3: Images I. Concepts Graphics A. Bitmaps and Vector Representations Logical vs. Physical Pixels - Images are modeled internally as an array of pixel values

More information

PENGENALAN TEKNIK TELEKOMUNIKASI CLO

PENGENALAN TEKNIK TELEKOMUNIKASI CLO PENGENALAN TEKNIK TELEKOMUNIKASI CLO : 4 Digital Image Faculty of Electrical Engineering BANDUNG, 2017 What is a Digital Image A digital image is a representation of a two-dimensional image as a finite

More information

Image is a spatial representation of an object or a scene. (image of a person, place, object)

Image is a spatial representation of an object or a scene. (image of a person, place, object) Graphics & Images Table of Content 1. Introduction 2. Types of graphics 3. Resolution 4. Memory/Storage requirement 5. Types of images 6. Image colour schemes 7. Colour dithering 8. Image processing 9.

More information

Working with Photos. Lesson 7 / Draft 20 Sept 2003

Working with Photos. Lesson 7 / Draft 20 Sept 2003 Lesson 7 / Draft 20 Sept 2003 Working with Photos Flash allows you to import various types of images, and it distinguishes between two types: vector and bitmap. Photographs are always bitmaps. An image

More information

Lecture - 3. by Shahid Farid

Lecture - 3. by Shahid Farid Lecture - 3 by Shahid Farid Image Digitization Raster versus vector images Progressive versus interlaced display Popular image file formats Why so many formats? Shahid Farid, PUCIT 2 To create a digital

More information

1 Li & Drew c Prentice Hall Li & Drew c Prentice Hall 2003

1 Li & Drew c Prentice Hall Li & Drew c Prentice Hall 2003 Chapter 3 Graphics and Image Data Representations 3.1 Graphics/Image Data Types 3.2 Popular File Formats 3.3 Further Exploration 3.1 Graphics/Image Data Types The number of file formats used in multimedia

More information

Multimedia. Graphics and Image Data Representations (Part 2)

Multimedia. Graphics and Image Data Representations (Part 2) Course Code 005636 (Fall 2017) Multimedia Graphics and Image Data Representations (Part 2) Prof. S. M. Riazul Islam, Dept. of Computer Engineering, Sejong University, Korea E-mail: riaz@sejong.ac.kr Outline

More information

The next table shows the suitability of each format to particular applications.

The next table shows the suitability of each format to particular applications. What are suitable file formats to use? The four most common file formats used are: TIF - Tagged Image File Format, uncompressed and compressed formats PNG - Portable Network Graphics, standardized compression

More information

UNIT 7C Data Representation: Images and Sound

UNIT 7C Data Representation: Images and Sound UNIT 7C Data Representation: Images and Sound 1 Pixels An image is stored in a computer as a sequence of pixels, picture elements. 2 1 Resolution The resolution of an image is the number of pixels used

More information

Elements of Design. Basic Concepts

Elements of Design. Basic Concepts Elements of Design Basic Concepts Elements of Design The four elements of design are as follows: Color Line Shape Texture Elements of Design Color: Helps to identify objects Helps understand things Helps

More information

15110 Principles of Computing, Carnegie Mellon University

15110 Principles of Computing, Carnegie Mellon University 1 Last Time Data Compression Information and redundancy Huffman Codes ALOHA Fixed Width: 0001 0110 1001 0011 0001 20 bits Huffman Code: 10 0000 010 0001 10 15 bits 2 Overview Human sensory systems and

More information

3.1 Graphics/Image age Data Types. 3.2 Popular File Formats

3.1 Graphics/Image age Data Types. 3.2 Popular File Formats Chapter 3 Graphics and Image Data Representations 3.1 Graphics/Image Data Types 3.2 Popular File Formats 3.1 Graphics/Image age Data Types The number of file formats used in multimedia continues to proliferate.

More information

Factors to Consider When Choosing a File Type

Factors to Consider When Choosing a File Type Factors to Consider When Choosing a File Type Compression Since image files can be quite large, many formats employ some form of compression, the process of making the file size smaller by altering or

More information

V Grech. Publishing on the WWW. Part 1 - Static graphics. Images Paediatr Cardiol Oct-Dec; 2(4):

V Grech. Publishing on the WWW. Part 1 - Static graphics. Images Paediatr Cardiol Oct-Dec; 2(4): IMAGES in PAEDIATRIC CARDIOLOGY Images Paediatr Cardiol. 2000 Oct-Dec; PMCID: PMC3232491 Publishing on the WWW. Part 1 - Static graphics V Grech * * Editor-in-Chief, Images Paediatr Cardiol, Paediatric

More information

Photoshop CS6. Table of Contents. Image Formats! 3. GIF (Graphics Interchange Format)! 3. JPEG or JPG (Joint Photographic Experts Group)!

Photoshop CS6. Table of Contents. Image Formats! 3. GIF (Graphics Interchange Format)! 3. JPEG or JPG (Joint Photographic Experts Group)! Photoshop CS6 Table of Contents Image Formats! 3 GIF (Graphics Interchange Format)! 3 JPEG or JPG (Joint Photographic Experts Group)! 3 PNG (Portable Network Graphics)! 3 Pixels! 3 Resolution! 3 Creating

More information

This report provides a brief look at some of these factors and provides guidelines to making the best choice from what is available.

This report provides a brief look at some of these factors and provides guidelines to making the best choice from what is available. Technical Advisory Service for Images Advice Paper Choosing a File Format Introduction Over the years, there have been a number of image file formats that have been proposed and used. Of course, every

More information

GUIDELINES & INFORMATION

GUIDELINES & INFORMATION GUIDELINES & INFORMATION This document will provide basic guidelines for the use of the World Animal Day logo and general knowledge about the various file formats provided. Adhering to these guidelines

More information

Digital Imaging - Photoshop

Digital Imaging - Photoshop Digital Imaging - Photoshop A digital image is a computer representation of a photograph. It is composed of a grid of tiny squares called pixels (picture elements). Each pixel has a position on the grid

More information

COMPSCI 111 / 111G Mastering Cyberspace: An introduction to practical computing. Digital Images Vector Graphics

COMPSCI 111 / 111G Mastering Cyberspace: An introduction to practical computing. Digital Images Vector Graphics COMPSCI 111 / 111G Mastering Cyberspace: An introduction to practical computing Digital Images Vector Graphics Students should be able to: Learning Outcomes Describe the differences between bitmap graphics

More information

WordPress Users Group Manchester, NH July 13, Preparing Images for the Web. Daryl Johnson SvenGrafik

WordPress Users Group Manchester, NH July 13, Preparing Images for the Web. Daryl Johnson SvenGrafik WordPress Users Group Manchester, NH July 13, 2015 Preparing Images for the Web Daryl Johnson SvenGrafik WHY OPTIMIZE IMAGES for WORDPRESS? 1. Page Load Times Matter to Users 2. Image Bloat Puts Search

More information

A picture is worth a thousand words

A picture is worth a thousand words Images Images Images include graphics, such as backgrounds, color schemes and navigation bars, and photos and other illustrations An essential part of a multimedia product, is present in every multimedia

More information

1. Using Images on Web Pages 2. Image Formats 3. Bitmap Image Formats

1. Using Images on Web Pages 2. Image Formats 3. Bitmap Image Formats CMPT 165 INTRODUCTION TO THE INTERNET AND THE WORLD WIDE WEB By Hassan S. Shavarani UNIT5: GRAPHICS 1 TOPICS 1. Using Images on Web Pages 2. Image Formats 3. Bitmap Image Formats 2 THE TAG EXAMPLE

More information

Learning Outcomes. Black and White pictures. Bitmap Graphics. COMPSCI 111/111G Digital Images and Vector Graphics

Learning Outcomes. Black and White pictures. Bitmap Graphics. COMPSCI 111/111G Digital Images and Vector Graphics Learning Outcomes COMPSCI 111/111G Digital Images and Vector Graphics Lecture 13 SS 2018 Students should be able to: Describe the differences between bitmap graphics and vector graphics Calculate the size

More information

Chapter 3 Graphics and Image Data Representations

Chapter 3 Graphics and Image Data Representations Chapter 3 Graphics and Image Data Representations 3.1 Graphics/Image Data Types 3.2 Popular File Formats Li, Drew, & Liu 1 1 3.1 Graphics/Image Data Types The number of file formats used in multimedia

More information

What You ll Learn Today

What You ll Learn Today CS101 Lecture 18: Image Compression Aaron Stevens 21 October 2010 Some material form Wikimedia Commons Special thanks to John Magee and his dog 1 What You ll Learn Today Review: how big are image files?

More information

Understanding Image Formats And When to Use Them

Understanding Image Formats And When to Use Them Understanding Image Formats And When to Use Them Are you familiar with the extensions after your images? There are so many image formats that it s so easy to get confused! File extensions like.jpeg,.bmp,.gif,

More information

Using Adobe Photoshop

Using Adobe Photoshop Using Adobe Photoshop 1-1 - Advantages of Digital Imaging Until the 70s, using computers for images was unheard of outside academic circles. As general purpose computers have become faster with more capabilities,

More information

UNIT 7C Data Representation: Images and Sound Principles of Computing, Carnegie Mellon University CORTINA/GUNA

UNIT 7C Data Representation: Images and Sound Principles of Computing, Carnegie Mellon University CORTINA/GUNA UNIT 7C Data Representation: Images and Sound Carnegie Mellon University CORTINA/GUNA 1 Announcements Pa6 is available now 2 Pixels An image is stored in a computer as a sequence of pixels, picture elements.

More information

Applying mathematics to digital image processing using a spreadsheet

Applying mathematics to digital image processing using a spreadsheet Jeff Waldock Applying mathematics to digital image processing using a spreadsheet Jeff Waldock Department of Engineering and Mathematics Sheffield Hallam University j.waldock@shu.ac.uk Introduction When

More information

Raster Image File Formats

Raster Image File Formats Raster Image File Formats 1995-2016 Josef Pelikán & Alexander Wilkie CGG MFF UK Praha pepca@cgg.mff.cuni.cz http://cgg.mff.cuni.cz/~pepca/ 1 / 35 Raster Image Capture Camera Area sensor (CCD, CMOS) Colours:

More information

Welcome Back to Fundamentals of Multimedia (MR412) Fall, 2012 Chapter 3. ZHU Yongxin, Winson

Welcome Back to Fundamentals of Multimedia (MR412) Fall, 2012 Chapter 3. ZHU Yongxin, Winson Welcome Back to Fundamentals of Multimedia (MR412) Fall, 2012 Chapter 3 ZHU Yongxin, Winson zhuyongxin@sjtu.edu.cn Chapter 3 Graphics and Image Data Representations 3.1 Graphics/Image Data Types 3.2 Popular

More information

Coreldraw Crash Course

Coreldraw Crash Course Coreldraw Crash Course Yannick Kremer Vrije Universiteit Amsterdam, February 27, 2007 Outline - Introduction to the basics of digital imaging - Bitmaps - Vectors - Colour: RGB vs CMYK - What can you do

More information

Compression and Image Formats

Compression and Image Formats Compression Compression and Image Formats Reduce amount of data used to represent an image/video Bit rate and quality requirements Necessary to facilitate transmission and storage Required quality is application

More information

Digital Imaging & Photoshop

Digital Imaging & Photoshop Digital Imaging & Photoshop Photoshop Created by Thomas Knoll in 1987, originally called Display Acquired by Adobe in 1988 Released as Photoshop 1.0 for Macintosh in 1990 Released the Creative Suite in

More information

Glossary Unit 1: Hardware/Software & Storage Media

Glossary Unit 1: Hardware/Software & Storage Media 1. Bluetooth wireless technology to transfer data 2. Burner a CD or DVD writer; can be internal or external 3. Cloud computing use of web services to perform functions that were traditionally performed

More information

UNIT 7B Data Representa1on: Images and Sound. Pixels. An image is stored in a computer as a sequence of pixels, picture elements.

UNIT 7B Data Representa1on: Images and Sound. Pixels. An image is stored in a computer as a sequence of pixels, picture elements. UNIT 7B Data Representa1on: Images and Sound 1 Pixels An image is stored in a computer as a sequence of pixels, picture elements. 2 1 Resolu1on The resolu1on of an image is the number of pixels used to

More information

Basic photography Art, composition, and computer principles AEE 211 February 24, 2003

Basic photography Art, composition, and computer principles AEE 211 February 24, 2003 Basic photography Art, composition, and computer principles AEE 211 February 24, 2003 What makes these images effective? Overview Basic composition Mood and atmosphere Qualities of a good photo Basic composition

More information

Computers & Philately Overview

Computers & Philately Overview Rochester Philatelic Association George T. Fekete March 8, 2018 Tools Hardware Tools Hardware Computer PC Mac (Apple) Custom Scanner Software Tools Productivity Software Microsoft Office (Best in Class)

More information

Image Optimization for Print and Web

Image Optimization for Print and Web There are two distinct types of computer graphics: vector images and raster images. Vector Images Vector images are graphics that are rendered through a series of mathematical equations. These graphics

More information

6. Graphics MULTIMEDIA & GRAPHICS 10/12/2016 CHAPTER. Graphics covers wide range of pictorial representations. Uses for computer graphics include:

6. Graphics MULTIMEDIA & GRAPHICS 10/12/2016 CHAPTER. Graphics covers wide range of pictorial representations. Uses for computer graphics include: CHAPTER 6. Graphics MULTIMEDIA & GRAPHICS Graphics covers wide range of pictorial representations. Uses for computer graphics include: Buttons Charts Diagrams Animated images 2 1 MULTIMEDIA GRAPHICS Challenges

More information

TEST INFORMATION: 40 questions 50 minutes 70% minimum required to pass. Score is based on a 1000 pt system so passing will be a 700.

TEST INFORMATION: 40 questions 50 minutes 70% minimum required to pass. Score is based on a 1000 pt system so passing will be a 700. ADOBE CERTIFIED ASSOCIATE WORKSHOP!! (PHOTOSHOP WORKSHOP (PHOTOSHOP CS6) TEST INFORMATION: 40 questions 50 minutes 70% minimum required to pass Score is based on a 1000 pt system so passing will be a 700.

More information

CMPSC 390 Visual Computing Spring 2014 Bob Roos Review Notes Introduction and PixelMath

CMPSC 390 Visual Computing Spring 2014 Bob Roos   Review Notes Introduction and PixelMath Review Notes 1 CMPSC 390 Visual Computing Spring 2014 Bob Roos http://cs.allegheny.edu/~rroos/cs390s2014 Review Notes Introduction and PixelMath Major Concepts: raster image, pixels, grayscale, byte, color

More information

Warm up Question: Question: 8-bit indexed colour uses 256 colours. Announcements. Overview of Today s Topics. Announcements GRAPHICS CONTINUED

Warm up Question: Question: 8-bit indexed colour uses 256 colours. Announcements. Overview of Today s Topics. Announcements GRAPHICS CONTINUED Warm up Question: Question: 8-bit indexed colour uses 256 colours. True False Question: Vector images look good even if you resize them to make them bigger. True False Question: How many different colours

More information

Digital Asset Management 2. Introduction to Digital Media Format

Digital Asset Management 2. Introduction to Digital Media Format Digital Asset Management 2. Introduction to Digital Media Format 2010-09-09 Content content = essence + metadata 2 Digital media data types Table. File format used in Macromedia Director File import File

More information

raw format format for capturing maximum continuous-tone color information. It preserves all information when photograph was taken.

raw format format for capturing maximum continuous-tone color information. It preserves all information when photograph was taken. raw format format for capturing maximum continuous-tone color information. It preserves all information when photograph was taken. psd files (photoshop default) layered photoshop continuous-tone (photograph)

More information

Module 4 Build a Game

Module 4 Build a Game Module 4 Build a Game Game On 2 Game Instructions 3 Exercises 12 Look at Me 13 Exercises 15 I Can t Hear You! 17 Exercise 20 End of Module Quiz 20 2013 Lero Game On Design a Game When you start a programming

More information

Photoshop Domain 5: Publishing Digital Images Using Adobe Photoshop CS5

Photoshop Domain 5: Publishing Digital Images Using Adobe Photoshop CS5 Photoshop Domain 5: Publishing Digital Images Using Adobe Photoshop CS5 Adobe Creative Suite 5 ACA Certification Preparation: Featuring Dreamweaver, Flash, and Photoshop 1 Objectives Demonstrate knowledge

More information

IMAGE SIZING AND RESOLUTION. MyGraphicsLab: Adobe Photoshop CS6 ACA Certification Preparation for Visual Communication

IMAGE SIZING AND RESOLUTION. MyGraphicsLab: Adobe Photoshop CS6 ACA Certification Preparation for Visual Communication IMAGE SIZING AND RESOLUTION MyGraphicsLab: Adobe Photoshop CS6 ACA Certification Preparation for Visual Communication Copyright 2013 MyGraphicsLab / Pearson Education OBJECTIVES This presentation covers

More information

Image Processing Computer Graphics I Lecture 20. Display Color Models Filters Dithering Image Compression

Image Processing Computer Graphics I Lecture 20. Display Color Models Filters Dithering Image Compression 15-462 Computer Graphics I Lecture 2 Image Processing April 18, 22 Frank Pfenning Carnegie Mellon University http://www.cs.cmu.edu/~fp/courses/graphics/ Display Color Models Filters Dithering Image Compression

More information

ITP 140 Mobile App Technologies. Colors Images Icons

ITP 140 Mobile App Technologies. Colors Images Icons ITP 140 Mobile App Technologies Colors Images Icons Establish a style Look and Feel Create or choose a color palette Pick colors that complement each other Pick colors that are representative of your app

More information

apt solutions, inc. Tips Graphics - An Introduction Vector vs. Raster Graphics Vector Graphics

apt solutions, inc. Tips Graphics - An Introduction Vector vs. Raster Graphics Vector Graphics Graphics - An Introduction Author: Gordon Hanson, Electronic Publishing Analyst, Certified Adobe Trainer The ability to include graphics in a document is a basic requirement of good technical documentation.

More information

that says Colorize. Changing the hue changes the general color of the flower, from pink to yellow to green

that says Colorize. Changing the hue changes the general color of the flower, from pink to yellow to green Colorization Coloring the Entire Image: Let s say you have a colored image, but you wish to make it only black and white with a SINGLE color tone. The first thing to do is to make your image devoid of

More information

PCCLUB.ORG.UK Tuesday, 3 rd May 2005 Stuart Crump. Picture Editing, Printing & Publishing Tutorial 1 of 2

PCCLUB.ORG.UK Tuesday, 3 rd May 2005 Stuart Crump. Picture Editing, Printing & Publishing Tutorial 1 of 2 PCCLUB.ORG.UK Tuesday, 3 rd May 2005 Stuart Crump Picture Editing, Printing & Publishing Tutorial 1 of 2 Overview 2 Sessions (today & 18 th May) Tonight All about Input and Manipulation Image formats,

More information

4/9/2015. Simple Graphics and Image Processing. Simple Graphics. Overview of Turtle Graphics (continued) Overview of Turtle Graphics

4/9/2015. Simple Graphics and Image Processing. Simple Graphics. Overview of Turtle Graphics (continued) Overview of Turtle Graphics Simple Graphics and Image Processing The Plan For Today Website Updates Intro to Python Quiz Corrections Missing Assignments Graphics and Images Simple Graphics Turtle Graphics Image Processing Assignment

More information

Photoshop 01. Introduction to Computer Graphics UIC / AA/ AD / AD 205 / F05/ Sauter.../documents/photoshop_01.pdf

Photoshop 01. Introduction to Computer Graphics UIC / AA/ AD / AD 205 / F05/ Sauter.../documents/photoshop_01.pdf Photoshop 01 Introduction to Computer Graphics UIC / AA/ AD / AD 205 / F05/ Sauter.../documents/photoshop_01.pdf Topics Raster Graphics Document Setup Image Size & Resolution Tools Selecting and Transforming

More information

Digital Image Processing Introduction

Digital Image Processing Introduction Digital Processing Introduction Dr. Hatem Elaydi Electrical Engineering Department Islamic University of Gaza Fall 2015 Sep. 7, 2015 Digital Processing manipulation data might experience none-ideal acquisition,

More information

Digital Images: A Technical Introduction

Digital Images: A Technical Introduction Digital Images: A Technical Introduction Images comprise a significant portion of a multimedia application This is an introduction to what is under the technical hood that drives digital images particularly

More information

Lecture #2: Digital Images

Lecture #2: Digital Images Lecture #2: Digital Images CS106E Spring 2018, Young In this lecture we will see how computers display images. We ll find out how computers generate color and discover that color on computers works differently

More information

Introduction to Photography

Introduction to Photography Topic 11 - Bits & Bytes Learning Outcomes You will have a much better understanding of the basic units of digital photography. Bits & Bytes A Bit is the basic unit on a computer, which can be 0/1, off/

More information

Common File Formats. Need to store an image on disk Real photos Synthetic renderings Composed images. Desirable Features High quality.

Common File Formats. Need to store an image on disk Real photos Synthetic renderings Composed images. Desirable Features High quality. Image File Format 1 Common File Formats Need to store an image on disk Real photos Synthetic renderings Composed images Multiple sources Desirable Features High quality Lossy vs Lossless formats Channel

More information

Digital Imaging and Image Editing

Digital Imaging and Image Editing Digital Imaging and Image Editing A digital image is a representation of a twodimensional image as a finite set of digital values, called picture elements or pixels. The digital image contains a fixed

More information

How is Information Stored

How is Information Stored Binary CSCE 101 How is Information Stored Information is stored in the computer as binary numbers (0 s and 1 s). Even images are stored in this way, where a combination of 0 s and 1 s represent each color

More information

5.1 Image Files and Formats

5.1 Image Files and Formats 5 IMAGE GRAPHICS IN THIS CHAPTER 5.1 IMAGE FILES AND FORMATS 5.2 IMAGE I/O 5.3 IMAGE TYPES AND PROPERTIES 5.1 Image Files and Formats With digital cameras and scanners available at ridiculously low prices,

More information

CGT 211 Sampling and File Formats

CGT 211 Sampling and File Formats CGT 211 Sampling and File Formats The Physics of What We Do 2 types of waves - electromagnetic and pressure Analog frequency variations, infinite defines color, brightness, pitch, volume Digital Data Binary

More information

ICT 514 Multimedia Systems Topic 2: Visuals: Static. Outline. What is the difference and why? Consider the following file formats. What do they mean?

ICT 514 Multimedia Systems Topic 2: Visuals: Static. Outline. What is the difference and why? Consider the following file formats. What do they mean? ICT 514 Multimedia Systems Topic 2: Visuals: Static Consider the following file formats. What do they mean? Lance Fung (Ref: Li & Drew, Fundamentals of Multimedia, Chapter 3) master of science in information

More information

Computers and Imaging

Computers and Imaging Computers and Imaging Telecommunications 1 P. Mathys Two Different Methods Vector or object-oriented graphics. Images are generated by mathematical descriptions of line (vector) segments. Bitmap or raster

More information

CS 262 Lecture 01: Digital Images and Video. John Magee Some material copyright Jones and Bartlett

CS 262 Lecture 01: Digital Images and Video. John Magee Some material copyright Jones and Bartlett CS 262 Lecture 01: Digital Images and Video John Magee Some material copyright Jones and Bartlett 1 Overview/Questions What is digital information? What is color? How do pictures get encoded into binary

More information

Fireworks Bitmap Graphics Hands on practice notes. Basic Panels to note in Fireworks (Review)

Fireworks Bitmap Graphics Hands on practice notes. Basic Panels to note in Fireworks (Review) Fireworks Bitmap Graphics Hands on practice notes Topics of discussion 1. Saving files in Fireworks (PNG formats) - Review 2. Basic Panels Tool, Property, Layer & Optimize - Overview 3. Selection/Editing

More information

CS101 Lecture 19: Digital Images. John Magee 18 July 2013 Some material copyright Jones and Bartlett. Overview/Questions

CS101 Lecture 19: Digital Images. John Magee 18 July 2013 Some material copyright Jones and Bartlett. Overview/Questions CS101 Lecture 19: Digital Images John Magee 18 July 2013 Some material copyright Jones and Bartlett 1 Overview/Questions What is digital information? What is color? How do pictures get encoded into binary

More information

The BIOS in many personal computers stores the date and time in BCD. M-Mushtaq Hussain

The BIOS in many personal computers stores the date and time in BCD. M-Mushtaq Hussain Practical applications of BCD The BIOS in many personal computers stores the date and time in BCD Images How data for a bitmapped image is encoded? A bitmap images take the form of an array, where the

More information

Creating and managing digital images effectively requires a good understanding of the different aspects of an image, including:

Creating and managing digital images effectively requires a good understanding of the different aspects of an image, including: Chapter 4.. Graphics 89 Digital Images Creating and managing digital images effectively requires a good understanding of the different aspects of an image, including:.. The image type.. The image's attributes..

More information

Vector VS Pixels Introduction to Adobe Photoshop

Vector VS Pixels Introduction to Adobe Photoshop MMA 100 Foundations of Digital Graphic Design Vector VS Pixels Introduction to Adobe Photoshop Clare Ultimo Using the right software for the right job... Which program is best for what??? Photoshop Illustrator

More information