Content

บทที่ 8 เลือกใช้สีสำหรับเว็บไซต์ (Designing Web Colors)

สิ่งสำคัญในการทำเว็บไซต์  นอกเหนือจากข้อมูลและรูปภาพที่ควรคำนึงถึงแล้ว  เฉดสีบนหน้าเว็บไซต์ ก็ถือว่าเป็นสิ่งสำคัญเป็นหน้าตาของเว็บไซต์โดยรวมเลยทีเดียว  เนื่องจากสีนั้นมีอิทธิพลต่อความรู้สึกและอารมณ์ของผู้ที่เข้ามาชมเว็บไซต์  ถึงแม้ข้อมูลบนหน้าเว็บไซต์จะดีเพียงใด  แต่ถ้าหากเลือกใช้สีไม่ดี ก็อาจส่งผลให้หน้าเว็บไซต์ดูไม่น่าสนใจ  หรือทำให้อ่านยาก  ผู้ชมเว็บไซต์จะอยู่ในเว็บไซต์ไม่นานและอาจจะไม่กลับมาที่หน้าเว็บไซต์อีกเลยก็ได้  ดังนั้น  จึงควรเลือกสีให้เหมาะสมกับเว็บไซต์ ว่าจะสื่อออกมาในอารมณ์และความรู้สึกแบบไหน  และมีการแสดงผลที่เอื้ออำนวยต่อการอ่านข้อมูลของผู้ชมเว็บไซต์ด้วย

- สีส้ม  เป็นสีแห่งความสร้างสรรค์ อบอุ่น สดใส มีสติปัญญา ความทะเยอทะยาน

-สีแดง  เป็นสีที่กระตุ้นระบบประสาทของเราได้รุนแรงที่สุด ให้ความรู้สึกเร้าใจ ตื่นเต้น ท้าทาย ตื่นตัว

-สีชมพู ให้ความรู้สึกอบอุ่น อ่อนโยน นุ่มนวล อ่อนหวาน ความรัก

-สีเหลือง ให้ความรู้สึกแจ่มใส ความสดใส ความอบอุ่น ความร่าเริง  ความสุกสว่างใส

-สีเขียว  เป็นสีที่เด่นที่สุดบนโลก ให้ความรู้สึกร่มเย็น สบายตา ผ่อนคลาย ปลอดภัย ทำให้เกิดความหวังและความสมดุล

 -สีน้ำเงิน  เป็นสีที่สร้างความสุขุม เยือกเย็น หนักแน่นและละเอียดรอบคอบ  น่าเชื่อถือ

 -สีฟ้า  เป็นสีที่ให้ความรู้สึกสงบเยือกเย็น เป็นอิสระ ปลอดโปร่ง สบาย ปลอดภัย ใจเย็น สะอาด

 -สีม่วง  เป็นสีแห่งผู้รู้ ห้ความรู้สึกมีเสน่ห์ น่าติดตาม เร้นลับ น่าค้นหา

-สีขาว ให้ความรู้สึกบริสุทธิ์ สะอาด สดใส เบาบาง อ่อนโยน

 -สีทอง ให้ความรู้สึกความหรูหรา โอ่อ่า มีราคา สง่างาม  เป็นต้น

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

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

กราฟฟิกประเภท GIF

กราฟฟิกประเภท JPEG

กราฟฟิกประเภท PNG

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

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

ระบบการวัดความละเอียดของรูปภาพการวัดความละเอียดของรูปภาพมีหน่วยเป็น Pixels  Per Inch (PPI) แต่ก็มีระบบการวัดอีกระบบหนึ่ง คือ Dot  Per Inch (DPI)  ที่ใช้กับความละเอียดของรูปภาพที่พิมพ์ออกมา ซึ่งทั้ง 2 หน่วยสามารถใช้แทนกันได้ความละเอียดของรูปภาพ          ส่วนใหญ่แล้วความละเอียดของรูปภาพควรจะมีแค่ 72 PPI เนื่องจากว่าความละเอียดของหน้าจอคอมพิวเตอร์มีความละเอียดต่ำ ดังนั้น ไม่ว่ารูปจะมีความละเอียดสูงมากเท่าใดไม่สามารถมองเห็นความแตกต่างได้

กราฟฟิกรูปแบบ GIF

