เทคนิคการออกแบบ กราฟิก สำหรับเว็บไซต์   นพเก้า นาคามดี บุญเลิศ อรุณพิบูลย์
เว็บกราฟิก สวย เร็ว ค้นได้ รองรับ การเข้าถึง
สวยแต่เร็ว <ul><li>ขนาดของภาพ </li></ul><ul><li>การจัดวางหน้ากราฟิก </li></ul><ul><li>ฟอร์แมตภาพ </li></ul><ul><li>สีสัน <...
ลักษณะของหน้าเว็บที่เหมาะสม <ul><li>หน้าเว็บที่เหมาะสม ไม่มีข้อกำหนดที่ชัดเจน  ควรคำนึงถึง </li></ul><ul><ul><li>กลุ่มเป้า...
Truehits.net
 
ขนาดขององค์ประกอบกราฟิก <ul><li>Header </li></ul><ul><li>Banner </li></ul><ul><li>Icon </li></ul>
Template & Layout Design TITLE Menu History Duty Project
Template & Layout Design TITLE History Duty Project
Template & Layout Design TITLE History Duty Project
Template & Layout Design TITLE History Duty Project
ภาพที่นำเสนอ <ul><li>สร้างความโดดเด่นให้กับภาพที่นำเสนอ </li></ul>
ฟอร์แมตภาพสำหรับเว็บ <ul><li>.bmp </li></ul><ul><li>.tif </li></ul><ul><li>.wmf </li></ul><ul><li>.gif </li></ul><ul><li>....
เว็บกราฟิก รูปภาพที่แสดงในโหมดปกติ การแสดงผลภาพแบบ  Interlaced การแสดงผลภาพ แบบ  Progressive
มาตรฐานรูปแบบการนำเสนอภาพ    100    100 pixels    300    250 pixels    300    250 pixels Up to  1024    768 pixels ...
Format <ul><li>รูปแบบของไฟล์ภาพที่ใช้ในการจัดเก็บภาพ  </li></ul><ul><li>การเลือกรูปแบบที่เหมาะสมต่อการนำเสนอจะช่วยให้ภาพมี...
เว็บกราฟิก รูปภาพที่แสดงในโหมดปกติ การแสดงผลภาพแบบ  Interlaced การแสดงผลภาพ แบบ  Progressive
Interlaced GIF
JPEG Quality & Progressive <ul><li>ภาพฟอร์แมต  JPG  ค่า  Quality  ไม่ควรต่ำ หรือสูงเกินไป   </li></ul><ul><li>กำหนดรูปแบบก...
GIF <ul><li>Graphics Interlace File </li></ul><ul><li>จำนวนสีและความละเอียดของภาพไม่สูงมากนัก </li></ul><ul><li>ต้องการพื้...
Bit depth drastically affects file size 24 bit color 16 million colors 1.55 MB 8 bit color 256 colors 518k 8 bit  gray sca...
Transparent GIFs
Animation GIF
JPEG <ul><li>Joint Photographer's Experts Group  </li></ul><ul><li>เหมาะสมกับการนำเสนอทั้งระบบสื่อมัลติมีเดีย และเว็บไซต์ ...
JPEG File Format JPEG - 19K Low Quality JPEG - 60K Max Quality
PNG <ul><li>Portable Network Graphics  </li></ul><ul><li>รูปแบบล่าสุดในการนำเสนอภาพผ่านเครือข่ายอินเทอร์เน็ต  </li></ul><u...
GIF Transparent
GIF Transparent
TIFF <ul><li>Tagged - Image File Format  </li></ul><ul><li>รูปแบบที่ใช้เก็บภาพพร้อมรายละเอียดต่างๆ เช่น  เลเยอร์  ( Layer ...
สรุปการเลือกใช้ฟอร์แมตภาพ <ul><ul><li>ไฟล์สกุล GIF (Graphics Interlace File) </li></ul></ul><ul><ul><ul><li>ภาพที่ไม่ต้องก...
GIF / JPEG
GIF or JPEG?
สีสันดึงดูด แต่ไม่เลอะ <ul><li>กำหนดสีหลักของเว็บ </li></ul><ul><li>เลือกใช้สีที่เข้ากับสีหลัก ในลักษณะชุดสี </li></ul>
มาตรฐาน  Image Metadata <ul><li>สนับสนุนระบบค้นคืนภาพ และการป้องกันลิขสิทธิ์ของภาพ  </li></ul><ul><li>Image Metadata  ระบบ...
 
Watermark <ul><li>ข้อมูลแสดงลิขสิทธิ์หรือคุณสมบัติของไฟล์  </li></ul><ul><li>แสดงความเป็นเจ้าของ </li></ul><ul><li>แบ่งได้...
 
 
Text Embedded Watermark <ul><li>มีลักษณะเป็นข้อความที่ผนวกกับไฟล์ภาพ  </li></ul><ul><li>สามารถระบุได้จากโปรแกรม  Adobe Pho...
Image Embedded Watermark <ul><li>มีลักษณะเป็นภาพที่ผนวกกับไฟล์ภาพ  </li></ul><ul><li>อาจจะเป็นภาพโลโก้ของหน่วยงาน ,  ภาพข้...
Watermark Processing <ul><li>Encoding การเข้ารหัส </li></ul><ul><li>Decoding/Detect การตรวจสอบรหัส </li></ul><ul><ul><li>ร...
The Watermark Embedding Process
The Watermark Detection Process
แหล่งข้อมูล <ul><li>http://www.stks.or.th </li></ul><ul><li>http://www.stks.or.th/elearning </li></ul>
Upcoming SlideShare
Loading in …5
×

20080306 Web Graphics

3,215 views

Published on

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

Published in: Design, Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,215
On SlideShare
0
From Embeds
0
Number of Embeds
1,530
Actions
Shares
0
Downloads
39
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

20080306 Web Graphics

  1. 1. เทคนิคการออกแบบ กราฟิก สำหรับเว็บไซต์ นพเก้า นาคามดี บุญเลิศ อรุณพิบูลย์
  2. 2. เว็บกราฟิก สวย เร็ว ค้นได้ รองรับ การเข้าถึง
  3. 3. สวยแต่เร็ว <ul><li>ขนาดของภาพ </li></ul><ul><li>การจัดวางหน้ากราฟิก </li></ul><ul><li>ฟอร์แมตภาพ </li></ul><ul><li>สีสัน </li></ul>
  4. 4. ลักษณะของหน้าเว็บที่เหมาะสม <ul><li>หน้าเว็บที่เหมาะสม ไม่มีข้อกำหนดที่ชัดเจน ควรคำนึงถึง </li></ul><ul><ul><li>กลุ่มเป้าหมาย (Personal/Business) </li></ul></ul><ul><ul><li>ลักษณะของคอมพิวเตอร์ที่กลุ่มเป้าหมายใช้ (Screen Area ของจอภาพ ) </li></ul></ul><ul><li>Screen Area ที่เหมาะสมในปัจจุบัน คือ 1024 x 768 pixels </li></ul><ul><li>Web Area ที่เหมาะสมคือ </li></ul><ul><ul><li>ความยาวไม่เกิน 1000 pixel </li></ul></ul><ul><ul><li>ความสูงไม่มีข้อกำหนดตายตัว แต่ส่วน Header ของเว็บไม่ควรเกิน 1 ใน 3 ของพื้นที่ที่เหลือ </li></ul></ul>
  5. 5. Truehits.net
  6. 7. ขนาดขององค์ประกอบกราฟิก <ul><li>Header </li></ul><ul><li>Banner </li></ul><ul><li>Icon </li></ul>
  7. 8. Template & Layout Design TITLE Menu History Duty Project
  8. 9. Template & Layout Design TITLE History Duty Project
  9. 10. Template & Layout Design TITLE History Duty Project
  10. 11. Template & Layout Design TITLE History Duty Project
  11. 12. ภาพที่นำเสนอ <ul><li>สร้างความโดดเด่นให้กับภาพที่นำเสนอ </li></ul>
  12. 13. ฟอร์แมตภาพสำหรับเว็บ <ul><li>.bmp </li></ul><ul><li>.tif </li></ul><ul><li>.wmf </li></ul><ul><li>.gif </li></ul><ul><li>.png </li></ul><ul><li>.jpg </li></ul><ul><li>.ai </li></ul>
  13. 14. เว็บกราฟิก รูปภาพที่แสดงในโหมดปกติ การแสดงผลภาพแบบ Interlaced การแสดงผลภาพ แบบ Progressive
  14. 15. มาตรฐานรูปแบบการนำเสนอภาพ  100  100 pixels  300  250 pixels  300  250 pixels Up to 1024  768 pixels Up to 1024  768 pixels Up to 1840  1232 pixels Up to 1840  1232 pixels Size 72 dpi 72 dpi 72 dpi 72 dpi 72 dpi Up to 350 dpi Up to 350 dpi Resolution GIF JPG PNG GIF JPG PNG TIF JPEG JPEG JPEG TIFF JPEG, TIFF Format Preview Website Database Presentation ภาพสำหรับ Digital Archive ภาพ สื่อสิ่งพิมพ์ ภาพต้นฉบับ
  15. 16. Format <ul><li>รูปแบบของไฟล์ภาพที่ใช้ในการจัดเก็บภาพ </li></ul><ul><li>การเลือกรูปแบบที่เหมาะสมต่อการนำเสนอจะช่วยให้ภาพมีขนาด ( File Size ) เล็กลง โดยคงความคมชัดไว้ในระดับดี </li></ul><ul><li>เป็นการประหยัดพื้นที่ของสื่อบันทึกข้อมูลได้เป็นอย่างดี </li></ul>
  16. 17. เว็บกราฟิก รูปภาพที่แสดงในโหมดปกติ การแสดงผลภาพแบบ Interlaced การแสดงผลภาพ แบบ Progressive
  17. 18. Interlaced GIF
  18. 19. JPEG Quality & Progressive <ul><li>ภาพฟอร์แมต JPG ค่า Quality ไม่ควรต่ำ หรือสูงเกินไป </li></ul><ul><li>กำหนดรูปแบบการแสดงผล เป็นแบบ Progressive ด้วย สำหรับภาพที่มีขนาดโต </li></ul>
  19. 20. GIF <ul><li>Graphics Interlace File </li></ul><ul><li>จำนวนสีและความละเอียดของภาพไม่สูงมากนัก </li></ul><ul><li>ต้องการพื้นแบบโปร่งใส </li></ul><ul><li>ต้องการแสดงผลแบบโครงร่างก่อน แล้วค่อยแสดงผลแบบละเอียด </li></ul><ul><li>ต้องการนำเสนอภาพแบบภาพเคลื่อนไหว </li></ul><ul><li>ส่วนขยายคือ .gif </li></ul>
  20. 21. Bit depth drastically affects file size 24 bit color 16 million colors 1.55 MB 8 bit color 256 colors 518k 8 bit gray scale 256 shades of gray 518k 1 bit dithered image 64k
  21. 22. Transparent GIFs
  22. 23. Animation GIF
  23. 24. JPEG <ul><li>Joint Photographer's Experts Group </li></ul><ul><li>เหมาะสมกับการนำเสนอทั้งระบบสื่อมัลติมีเดีย และเว็บไซต์ </li></ul><ul><li>สามารถกำหนดขนาดของไฟล์ได้ตามความเหมาะสม ( File Compression ) </li></ul><ul><li>สามารถกำหนดคุณสมบัติการแสดงผลแบบหยาบ แล้วค่อยๆ ละเอียดเมื่อเวลาผ่านไป ที่เรียกว่าคุณสมบัติ Progressive </li></ul><ul><li>ส่วนขยายของไฟล์รูปแบบนี้คือ . jpg หรือ . jpeg </li></ul>
  24. 25. JPEG File Format JPEG - 19K Low Quality JPEG - 60K Max Quality
  25. 26. PNG <ul><li>Portable Network Graphics </li></ul><ul><li>รูปแบบล่าสุดในการนำเสนอภาพผ่านเครือข่ายอินเทอร์เน็ต </li></ul><ul><li>สามารถแสดงผลได้ในระบบสีเต็มพิกัด ( True Color ) , มีขนาดไฟล์เล็ก และควบคุมคุณภาพได้ตามที่ต้องการ มีการกำหนดให้พื้นภาพเป็นพื้นโปร่งใสได้ ( Transparent ) รวมทั้งการแสดงผลแบบหยาบสู่ละเอียด ( Interlaced ) </li></ul><ul><li>ส่วนขยายของไฟล์รูปแบบนี้คือ . png </li></ul>
  26. 27. GIF Transparent
  27. 28. GIF Transparent
  28. 29. TIFF <ul><li>Tagged - Image File Format </li></ul><ul><li>รูปแบบที่ใช้เก็บภาพพร้อมรายละเอียดต่างๆ เช่น เลเยอร์ ( Layer ) , Annotation, โหมดภาพทั้งระบบ CMYK, RGB, Lab Color ตลอดจนข้อมูลประกอบอื่นๆ ตามต้นฉบับเดิมของภาพ </li></ul><ul><li>เหมาะสมต่อการเก็บบันทึกภาพต้นฉบับ และ ภาพสำหรับใช้ประกอบการสร้างสื่อสิ่งพิมพ์ </li></ul><ul><li>ส่วนขยายของไฟล์รูปแบบนี้คือ . tif </li></ul>
  29. 30. สรุปการเลือกใช้ฟอร์แมตภาพ <ul><ul><li>ไฟล์สกุล GIF (Graphics Interlace File) </li></ul></ul><ul><ul><ul><li>ภาพที่ไม่ต้องการความคมชัดมากนัก สีไม่มาก </li></ul></ul></ul><ul><ul><ul><li>มีลักษณะพื้นโปร่งใส </li></ul></ul></ul><ul><ul><li>ไฟล์สกุล JPG (Joint Photographer’s Experts Group) </li></ul></ul><ul><ul><ul><li>ภาพที่ต้องการความคมชัดสูง มีสีมาก </li></ul></ul></ul><ul><ul><li>ไฟล์สกุล PNG (Portable Network Graphics) </li></ul></ul><ul><ul><ul><li>ภาพที่ต้องการความคมชัดสูง มีสีมากทำพื้นโปร่งใสได้ </li></ul></ul></ul>
  30. 31. GIF / JPEG
  31. 32. GIF or JPEG?
  32. 33. สีสันดึงดูด แต่ไม่เลอะ <ul><li>กำหนดสีหลักของเว็บ </li></ul><ul><li>เลือกใช้สีที่เข้ากับสีหลัก ในลักษณะชุดสี </li></ul>
  33. 34. มาตรฐาน Image Metadata <ul><li>สนับสนุนระบบค้นคืนภาพ และการป้องกันลิขสิทธิ์ของภาพ </li></ul><ul><li>Image Metadata ระบบ XMP ( eXtensible Metadata Platform ) </li></ul><ul><li>พัฒนาโดย The Newspaper Association of America ( NAA ) และ The International Press Telecommunications Council ( IPTC ) </li></ul><ul><li>ใช้งานได้กับโปรแกรม Adobe PhotoShop 7.0 และสามารถนำเสนอข้อมูลต่างๆ เกี่ยวกับรูปภาพ เช่น Title, Author, Position, Caption, Copyright, URL, Keyword, Categories, Detail of org. </li></ul>
  34. 36. Watermark <ul><li>ข้อมูลแสดงลิขสิทธิ์หรือคุณสมบัติของไฟล์ </li></ul><ul><li>แสดงความเป็นเจ้าของ </li></ul><ul><li>แบ่งได้เป็น </li></ul><ul><ul><li>Text Embedded Watermark </li></ul></ul><ul><ul><li>Image Embedded Watermark </li></ul></ul><ul><li>มีประโยชน์อย่างสูงสำหรับ Digital Library, Digital Archive, E-Commerce </li></ul>
  35. 39. Text Embedded Watermark <ul><li>มีลักษณะเป็นข้อความที่ผนวกกับไฟล์ภาพ </li></ul><ul><li>สามารถระบุได้จากโปรแกรม Adobe PhotoShop จากคำสั่ง File, File info, Copyright & URL </li></ul><ul><li>สามารถค้นหาได้จากคำสั่ง Search/Find ของ Windows </li></ul>
  36. 40. Image Embedded Watermark <ul><li>มีลักษณะเป็นภาพที่ผนวกกับไฟล์ภาพ </li></ul><ul><li>อาจจะเป็นภาพโลโก้ของหน่วยงาน , ภาพข้อความลิขสิทธิ์ </li></ul><ul><li>สามารถระบุได้จากซอฟต์แวร์ประเภท Watermarking Software </li></ul>
  37. 41. Watermark Processing <ul><li>Encoding การเข้ารหัส </li></ul><ul><li>Decoding/Detect การตรวจสอบรหัส </li></ul><ul><ul><li>ระบบ Detect สามารถกระทำได้กับภาพที่มีการลง Watermark และสั่งพิมพ์บนกระดาษ โดยนำภาพดังกล่าวมาสแกน แล้วใช้ Detecting Watermark Software ทำการตรวจสอบ </li></ul></ul>
  38. 42. The Watermark Embedding Process
  39. 43. The Watermark Detection Process
  40. 44. แหล่งข้อมูล <ul><li>http://www.stks.or.th </li></ul><ul><li>http://www.stks.or.th/elearning </li></ul>

×