Raster (Bitmap) Graphic File Formats & Standards

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

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

LECTURE 02 IMAGE AND GRAPHICS

4 Images and Graphics

Graphics for Web. Desain Web Sistem Informasi PTIIK UB

INTRODUCTION TO COMPUTER GRAPHICS

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

MOTION GRAPHICS BITE 3623

HTTP transaction with Graphics HTML file + two graphics files

Digital Imaging & Photoshop

Understanding Image Formats And When to Use Them

Digital Imaging and Image Editing

PENGENALAN TEKNIK TELEKOMUNIKASI CLO

CHAPTER 3 I M A G E S

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.

LECTURE 03 BITMAP IMAGE FORMATS

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

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

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

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

Commercial Art 1 Photoshop Study Guide. 8) How is on-screen image resolution measured? PPI - Pixels Per Inch

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

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

Digital Imaging - Photoshop

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

Photoshop Elements Week 1 - Photoshop Elements Work Environment

Factors to Consider When Choosing a File Type

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

CMPT 165 INTRODUCTION TO THE INTERNET AND THE WORLD WIDE WEB

Vector VS Pixels Introduction to Adobe Photoshop

Bitmap Image Formats

Color, graphics and hardware Monitors and Display

THE 3 BIGGEST MISTAKES TO AVOID WHEN USING GRAPHIC IMAGES IN PRINT

Alpha channels are basically saved selections. They do not affect how your image will be printed.

How to Avoid Landmines: Managing your Motion Graphics Projects

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

Welcome to Photoshop CS

Multimedia. Graphics and Image Data Representations (Part 2)

CD: (compact disc) A 4 3/4" disc used to store audio or visual images in digital form. This format is usually associated with audio information.

Digital Darkroom P 207

DIGITAL IMAGING FOUNDATIONS

Chapter 11. Preparing a Document for Prepress and Printing Delmar, Cengage Learning

Coreldraw Crash Course

Elements of Design. Basic Concepts

Image Perception & 2D Images

ITP 140 Mobile App Technologies. Images

PHOTOGRAPHY AND DIGITAL IMAGING

Photoshop Domain 2: Identifying Design Elements When Preparing Images

Using Adobe Photoshop

Computers & Philately Overview

Image Optimization for Print and Web

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

Using Adobe Photoshop

Aperture. The lens opening that allows more, or less light onto the sensor formed by a diaphragm inside the actual lens.

Fundamentals of Multimedia

Lecture #2: Digital Images

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

CS 200. Lecture 03 Introduction & Pixel Graphics. 03 Pixel Graphics. CS 200 Spring 2017

ITP 140 Mobile App Technologies. Colors Images Icons

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

Digital Files File Format Storage Color Temperature

Digital Imaging with the Nikon D1X and D100 cameras. A tutorial with Simon Stafford

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.

Bit Depth. Introduction

Raster Image File Formats

CS 200. Lecture 03 Introduction & Pixel Graphics. Photoshop courtesy of Pixel Graphics. CS 200 Fall 2014

9/13/2017. Alpha Channels

CS 200. Lecture 03! Introduction &! Pixel Graphics. Miscellaneous Notes

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

Adobe Photoshop PS2, Part 3

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

Chapter 3 Graphics and Image Data Representations

CS 200. Lecture 03 Introduction & Pixel Graphics. 03 Pixel Graphics. CS 200 Fall 2016

Identifying Design Elements When Preparing Images

Digital Photography: Just the Basics

Know your digital image files

CSC 170 Introduction to Computers and Their Applications. Lecture #3 Digital Graphics and Video Basics. Bitmap Basics

Digital imaging or digital image acquisition is the creation of digital images, typically from a physical scene. The term is often assumed to imply

Introduction to Photography

In order to manage and correct color photos, you need to understand a few

Digital imaging requirements for offset print

Images and Displays. Lecture Steve Marschner 1

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

Color, Resolution, & Other Image Essentials

Developing Multimedia Assets using Fireworks and Flash

Glossary Unit 1: Hardware/Software & Storage Media

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

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

Capturing and Editing Digital Images *

Photoshop (Image Processing)

Applying mathematics to digital image processing using a spreadsheet

The relationship between Image Resolution and Print Size

18 1 Printing Techniques. 1.1 Basic Printing Techniques

Lecture - 3. by Shahid Farid

EEB5894. Multimedia 4/6/11

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

ONYX White Paper DESIGNING WITH WHITE & SPECIALTY INK

GUIDELINES & INFORMATION

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

University Of Lübeck ISNM Presented by: Omar A. Hanoun

Transcription:

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 Model CMYK Colour Model LAB Colour Model Raster Graphics Output Options References

Raster (Bitmap) Images Made up of a grid, or raster of small squares, called pixels. An image using this method is drawn with a group of pixels to create the appearance of the object. http://www.sthelens.oxon.sch.uk/ict/graphics/graphics/raster_example1.jpg

