1

สื่��อดิ�จิ�ทัลทั��มี�คุ�ณภาพ

บุ�ญเล�ศ อรุ�ณพ�บุ�ลย์�นักวิ�ชาการุ

ศ�นัย์�บุรุ�การุคุวิามีรุ� ทัางวิ�ทัย์าศาสื่ตรุ�และเทัคุโนัโลย์�สื่&านักงานัพฒนัาวิ�ทัย์าศาสื่ตรุ�และเทัคุโนัโลย์�แห่)งชาต�

boonlert@nstda.or.thhttp://www.stks.or.th

2

ดิ วิย์รุะบุบุอ�นัเทัอรุ�เนั*ต คุอมีพ�วิเตอรุ�ทั�กเคุรุ��อง ทั�กรุะบุบุ สื่ามีารุถต�ดิต)อ

สื่��อสื่ารุกนัไดิ

3

Server & ClientWindowsXP

IE

Windows2000IE

Macintosh

Windows98Netscape

พฒนัาเวิ*บุดิ วิย์HTML Editor,

HTML Generatorบุนั

Windows

Server :Unix/NT

upload

4

ปั.ญห่า

• การุแสื่ดิงผลภาษา• ขนัาดิของสื่��อ• คุวิามีเรุ*วิการุโห่ลดิวิตถ�บุนัเวิ*บุ• การุสื่�บุคุ นั• การุละเมี�ดิล�ขสื่�ทัธิ์�3

5

File name

• ภาษาองกฤษ ผสื่มีตวิเลข

• ใช เคุรุ��องห่มีาย์เฉพาะ –• ไมี)คุวิรุมี�ช)องวิ)าง• ไมี)คุวิรุย์าวิมีากเก�นัไปั

6

แบุบุอกษรุ (Fonts)

• เล�อกใช ฟอนัต�มีาตรุฐานั– ตรุะก�ล NEW– Tahoma– Tahoma, MS Sans Serif, Thonburi

7

ขนัาดิของสื่��อทั��เห่มีาะสื่มี

• ไมี)มี�ข อก&าห่นัดิทั��ชดิเจินั คุวิรุคุ&านั9งถ9ง– กล�)มีเปั:าห่มีาย์ (Personal/Business)– ลกษณะของคุอมีพ�วิเตอรุ�ทั��กล�)มีเปั:าห่มีาย์ใช

(Screen Area ของจิอภาพ)

• Screen Area ทั��เห่มีาะสื่มีในัปั.จิจิ�บุนั คุ�อ 1024 x 768 pixels

8

9

10

มีาตรุฐานัรุ�ปัแบุบุการุนั&าเสื่นัอภาพภาพ

ต้�นฉบับัภาพ

สื่��อสื่��งพ�มพ�ภาพสื่�าหรับั

Digital Archive

Presentation

Database

Website

Preview

Format JPEG, TIFF

TIFF JPEG JPEG JPEG GIFJPGPNGTIF

GIFJPGPNG

Resolution

Up to 350 dpi

Up to 350 dpi

72 dpi 72 dpi 72 dpi 72 dpi 72 dpi

Size Up to184

0 1 2 3 2 p

i xel s

Up to 1840

123 2 pixels

Up to 1024

768 pixels

Up to 1024

768 pixels

300

250

pi xel s

30 0 2

5 0 pixel s

10 0 1

00 pixel s

11

Format

• รุ�ปัแบุบุของไฟล�ภาพทั��ใช ในัการุจิดิเก*บุภาพ • การุเล�อกรุ�ปัแบุบุทั��เห่มีาะสื่มีต)อการุนั&าเสื่นัอจิะ

ช)วิย์ให่ ภาพมี�ขนัาดิ (File Size ) เล*กลง โดิย์คุงคุวิามีคุมีชดิไวิ ในัรุะดิบุดิ�

• เปั;นัการุปัรุะห่ย์ดิพ�<นัทั��ของสื่��อบุนัทั9กข อมี�ลไดิ เปั;นัอย์)างดิ�

12

เวิ*บุกรุาฟ=ก

รั�ปภาพที่��แสื่ดงในโหมดปกต้�

การัแสื่ดงผลภาพแบับั Interlacedการัแสื่ดงผลภาพแบับั Progressive

13

RGB model

• RGB model used for lighting, video, and monitors

• So, computer’s monitor only has 3 colors

Red

Green

Blue

14

CMYK model

• The CMYK model is based on the light-absorbing quality of ink printed on paper.

15

