GRAPHICAL MEDIA 1. ScannerScanner Graphics Sources 2.

44
GRAPHICAL MEDIA 1

Transcript of GRAPHICAL MEDIA 1. ScannerScanner Graphics Sources 2.

Page 1: GRAPHICAL MEDIA 1. ScannerScanner Graphics Sources 2.

GRAPHICALMEDIA

1

Page 2: GRAPHICAL MEDIA 1. ScannerScanner Graphics Sources 2.

• Scanner

Graphics Sources Graphics Sources

2

Page 3: GRAPHICAL MEDIA 1. ScannerScanner Graphics Sources 2.

Graphics Sources Graphics Sources• Scanner

• Digital/Video Camera or Cell Phone

3

Page 4: GRAPHICAL MEDIA 1. ScannerScanner Graphics Sources 2.

Graphics Sources Graphics Sources

CreatedCreated

“Borrowed”“Borrowed”

• Video Capture

• Screen Capture

• Scanner

• Digital/Video Camera or Cell Phone

• InternetRight-click on graphicRight-click on graphic

Print Screenvs.

Alt-Print Screen

Print Screenvs.

Alt-Print Screen

4

Page 5: GRAPHICAL MEDIA 1. ScannerScanner Graphics Sources 2.

Color ColorAdditive Color

light – RGBmonitor

Subtractive Color paint – CYMKprinter

5

Color Mixer

Page 6: GRAPHICAL MEDIA 1. ScannerScanner Graphics Sources 2.

1 black & white line drawings 2 4 posters 4 16 sketches 8 256 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 File Size Considerations

# of bits # of colors uses

