Lecture

บทที่ 9

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

 Designing Web Graphics

                กราฟฟิกเป็นองค์ประกอบที่สำคัญอยางหนึ่งของเว็บเพจ ช่วยสื่อความหมายสร้างความเข้าใจให้กับผู้ใช้ รวมทั้งช่วยสร้างความสวยงามให้เว็บไซต์น่าดูชมยิ่งขึ้น
                    ปัญหาที่มักเกิดขึ้นกับการสร้างกราฟฟิกคือ การเลือกใช้รูปแบบรากฟฟิกที่ไม่เหมาะสมกับลักษณะของรูป โดยไม่รู้จักความแตกต่างของรูปแบบกราฟฟิก ส่งผลให้รูปที่ได้มีลักษณะไม่สมบูรณ์และมีไฟล์ใหญ่เกินความจำเป็น
 รูปแบบกราฟฟิกสำหรับเว็บ (GIF,JPG และ PNG)
GIF ย่อมาจาก Graphic Interchange Format

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

JPG ย่อมาจาก Joint Photographic Experts Group

-มีข้อมูลสีขนาด 24 บิต (True Color) สามารถแสดงสีได้ถึง 16.7ล้านสี

-ใช้ระบบการบีบอัดที่มีลักษณะที่สูญเสีย (lossy)

    -ไฟล์ประเภทนี้ควรนำไปใช้กับรูปถ่ายหรือกราฟฟิกที่มีการไล่ระดับสีอย่างละเอียด

PNG ย่อมาจาก Portable Network Graphic

-สามารถสนับสนุนระบบสีได้ทั้ง 8 บิต 16 บิต และ 24 บิต

   -มีระบบการบีบอัดแบบ Deflate ที่ไม่ทำให้เกิดการสูญเสีย (lossless)

   -มีระบบการควบคุมค่าแกมม่า (Gamma) และความโปร่งใส(Transparency)ในตัวเอง

บทที่ 10

จัดรูปแบบตัวอักษรสำหรับเว็บไซต์

จัดรูปแบบตัวอักษรสำหรับเว็บไซต์ 

        ตัวอักษรมีความสำคัญในการสื่อข้อความถึงผู้ใช้ ตัวอักษรมีหลายชนิด แต่ละชนิดจะให้อารมณ์และความรู้สึกที่

-แตกต่างกัน ควรเลือกใช้ตัวอักษรให้

-เหมาะสมกับเนื้อหาและข้อมูลที่ต้องการสื่อ

ส่วนประกอบของตัวอักษร

Ascender : ส่วนบนของตัวอักษรพิมพ์เล็กที่สูงกว่าความสูง x-height ของตัวอักษร

Descender : ส่วนล่างของตัวอักษรพิมพ์เล็กที่ต่ำกว่าเส้น baseline

Baseline : เส้นสมมติที่ตัวอักษรส่วนใหญ่ตั้งอยู่

Cap height : ความสูงจากเส้น baseline ไปถึงส่วนบนสุดของตัวอักษรพิมพ์ใหญ่

Point size : ระยะความสูงทั้งหมดวัดจากส่วนบนสุดถึงส่วนล่างสุดของตัวอักษร

X-height : ความสูงของตัวอักษร x ในแบบพิมพ์เล็ก ซึ่งมักใช้อ้างถึงความสูงของตัวอักษรที่ไม่รวม ascender และ descenderค่าความสูง x-height จะมีผลต่อภาพรวมของตัวอักษรและความยากง่ายในการอ่าน

ความสะดวกในการอ่าน (Legibility)

ความยาวของหน้าเว็บ

-หน้าเว็บที่ยาวมาก ๆ จะทำให้ผู้ชมรู้สึกเหนื่อยล้าที่จะอ่าน

-ควรจัดแบ่งเป็น paragraph หรือ ตัดแบ่งเป็นหลาย ๆ หน้าขนาดของตัวอักษร

ขนาดของตัวอักษร

-ใช้ตัวอักษรหลายขนาดเพื่อสร้างลำดับความสำคัญของข้อมูล

-ลำดับในการอ่านโดยทั่วไป ผู้อ่านจะอ่านจากบนลงล่าง และจากซ้ายไปขวา

การใช้สีกับตัวอักษร 

 -กำหนดสีหลักสำหรับเว็บ 

 -ใช้สีของตัวอักษรอย่างมีความหมายสม่ำเสมอ 

 -ใช้สีที่แตกต่างกันในแต่ละส่วนข้อมูล 

 -กำหนดสีของ link ให้เหมาะสม