GIF / JPEG

16

GIF or JPEG?

17

Interlaced GIF

18

JPEG Quality & Progressive• ภาพฟอรุ�แมีต JPG คุ)า Quality

ไมี)คุวิรุต&�า ห่รุ�อสื่�งเก�นัไปั • ก&าห่นัดิรุ�ปัแบุบุการุแสื่ดิงผล

เปั;นัแบุบุ Progressive ดิ วิย์สื่&าห่รุบุภาพทั��มี�ขนัาดิโต

19

GIF

• Graphics Interlace File• จิ&านัวินัสื่�และคุวิามีละเอ�ย์ดิของภาพไมี)สื่�งมีาก

นัก• ต องการุพ�<นัแบุบุโปัรุ)งใสื่• ต องการุแสื่ดิงผลแบุบุโคุรุงรุ)างก)อนั แล วิคุ)อย์

แสื่ดิงผลแบุบุละเอ�ย์ดิ• ต องการุนั&าเสื่นัอภาพแบุบุภาพเคุล��อนัไห่วิ• สื่)วินัขย์าย์คุ�อ .gif

20

Bit depth drastically affects file size

24 bit color

16 million colors

1.55 MB

8 bit color

256 color

s518k

8 bit gray scale

256 shades of gray

518k

1 bit dithere

d image

64k

21

Transparent GIFs

22

Animation GIF

23

JPEG

• Joint Photographer's Experts Group • เห่มีาะสื่มีกบุการุนั&าเสื่นัอทั<งรุะบุบุสื่��อมีลต�มี�เดิ�ย์ และ

เวิ*บุไซต� • สื่ามีารุถก&าห่นัดิขนัาดิของไฟล�ไดิ ตามีคุวิามีเห่มีาะสื่มี

(File Compression )• สื่ามีารุถก&าห่นัดิคุ�ณสื่มีบุต�การุแสื่ดิงผลแบุบุห่ย์าบุ แล วิ

คุ)อย์ๆ ละเอ�ย์ดิเมี��อเวิลาผ)านัไปั ทั��เรุ�ย์กวิ)าคุ�ณสื่มีบุต� Progressive

• สื่)วินัขย์าย์ของไฟล�รุ�ปัแบุบุนั�<คุ�อ .jpg ห่รุ�อ .jpeg

24

JPEG File Format

JPEG - 19KLow Quality

JPEG - 60KMax Quality

25

PNG

• Portable Network Graphics • รุ�ปัแบุบุล)าสื่�ดิในัการุนั&าเสื่นัอภาพผ)านัเคุรุ�อข)าย์

อ�นัเทัอรุ�เนั*ต • สื่ามีารุถแสื่ดิงผลไดิ ในัรุะบุบุสื่�เต*มีพ�กดิ (True

Color), มี�ขนัาดิไฟล�เล*ก และคุวิบุคุ�มีคุ�ณภาพไดิ ตามีทั��ต องการุ มี�การุก&าห่นัดิให่ พ�<นัภาพเปั;นัพ�<นัโปัรุ)งใสื่ไดิ (Transparent ) รุวิมีทั<งการุแสื่ดิงผลแบุบุห่ย์าบุสื่�)ละเอ�ย์ดิ (Interlaced )

• สื่)วินัขย์าย์ของไฟล�รุ�ปัแบุบุนั�<คุ�อ .png

26

TIFF

• Tagged-Image File Format • รุ�ปัแบุบุทั��ใช เก*บุภาพพรุ อมีรุาย์ละเอ�ย์ดิต)างๆ เช)นั

เลเย์อรุ� (Layer), Annotation, โห่มีดิภาพทั<งรุะบุบุ CMYK, RGB, Lab Color ตลอดิจินัข อมี�ลปัรุะกอบุอ��นัๆ ตามีต นัฉบุบุเดิ�มีของภาพ

• เห่มีาะสื่มีต)อการุเก*บุบุนัทั9กภาพต นัฉบุบุ และภาพสื่&าห่รุบุใช ปัรุะกอบุการุสื่รุ างสื่��อสื่��งพ�มีพ�

• สื่)วินัขย์าย์ของไฟล�รุ�ปัแบุบุนั�<คุ�อ .tif

27

สื่รุ�ปัการุเล�อกใช ฟอรุ�แมีตภาพ– ไฟล�สื่ก�ล GIF (Graphics Interlace File)

• ภาพทั��ไมี)ต องการุคุวิามีคุมีชดิมีากนัก สื่�ไมี)มีาก• มี�ลกษณะพ�<นัโปัรุ)งใสื่