Color depth (# of bits)

6

Page 7: GRAPHICAL MEDIA 1. ScannerScanner Graphics Sources 2.

Color

depth

7

Page 8: GRAPHICAL MEDIA 1. ScannerScanner Graphics Sources 2.

Graphics File Formats Graphics File Formats

· GIF & JPeG (PNG) (Internet & Camera)

· BMP & TIFf (Universal & Camera)

· Others PCX , TGA, WMF, ... Clip art

8

Page 9: GRAPHICAL MEDIA 1. ScannerScanner Graphics Sources 2.

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

Page 10: GRAPHICAL MEDIA 1. ScannerScanner Graphics Sources 2.

use an adaptive palette

Some solutions:

256 – a necessary evil???

10

Page 11: GRAPHICAL MEDIA 1. ScannerScanner Graphics Sources 2.

use an adaptive palette

Some solutions:

256 – a necessary evil???

11

Page 12: GRAPHICAL MEDIA 1. ScannerScanner Graphics Sources 2.

12

use dithering

use an adaptive palette

Some solutions:

256 – a necessary evil???

Page 13: GRAPHICAL MEDIA 1. ScannerScanner Graphics Sources 2.

1 black & white line drawings 2 4 posters 4 16 sketches 8 256 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 File Size Considerations

# of bits # of colors uses

Color depth (# of bits)

Image size (# of pixels)

13

Page 14: GRAPHICAL MEDIA 1. ScannerScanner Graphics Sources 2.

8004:3

600

800 x 600 = 480,000 pixels

480,000 x 1 byte = 480,000 bytes480,000 x 2 bytes = 960,000 bytes480,000 x 3 bytes = 1,440,000 bytes

ResolutionVideos

14

Page 15: GRAPHICAL MEDIA 1. ScannerScanner Graphics Sources 2.

192016:9

1200

1920 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

ResolutionMy Computer

15

Page 16: GRAPHICAL MEDIA 1. ScannerScanner Graphics Sources 2.

1920

1200

600

800

16

Page 17: GRAPHICAL MEDIA 1. ScannerScanner Graphics Sources 2.

17

As reported in: http://www.w3schools.com/browsers/browsers_resolution_higher.asp

Page 18: GRAPHICAL MEDIA 1. ScannerScanner Graphics Sources 2.

1 black & white line drawings 2 4 posters 4 16 sketches 8 256 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 File Size Considerations

# of bits # of colors uses

Color depth (# of bits)

Image size (# of pixels)

compressed vs. uncompressedcompressed vs. uncompressed18

Page 19: GRAPHICAL MEDIA 1. ScannerScanner Graphics Sources 2.

pixel x - andpixel y -

pixels x & y -

jpeg

19

Page 20: GRAPHICAL MEDIA 1. ScannerScanner Graphics Sources 2.

20

Page 21: GRAPHICAL MEDIA 1. ScannerScanner Graphics Sources 2.

bmp

1096 x 777 x 3 = 2,495 kbytes21

Page 22: GRAPHICAL MEDIA 1. ScannerScanner Graphics Sources 2.

gif

568 kbytes22

Page 23: GRAPHICAL MEDIA 1. ScannerScanner Graphics Sources 2.

jpeg

193 kbytes23

Page 24: GRAPHICAL MEDIA 1. ScannerScanner Graphics Sources 2.

bmp gif jpg

Image Comparisons

24

Page 25: GRAPHICAL MEDIA 1. ScannerScanner Graphics Sources 2.

GRAPHICSSOFTWARE

25

Page 26: GRAPHICAL MEDIA 1. ScannerScanner Graphics Sources 2.

Paint

Draw

vs.

26

Page 27: GRAPHICAL MEDIA 1. ScannerScanner Graphics Sources 2.

Graphics SoftwareGraphics SoftwareIn my work with graphics software, I have performed these three basic functions:

1. Converting from one file format to another

2. Editing the contrast, brightness, and color or hue

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

Page 28: GRAPHICAL MEDIA 1. ScannerScanner Graphics Sources 2.

Paint (Windows) - editor and converter for BMP, JPG, GIF,PCD, PCX, TIFF, DIB, and TGA files.

Lview Pro (www.lview.com) - editor and converter for BMP, JPG, GIF, PPM, PCX, TIFF, DIB, and TGA files.

Paint Shop Pro (www.jasc.com) - editor and converter for BMP, JPG, GIF, PPM, PCX, TIFF, DIB, and TGA files.

Free Graphics SoftwareFree Graphics Software

28

Page 29: GRAPHICAL MEDIA 1. ScannerScanner Graphics Sources 2.

$$$ Graphics Software$$$ Graphics Software

Adobe Photoshop (CS5 - $699/199)

Adobe Illustrator (CS5 - $599)

Corel Draw (Suite X5 - $399)

29

Page 30: GRAPHICAL MEDIA 1. ScannerScanner Graphics Sources 2.

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

30

Page 31: GRAPHICAL MEDIA 1. ScannerScanner Graphics Sources 2.

PictureBox

31

Page 32: GRAPHICAL MEDIA 1. ScannerScanner Graphics Sources 2.

PictureBox

32

Page 33: GRAPHICAL MEDIA 1. ScannerScanner Graphics Sources 2.

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.

Page 34: GRAPHICAL MEDIA 1. ScannerScanner Graphics Sources 2.

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

34

Page 35: GRAPHICAL MEDIA 1. ScannerScanner Graphics Sources 2.

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

Page 36: GRAPHICAL MEDIA 1. ScannerScanner Graphics Sources 2.

36

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

Page 37: GRAPHICAL MEDIA 1. ScannerScanner Graphics Sources 2.

37

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

Page 38: GRAPHICAL MEDIA 1. ScannerScanner Graphics Sources 2.

38

Normal

Center

Page 39: GRAPHICAL MEDIA 1. ScannerScanner Graphics Sources 2.

Normal100%

Normal100%

39

CenterImage100%

CenterImage100%

Page 40: GRAPHICAL MEDIA 1. ScannerScanner Graphics Sources 2.

40

StretchImage<100%

StretchImage<100%

Zoom<100%

Zoom<100%

Page 41: GRAPHICAL MEDIA 1. ScannerScanner Graphics Sources 2.

41

AutoSize100%

AutoSize100%

Page 42: GRAPHICAL MEDIA 1. ScannerScanner Graphics Sources 2.

42

Normal100%

Original100%

StretchImage >100%

Zoom>100%

Page 43: GRAPHICAL MEDIA 1. ScannerScanner Graphics Sources 2.

43

Center100%

Original100%

AutoSize100%

Page 44: GRAPHICAL MEDIA 1. ScannerScanner Graphics Sources 2.

Read the Description

of Assigment-8

44