GRAPHICAL MEDIA 1. ScannerScanner Graphics Sources 2.

Slides:



Advertisements
Similar presentations
L.Ghadah R. Hadba CT1514-L1.  Computer Graphics :refers to processing of creating a new image from Geometry, Lighting parameters, Materials and Textures.Using.
Advertisements

Raster graphics. Colour depth 01 1 bit pr pixel = 2 combinations (2 1 ): 2 bits pr pixel = 4 combinations (2 2 ): bits pr pixel = 16 combinations(2.
A Digital Imaging Primer Nick Dvoracek Instructional Resources Center University of Wisconsin Oshkosh.
Image Editing Basics Resolution Screen resolution Printer resolution.
Image Processing, Illustration (Drawing), Paint Programs, and Scanning Dr. Warren C. Weber Cal Poly Pomona.
ETT 429 Spring 2007 Digital Photography/Scanners.
Digital Still Images ETT June Multimedia Assets Still Images Audio Video.
2.01 Understand Digital Raster Graphics
PictureBox, Timer, Resources. Resources An easy and effective way to add pictures (photos, graphics) to your programs Using Resources guarantees that.
Information Technology Services North Dakota State University Lorna Olsen Get the Best Digital Images Possible What’s it all about anyway?
The University of Adelaide Picture Perfect: Image Formats and Resolution Peter Murdoch March 2014 PREPARING GOOD LOOKING DOCUMENTS.
Photoshop: Designing Graphics for the Web Christine Vucinich & Vicki Weidler ITS Training Services 224 B Computer Building University Park, PA 16802
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.
Digital Images. Scanned or digitally captured image Image created on computer using graphics software.
1 Internet Graphics. 2 Representing Images  Raster Image: Images consist of “dots” of color, not lines  Pixel: Picture element-tiny rectangle  Resolution:
Dr Jimmy Lam CAD for Fashion and Textiles
Graphic Images 101. Painted on a grid Drawn mathematically.
Graphics.
Multimedia Specification Design and Production 2012 / Semester 1 / L4 Lecturer: Dr. Nikos Gazepidis
Digital Imaging Raster (Bitmapped) Images. 1. How they work…  Image data is stored in literal “map”  Each pixel (picture element) is measured for its.
File Formats About graphic file formats And image compression.
DIGITAL GRAPHICS & ANIMATION Complete LESSON 2 Importing and Exporting Graphics.
07: Color in Interactive Digital Media
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 Enhancing Your Teaching with the Effective Use of Digital Images Richard P. Usatine, MD Nancy B. Clark, MEd For STFM Annual Conference, September 2003,
SOFTWARE TYPES Word processing Page layout Paint Draw.
Presented by the Virginia 4-H Science and Technology Committee.
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.
Digital Darkroom I Theresa L. Ford. Objectives Basic Digital Image Terminology Screen Display of Pictures –Why are pictures too big for the screen? –Why.
Digital Image Formats: An Explanation Guilford County SciVis V
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.
GRAPHICS. Topic Outline What is graphic. Resolution. Types of graphics. Using graphic in multimedia applications.
CS- 375 Graphics and Human Computer Interaction Lecture 1: 12/4/1435 Fundamental Techniques in Graphics Lecturer: Kawther Abas.
Graphics workshop Library and Information Services University of St Andrews.
© Anthony J. Nowakowski, Ph.D. GRAPHICAL MEDIA EDC 601 Instructional Technologies © Anthony J. Nowakowski, Ph.D. “Graphics help to display and to clarify.
Photoshop Photoshop works with bitmapped, digitized images (that is, continuous-tone images that have been converted into a series of small squares, or.
Bitmap Graphics. Bitmap Basics Bitmap Graphic Bitmap Graphic Paint Software Paint Software.
Chapter 2 File Format Objectives (1 of 2) Identify the difference between vector based graphics and bitmap-based graphics Clarify bitmap and vector graphic.
COMPUTER PROGRAMMING I SUMMER 2011 Objective 8.02 Apply Procedures to Create Picture Boxes using Images. (5%)
Mirjana Devetakovic, M.Sc. CAAD - Images Beograd, 2011.
Raster Graphics 2.01 Investigate graphic image design.
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.
Information Technology Images: Types, Resolution and Techniques.
Digital Graphics for Computer Games Pixels Types of Digital Graphics (Raster and Vector) Compression.
Digital Image Formats: An Explanation Guilford County SciVis V
Scanner Scanner Introduction: Scanner is an input device. It reads the graphical images or line art or text from the source and converts.
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.
BITMAPPED IMAGES & VECTOR DRAWN GRAPHICS
Multimedia: making it Work
2.01 Understand Digital Raster Graphics
2.01 Understand Digital Raster Graphics
Objective % Describe digital graphics production methods.
2.01 Understand Digital Raster Graphics
Objective 8.02 Apply Procedures to Create Picture Boxes using Images.
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.
Image File Size and File Compression
LET’S LEARN ABOUT GRAPHICS!
1.01 Investigate graphic types and file formats.
Graphics Basic Concepts.
2.01 Understand Digital Raster Graphics
Objective % Describe digital graphics production methods.
2.01 Investigate graphic image design.
2.01 Understand Digital Raster Graphics
2.01 Investigate graphic image design.
"Digital Media Primer" Yue-Ling Wong, Copyright (c)2013 by Pearson Education, Inc. All rights reserved.
Lesson 7—Part 1 Working with Graphics
2.01 Investigate graphic image design.
Presentation transcript:

GRAPHICAL MEDIA 1

ScannerScanner Graphics Sources 2

ScannerScanner Digital/Video Camera or Cell PhoneDigital/Video Camera or Cell Phone 3

Graphics Sources Created “Borrowed” Video Capture Screen Capture Scanner Digital/Video Camera or Cell Phone Internet Right-click on graphic Print Screen vs. Alt-Print Screen Print Screen vs. Alt-Print Screen 4

Color Additive Color light – RGB monitor Subtractive Color paint – CYMK printer 5 Color Mixer

1black & white line drawings 2 4 posters 4 16 sketches low-quality photographs 16 65,536 high-quality photographs 24 16,777,216 professional-quality photographs 32 4,294,967,296 I have no idea where this is used File Size Considerations # of bits # of colors uses Color depth Color depth (# of bits) 6

Colordepth 7

Graphics File Formats  GIF & JPeG (PNG) (Internet & Camera)  BMP & TIFf (Universal & Camera)  Others PCX, TGA, WMF,... Clip art 8

Some projectors are only capable of displaying 256 colors. 256 – a necessary evil??? This is the maximum color depth for GIFs (one of the main graphics Web file formats). The original color depth was 256 colors, and there is a carryover from them. 9

use an adaptive palette Some solutions: 256 – a necessary evil??? 10

use an adaptive palette Some solutions: 256 – a necessary evil??? 11

12 use dithering use an adaptive palette Some solutions: 256 – a necessary evil???

1black & white line drawings 2 4 posters 4 16 sketches low-quality photographs 16 65,536 high-quality photographs 24 16,777,216 professional-quality photographs 32 4,294,967,296 I have no idea where this is used File Size Considerations # of bits # of colors uses Color depth Color depth (# of bits) Image size Image size (# of pixels) 13

8004: x 600 = 480,000 pixels 480,000 x 1 byte = 480,000 bytes 480,000 x 2 bytes = 960,000 bytes 480,000 x 3 bytes = 1,440,000 bytes Resolution Videos 14

192016: x 1200 = 2,304,000 pixels 2,304,000 x 1 byte = 2,304,000 bytes 2,304,000 x 2 bytes = 4,608,000 bytes 2,304,000 x 3 bytes = 6,912,000 bytes Resolution My Computer 15

17 As reported in:

1black & white line drawings 2 4 posters 4 16 sketches low-quality photographs 16 65,536 high-quality photographs 24 16,777,216 professional-quality photographs 32 4,294,967,296 I have no idea where this is used File Size Considerations # of bits # of colors uses Color depth Color depth (# of bits) Image size Image size (# of pixels) compressed vs. uncompressed 18

pixel x - and and pixel y - pixels x & y - jpeg 19

20

bmp 1096 x 777 x 3 = 2,495 kbytes 21

gif 568 kbytes 22

jpeg 193 kbytes 23

bmpgifjpg Image Comparisons 24

GRAPHICSSOFTWARE 25

Paint Draw vs. 26

Graphics Software In my work with graphics software, I have performed these three basic functions: 1. Converting from one file format to another 1. Converting from one file format to another 2. Editing the contrast, brightness, and color or hue 2. Editing the contrast, brightness, and color or hue 3. Changing the content of the graphic 3. Changing the content of the graphic (Note: These are not always found in a single software package. (Note: These are not always found in a single software package. 27

Paint (Windows) - editor and converter for BMP, JPG, GIF,PCD, PCX, TIFF, DIB, and TGA files. Lview Pro ( - editor and converter for BMP, JPG, GIF, PPM, PCX, TIFF, DIB, and TGA files. ( Paint Shop Pro ( - editor and converter for BMP, JPG, GIF, PPM, PCX, TIFF, DIB, and TGA files.( Free Graphics Software 28

$$$ Graphics Software Adobe Photoshop Adobe Photoshop (CS5 - $699/199) Adobe Illustrator Adobe Illustrator (CS5 - $599) Corel Draw Corel Draw (Suite X5 - $399) 29

For this course, we will learn how to integrate existing images into VB programs. 30

PictureBox 31

PictureBox 32

PictureBox 33 By default, in Normal mode, the Image is positioned in the upper-left corner of the PictureBox, and any part of the image that is too big for the PictureBox is clipped. Using the StretchImage value causes the image to stretch or shrink to fit the PictureBox, which may distort the image. Using the Zoom value causes the image to be stretched or shrunk to fit the PictureBox; however, the aspect ratio in the original is maintained. Using the AutoSize value causes the control to resize to always fit the image. Using the CenterImage value causes the image to be centered in the client area. By default, in Normal mode, the Image is positioned in the upper-left corner of the PictureBox, and any part of the image that is too big for the PictureBox is clipped. Using the StretchImage value causes the image to stretch or shrink to fit the PictureBox, which may distort the image. Using the Zoom value causes the image to be stretched or shrunk to fit the PictureBox; however, the aspect ratio in the original is maintained. Using the AutoSize value causes the control to resize to always fit the image. Using the CenterImage value causes the image to be centered in the client area.

In VB, let’s look at the effect on two images using each of the SizeMode options. 34

35 This was shot with a 15 Megapixel camera and is NOT full size!

36 This is the image in PhotoShop displayed at 25% of its size.

37 This is the image in PhotoShop displayed at 100% of its size.

38 Normal Center

Normal 100% Normal 100% 39 CenterImage 100% CenterImage 100%

40 StretchImage <100% StretchImage <100% Zoom <100% Zoom <100%

41 AutoSize 100% AutoSize 100%

42 Normal 100% Original 100% StretchImage >100% Zoom >100%

43 Center 100% Original 100% AutoSize 100%

Read the Description of Assigment-8 44