บทที 8 เลือกใช้สีสำหรับเว็บไซต์(Designing Web Colors)
การเลือกใช้สีสันในเว็บเพจเป็นสิ่งที่สำคัญมากในการดึงดูดความสนใจของผู้ใช้ เนื่องจากสิ่งแรกที่ผู้ใช้มองเห็นจากเว็บก็คือสี ซึ่งเป็นสิ่งกำหนดบรรยากาศและความรู้สึกของเว็บไซต์
-ประโยชน์ของสีในเว็บไซต์
สามารถชักนำสายตาอ่านในไปยังข้อมูลได้
สามารถเชื่อมโยงบริเวณที่ได้รับการออกแบบเข้าด้วยกัน
สามารถแยกส่วนต่างๆออกจากกันได้ง่าย
สามารถดึงดูดความสนใจของผู้อ่าน
ช่วยสร้างระเบียบให้คับข้อความต่างๆ
-แม่สีขึ้นต้นมี 3 สี
สีแดง
สีเหลือง
สีน้ำเงิน
-การผสมสี(Color Mixing)
มี 2แบบ
1.การผสมแบบบวก เป็นการผสมของแสง ไม่ใช่การผสมของวัตถุที่มีสีงบนกระดาษ นำไปใช้กับ จอโปรเจคเตอณื ทีวี หรือจอมอนิเตอร์
2.การผสมแบบลบ เป็นการผสมไม่เกี่ยวกับแสง แต่เกี่ยวกับการดูดกลืนและสะท้อนแสงของวัตถุต่างๆ การนำไปใช้งาน ภาพวาดของศิลปิน
-วงล้อสี (Color wheel)
เป็นรูปแบบหนึ่งในการจัดเรียงสีทั้งหมดไว้ในวงกลม และเป็นการจัดลำดับเฉดสีอย่างมีเหตุผลและง่ายต่อการนำไปใช้จะมี
1.วงล้อสีแบบลบ
2.วงล้อสีแบบบวก
-สีที่เป็นกลาง(Neutral Colors)
คือกลุ่มสีที่ไม่ได้ถูกบรรจุไว้ในวงล้อสี เพราะเป็นสีที่ไม่ได้รับอิทธิพลมากจากสีอื่น ซึ่งสีเทา ขาว ดำ
-สีอ่อน สีเข้ม และโทนสี
ในการผสมสีกลางเข้าก้บสีบริสุทธ์จะเกิดเป็นสีต่างๆ จำนวนมาก เช่น สีบริสุทธิ์ผสมกับสีขาว จะได้เป็นสีอ่อน สีบริสุทธิ์ผสมสีเทา จะได้เป็นโทนสีระดับต่างๆๆ
สีบริสุทธิ์กับสีดำจะได้เป็นสีเข็ม
-รูปแบบชุดสีสามารถจัดเป็นกลุ่มง่ายดังนี้
1.ชุดสีร้อนประกอบไปด้วยสีม่วงแกมแดง แดงแกมม่วง แดง ส้ม เหลือง และเขียวอมเหลือง สีเหล่านี้สร้างความอบอุ่น สบาย
2.ชุดสีเย็น ประกอบด้วยสีม่วง น้ำเงิน น้ำเงินอ่อน ฟ้า น้ำเงินแกมเขียว และสีเขียว ชุดสีเย็นให้ความรู้สึกเย็นสบาย ดูสุภาพ เรียบร้อย
3.ชุดสีแบบเดียว เป็นรูปแบบชุดสีที่ง่ายที่สุด คือมีค่าของสีบริสุทธิ์เพียงสีเดียว แต่งเพิ่มความหลากหลายโดยการเพื่มความเข็มอ่อนในระดับต่างๆ
ชุดสีนี้จะค่อนข้างมีความกลมกลืนเห็นหนึ่งเดียว แต่งบางครั้งดูไม่มีชีวิตวีวา
4.ชุดสีแบบสามเส้า เป็นชุดสีที่อยู่มีมุมของสามเหลื่ยมด่านเท่าทั้งสาม ซ้นเป็นสีที่มีระยะห่างในวงล้อสีเท่ากัน จึงมีความเข้ากันอย่างลงตัว
5.ชุดสีที่คล้ายคลึงกัน ประกอบด้วยสี 2 หรือ 3สีที่อยู่ติดกันในวงล้อ สามารถเพิ่มเป็น 4 หรือ5 สีก็ได้ แต่อาจส่งผลให้ขอบเขตของสีกว้างไป
6.ชุดสีตรงข้าม คือสีคุ่ที่อยู่ตรงข้ามกันในว้อล้อ เมื่อนำสีทั้งสองมาใช้คู่กันจะทำให้สีทั้งสองมีความสว่างสดใ
7.ชุดสีตรงข้ามข้างเคียง เป็นชุดสีที่เปลี่ยนแปลงมาจากชุดสีตรงข้าม ชุดสีแบบนี้มความสดใส สะดุดตา และเข้ากันของสีลดลงด้วย
8.ชุดสีตรงข้ามข้างเคียงทั้ง 2 ด้าน ดัดแปลงมาจากชุดสีตรงข้างเช่นกัน แต่สีตรงข้างทั้ง2 สีถูกแบ่งแยกเป็นสีด้านข้างทั้สง 2 ด้าน จะมีความสดใส แต่ความกลมกลืนของสีลดลง
บทที่ 9 ออกแบบกราฟฟิกสำหรับสำหรับเว็บไซต์(Designing Web Graphics)
กราฟฟิกมี 3 รูปแบบ คือ
1. GIF ( Graphic Interchange Format )
- ได้รับความนิยมในยุดแรก
-มีข้อมูลสีขนาด 8 บิต ทำให้มีสีมากสุด 256 สี
- การบีบอัดข้อมูลตามแนวของพิกเซล เหมาะสำหรับกราฟฟิกที่ประกอบด้วย สีพื้น
2. JPG ( Joint Photographic Experts Group )
- มีข้อมูลสีขนาด 24 บิต แสดงสีได้ถึง 16.7 ล้านสี
- ใช้ระบบการบีบอัดที่มีลักษณะที่สูญเสีย(lossy)
- ควรนำไปใช้กับรูปถ่ายหรือกราฟฟิกที่มีการไล่ระดับสีอย่างละเอียด
3. PNG ( Portable Network Graphic )
- สามารถสนับสนุนสีได้ทั้ง 8 บิต 16 บิต และ 24 บิต
- การบีบอัดแบบ Deflate ที่ไม่ทำให้เกิดการสูญเสีย(lossless)
- ควบคุมแกมม่า (Gamma) และความโปร่งใส(Transparency) ในตัวเอง
ระบบการวัดขนาดของรูปภาพ
-ใช้หน่วยวัดเป็น พิกเซล
-ความละเอียดของภาพควรใช้ หน่วย pixle per inch (ppi)
-การใช้งานจะนำหน่วย dot per inch (dpi) จะเหมาะสมกับเครื่องพริ้นท์
-ควรมีความละเอียดแค่ 72 ppt
กราฟฟิกรูปแบบ GIF
- ไม่ขึ้นอยู่กับระบบปฏิบัติการใด ๆ
- สามารถนำไปใช้กับเบราเซอร์ทุกชนิดได้โดยไม่ต้องคำนึงถึงเวอร์ชันใด ๆ
- เก็บข้อมูลสี ได้สูงสุด 8 บิต
- คุณสมบัติ Interlacing
ข้อดี คือ ผู้ใช้เห็นภาพที่กำลังดาวน์โหลดอยู่มีความชัดเจนขึ้นเรื่อย ๆ
ข้อเสีย คือ ขนาดไฟล์จะเพิ่มขึ้นเล็กน้อย
- ระบบการบีบอัดข้อมูลของ GIF
-จะมีการบีบอัดข้อมูลแบบไม่สูญเสีย
-ใช้การบีบอัดที่เรียกว่า LZW ซึ่งเป็นแบบเดียวกับที่ใช้ในโปรแกรม zip
-คุณสมบัติในการเคลื่อนไหว(Animated GIF)
ข้อดี คือ ไม่ต้องอาศัย plug-in
-ข้อคิดในการใช้ Animated GIF
- ใช้ภาพเคลื่อนไหวในจุดที่ต้องการให้ผู้ชมสนใจมากที่สุด
- ไม่ควรใช้ภาพเคลื่อนไหวมากเกินไป จะทำให้ผู้ใช้สับสน
- ทำให้ภาพเคลื่อนไหวนั้นโหลดได้เร็ว
-พยายามจำกัดขนาดของกราฟฟิก
-ใช้สีพื้น ๆ เข้าไว้
-รูปที่มีลวดลายตามแนวนอนจะมีขนาดไฟล์ที่เล็กกว่า
กราฟฟิกรูปแบบ JPEG
-ใช้วิธีการบีบบอัดข้อมูลแบบ JFIF (JPEG File interchange format)
-ใช้ระบบสีขนาด 24 บิต จะให้สีสมจริงมากถึง 16.7 ล้านสี ส่งผลให้ได้รูปที่มีคุณภาพ
-ระบบการบีบอัดข้อมูลในไฟล์ JPEG
-เป็นการบีบอัดแบบ lossy คือสูญเสียรายละเอียดบางส่วนของภาพไป
-ใช้วิธีเก็บข้อมูลความสัมพันธ์ของสีและความสว่างในรูปเหลี่ยม
-ประสิทธิภาพจะขึ้นอยู่กับการรวมกลุ่มของรายละเอียดในรูป
-การขยายข้อมูลของ JPEG จะใช้เวลาในการแสดงผลรูป JPEG มากกว่า GIF
-การลดขยายไฟล์ JPEG ไม่สามารถลดขนาดไฟล์โดยการลดจำนวนบิตของสีลงได้
10.การจัดรูปแบบตัวอักษรสำหรับเว็บไซต์
- ตัวอักษรมีความสำคัญในการสื่อข้อความถึงผู้ใช้
- แต่ละชนิดจะให้อารมณ์และความรู้สึกที่แตกต่างกัน ควรเลือกใช้ตัวอักษรให้เหมาะสมกับเนื้อหา
ส่วนประกอบของตัวอักษร
- descender ส่วนล่างของตัวอักษรพิมพ์เล็กที่ต่ำกว่าเส้น baseline
- baseline เส้นสมมติที่ตัวอักษรส่วนใหญ่ตั้งอยู่
- cap height ความสูงจากเส้น baseline ไปถึงส่วนบนสุดของตัวอักษรพิมพ์ใหญ่
- x - height ความสูงของตัวอักษร x ในแบบพิมพ์เล็ก ซึ่งมักใช้อ้างถึงความสูงของตัวอักษรที่ไม่รวม
descender ascender
- point size ระยะความสูงทั้งหมดวัดจากส่วนบนสุดถึงส่วนล่างสุดของตัวอักษร
ค่าความสูง x - height มีผลต่อภาพรวมของตัวอักษรและความยากง่ายในการอ่าน
รูปแบบตัวอักษร
แบ่งเป็น 2 ประเภทใหญ่ๆ
1. ตัวอักษรที่มีขนาดสัมพันธ์กับรูปร่าง หรือตัวอักษรที่มีขนาดไม่คงที่
- ตัวอักษรแต่ละตัวมีพื้นที่ตามแนวนอนไม่เท่ากัน ขึ้นกับรูปร่างของตัวอักษรนั้น
- สิ่งพิมพ์ที่ผลิตด้วยคอมพิวเตอร์ส่วนใหญ่จะใช้ตัวอักษรนี้เพื่อให้ดูเหมาะสมและอ่านง่าย
2. ตัวอักษรที่มีขนาดคงที่
- มีพื้นที่ตามแนวนอนเท่ากันหมด เป็นรูปแบบที่เรียบง่าย คล้ายตัวพิมพ์ดีด
ตัวอักษรประเภท serif และ sans-serif
ตัวอักษรประเภท serif
- มีลายเส้นเพิ่มขึ้นที่ส่วนปลาย
- เช่น Times New Roman , Garamond, Georgia เป็นต้น
- เหมาะจะใช้ในส่วนที่เป็นรายละเอียดเนื้อหา ไม่เหมาะกับการใช้เป็นตัวหนา
ตัวอักษรประเภท sans-serif
- ไม่มีลายเส้นตกแต่งติดอยู่กับตัวอักษร
- เช่น Arial, Verdana, Geneva
- เหมาะที่จะใช้กับหัวข้อหรือตัวอักษรขนาดใหญ่
- ไม่เหมาะกับลักษณะเอียงเพราะจะทำให้รูปร่างเปลี่ยนไปมาก
ความสะดวกในการอ่าน (Legibility)
- หลีกเลี่ยงการใช้คำที่เป็นตัวพิมพ์ใหญ่ทั้งหมด เพราะจะทำให้อ่านยาก และลดความสะดุดตาลง
- การใช้ตัวพิมพ์เล็กทั้งหมดในประโยค จะสร้างความรู้สึกไม่เป็นทางการ และแสดงถึงความไม่
สมบูรณ์ของเนื้อหา
- ใช้ตัวพิมพ์ใหญ่สำหรับตัวอักษรแรกของแต่ละคำในประโยค ควรใช้อย่างจำกัด เพราะเป็นการ
รบกวนรูปแบบโดยรวมของคำ ส่งผลให้อ่านยากยิ่งขึ้น
- สิ่งที่ไม่ควรทำคือการแบ่งครึ่งตัวอักษร เพราะจะทำให้ภาพรวมของตัวอักษรขาดหายไป และยากต่อการอ่าน
การจัดข้อความในหน้าเว็บ
การจัดตำแหน่ง
- ในภาษา HTML สามารถจัดตำแหน่งตัวอักษรได้ด้วยคำสั่ง Align และสามารถเลือกค่าเป็น left, right, center, justify
ช่วงว่างระหว่างตัวอักษร และช่วงว่างระหว่างคำ
- ตัวอักษรบางคู่ที่อยู่ติดกันอาจมีระยะที่ไม่เหมาะสม จึงต้องมีการ Kerning เพื่อที่สายตาจะได้เคลื่อนที่อย่างราบเรียบและสม่ำเสมอ
- การจัดตำแหน่งแบบ justify ทำให้เกิดช่องว่างที่ไม่สวยงามได้
ระยะห่างระหว่างบรรทัด
- เนื้อหาที่มีปริมาณมาก ควรมีระยะห่างระหว่างบรรทัดมาก เพื่อเพิ่มความสะดวกในการอ่านเป็นเวลานาน
ความยาวหน้าเว็บ
- หน้าเว็บที่ยาวมากๆ จะทำให้ผู้ชมรู้สึกเหนื่อยล้าที่จะอ่าน
- ควรจัดแบ่งเป็น paragraph หรือตัดแบ่งเป็นหลายๆหน้า
ขนาดของตัวอักษร
- ใช้ตัวอักษรหลายขนาดเพื่อสร้างลำดับความสำคัญของข้อมูล
ดึงดูดความสนใจด้วยตัวอักษรขนาดใหญ่
- ใช้ตัวอักษรขนาดใหญ่เริ่มต้นประโยค และอาจใช้รูปแบบของการสลับสี หรือใช้ตัวอักษรต่างชนิดกันเพื่อดึงดูดความสนใจ
การเน้นข้อความให้เด่นชัด
- ใช้ขนาดและน้ำหนักของตัวอักษร การทำตัวเอียง ขีดเส้นใต้ ตำแหน่งของตัวอักษร แนวทางของตัวอักษร พื้นที่ว่าง
การใช้สีกับตัวอักษร
- กำหนดสีหลักสำหรับเว็บ
- ใช้สีของตัวอักษรอย่างมีความหมายสม่ำเสมอ
- ใช้สีที่แตกต่างกันในแต่ละส่วนของข้อมูล
- กำหนดสีของ link ให้เหมาะสม
การกำหนดขอบแบบ Aliased และ Anti-aliased
- Aliased คือลักษณะขอบที่เป็นรอยหยักๆ ที่เกิดขึ้นบริเวณเส้นโค้งหรือเส้นแนวเฉียงที่แสดงบนหน้าจอ
- Anti-aliased ใช้เทคนิคของโทนสีเข้ามาช่วย ด้วยการเพิ่มสีที่อยู่ระหว่างสีของตัวอักษรจะทำให้ขอบดูเรียบขึ้น
คำแนะนำในการใช้ตัวอักษรในเว็บเพจ
- ไม่ควรใช้ตัวอักษรที่หายากหรือไม่ได้มาพร้อมกับโปรแกรมต่างๆ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น