ระบบสีแบบอินเด็กซ์ 8 บิต

ระบบการบีบอัดข้อมูลของ GIF

เมื่อไหร่ถึงจะใช้ GIF

คุณสมบัติ Interlacing

ลักษณะโปร่งใส

กราฟฟิกรูปแบบ JPEG

ระบบสีขนาด 24 บิต

ระบบการบีบอัดข้อมูลของ JPEG

การขยายข้อมูลของ JPEG

การสูญเสียคุณภาพ

เมื่อไหร่ถึงจะใช้ JPEG

การลดขนาดไฟล์ JPEG

Optimized JPEG 

 

บทที่ 10 จัดรูปแบบตัวอักษรสำหรับเว็บไซต์ (Typography on the Web)

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

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

ส่วนประกอบของตัวอักษร
- descender ส่วนล่างของตัวอักษรพิมพ์เล็กที่ต่ำกว่าเส้น baseline
- baseline เส้นสมมติที่ตัวอักษรส่วนใหญ่ตั้งอยู่
- cap height ความสูงจากเส้น baseline ไปถึงส่วนบนสุดของตัวอักษรพิมพ์ใหญ่
- x - height ความสูงของตัวอักษร x ในแบบพิมพ์เล็ก ซึ่งมักใช้อ้างถึงความสูงของตัวอักษรที่ไม่รวม descender ascender
- point size ระยะความสูงทั้งหมดวัดจากส่วนบนสุดถึงส่วนล่างสุดของตัวอักษร


ค่าความสูง x - height มีผลต่อภาพรวมของตัวอักษรและความยากง่ายในการอ่าน

รูปแบบตัวอักษร
แบ่งเป็น 2 ประเภทใหญ่ๆ
1. ตัวอักษรที่มีขนาดสัมพันธ์กับรูปร่าง หรือตัวอักษรที่มีขนาดไม่คงที่
- ตัวอักษรแต่ละตัวมีพื้นที่ตามแนวนอนไม่เท่ากัน ขึ้นกับรูปร่างของตัวอักษรนั้น
- สิ่งพิมพ์ที่ผลิตด้วยคอมพิวเตอร์ส่วนใหญ่จะใช้ตัวอักษรนี้เพื่อให้ดูเหมาะสมและอ่านง่าย
2. ตัวอักษรที่มีขนาดคงที่
- มีพื้นที่ตามแนวนอนเท่ากันหมด เป็นรูปแบบที่เรียบง่าย คล้ายตัวพิมพ์ดีด

ตัวอักษรประเภท serif และ sans-serif
- มีลายเส้นเพิ่มขึ้นที่ส่วนปลาย
- เช่น Times New Roman , Garamond, Georgia เป็นต้น
- เหมาะจะใช้ในส่วนที่เป็นรายละเอียดเนื้อหา ไม่เหมาะกับการใช้เป็นตัวหนา

ตัวอักษรประเภท sans-serif
- ไม่มีลายเส้นตกแต่งติดอยู่กับตัวอักษร
- เช่น Arial, Verdana, Geneva
- เหมาะที่จะใช้กับหัวข้อหรือตัวอักษรขนาดใหญ่
- ไม่เหมาะกับลักษณะเอียงเพราะจะทำให้รูปร่างเปลี่ยนไปมาก
ความสะดวกในการอ่าน (Legibility)
- หลีกเลี่ยงการใช้คำที่เป็นตัวพิมพ์ใหญ่ทั้งหมด เพราะจะทำให้อ่านยาก และลดความสะดุดตาลง
- การใช้ตัวพิมพ์เล็กทั้งหมดในประโยค จะสร้างความรู้สึกไม่เป็นทางการ และแสดงถึงความไม่
สมบูรณ์ของเนื้อหา
- ใช้ตัวพิมพ์ใหญ่สำหรับตัวอักษรแรกของแต่ละคำในประโยค ควรใช้อย่างจำกัด เพราะเป็นการ
รบกวนรูปแบบโดยรวมของคำ ส่งผลให้อ่านยากยิ่งขึ้น
- สิ่งที่ไม่ควรทำคือการแบ่งครึ่งตัวอักษร เพราะจะทำให้ภาพรวมของตัวอักษรขาดหายไป และ
ยากต่อการอ่าน