– ไฟล�สื่ก�ล JPG (Joint Photographer’s Experts Group)• ภาพทั��ต องการุคุวิามีคุมีชดิสื่�ง มี�สื่�มีาก

– ไฟล�สื่ก�ล PNG (Portable Network Graphics)• ภาพทั��ต องการุคุวิามีคุมีชดิสื่�ง มี�สื่�มีากทั&าพ�<นัโปัรุ)งใสื่ไดิ

28

72-ppi and 300-ppi

• 72 ppi = 72 pixels high x 72 pixels wide = 5184 pixels in a square inch

• 300 ppi = 300 pixels high x 300 pixels wide = 90,000 pixels in a square inch

29

Illustration

• การุเข�ย์นัภาพปัรุะกอบุ ภาพตวิอย์)าง• ห่วิใจิสื่&าคุญของการุนั&าเสื่นัอสื่��อ• สื่รุ างแนัวิคุ�ดิ ช)วิย์จิดิจิ&า• สื่รุ างคุวิามีสื่มีพนัธิ์�ของวิตถ�แต)ละช�<นั

30

องคุ�ปัรุะกอบุของ Illustration

• วิตถ� (Object)– Attributes

• Color, format, font

– Position• Position, Distance

• เสื่ นั/ล�กศรุ (Line/Arrow)– Type, Attribute, Direction

31

Concept of IllustrationTime Axis Space Axis

32

Content Lifecycle

• Design/Develop • Assemble• Deploy• Import• Deliver/Track• Report

33

ตวิอย์)างการุปัรุบุแต)ง #1Design/Develop

Assemble

Deploy

Import

Deliver/Track

Report

34

Design/Develop

Content Lifecycle

Deploy

Import

Deliver/Track

Report Assemble

35

Design/Develop

Deploy

Import

Deliver/Track

Report

Assemble

Content Lifecycle

36

สื่งคุมีแห่)งภ�มี�ปั.ญญาและการุเรุ�ย์นัรุ�

• การุพฒนัาปัรุะเทัศไทัย์ให่ ก าวิสื่�) สื่งคุมีแห่)ง“ภ�มี�ปั.ญญาและการุเรุ�ย์นัรุ� จิ&าเปั;นัต องอาศย์กลย์�ทัธิ์�ต)างๆ อนัไดิ แก) e-Government, e-Education, e-Society, e-Commerce, e-Industry ทั<งนั�<รุ ฐบุาลจิะต องสื่)งเสื่รุ�มีบุ�คุลากรุของปัรุะเทัศในัทั�กดิ านั พรุ อมีๆ กบุการุพฒนัาโคุรุงสื่รุ างพ�<นัฐานัของปัรุะเทัศ

37

ตวิอย์)างการุปัรุบุแต)ง #1

• สื่งคุมีแห่)งภ�มี�ปั.ญญาและการุเรุ�ย์นัรุ� – e-Government– e-Education– e-Society– e-Commerce– e-Industry– พฒนัาบุ�คุลากรุ– พฒนัาโคุรุงสื่รุ างพ�<นัฐานั

38

39

40

Image

41

ไมี)คุวิรุเล�อกใช ภาพ Clipart ผสื่มีกบุ Photo

42

43

Multimedia File Format

• Audio– Au, Wav, MIDI, MPEG,

MP3• Video

– Rm, Ra, Ram, MPEG2, MPEG4, MOV

• Flash• MPEG-1 (Video

CD/Laser disk ) 1992• MPEG-2 (DVD ) 1994• MPEG-4 1998

(Streaming media, Video conferencing and 3D animated models)

• QuickTime• RealNetworks• Windows Media

44

File Format

Real

Mov

wmawmv

Flv/flaswf

45

Sound : PCM

• .wav• 8-bit or 16-bit sound data• Mono Preprocessing• Sample Rate

– 5 kHz is barely acceptable for speech.– 11 kHz is the lowest recommended quality for a short

segment of music and is one-quarter of the standard CD rate.

– 22 kHz is a popular choice for Web playback and is half the standard CD rate.

– 44 kHz is the standard CD audio rate

46

Sound : MP3

• Bit Rate– 8 Kbps through 160 Kbps CBR (constant bit rate). – 16 Kbps or higher for the best results

• Mono Preprocessing• Quality

– Fast yields faster compression but lower sound quality.

– Medium yields somewhat slower compression but higher sound quality.

