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