Bitmap images Resizing bitmaps Vector images Why are there so many image file formats? Resolution and Scanning “Bits” and.bmp files Photo editors JPG file.

Slides:



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

L.Ghadah R. Hadba CT1514-L1.  Computer Graphics :refers to processing of creating a new image from Geometry, Lighting parameters, Materials and Textures.Using.
Image Processing, Illustration (Drawing), Paint Programs, and Scanning Dr. Warren C. Weber Cal Poly Pomona.
ETT 429 Spring 2007 Digital Photography/Scanners.
2.01 Understand Digital Raster Graphics
Guilford County SciVis V106.01
V Obtained from a Guildford County workshop-Summer, 2014.
Vector vs. Bitmap SciVis V
Welcome to a New Quarter Class Rules and Responsibilities What will be learning? 106-Static and Dynamic Visualization 105-Synthesize Data for SciVis Video-Real.
How Images are Represented Bitmap images (Dots used to draw the image) Monochrome images 8 bit grey scale images 24 bit colour Colour lookup tables Vector.
Raster vs Vector and Image Resolution By Josh Gallagan.
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.
Part A Multimedia Production Rico Yu. Part A Multimedia Production Ch.1 Text Ch.2 Graphics Ch.3 Sound Ch.4 Animations Ch.5 Video.
Introduction to Graphic Arts Technology PRINT Versus WEB.
An Introduction to Scanning and Storing Photographs and Graphics Bryn Jones Aug 2002
Graphic Images 101. Painted on a grid Drawn mathematically.
Dedicated Vector and Bitmap editing software.
Understanding Web Graphics Web Design Section 5-4 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development.
Prepared by George Holt Digital Photography BITMAP GRAPHIC ESSENTIALS.
COMP Bitmapped and Vector Graphics Pages Using Qwizdom.
Digital Imaging Raster (Bitmapped) Images. 1. How they work…  Image data is stored in literal “map”  Each pixel (picture element) is measured for its.
Pixels, Resolution and File Types Using Digital Media in the Classroom START.
Presentation Design: Graphics. More About Color “Bit depth” of colors -- This is based on the smallest unit of information that a computer understands.
TYPES OF GRAPHICS TECHNOLOGICAL DESIGN. GRAPHIC DESIGN DEFINITION Visual problem solving that utilizes shapes, images, text, color, etc. to communicate.
Presented by the Virginia 4-H Science and Technology Committee.
Graphics and Images Communicating Information : Documents and Publications.
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.
Chapter 2 File Format Objectives (1 of 2) Identify the difference between vector based graphics and bitmap-based graphics Clarify bitmap and vector graphic.
Introduction to Photoshop Altering photos 1 pixel at a time.
Unit 1: Task 1 By Abbie Llewellyn. Vector Graphic Software (Corel Draw) Computer graphics can be classified into two different categories: raster graphics.
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.
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
Information Technology Images: Types, Resolution and Techniques.
Introduction to Images & Graphics JMA260. Objectives Images introduction Photoshop.
Vector vs. Raster What’s the difference between vector and raster file formats? The real difference between the two formats is how they are used.
Digital Graphics for Computer Games Pixels Types of Digital Graphics (Raster and Vector) Compression.
Vocabulary Worksheet Answers
Image File Formats Harrow Computer Club – Wed, 1 Dec 2010 Bob Watson MA CMath MIMA MBCS.
WEB GRAPHICS EXPLORING COMPUTER SCIENCE - LESSON 3-4.
Graphics and Image Data Representations 1. Q1 How images are represented in a computer system? 2.
Basic Digital Imaging For PE 266 Technology in HPER.
Understanding Images. Pixels pixels Every image is made up of very small squares called pixels, and each pixel represents a color or shade. Pixels within.
2.01 Understand Digital Raster Graphics
2.01 Understand Digital Raster Graphics
Digital Imaging 101 Ann Ware.
Understanding Web Graphics
Exploring Computer Science - Lesson 3-4
Vector (Shapes) vs. Raster (Pixels)
Types of Graphics Technological Design.
Exploring Computer Science - Lesson 3-4
2.01 Understand Digital Raster Graphics
Introduction To Photo Editing SHIELA MAE A. AQUINO SRNHS.
2.01 Investigate graphic image design.
Graphics Basics Ellen Eyth.
Chapter 3 Image Files © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
LET’S LEARN ABOUT GRAPHICS!
Graphics Basic Concepts.
2.01 Understand Digital Raster Graphics
2.01 Investigate graphic image design.
2.01 Understand Digital Raster Graphics
Vector (Shapes) vs. Raster (Pixels)
2.01 Investigate graphic image design.
Graphics Basics.
2.01 Investigate graphic image design.
Presentation transcript:

