Transcript บทที่ 8 การใช้รูปภาพและการออกแบบกราฟฟิกสำหรับเว็บ

่
บทที 8
การใช้รูปภาพ
และการออกแบบกราฟฟิ ก
สาหร ับเว็บ
่ ดนี เป็
้ นลิขสิทธิของส
์
สือชุ
านักพิมพ ์วังอ ักษร ใช้
รู ปแบบกราฟฟิ กสาหร ับเว็บ
 กราฟฟิ กประเภท
GIF
 กราฟฟิ กประเภท JPEG
 กราฟฟิ กประเภท PNG
การวัดขนาดและความ
ละเอียดของรู ปภาพ
ระบบการวัดขนาดรู ปภาพ
หน่ วยในการวัดขนาดของรู ปภาพในเว็บมีหน่ วยเป็ น
พิกเซล (Pixel) เนื่ องจาก
ความละเอียด
่ อมี
่ การแสดง
หน้าจอมีหน่ วยเป็ นพิกเซล ซึงเมื
รู ปภาพบนหน้าจอ จะจับคู ก
่ ันแบบหนึ่ งต่อหนึ่ งกบ
ั
้ ในการออกแบบรู ปภาพ
พิกเซลของรู ปภาพ ดังนัน
และกราฟฟิ กต่าง ๆ จึงควรใช้ขนาดเป็ นพิกเซลเสมอ
 ระบบการวัดความละเอียดของรู ปภาพ
การวัดความละเอียดของรู ปภาพมีหน่ วยเป็ น Pixels
Per Inch (PPI) แต่กม
็ รี ะบบการว ัดอีกระบบหนึ่ ง คือ
่ ก ับความละเอียดของ
Dot Per Inch (DPI) ทีใช้
่ มพ ์ออกมา ซึงทั
่ ง้
รู ปภาพทีพิ
2 หน่ วยสามารถใช้
แทนกันได้

กราฟฟิ กรู ปแบบ GIF
 ระบบสีแบบอินเด็กซ ์ 8
บิต
 ระบบการบีบอ ัดข้อมู ลของ
GIF
่
 เมือไหร่
ถงึ จะใช้ GIF
 คุณสมบัต ิ Interlacing
 ลักษณะโปร่งใส
วิธก
ี ารป้ องกันไม่ให้เกิดขอบ
่ ตอ
ทีไม่
้ งการ
 เลือกใช้ขอบแบบ
Aliased
 เลือกใช้ขอบแบบ Anti –
Aliased
่
 คุณสมบัตก
ิ ารเคลือนไหว
 การลดขนาดไฟล ์ GIF
 ออกแบบลวดลายตามแนวนอน
 ลดขนาดบิตเด็ปและจานวน
เสียง
กราฟฟิ กรู ปแบบ JPEG
ระบบสีขนาด 24 บิต
 ระบบการบีบอ ัดข้อมู ลของ JPEG
 การขยายข้อมู ลของ JPEG
 การสู ญเสียคุณภาพ
่
 เมือไหร่
ถงึ จะใช้ JPEG
 การลดขนาดไฟล ์ JPEG
 Optimized JPEG

คาแนะนาในการออกแบบ
กราฟฟิ ก
 ออกแบบกราฟฟิ กโดยใช้ชด
ุ สี
 ทางานในระบบสีแบบ
RGB
 ย่อดีกว่าขยายรู ปภาพ
 ใช้ต ัวอ ักษรแบบ Anti Aliased