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

1. เทคนิคการออกแบบ กราฟิก สำหรับเว็บไซต์ นพเก้า นาคามดี บุญเลิศ อรุณพิบูลย์

2. เว็บกราฟิก สวย เร็ว ค้นได้ รองรับ การเข้าถึง

3. สวยแต่เร็ว ขนาดของภาพ การจัดวางหน้ากราฟิก ฟอร์แมตภาพ สีสัน

4. ลักษณะของหน้าเว็บที่เหมาะสม หน้าเว็บที่เหมาะสม ไม่มีข้อกำหนดที่ชัดเจน ควรคำนึงถึง กลุ่มเป้าหมาย (Personal/Business) ลักษณะของคอมพิวเตอร์ที่กลุ่มเป้าหมายใช้ (Screen Area ของจอภาพ ) Screen Area ที่เหมาะสมในปัจจุบัน คือ 1024 x 768 pixels Web Area ที่เหมาะสมคือ ความยาวไม่เกิน 1000 pixel ความสูงไม่มีข้อกำหนดตายตัว แต่ส่วน Header ของเว็บไม่ควรเกิน 1 ใน 3 ของพื้นที่ที่เหลือ

5. Truehits.net

7. ขนาดขององค์ประกอบกราฟิก Header Banner Icon

8. Template & Layout Design TITLE Menu History Duty Project

9. Template & Layout Design TITLE History Duty Project

10. Template & Layout Design TITLE History Duty Project

11. Template & Layout Design TITLE History Duty Project

12. ภาพที่นำเสนอ สร้างความโดดเด่นให้กับภาพที่นำเสนอ

13. ฟอร์แมตภาพสำหรับเว็บ .bmp .tif .wmf .gif .png .jpg .ai

14. เว็บกราฟิก รูปภาพที่แสดงในโหมดปกติ การแสดงผลภาพแบบ Interlaced การแสดงผลภาพ แบบ Progressive

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 ภาพ สื่อสิ่งพิมพ์ ภาพต้นฉบับ

16. Format รูปแบบของไฟล์ภาพที่ใช้ในการจัดเก็บภาพ การเลือกรูปแบบที่เหมาะสมต่อการนำเสนอจะช่วยให้ภาพมีขนาด ( File Size ) เล็กลง โดยคงความคมชัดไว้ในระดับดี เป็นการประหยัดพื้นที่ของสื่อบันทึกข้อมูลได้เป็นอย่างดี

17. เว็บกราฟิก รูปภาพที่แสดงในโหมดปกติ การแสดงผลภาพแบบ Interlaced การแสดงผลภาพ แบบ Progressive

18. Interlaced GIF

19. JPEG Quality & Progressive ภาพฟอร์แมต JPG ค่า Quality ไม่ควรต่ำ หรือสูงเกินไป กำหนดรูปแบบการแสดงผล เป็นแบบ Progressive ด้วย สำหรับภาพที่มีขนาดโต

20. GIF Graphics Interlace File จำนวนสีและความละเอียดของภาพไม่สูงมากนัก ต้องการพื้นแบบโปร่งใส ต้องการแสดงผลแบบโครงร่างก่อน แล้วค่อยแสดงผลแบบละเอียด ต้องการนำเสนอภาพแบบภาพเคลื่อนไหว ส่วนขยายคือ .gif

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

22. Transparent GIFs

23. Animation GIF

24. JPEG Joint Photographer's Experts Group เหมาะสมกับการนำเสนอทั้งระบบสื่อมัลติมีเดีย และเว็บไซต์ สามารถกำหนดขนาดของไฟล์ได้ตามความเหมาะสม ( File Compression ) สามารถกำหนดคุณสมบัติการแสดงผลแบบหยาบ แล้วค่อยๆ ละเอียดเมื่อเวลาผ่านไป ที่เรียกว่าคุณสมบัติ Progressive ส่วนขยายของไฟล์รูปแบบนี้คือ . jpg หรือ . jpeg

25. JPEG File Format JPEG - 19K Low Quality JPEG - 60K Max Quality

26. PNG Portable Network Graphics รูปแบบล่าสุดในการนำเสนอภาพผ่านเครือข่ายอินเทอร์เน็ต สามารถแสดงผลได้ในระบบสีเต็มพิกัด ( True Color ) , มีขนาดไฟล์เล็ก และควบคุมคุณภาพได้ตามที่ต้องการ มีการกำหนดให้พื้นภาพเป็นพื้นโปร่งใสได้ ( Transparent ) รวมทั้งการแสดงผลแบบหยาบสู่ละเอียด ( Interlaced ) ส่วนขยายของไฟล์รูปแบบนี้คือ . png

27. GIF Transparent

28. GIF Transparent

29. TIFF Tagged - Image File Format รูปแบบที่ใช้เก็บภาพพร้อมรายละเอียดต่างๆ เช่น เลเยอร์ ( Layer ) , Annotation, โหมดภาพทั้งระบบ CMYK, RGB, Lab Color ตลอดจนข้อมูลประกอบอื่นๆ ตามต้นฉบับเดิมของภาพ เหมาะสมต่อการเก็บบันทึกภาพต้นฉบับ และ ภาพสำหรับใช้ประกอบการสร้างสื่อสิ่งพิมพ์ ส่วนขยายของไฟล์รูปแบบนี้คือ . tif

30. สรุปการเลือกใช้ฟอร์แมตภาพ ไฟล์สกุล GIF (Graphics Interlace File) ภาพที่ไม่ต้องการความคมชัดมากนัก สีไม่มาก มีลักษณะพื้นโปร่งใส ไฟล์สกุล JPG (Joint Photographer’s Experts Group) ภาพที่ต้องการความคมชัดสูง มีสีมาก ไฟล์สกุล PNG (Portable Network Graphics) ภาพที่ต้องการความคมชัดสูง มีสีมากทำพื้นโปร่งใสได้

31. GIF / JPEG

32. GIF or JPEG?

33. สีสันดึงดูด แต่ไม่เลอะ กำหนดสีหลักของเว็บ เลือกใช้สีที่เข้ากับสีหลัก ในลักษณะชุดสี

34. มาตรฐาน Image Metadata สนับสนุนระบบค้นคืนภาพ และการป้องกันลิขสิทธิ์ของภาพ 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.

36. Watermark ข้อมูลแสดงลิขสิทธิ์หรือคุณสมบัติของไฟล์ แสดงความเป็นเจ้าของ แบ่งได้เป็น Text Embedded Watermark Image Embedded Watermark มีประโยชน์อย่างสูงสำหรับ Digital Library, Digital Archive, E-Commerce

39. Text Embedded Watermark มีลักษณะเป็นข้อความที่ผนวกกับไฟล์ภาพ สามารถระบุได้จากโปรแกรม Adobe PhotoShop จากคำสั่ง File, File info, Copyright & URL สามารถค้นหาได้จากคำสั่ง Search/Find ของ Windows

40. Image Embedded Watermark มีลักษณะเป็นภาพที่ผนวกกับไฟล์ภาพ อาจจะเป็นภาพโลโก้ของหน่วยงาน , ภาพข้อความลิขสิทธิ์ สามารถระบุได้จากซอฟต์แวร์ประเภท 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