20080306 web graphics

1

เทคนิ�คการออกแบบกราฟิ กสำ�าหร�บเว็�บไซต์�

นิพเก�า นิาคามดี�บ�ญเลิ�ศ อร�ณพ�บ#ลิย์�

2

เว็�บกราฟิ ก

สำว็ย์

เร�ว็

ค�นิไดี�

รองร�บการเข้�าถึ(ง

3

สำว็ย์แต์)เร�ว็

• ข้นิาดีข้องภาพ• การจั�ดีว็างหนิ�ากราฟิ ก• ฟิอร�แมต์ภาพ• สำ�สำ�นิ

4

ลิ�กษณะข้องหนิ�าเว็�บท�.เหมาะสำม• หนิ�าเว็�บท�.เหมาะสำม ไม)ม�ข้�อก�าหนิดีท�.ชั�ดีเจันิ

คว็รค�านิ(งถึ(ง– กลิ�)มเป้1าหมาย์ (Personal/Business)– ลิ�กษณะข้องคอมพ�ว็เต์อร�ท�.กลิ�)มเป้1าหมาย์ใชั� (Screen

Area ข้องจัอภาพ)• Screen Area ท�.เหมาะสำมในิป้3จัจั�บ�นิ ค4อ 1024 x

768 pixels• Web Area ท�.เหมาะสำมค4อ

– คว็ามย์าว็ไม)เก�นิ 1000 pixel– คว็ามสำ#งไม)ม�ข้�อก�าหนิดีต์าย์ต์�ว็ แต์)สำ)ว็นิ Header ข้องเว็�บ

ไม)คว็รเก�นิ 1 ในิ 3 ข้องพ45นิท�.ท�.เหลิ4อ

5

Truehits.net

6

7

ข้นิาดีข้ององค�ป้ระกอบกราฟิ ก

• Header• Banner• Icon

8

Template & Layout Design

TITLE

MenuHistoryDutyProject

9

Template & Layout Design

TITLE

History Duty Project

10

Template & Layout Design

TITLE

HistoryDutyProject

11

Template & Layout Design

TITLE

History Duty Project

12

ภาพท�.นิ�าเสำนิอ

• สำร�างคว็ามโดีดีเดี)นิให�ก�บภาพท�.นิ�าเสำนิอ

13

ฟิอร�แมต์ภาพสำ�าหร�บเว็�บ

• .bmp• .tif• .wmf• .gif• .png• .jpg• .ai

14

เว็�บกราฟิ ก

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

การูแสดงผลภาพแบบ Interlacedการูแสดงผลภาพแบบ Progressive

15

มาต์รฐานิร#ป้แบบการนิ�าเสำนิอภาพภาพ

ติ�นฉบ�บภาพ

ส�อส�งพ�มพ�ภาพส าหรู�บ

DigitalArchive

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 123

2 pixels

Up to 1840

1232

pi xel s

Up to 1024 768

pi xel s

Up to 1024 768

pi xel s

300

250

pi xel s

300

250

pi xel s

100

100

pi xel s

16

Format

• ร#ป้แบบข้องไฟิลิ�ภาพท�.ใชั�ในิการจั�ดีเก�บภาพ • การเลิ4อกร#ป้แบบท�.เหมาะสำมต์)อการนิ�าเสำนิอจัะ

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

• เป้8นิการป้ระหย์�ดีพ45นิท�.ข้องสำ4.อบ�นิท(กข้�อม#ลิไดี�เป้8นิอย์)างดี�

17

เว็�บกราฟิ ก

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

การูแสดงผลภาพแบบ Interlacedการูแสดงผลภาพแบบ Progressive

18

Interlaced GIF

19

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

ไม)คว็รต์�.า หร4อสำ#งเก�นิไป้ • ก�าหนิดีร#ป้แบบการแสำดีงผลิ

เป้8นิแบบ Progressive ดี�ว็ย์สำ�าหร�บภาพท�.ม�ข้นิาดีโต์

20

GIF

• Graphics Interlace File• จั�านิว็นิสำ�แลิะคว็ามลิะเอ�ย์ดีข้องภาพไม)สำ#งมาก

นิ�ก• ต์�องการพ45นิแบบโป้ร)งใสำ• ต์�องการแสำดีงผลิแบบโครงร)างก)อนิ แลิ�ว็ค)อย์

แสำดีงผลิแบบลิะเอ�ย์ดี• ต์�องการนิ�าเสำนิอภาพแบบภาพเคลิ4.อนิไหว็• สำ)ว็นิข้ย์าย์ค4อ .gif

21

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

22

Transparent GIFs

23

Animation GIF

24

JPEG

• Joint Photographer's Experts Group • เหมาะสำมก�บการนิ�าเสำนิอท�5งระบบสำ4.อม�ลิต์�ม�เดี�ย์ แลิะ

เว็�บไซต์� • สำามารถึก�าหนิดีข้นิาดีข้องไฟิลิ�ไดี�ต์ามคว็ามเหมาะสำม

(File Compression )• สำามารถึก�าหนิดีค�ณสำมบ�ต์�การแสำดีงผลิแบบหย์าบ แลิ�ว็

