บทที่ 9
ออกแบบกราฟฟิกสำหรับเว็บไซต์
Designing Web Graphics
กราฟฟิกเป็นองค์ประกอบที่สำคัญอยางหนึ่งของเว็บเพจ ช่วยสื่อความหมายสร้างความเข้าใจให้กับผู้ใช้ รวมทั้งช่วยสร้างความสวยงามให้เว็บไซต์น่าดูชมยิ่งขึ้น
ปัญหาที่มักเกิดขึ้นกับการสร้างกราฟฟิกคือ การเลือกใช้รูปแบบรากฟฟิกที่ไม่เหมาะสมกับลักษณะของรูป โดยไม่รู้จักความแตกต่างของรูปแบบกราฟฟิก ส่งผลให้รูปที่ได้มีลักษณะไม่สมบูรณ์และมีไฟล์ใหญ่เกินความจำเป็น
รูปแบบกราฟฟิกสำหรับเว็บ (GIF,JPG และ PNG)
GIF ย่อมาจาก Graphic Interchange Format
-ได้รับความนิยมในยุคแรก
-มีระบบสีแบบ Index ซึ่งมีข้อมูลสีขนาด 8 บิต ทำให้มีสีมากสุด 256สี
-มีการบีบอัดข้อมูลตามแนวของพิกเซล เหมาะสำหรับกราฟฟิกที่ประกอบด้วยสีพื้น
-มีระบบสีแบบ Index ซึ่งมีข้อมูลสีขนาด 8 บิต ทำให้มีสีมากสุด 256สี
-มีการบีบอัดข้อมูลตามแนวของพิกเซล เหมาะสำหรับกราฟฟิกที่ประกอบด้วยสีพื้น
JPG ย่อมาจาก Joint Photographic Experts Group
-มีข้อมูลสีขนาด 24 บิต (True Color) สามารถแสดงสีได้ถึง 16.7ล้านสี
-ไฟล์ประเภทนี้ควรนำไปใช้กับรูปถ่ายหรือกราฟฟิกที่มีการไล่ระดับสีอย่างละเอียด
PNG ย่อมาจาก Portable Network Graphic
-มีระบบการบีบอัดแบบ Deflate ที่ไม่ทำให้เกิดการสูญเสีย (lossless)
-มีระบบการควบคุมค่าแกมม่า (Gamma) และความโปร่งใส(Transparency)ในตัวเอง
บทที่ 10
จัดรูปแบบตัวอักษรสำหรับเว็บไซต์
จัดรูปแบบตัวอักษรสำหรับเว็บไซต์
ตัวอักษรมีความสำคัญในการสื่อข้อความถึงผู้ใช้ ตัวอักษรมีหลายชนิด แต่ละชนิดจะให้อารมณ์และความรู้สึกที่
-แตกต่างกัน ควรเลือกใช้ตัวอักษรให้
-เหมาะสมกับเนื้อหาและข้อมูลที่ต้องการสื่อ
ส่วนประกอบของตัวอักษร
Ascender : ส่วนบนของตัวอักษรพิมพ์เล็กที่สูงกว่าความสูง x-height ของตัวอักษร
Descender : ส่วนล่างของตัวอักษรพิมพ์เล็กที่ต่ำกว่าเส้น baseline
Baseline : เส้นสมมติที่ตัวอักษรส่วนใหญ่ตั้งอยู่
Cap height : ความสูงจากเส้น baseline ไปถึงส่วนบนสุดของตัวอักษรพิมพ์ใหญ่
Point size : ระยะความสูงทั้งหมดวัดจากส่วนบนสุดถึงส่วนล่างสุดของตัวอักษร
X-height : ความสูงของตัวอักษร x ในแบบพิมพ์เล็ก ซึ่งมักใช้อ้างถึงความสูงของตัวอักษรที่ไม่รวม ascender และ descender
ค่าความสูง x-height จะมีผลต่อภาพรวมของตัวอักษรและความยากง่ายในการอ่าน
ความสะดวกในการอ่าน (Legibility)
หลีกเลี่ยงการใช้คำที่เป็นตัวพิมพ์ใหญ่ทั้งหมด เพราะจะทำให้อ่านยาก และลดความสะดุดตาลง การใช้ตัวพิมพ์-เล็กทั้งหมดในประโยค จะสร้างความรู้สึกไม่เป็นทางการ และแสดงถึงความไม่สมบูรณ์ของเนื้อหา การจัดข้อความในหน้าเว็บช่องว่างระหว่างตัวอักษรและระหว่างคำ
-ตัวอักษรบางคู่ที่อยู่ติดกันอาจมีระยะที่ไม่เหมาะสม จำเป็นต้องมีการปรับแต่งที่เรียกว่า Kerning เพื่อที่สายตาจะได้เคลื่อนที่อย่างราบเรียบและสม่ำเสมอ การจัดตำแหน่งแบบ justify ทำให้ช่องว่างของแต่ละคำแตกต่างไป
-ในแต่ละคำแตกต่างไปในแต่ละบรรทัด ซึ่งอาจทำให้เกิดช่องว่างที่ไม่สวยงามได้
ความยาวของหน้าเว็บ
ขนาดของตัวอักษร
การใช้สีกับตัวอักษร
-กำหนดสีหลักสำหรับเว็บ
-ใช้สีของตัวอักษรอย่างมีความหมายสม่ำเสมอ
-ใช้สีที่แตกต่างกันในแต่ละส่วนข้อมูล
-กำหนดสีของ link ให้เหมาะสม