– Best yields the slowest compression and the highest sound quality.

47

Text 2 Sound

• Microsoft Narrator– Start, Program, Accessories, Accessibility,

Narrator• Text2Sound• สื่ารุ�กา• IBM HomePage Reader

48

ข อคุวิามีพ�มีพ�ดิ วิย์ NotePad Convert

49

VDO formats• .MOV Quicktime, an Apple standard. It is playable on

Macintosh and Windows machines. • .AVI Microsoft standard that is playable on

Windows and Macintosh machines.• .RM Real streaming. They are playable on

Windows, MacOS, and Unix computers.• .ASF Microsoft streaming format, and play on Windows,

MacOS, and Solaris.• .WMA/.WMV Microsoft format used in Microsoft

MovieMaker• .flv Macromedia Flash Video

50

Software Creator

• Macromedia Flash

• Ulead Video • Windows Movie

Maker• Pinnacle

• Apple iMovie 2 • Apple Final Cut

Pro 3• Adobe Premiere

6.5

51

Software Player

• RM RealPlayer• MOV QuickTime• AVI, WMV, Windows Media Player• WMA, MPEG Windows Media Player

52

คุวิามีพรุ อมีของเคุรุ��องมี�อ• Digital camcorder• Video capture software• Video capture card or

fire wire card– Matrox– Dazzle– Pinnacle

• Video editing software– MovieMaker – free

with Windows XP– Imovie – free with

MacOS– Pinnacle Studio 8 -

$99– Adobe Premiere Pro -

$699• 1 GB or more hard drive

space• 512 MB RAM

53

Video Frame Size

• สื่��อเคุล��อนัไห่วินั อย์– 176 x 132, 28.8 kbps, 10 fps– 240 x 180, 56 kbps, 12 fps– 320 x 240, 200 kbps, 30 fps

• สื่��อเคุล��อนัไห่วิมีาก– 160 x 120, 28.8 kbps, 7.5 fps– 176 x 132, 56 kbps, 10 fps– 240 x 180, 200 kbps, 30 fps

54

PDF Format

• Portable DocumentFormat

• เอกสื่ารุเสื่มี�อนัจิรุ�ง

55

Word & PDF

G 56

Security Document

เล�อก Reconfirm Security for

each job แล วิคุล�กปั�Aมี Edit

เพ��อปัรุบุแต)งคุ)าทั��ต องการุ

57

Watermark

• ข อมี�ลแสื่ดิงล�ขสื่�ทัธิ์�3ห่รุ�อคุ�ณสื่มีบุต�ของไฟล� • แสื่ดิงคุวิามีเปั;นัเจิ าของ• แบุ)งไดิ เปั;นั

– Text Embedded Watermark– Image Embedded Watermark

• มี�ปัรุะโย์ชนั�อย์)างสื่�งสื่&าห่รุบุ Digital Library, Digital Archive, E-Commerce

58

59

60

Text Embedded Watermark

• มี�ลกษณะเปั;นัข อคุวิามีทั��ผนัวิกกบุไฟล�ภาพ • สื่ามีารุถรุะบุ�ไดิ จิากโปัรุแกรุมี

Adobe PhotoShop จิากคุ&าสื่�ง File, File info, Copyright & URL

• สื่ามีารุถคุ นัห่าไดิ จิากคุ&าสื่�ง Search/Find ของ Windows

61

Image Embedded Watermark

• มี�ลกษณะเปั;นัภาพทั��ผนัวิกกบุไฟล�ภาพ • อาจิจิะเปั;นัภาพโลโก ของห่นั)วิย์งานั , ภาพ

ข อคุวิามีล�ขสื่�ทัธิ์�3• สื่ามีารุถรุะบุ�ไดิ จิากซอฟต�แวิรุ�ปัรุะเภทั

Watermarking Software

62

Watermark Processing

• Encoding การุเข ารุห่สื่• Decoding/Detect การุตรุวิจิสื่อบุรุห่สื่

– รุะบุบุ Detect สื่ามีารุถกรุะทั&าไดิ กบุภาพทั��มี�การุลง Watermark และสื่�งพ�มีพ�บุนักรุะดิาษ โดิย์นั&าภาพดิงกล)าวิมีาสื่แกนั แล วิใช Detecting Watermark Software ทั&าการุตรุวิจิสื่อบุ

63

The Watermark Embedding Process

64

The Watermark Detection Process

65

Resource

• http://www.stks.or.th• http://www.stks.or.th/elearning• http://elearning.nectec.or.th