วันพุธที่ 29 กันยายน พ.ศ. 2553

บทที่ 9 ออกแบบกราฟฟิกสำหรับเว็บไซต์ (Design Web Graphics)

รูปแบบกราฟฟิกสำหรับเว็บ (GIF , JPG และ  PNG)


·         GIF  ย่อมาจาก  Graphic  Interchange  Format
          - ได้รับความนิยมในยุคแรก
          - มีระบบสีแบบ Index ซึ่งมีข้อมูลสีขนาด 8 บิต ทำให้มีสีมากกว่า 256 สี
          - มีการบีบอัดข้อมูลตามแนวนอนของพิกเซล   เหมาะสำหรับกราฟฟิกที่ประกอบด้วยสีพื้น

·         JPG  ย่อมาจาก  Joint  Photogtaphic  Experts  Group
          - มีข้อมูลสีขนาด 24 บิต (True Color)  สามารถแสดงสีได้ถึง 16.7 ล้านสี
          - ใช้ระบบการบีบอัดที่มีลักษณะที่สูญเสีย (lossy)
          - ไฟล์ประเภทนี้ควรนำไปใช้กับรูปถ่ายหรือกราฟฟิกที่มีการไล่ระดับสีอย่าง ละเอียด

·         PNG  ย่อมาจาก  Portable  Network  Graphic   สามารถสนับสนุนระบบสีได้ทั้ง 8 บิต 16 บิต และ 24 บิต   มีระบบการบีบอัดแบบ Deflate ที่ไม่ทำให้เกิดการสูญเสีย (lossless) มีระบบการควบคุมค่าแกมม่า (Gamma)  และความโปร่งใส (Transparency) ในตัวเอง


ระบบการวัดขนาดของรูปภาพ

     รูปภาพที่ใช้หน่วยวัดขนาดตามหน้าจอมอนิเตอร์   นั่นก็คือหน่วยพิกเซล   ซึ่งจะมีประโยชน์ในการเปรียบเทียบขนาดของกราฟฟิกหับองค์ประกอบอื่น ๆ ในหน้าเว็บ   รวมถึงขนาดของหน้าต่างเบราเซอร์ด้วย

ระบบการวัดความละเอียดของรูปภาพ

·         ระบบความละเอียดของรูปภาพที่แสดงผลบนจอมอนิเตอร์ควรใช้หน่วย pixel per inch (ppi)
·         แต่ในทางการใช้งานจะนำหน่วย dot per inch (dpi) ซึ่งเป็นหน่วยวัดความละเอียดของสิ่งพิมพ์มาใช้งานแทน ppi
·         ความละเอียดของรูปภาพที่ใช้ในเว็บไซต์ควรมีความละเอียดแค่ 72 ppi ก็เพียงพอแล้ว

โปรแกรมกราฟฟิกสำหรับเว็บ

·         ปัจจุบันมีโปรแกรมหลายประเภททีนำมาใช้ในการสร้างกราฟฟิกสำหรับเว็บ
          - Adobe   PhotoShop
          - Adobe  ImangeReady
          - Firework    
·         ค่าพื้นฐานที่สามารถเลือกปรับได้คือ  รูปแบบไฟล์ชุดสีที่ใช้ ,  จำนวนสีระดัความสูญเสียความโปร่งใส และสีพื้นหลัง

คำแนะนำในกระบวนการออกแบบกราฟฟิกสำหรับเว็บ

·         ออกแบบกราฟฟิกโดยใช้ชุดสีสำหรับเว็บ (Web  Palette)
·         เลือกใช้รูปแบบกราฟฟิกที่เหมาะสม GIF หรือ JPEG
·         ตัดแบ่งกราฟฟิกออกเป็นส่วนย่อย (Slices)

 

ไม่มีความคิดเห็น:

แสดงความคิดเห็น

จำนวนผู้เข้าชม

ฟรี Counter