Raster (Bitmap) Images To edit, you work with groups of pixels. Work best with photographic or paint style images. Are device dependent, that is, they have a defined size and are not easily scaled up. Up scaling can cause the jaggies (ragged edges). To avoid this, get correct image size first or use special anti-aliasing (smoothing) software or algorithms (maths sums) to enlarge. Common paint/imaging software are Photoshop, Paint Shop Pro, The Gimp.

Digital Or Printed Images Most photos are called continuous tone images as there is an illusion of constant transition of colour or shades of greys. Pixel based images work the same way as each pixel can be coloured independently to create a smooth, continuous transition of colour. Non digital printing also creates this illusion using half tone dots. These are rows of small dots that create the appearance of different colour or grey shades.

Resolution Resolution: Refers to the unit of measurement to determine the following. Image Resolution, the size of an image file in pixels, called pixels per inch (PPI) or dots per inch (DPI) Monitor Resolution, the way an image is displayed on your monitor called dots per inch (DPI) Output Device Resolution, the quality of a final printed image, measured as either dots per inch (DPI) or lines per inch (LPI).

Resolution Dots per inch or DPI: The dots a medium can display. In a computer monitor a dot is a pixel. Maths Idea - one inch = 25.4 millimetres. For example: A 640 x 480 pixel image created at 75dpi (ppi) would have a size of 8.53 x 6.4 or 217mm x 163mm. An 10 x 8 photo image that is to be printed at 150dpi (ppi) would need an image resolution of 1500 x 1200 pixels in your image editing application. A 1 inch (2.5cm) image at 72dpi (ppi) contains 5,184 pixels. That is multiplying 72 pixels x 72 pixels. with a file size of 6Kb. If was a 150dpi (ppi) image, it would contain 22,500 pixels. That is, multiplying 150 pixels x 150 pixels.

Resolution Aspect Ratio: The relationship between height and width in an image, for example, 1.33:1 for a very basic computer screen. Film/video can be between this value and 2.35:1 depending on film type or projection system. A few resolution & aspect ratios. 1920 x 1080, 1.78:1 Common wide screen monitor & HD resolution 2048 x 1536, 1.33:1 - Moderate print resolution. 4096 x 3072, 1.33:1 - High print resolution 5656 x 4240, 1.33:1 24megapixel camera photo resolution

Colour Depth Colour Depth: A measure of how many colours each pixel in an image is capable of displaying. For example, in an 8 bit image each pixel is represented by 8 bits or 1 byte of data and allow the pixel to be any one of 256 colours. Other colour depth options are 24 bit: A maximum of 16,777,216 colour possibilities which is almost the full range of colours our eyes can detect. In this model there are 8 bits each of red, green & blue. Each of these 3 channels can display 256 levels of brightness. 48 bit: known as deep colour. It expands the colour range possibilities from millions to billions. It gives a vividness and colour accuracy that also gets rid any on-screen colour banding, for tonal transitions that are very smooth and changes of colour that are very subtle.

Alpha Channel Alpha Channel: An optional 8 bits of image data that provides information about transparency. It is added onto RGB data that defines an image to make a 24bit image into a 32 bit image. The alpha channel provides 256 levels of intensity. This is used to vary the transparency of the image against a background. An alpha channel functions as a mask or matte to allow parts of a image to be seen while the rest is replaced with a background image. 0 (black) is fully transparent & 256 (white) is opaque in the alpha channel It is used for composition of complex 3D renders, compositing of scenes in video post production, in Photoshop as layer masks or in digital video editing for overlaying video.

Alpha Channel Alpha Channel Example (a) Foreground image (FG) image with opaque and translucent objects. (b) Alpha channel from FG image. (c) Background (BG) image. (d) Composite of FG image over BG image using alpha channel to control transparency.

Palettes Palette: A set of colours used or available for use in an image. Generally limited to 256 colours or less, that is 8 bit colour images. Palettes are often used in interactive design to optimise GIF & PNG format images to get the smallest file size yet correctly display image colour. 24 bit images can be reduced to an 8 bit images by generating an optimised palette that creates the best combination of colours or they can be dithered. Dithering: The process of adjusting adjacent pixels of different colours to give the illusion of a third colour in a palette. This simulates the display of colours that are not in the current colour palette.

Antialiasing Jaggies or stairstepping: The effect of strong edges or lines that aren t horizontal or vertical displayed in pixel based or raster graphics. Anti-aliasing: The method of reducing this jaggedness by filling in pixels with colours midway between the edge or line and the background colour. Most programs allow anti-aliasing to be adjusted or to turn it on or off. Antialiasing Example (a) Aliased line showing stair stepping effect. (b) Antialiasing inserts middle tones that blend the line into the background to reduce the jaggies

Compression Compression: Reducing data size in image files. Two general types, lossy and lossless. Lossless: Reduces file size without effecting image quality by encoding colour and location of repeated data. Lossy: Reduces file size by changing data or throwing some of it away. Image degradation is offset by generating custom palettes or by using small amounts of compression.