Bitmap images Resizing bitmaps Vector images Why are there so many image file formats? Resolution and Scanning “Bits” and.bmp files Photo editors JPG file formats GIF file formats Animated and transparent.gif’s Getting images from the web What are the different image file formats? Created by Sheila MacLeod Potter, working for the AITT, Acadia University

HOME Created by Sheila MacLeod Potter, working for the AITT, Acadia University Bitmap images  ‘Bitmap’ refers to digital images which are composed of dots or pixels  In a bitmap image, the image file has to define the exact colour of every pixel in the image This bitmap image has been stretched so that the pixels which compose it are clearly visible.

HOME Created by Sheila MacLeod Potter, working for the AITT, Acadia University Resizing bitmap images  The more pixels which compose an image, the larger its file size.  The number of pixels in an image can be increased in two ways  by making the image larger in a photo editor. Tell me more about photo editors!Tell me more about photo editors!  by increasing the image resolution  One confusing thing about the term bitmap is that there is a windows image format (.bmp) which is also referred to as a ‘bitmap’. To avoid this confusion, some people use the term raster when referring to images composed of pixels.  Bitmap file formats include.jpg,.gif,.bmp,.tif,.wpg,.psd, etc.jpggif Why are there so many image formats? Why does the computer ask me about number of bits when I go to save my image as a bmp?

HOME Created by Sheila MacLeod Potter, working for the AITT, Acadia University Vector images Vector images are not made up of dots. Instead, they are composed of shapes and lines. Vector shapes are defined by the direction of the line which runs around their perimeter. Vectors have several useful qualities:  they are infinitely scaleable  they usually have smaller file sizes than bitmaps  they are crisp and clear when printed Note that: vectors on screen appear pixilated because the computer screen is composed of pixels! bitmap vector To see how this vector graphic retains its smooth outline, hit Esc and then zoom in to %400. To resume show, click F5.

HOME Created by Sheila MacLeod Potter, working for the AITT, Acadia University Why are there so many image file formats? There are almost as many image file formats as there are programs that work with images. There is a great deal of competition in the graphics world among companies trying to create the best artist’s tool. Companies like Adobe and Corel, for example, each have software packages for working with images, which do many of the same things, yet they each (Adobe Photoshop and Corel PhotoPaint) have their own image file format (.psd and.cpt). At one time, different image file formats could only be opened by the software in which each was created, however, today, most common packages will let you open other company’s formats. One practical reason for different formats is that each saves a slightly different set of information with the file. For example,.jpg is a compressed format (small files), in which the minimum information is saved. By comparison,.tif is uncompressed and can save more file information..jpg

HOME Created by Sheila MacLeod Potter, working for the AITT, Acadia University Image File Formats.jpg.jpg and.gif are the best formats to use for presentations and for the web because they are both compressed in file size. Uncompressed formats such as.tif are best for print, however, there are many other formats which you may come across:.gif Other Bitmap formats: .tif : uncompressed image format which is good for use in printed projects like pamphlets and posters. .wpg:format used by Corel Presentations .bmp:windows preferred image format (your wallpaper is a.bmp) .psd:layered file format used in Adobe Photoshop .cpt:layered file format used in Corel Photopaint Vector formats: .cdr:CorelDraw format. MS PowerPoint often has difficulty reading this format. .wmf:“windows metafile” format. this format is widely accepted by programs which use vectors, including MS PowerPoint, and Word. .fla:animated vector file created in Macromedia Flash HOME

