บทที่ 8
เลือกใช้สีสำหรับเว็บไซต์
(Designing Web Colors)
(Designing Web Colors)
- สีสันในหน้าเว็บเพจ เป็นสิ่งที่มีความสำคัญมากในการดึงดูดความสนใจของผู้ใช้ เนื่องจากสิ่งแรกที่พวกเขามองเห็นจากเว็บเพจก็คือ สี ซึ่งเป็นสิ่งกำหนดบรรยากาศและความรู้สึกโดยรวมของเว็บไซต์
- เราสามารถใช้สีได้กับทุกองค์ประกอบของเว็บเพจ ตั้งแต่ตัวอักษร,รูปภาพ,ลิงค์,สีพื้นหลัง และรูปภาพพื้นหลัง การเลือกใช้สีอย่างเหมาะสมจะช่วยในการสื่อความหมายของเนื้อหา
- การตัดสินใจเลือกใช้สีให้เหมาะสมกับบุคลิกและเป้าหมายของเว็บไซต์ เพื่อการแสดงผลที่ตรงกับความประสงค์มากที่สุด การใช้ชุดสีที่เหมาะสม กลมกลืน ไม่เพียงแต่จะสร้างความพึงพอใจให้กับผู้ใช้ แต่ยังทำให้พวกเขามีความรู้สึกร่วมไปกับเป้าหมายของเว็บไซต์นั้นด้วย
ประโยชน์ของสีในเว็บไซต์
- สีสามารถชักนำสายตาผู้อ่านให้ไปยังทุกบริเวณในหน้าเว็บเพจตามที่เราต้องการ เช่น ข้อมูลใหม่ โปรโมชั่นพิเศษ
- สีช่วยเชื่อมโยงบริเวณที่ได้รับการออกแบบเข้าด้วยกัน
- สีสามารถนำไปใช้ในการแบ่งบริเวณต่างๆ ออกจากกัน
- สีสามารถใช้ในการดึงดูดความสนใจของผู้อ่าน
- สีสามารถสร้างอารมณ์โดยรวมของเว็บเพจ
- สีช่วยสร้างระเบียบให้กับข้อความต่างๆ เช่น การใช้สีแยกส่วนระหว่างหัวเรื่องกับเนื้อเรื่อง
- สามารถส่งเสริมเอกลักษณ์ขององค์กรหรือหน่วยงานนั้นๆ
ความรู้เบื้องต้นเกี่ยวกับสี
- แม่สีขั้นต้น ( primary color )
- สีแดง
- เหลือง
- น้ำเงิน
- สีขั้นที่ 3
- สีขั้นที่ 4
สีขั้นที่ 1 สีขั้นที่ 2
สีขั้นที่ 3 สีขั้นที่ 4
การผสมสี ( Color Mixing)
- มี 2 แบบ
- การผสมแบบบวก (additive mixing)
- การผสมแบบลบ (subtractive mixing)
- การผสมแบบบวก (additive mixing)
จะเป็นรูปแบบการผสมของแสง ไม่ใช่การผสมของวัตถุมีสีบนกระดาษ
- การผสมแบบลบ (subtractive mixing)
การผสมสีแบบนี้ไม่ได้เกี่ยวข้องกับของแสงแต่อย่างใด ๆ แต่เกี่ยวเนื่องกับการดูดกลืนและสะท้อนแสงของวัตถุต่างๆ
วงล้อสี(Color Wheel )
- วงล้อสีแบบลบ ( Subtractive Color Wheel )
- วงล้อสีแบบบวก( Additive Color Wheel )
สีที่เป็นกลาง ( Neutral Colors )
- สีที่เป็นกลางคือสีกลุ่มหนึ่งที่ไม่ได้ถูกบรรจุไว้ในวงล้อสี เพราะเป็นสีที่ไม่ได้รับอิทธิพลใดๆมาจากสีอื่น ซึ่งก็คือสีเทา ,ขาว ,ดำ
รูปแบบชุดสีพื้นฐาน ( Simple Color Schemes )
ชุดสีร้อน ( Warm Color Scheme )
ชุดสีร้อนประกอบด้วยสีม่วงแกมแดง , แดงแกมม่วง , แดง , ส้ม , เหลือง และเขียวอมเหลือง สีเหล่านี้สร้างความรู้สึกอบอุ่น สบาย และความรู้สึกต้อนรับแก่ผู้ชม
รูปแสดงชุดสีร้อน
ชุดสีเย็น ( Cool Color Scheme )
ชุดสีเย็นประกอบด้วยสีม่วง , น้ำเงิน , น้ำเงินอ่อน , ฟ้า , น้ำเงินแกมเขียว และสีเขียว ตรงกันข้ามกับชุดสีร้อน ชุดสีเย็นให้ความรู้สึกเย็นสบาย องค์ประกอบที่ใช้สีเย็นเหล่านี้จะดูสุภาพเรียบร้อย และมีความชำนาญ
รูปแสดงชุดสีเย็น
ชุดสีแบบสีเดียว (Monochromatic Color Scheme)
รูปแบบของชุดสีที่ง่ายที่สุดคือชุดแบบสีเดียวที่มีค่าของสีบริสุทธิ์เพียงสีเดียว ความหากหวายของสีชุดนี้เกิดจากการเพิ่มสีเดียว ความหลากหลายของสีชุดนี้เกิดจากการเพิ่มความเข้มหรือความเข้มหรือความอ่อนในระดับต่างๆ ให้กับสีตั้งต้น ดังนั้น ชุดสีแบบเดียวของสีแดงอาจประกอบด้วยสีแดงล้วน สีแดงอิฐ(สีเข้ม ของสีแดง) สีสตรอเบอรี่(สีอ่อนปานกลางของสีแดง) ละชมพู(สีอ่อนมากของสีชมพู)
รูปแสดงชุดสีแบบเดียว
ชุดสีแบบสามเส้า (Triadic Color Scheme)
วิธีการที่งายอีกแบบหนึ่งในการเลือกชุดสีมาใช้ก็คือ การนึกถึงสามเหลี่ยมด้านเท่าลอยอยู่เหนือวงล้อสี เพียงเท่านี้ สีที่อยู่ที่มุมของสามเหลี่ยมทั้งสามก็จะเป็นสีที่เข้าชุดกัน ชุดสีที่ได้จากการเลือกแบบนี้จึงเรียกว่า ชุดสีแบบสามเส้า ซึ่งอาจประกอบด้วยสีสามสีที่มีระยะห่างกันเท่ากันในวงล้อสี
รูปแสดงชุดสีแบบสามเส้า
ชุดสีที่คล้ายคลึงกัน (Analogous Color Scheme)
ชุดสีที่มีรูปแบบอย่างง่ายอีกแบบหนึ่ง ก็คือชุดสีที่คล้ายคลึงกัน ซึ่งจะประกอบด้วยสี 2 หรือ 3 สีที่อยู่ติดกันในวงล้อสี เช่นสีแดงแกมม่วง สีแดง และสีส้ม เนื่องจากชุดสีที่อยู่ในรูปแบบนี้มีจำนวนมากมายทำให้เราสามารถเลือกชุดสีแบบนี้มาใช้งานได้อย่างง่ายสะดวก และแม้ว่าเราสามารถเพิ่มจำนวนสีในชุดให้มากขึ้นเป็น 4 หรือ 5
รูปแสดงชุดสีที่คล้ายคลึงกันประกอบด้วยสี 2-3 สีทีอยู่ติดกันในวงล้อสี
ชุดสีตรงข้าม (Complementary Color Scheme)
สีตรงข้ามในที่นี้ หมายถึง สีที่อยู่ตรงกันข้ามกันในวงล้อสี เช่น สีแดงกับฟ้า หรือสีน้ำเงินอ่อนกับส้มน่าสนใจที่ว่าเมื่อนำสีทั้งสองนี้มาผสมกัน จะได้ผลลัพธ์เป็นสีขาวสำหรับวงล้อสีแบบบวก หรือได้เป็นสีดำสำหรับวงล้อสีแบบลบ
รูปแสดงชุดสีตรงข้ามได้แก่สี 2 สีที่อยู่ตรงข้ามในวงล้อ
ชุดสีตรงข้ามข้างเคียง (Split Complementary Color Scheme)
ชุดสีตรงข้ามข้างเคียงมีรูปแบบที่เปลี่ยนแปลงมาจากชุดสีตรงข้าม แต่ละความแตกต่างกันที่สีใดสีหนึ่งที่อยู่ตรงข้ามกันถูกแทนที่ด้วยสีที่อยูด้านข้างทั้งสอง เช่น สีฟ้าซึ่งมีสีด้านข้างเป็นสีน้ำเงินอ่อนกับสีน้ำเงินแกมเขียว ฉะนั้นชุดสีตรงข้ามข้างเคียงที่ได้จึงประกอบด้วย สีแดง สีน้ำเงินอ่อน และสีน้ำเงินแกมเขียว
รูปแสดงชุดสีตรงข้ามข้างเคียง
ชุดสีตรงข้ามข้างเคียงทั้ง 2 ด้าน (Double SplitComplementary Color Scheme
ชุดสีแบบนี้ถูกดัดแปลงมาจากชุดสีตรงข้าม เช่นกัน แต่คราวนี้สีตรงกันข้ามทั้งสองถูกแบ่งแยกเป็นสีด้านข้างทั้ง 2 ด้าน จึงได้เป็นชุดสี 4 สี ดังเช่นสีแดงแกมม่วงกับน้ำเงินแกมเขียว และน้ำเงินอ่อนกับส้ม
ชุดสีแบบนี้ถูกดัดแปลงมาจากชุดสีตรงข้าม เช่นกัน แต่คราวนี้สีตรงกันข้ามทั้งสองถูกแบ่งแยกเป็นสีด้านข้างทั้ง 2 ด้าน จึงได้เป็นชุดสี 4 สี ดังเช่นสีแดงแกมม่วงกับน้ำเงินแกมเขียว และน้ำเงินอ่อนกับส้ม
รูปแสดงชุดสีตรงข้ามแบบแบ่งแยก 2 ด้าน
************************************
บทที่ 9
การออกแบบกราฟิกสำหรับเว็บไซต์
(Designing Web Graphics)
รูปแบบกราฟฟิกสำหรับเว็บ (GIF,JPG และ PNG)
* GIF ย่อมาจาก Graphic Interchange Format
- ได้รับความนิยมในยุคแรก
- มีระบบสีแบบ Index ซึ่งมีข้อมูลสีขนาด 8 บิต ทำให้มี สีมากกว่า 256 สี
- มีการบีบอัดข้อมูลตามแนวนอนของพิกเซล เหมาะสำหรับกราฟฟิกที่ประกอบด้วยสีพื้น
* JPG ย่อมาจาก Joint Photogtaphic Experts Group
- มีข้อมูลสีขนาด 24 บิต (True Color) สามารถแสดงสีได้ถึง 16.7 ล้านสี
- ใช้ระบบการบีบอัดที่มีลักษณะที่สูญเสีย (lossy)
- ไฟล์ประเภทนี้ควรนำไปใช้กับรูปถ่ายหรือกราฟฟิกที่มีการไล่ระดับสีอย่างละเอียด
* PNG ย่อมาจาก Portable Network Graphic สามารถสนับสนุนระบบสีได้ทั้ง 8 บิต 16 บิต และ 24 บิต มีระบบการบีบอัดแบบ Deflate ที่ไม่ทำให้เกิดการสูญเสีย (lossless) มีระบบการควบคุมค่าแกมม่า (Gamma) และความโปร่งใส (Transparency) ในตัวเอง
ระบบการวัดขนาดของรูปภาพ
รูปภาพที่ใช้หน่วยวัดขนาดตามหน้าจอมอนิเตอร์ นั่นก็คือหน่วยพิกเซล ซึ่งจะมีประโยชน์ในการเปรียบเทียบขนาดของกราฟฟิกหับองค์ประกอบอื่น ๆ ในหน้าเว็บ รวมถึงขนาดของหน้าต่างเบราเซอร์ด้วย
ระบบการวัดความละเอียดของรูปภาพ
* ระบบความละเอียดของรูปภาพที่แสดงผลบนจอมอนิเตอร์ควรใช้หน่วย pixel per inch (ppi)
* แต่ในทางการใช้งานจะนำหน่วย dot per inch (dpi) ซึ่งเป็นหน่วยวัดความละเอียดของสิ่งพิมพ์มาใช้งานแทน ppi
* ความละเอียดของรูปภาพที่ใช้ในเว็บไซต์ควรมีความละเอียดแค่ 72 ppi ก็เพียงพอแล้ว
โปรแกรมกราฟฟิกสำหรับเว็บ
* ปัจจุบันมีโปรแกรมหลายประเภททีนำมาใช้ในการสร้างกราฟฟิกสำหรับเว็บ
- Adobe PhotoShop
- Adobe ImangeReady
- Firework
* ค่าพื้นฐานที่สามารถเลือกปรับได้ คือ รูปแบบไฟล์,ชุดสีที่ใช้,จำนวนสี,ระดัความสูญเสีย,ความโปร่งใส และสีพื้นหลัง
คำแนะนำในกระบวนการออกแบบกราฟฟิกสำหรับเว็บ
* ออกแบบกราฟฟิกโดยใช้ชุดสีสำหรับเว็บ (Web Palette)
* เลือกใช้รูปแบบกราฟฟิกที่เหมาะสม GIF หรือ JPEG
* ตัดแบ่งกราฟฟิกออกเป็นส่วนย่อย (Slices)
************************************
บทที่ 10
การจัดรูปแบบตัวอักษรสำหรับเว็บไซต์
(Typography on the web)
ส่วนประกอบของตัวอักษร
ในแต่ละตัวอักษรประกอบด้วยส่วนต่าง ๆ ที่เราน่าจะรู้จักไว้ เพื่อที่จะใช้ประโยชน์เมื่อต้องการเปรียบเทียบลักษณะของตัวอักษณแต่ละชนิดได้ ส่วนประกอบหลัก ๆ ที่ควรรู้จัก มีดังนี้
- Ascender ส่วนบนของตัวอักษรพิมพ์เล็ก ที่สูงกว่าความสูง x-height ของตัวอักษร
- Descender ส่วนล่างของตัวอักษรพิมพ์เล็กที่ต่ำกว่าเส้น baseline ของตัวอักษร
- Baseline เส้นสมมุติที่ตัวอักษรส่วนใหญ่ตั้งอยู่
- Cap height ความสูงจากเส้น baseline ไปถึงส่วนบนสุดของตัวอักษรพิมพ์ใหญ่
- x-height หมายถึง ความสูงของตัวอักษร x ในแบบพิมพ์เล็ก ซึ่งมักจะใช้อ้างถึงความสูงของตัวอักษรที่ไม่รวมส่วนบนและส่วนล่าง
- point size ระยะความสูงทั้งหมดวัดจากส่วนบนสุดถึงส่วนล่างสุดของตัวอักษร
การจัดตำแหน่ง (Alignment)
การจำตำแหน่งของตัวอักษรในแต่ละส่วนมีผลต่อความรู้สึกของเอกสาร โดยที่การจัดตำแหน่งแต่ละแบบจะให้ความรู้สึกที่ต่างกัน ตัวอักษรที่ถูกจัดให้ชิดขอบด้านซ้ายโดยที่ปล่อยให้ด้านขวามีลักษณะไม่สม่ำเสมอ จะให้ความรู้สึกไม่เป็นทางการ และจะอ่านได้ง่ายกว่าการจัดชิดขอบขวา โดยทั่วไปแล้วพยายามหลีกเลี่ยงการจัดชิดขวา ยกเว้นเมื่อมีความเหมาะสมกับรูปแบบจริงๆ ส่วนตัวอักษรที่มีการปรับระยะให้ชิดขอบทั้งซ้ายและขวา (Justify) เป็นที่นิยมใช้ในหนังสือพิมพ์และจุลสาร พร้อมกับให้คามรู้สึกที่เป็นทางการอีกด้วย ในภาษา HTMLคุณสามารถจัดตำแหน่งตัวอักษรได้ด้วยคำสั่ง ALIGN และเลือกคำสั่ง left, right, center และ Justify (คำสั่ง Justify ใช้ได้เฉพาะบราวเซอร์รุ่นใหม่ๆ)
ความสะดวกในการอ่าน
- หลีกเลี่ยงตัวอักษรที่เป็นตัวพิมพ์ใหญ่ทั้งหมด
- การใช้ตัวอักษรพิมพ์เล็กทั้งหมดในประโยค สร้างความรู้สึกไม่เป็นทางการและแสดงถึงความสมบูรณ์ของเนื้อหา
- การจัดข้อความในหน้าเว็บ
- การจัดตำแหน่ง Alignment
- การจัดข้อความในหน้าเว็บ
- จัดแบบ justifyทำให้ช่องว่างในแต่ละคำแตกต่างไปในแต่ละบรรทัด ซึ่งอาจทำให้เกิดช่องว่างที่ไม่สวยได้
- ความยาวของหน้าเว็บควรจัดเป็นแบบพารากราฟหรือตัดแบ่งเป็นหลายๆหน้า
- ขนาดของตัวอักษร ใช้ตัวอักษรให้หลายขนาดเพื่อสร้าง ลำดับความสำคัญของข้อมูล
- เน้นข้อความให้เด่นชัดเพื่อสร้างจุดดึงดูดสายตาของผู้เข้าชม
************************************