Colour Models A colour model is a way for displaying & measuring colour. The human eye understands colour according to the wavelength of the light it gets. With the full colour spectrum (range) it is white and with no light it is black. The common colour models are RGB (red, green, blue), CMYK (cyan, magenta, yellow, black and there is a third one called LAB (luminance, a chromatic component, b chromatic component).

RGB Colour Model The RGB colour model is known as additive colour where equal amounts of red, green & blue produce white. A large percentage of the natural spectrum (range) of colour can be replicated by the mixing of red, green & blue. As a general rule you work with RGB images because; RGB files are smaller than other colour models Monitors & screens display RGB colour best It has a larger colour spectrum (range) than CMYK.

CMYK Colour Model The CMYK colour model represents the four inks used to print images on a traditional printing press. Because all printing inks contain some impurities, the C (cyan), M (magenta) & Y (yellow) inks actually produce a muddy brown and must be combined with black (K) ink to produce a true black. (K is used to avoid confusion with Blue in RGB.) To print an image four printing plates are produced, one for each colour. These are called colour separations. The combined separations form a complete image called a composite. It is called a subtractive colour model as combining all the colours equally produces black.

LAB Colour Model The LAB (L*a*b) colour model is designed to be device independent. That is, to create consistent colour regardless of the device (monitor, printer, computer, or scanner) which is used to create or output the image. L*a*b color model consists of: a luminance or lightness component (L) and two chromatic (colour) components: the a component (from green to red) and the b component (from blue to yellow).

LAB Colour Model L*a*b* model: A. Luminance =100 (white) B. Green to red component C. Blue to yellow component D. Luminance = 0 (black)

Colour Gamut Colour Gamut: The range of colours that a colour system can display or print. The spectrum (range) of colours seen by the human eye is wider than the gamut (colour range) available in any colour model. L*a*b has the largest gamut, encompassing all colours in the RGB and CMYK gamuts. RGB gamut contains a subset of these colours that can be viewed on a computer,television or screen (which emits red, green, and blue light). Some colours, such as pure cyan (light blue) or pure yellow, can't be displayed accurately using RGB. The CMYK gamut is even smaller, consisting only of colours that can be printed using process-colour inks. To overcome this problem special mixed inks called Pantone colours are used.

Colour Gamut Color gamuts: A. LAB color gamut B. RGB color gamut C. CMYK color gamut

Raster Graphics Output Options Screen Based File Formats: GIF (Graphics Interchange Format): An 8 bit (256 colour) lossless compression format developed by CompuServe/Unisys. Best suited for solid colour based images & widely used, particularly for web based still and animated images. The Gif89a version also supports interlacing and transparency. JPG, JPEG (Joint Photographic Experts Group): Developed as a lossy compression way to radically reduce the file size of photographic images by cutting out minor differences in pixel colours. Achieves one of the highest compression rates but breaks down if pushed too far or if saved more than once. Best suited for full colour 24 bit (16.7million colour) and gradient style images.

Raster Graphics Output Options Screen Based File Formats: PNG (Portable Network Graphics): Developed by the Joint Photographers Group as an alternative to the GIF format and, like GIF, is used for displaying images on the web and other online/screen based services. Preserves all colour information and alpha channels in an image and uses a lossless compression scheme to reduce file size. Supported in all the latest web browsers but and may need a specific browser plug-in for older browsers. Best used for solid colour images in its 8 bit format and for continuous tone images in its 24 bit format.

Raster Graphics Output Options Other Common File Formats: PCT, PICT (PICTure): Native Macintosh still image format. Can contain both bitmap & vector information. TGA (TarGA): Still image format developed by Truevision. Available in a wide range of images from 8 bit to 32 bit and can be compressed using lossless compression or uncompressed. Was orginally designed for capturing video & outputting computer graphics or digital video to tape. BMP (BitMaP): Microsoft developed as native format for icons & images in the Windows environment. Available in a wide range of image types from 8 bit to 32 bit and can be compressed or uncompressed.

Raster Graphics Output Options Other Common File Formats: TIF, TIFF (Tagged Image File Format): Still image format developed by Aldus/Microsoft specifically for desktop publishing and print markets. It can use lossless compression and has slightly different implementations on PCs or Macs and available in many different versions. Most programs will now accept either the PC or Mac implementation. Open EXR: Image format developed by Industrial Light & Magic (ILM) for use in Computer Graphic applications and is used in all their movie productions and now widely adopted by other animation and feature film production houses. It supports 16 bits per channel which allows for a dynamic range of over 30 stops of exposure. It also supports both lossless and lossy compression.

Raster Graphics Output Options Other Common File Formats: RAW: Camera raw image file formats are like digital negatives. They are created by a variety of digital cameras and contain all the information the camera has about the image. The image information is directly captured from the camera without filters and adjustments applied by the camera. This lets photographers interpret the image data rather than letting the camera make the adjustments and conversions. They are similar to TIFF files. A camera raw image file does not throw away any image information to generate a file--it's lossless--but camera raw image files have the advantage of being smaller than uncompressed TIFF files. Only camera raw images contain the actual data captured by the sensor without any in-camera processing.

Bibliography Adobe help files. Computer Arts magazine. http://www.abccables.com/info-deep-color.html http://www.gemaga.com/2007/12/28/taking-oldgames-into-the-hd-era http://www.openexr.com http://en.wikipedia.org/wiki/openexr