ค)อย์ๆ ลิะเอ�ย์ดีเม4.อเว็ลิาผ)านิไป้ ท�.เร�ย์กว็)าค�ณสำมบ�ต์� Progressive

• สำ)ว็นิข้ย์าย์ข้องไฟิลิ�ร#ป้แบบนิ�5ค4อ .jpg หร4อ .jpeg

25

JPEG File Format

JPEG - 19KLow Quality

JPEG - 60KMax Quality

26

PNG

• Portable Network Graphics • ร#ป้แบบลิ)าสำ�ดีในิการนิ�าเสำนิอภาพผ)านิเคร4อข้)าย์

อ�นิเทอร�เนิ�ต์ • สำามารถึแสำดีงผลิไดี�ในิระบบสำ�เต์�มพ�ก�ดี (True

Color), ม�ข้นิาดีไฟิลิ�เลิ�ก แลิะคว็บค�มค�ณภาพไดี�ต์ามท�.ต์�องการ ม�การก�าหนิดีให�พ45นิภาพเป้8นิพ45นิโป้ร)งใสำไดี� (Transparent ) รว็มท�5งการแสำดีงผลิแบบหย์าบสำ#)ลิะเอ�ย์ดี (Interlaced )

• สำ)ว็นิข้ย์าย์ข้องไฟิลิ�ร#ป้แบบนิ�5ค4อ .png

27

GIF Transparent

28

GIF Transparent

29

TIFF

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

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

• เหมาะสำมต์)อการเก�บบ�นิท(กภาพต์�นิฉบ�บ แลิะภาพสำ�าหร�บใชั�ป้ระกอบการสำร�างสำ4.อสำ�.งพ�มพ�

• สำ)ว็นิข้ย์าย์ข้องไฟิลิ�ร#ป้แบบนิ�5ค4อ .tif

30

สำร�ป้การเลิ4อกใชั�ฟิอร�แมต์ภาพ– ไฟิลิ�สำก�ลิ GIF (Graphics Interlace File)

• ภาพท�.ไม)ต์�องการคว็ามคมชั�ดีมากนิ�ก สำ�ไม)มาก• ม�ลิ�กษณะพ45นิโป้ร)งใสำ

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

– ไฟิลิ�สำก�ลิ PNG (Portable Network Graphics)• ภาพท�.ต์�องการคว็ามคมชั�ดีสำ#ง ม�สำ�มากท�าพ45นิโป้ร)งใสำไดี�

31

GIF / JPEG

32

GIF or JPEG?

33

สำ�สำ�นิดี(งดี#ดี แต์)ไม)เลิอะ

• ก�าหนิดีสำ�หลิ�กข้องเว็�บ• เลิ4อกใชั�สำ�ท�.เข้�าก�บสำ�หลิ�ก ในิลิ�กษณะชั�ดีสำ�

34

มาต์รฐานิ Image Metadata

• สำนิ�บสำนิ�นิระบบค�นิค4นิภาพ แลิะการป้1องก�นิลิ�ข้สำ�ทธิ์�=ข้องภาพ • Image Metadata ระบบ XMP (eXtensible

Metadata Platform )• พ�ฒนิาโดีย์ The Newspaper Association of

America (NAA ) แลิะ The International Press Telecommunications Council (IPTC )

• ใชั�งานิไดี�ก�บโป้รแกรม Adobe PhotoShop 7.0 แลิะสำามารถึนิ�าเสำนิอข้�อม#ลิต์)างๆ เก�.ย์ว็ก�บร#ป้ภาพ เชั)นิ Title, Author, Position, Caption, Copyright, URL, Keyword, Categories, Detail of org.

35

36

Watermark

• ข้�อม#ลิแสำดีงลิ�ข้สำ�ทธิ์�=หร4อค�ณสำมบ�ต์�ข้องไฟิลิ� • แสำดีงคว็ามเป้8นิเจั�าข้อง• แบ)งไดี�เป้8นิ

– Text Embedded Watermark– Image Embedded Watermark

• ม�ป้ระโย์ชันิ�อย์)างสำ#งสำ�าหร�บ Digital Library, Digital Archive, E-Commerce

37

38

39

Text Embedded Watermark

• ม�ลิ�กษณะเป้8นิข้�อคว็ามท�.ผนิว็กก�บไฟิลิ�ภาพ • สำามารถึระบ�ไดี�จัากโป้รแกรม

Adobe PhotoShop จัากค�าสำ�.ง File, File info, Copyright & URL

• สำามารถึค�นิหาไดี�จัากค�าสำ�.ง Search/Find ข้อง Windows

40

Image Embedded Watermark

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

ข้�อคว็ามลิ�ข้สำ�ทธิ์�=• สำามารถึระบ�ไดี�จัากซอฟิต์�แว็ร�ป้ระเภท

Watermarking Software

41

Watermark Processing

• Encoding การเข้�ารห�สำ• Decoding/Detect การต์รว็จัสำอบรห�สำ

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

42

The Watermark Embedding Process

43

The Watermark Detection Process

44

แหลิ)งข้�อม#ลิ

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