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

ปัญหาที่มักเกิดขึ้นกับการสร้างกราฟฟิกคือ
การเลือกใช้รูปแบบกราฟฟิกที่ไม่เหมาะสมกับลักษณะของรูป
โดยไม่รู้จักความแตกต่างของรูปแบบกราฟฟิก
ส่งผลให้รูปที่ได้มีลักษณะไม่สมบูรณ์และมีไฟล์ใหญ่เกินความจำเป็น
รายละเอียดของรูปแบบกราฟฟิกมี
3 ประเภทหลักๆ คือ GIF PGN และPNG
1.
กราฟฟิกรูปแบบ GIF
GIF ย่อมาจาก Graphic
Interchange Format
-
มีไฟล์นามสกุลเป็น .gif
- ได้รับความนิยมในยุคแรก
- มีระบบสีแบบ Index
ซึ่งมีข้อมูลสีขนาด 8 บิต ทำให้มีสีมากที่สุด 256
สี
- มีการบีบอัดข้อมูลตามแนวของพิกเซล
เหมาะสำหรับการฟฟิกที่ประกอบด้วยสีพื้น
*
GIF มีการบีบอัดข้อมูลแบบไม่สูญเสีย (Lossiess) หมายความว่าจะไม่มีการสูญเสียข้อมูลภาพจากการบีบอัด
* GIF ใช้การบีบอัดที่เรียกว่า LZW
(Lempei-Ziv-Weleh) ซึ่งเป็นแบบเดียวกับที่ใช้ในโปรแกรม Zip
โดยใช้ประโยชน์จากการจากความซ้ำซ้อนของข้อมูล
- คุณสมบัติ Interlacing คือการบันทึกไฟล์ GIF
เป็น 4 ระดับ คือ
ที่คุณภาพ 12.5% , 25% ,
50% , 100% ตามลำดับ
* ข้อดี
คือผู้ใช้เห็นภาพที่กำลังดาว์นโหลดอยู่มีความชัดเจนขึ้นเรื่อยๆ
* ข้อเสีย คือขนาดไฟล์จะเพิ่มขึ้นเล็กน้อย
- คุณสมบัติในการเคลื่อนไหว (Animated GIF)
* รูปที่ประกอบด้วยหลายๆเฟรมในรูปเดียวกัน
เมื่อมีการแสดงผลจะเห็นรูปมีการเปลี่ยนแปลงตามเฟรมต่างๆที่มีอยู่อย่างต่อเนื่อง
* ข้อดี ของ Animated GIF คือไม่ต้องอาศัย plug-in ใดๆเนื่องจากเบราเซอร์สนับสนุนคุณสมบัตินี้
2. กราฟฟิกรูปแบบ JPEG
JPG ย่อมาจาก Joint
Photographic Expert Group
-
มีนามสกุลเป็น .jpg
หรือ .jpeg
- มีข้อมูลสีขนาด 24 บิต (True
Color) สามารถแสดงสีได้ถึง 16.7 ล้านสี
- ใช้สีระบบบีบอัดที่มีลักษณะที่สูญเสีย
(Lossy)
- ไฟล์ประเภทนี้ควรนำไปใช้กับรูปถ่ายหรือกราฟฟิกที่มีการไล่ระดับสีอย่างละเอียด
- ไฟล์ประเภท
JPEG ไม่ยึดติดกับระบบปฏิบัติการใดๆและสามารถใช้ได้กับเบราเซอร์ทั้ง Netscape และ IE
version 2 เป็นต้นไป
- การขยายข้อมูลของ JPEG
*
เนื่องจากข้อมูลถูกบีบอัดให้อยู่ในรูปของ
DCT ดังนั้นเบราเซอร์ต้องทำการขยายข้อมูลก่อนแสดงผล ดังนั้นเบราเซอร์จะใช้เวลาในการแสดงผลรูป JPEG
มากกว่า GIF
*
เนื่องจากจำนวนบิตของสีไฟล์ JPEG เป็น 24
บิตเสมอจึงไม่สามารถลดขนาดไฟล์โดยการลดจำนวนบิตของสีลงได้
*
การลดขนาดไฟล์ทำได้โดยการบีบอัดในอัตราที่สูง ทั้งนี้ก็ขึ้นอยู่กับคุณภาพที่ต้องการด้วย
3.
กราฟฟิกรูปแบบ PNG
PNG ย่อมาจาก Portable Network Graphic
- สามารถสนับสนุนระบบสีได้ทั้ง 8 บิต 1 บิต และ 24 บิต
- มีระบบการบีบอัดแบบ Deflate ที่ไม่ทำให้เกิดการสูญเสีย (lossless)
- มีระบบการควบคุมแกมม่า (Gamma) และความโปร่งใส (Transparency) ในตัวเอง
ระบบการวัดขนาดของรูปภาพ
- รูปภาพใช้หน่วยวัดขนาดตามหน้าจอมอนิเตอร์ นั่นก็คือหน่วยพิกเซล ซึ่งจะมีประโยชน์ในการเปรียบเทียบขนาดของกราฟฟิกกับองค์ประกอบอื่นๆในหน้าเว็บ รวบถึงขนาดของหน้าต่างเบราเซอร์
- ระบบความละเอียดของรูปภาพที่แสดงผลบนจอมอนิเตอร์ควรใช้หน่วย pixel per inch (ppi)
- แต่ในทางการใช้งานจะนำหน่วย dot per inch (dpi) ซึ่งเป็นหน่วยวัดความละเอียดของสิ่งพิมพ์มาใช้งานแทน ppi
- ความละเอียดของรูปภาพที่ใช้ในเว็บไซต์ควรมีความละเอียดแค่ 72 ppi ก็เพียงพอ
โปรแกรมสร้างกราฟฟิกสำหรับเว็บ
* Adobe Photoshop เป็นโปรแกรมที่ได้รับความนิยมตั้งแต่อดีตจนถึงปัจจุบัน
*
Adobe ImangeReady ลักษณะหน้าตาและเครื่องมือคล้ายคลึงกับ Photoshop แต่จะถูกพัฒนาข้นเพื่องานกราฟฟิกโดยเฉพาะ เพิ่มความสามารถในการสร้าง animation ได้
*
Firework มีคุณสมบัติในการตกแต่งตัวอักษรกราฟฟิกที่เห็นผลทันที การแสดงค่าของสีในระบบเลขฐานสิบหก การสร้างภาพเคลื่อนไหว การตัดแบ่งภาพให้มีขนาดเล็กๆสำหรับไฟล์ HTML
- ค่าพื้นฐานที่สามารถเลือกปรับได้คือ รูปแบบไฟล์ , ชุดสีที่ใช้ , จำนวนสี
, ระดับความสูญเสีย , ความโปร่งใสและสีพื้นหลัง
คำแนะนำในกระบวนการออกแบบกราฟฟิกสำหรับเว็บ
- ออกแบบกราฟฟิกโดยใช้ชุดสีสำหรับเว็บ (Web Palette)
- เลือกใช้รูปแบบกราฟฟิกที่เหมาะสม GIF
หรือ JPEG
- ตัดแบ่งกราฟฟิกออกเป็นส่วนย่อย (Slices)
- สามารถปรับแต่งชิ้นส่วนของกราฟฟิกได้ตามความเหมาะสมของแต่ละบริเวณ
- สามารถปรับแต่งชิ้นส่วนของกราฟฟิกได้ตามความเหมาะสมของแต่ละบริเวณ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น