Created by Sheila MacLeod Potter, working for the AITT, Acadia University Photo Editors  although, images can be stretched, or cropped within PowerPoint, this does not alter their file size.  in order to crop an image so that parts are eliminated from the image file itself (and the file becomes smaller), a photo editor such as MS Paint, Corel Photopaint, or Adobe Photoshop must be used. similarly, when you stretch or shrink an image in PowerPoint, the file size is not effected.  Image file size must be changed in a photo editor by changing the resolution, cropping, or resaving in a compressed format such as jpg or gifresolutionjpggif “handles” appear all around images in PowerPoint, and can be ‘clicked and dragged’ to enlarge or shrink the image, but this does NOT change the image’s file size or resolution. resolution HOME

Created by Sheila MacLeod Potter, working for the AITT, Acadia University JPG file format JPEG is a popular format for two reasons:  It keeps photographic images clear  It lets you adjust the amount of compression JPG format should be used for photographs which contain a lot of detail and thousands of colours JPG compression does change the way an image looks uncompressed (tif) file size = 152Kb slightly compressed (jpg) file size = 31Kb highly compressed (jpg) file size = 10Kb

HOME Created by Sheila MacLeod Potter, working for the AITT, Acadia University GIF file format GIF format should be used for diagrams or drawings which contain few colours If the image contains 256 colours or less, gif compression does not change the way it looks In a.gif image, the number of colours is reduced to 256 and then "runs" of same-colour pixels are encoded in a colour + number of pixels format. This makes a.gif file great for storing drawings that have lots of same-colour pixels. gif images are common on the web. What’s an animated gif or a transparent gif?

HOME Created by Sheila MacLeod Potter, working for the AITT, Acadia University Why does it ask me about the # of bits when I save my.bmp files?  The more colours in an image, the more bits are required to represent it digitally.  The best-looking images contain 16 million colours (this is known as RGB [Red Green Blue] mode)  Imagine a bitmap in RGB that is 400 by 400 pixels. Saving this image requires 24 bits per pixel for 160,000 pixels, or 480,000 bytes.  480,000 bytes = 480 Kb which would take considerable time to download from the web  For the sake of comparison, an RGB.jpg containing the same number of pixels (400X400) might be as small as 5Kb.

HOME Created by Sheila MacLeod Potter, working for the AITT, Acadia University Animated & Transparent gif.s What’s an animated gif? Animated gifs are also ‘.gif’ files, but they are actually composed of multiple gif images which cycle to give an animated effect. Animated gifs files are as big as the sum of the gif images which compose the animation. Why does this gif file look differently on my machine than it did on the web? Many photo editors will allow you to assign a “transparent colour” within a gif image. That’s why, when you download gif’s from the web, sometimes an ugly background colour appears when you open the gif in another program. The ‘transparent’ colour only looks transparent on the web!photo editors

HOME Created by Sheila MacLeod Potter, working for the AITT, Acadia University Copying and Downloading images from the web There are two ways to get an image off the web. 1.copy and paste 2.save it Copy and Paste  copy the whole screen (PrtSc)  OR copy the active screen (Alt+PrtSc)  AND paste (Ctrl+V) directly into your document Save  Right Click, Save As  you can’t choose a file type, but you can give the file a new name

HOME Created by Sheila MacLeod Potter, working for the AITT, Acadia University Resolution and Scanning Resolution: Image resolution is expressed in dots (or pixels) per inch (dpi). When scanning an image, the resolution you choose depends on the way that you intend to use the image, or how it will be displayed. Suggested Minimum Resolutions:  for use on the web and in presentations: 72 dpi  for print: dpi If you are scanning an image for use on the web or in a presentation, you may wish to “blow-up” the image by scanning it at a resolution higher than 72 dpi. Computer screens display at 72 dpi, therefore, small images that are scanned at higher resolution will be displayed larger on the computer screen. image size = 1 X 1; resolution = 100dpi 1 inch Image