เลือกใช้สีสำหรับเว็บไซต์
สีสันเป็นสิ่งสำคัญมากในการดึงดูดความสนใจของผู้ใช้ เนื่องจากเป็นสิ่งแรกที่ผู้ใช้มองเห็น
- การใช้สีพื้นใกล้เคียงกับตัวอักษร บางครั้งลำบากในการอ่าน
- การใช้สีมากเกินอาจสร้างความสับสนให้ผู้อ่านได้
- การใช้สีที่กลมกลืน ช่วยให้น่าดูมากยิ่งขึ้น
ประโยชน์ของสีในเว็บไซต์
- ชักนำสายตาทุกบริเวณในหน้าเว็บ
- เชื่อมโยงบริเวณที่ไดรับการออกแบบเข้าด้วยกัน
- แบ่งบริเวณต่างๆออกจากกัน
- ดึงดูดความสนใจของผู้อ่าน
- สร้างอารมณ์โดยรวมของเว็บ
- สร้างระเบียบ
- ส่งเสริมเอกลักษณ์ขององค์กรหรือหน่วยงานนั้นๆ
การผสมสี มี 2 แบบ
- การผสมแบบบวก เป็นรูปแบบการผสมของแสงไม่ใช่การผสมของวัตถุที่มีสีบนกระดาษ
- การผสมแบบลบ ไม่เกี่ยวข้องกับแสงแต่เกี่ยวกับการดูดกลืนและสะท้อนแสงของวัตถุต่างๆ
รูปแบบชุดสีพื้นฐาน (Simple Color Schemes)- ชุดสีร้อน
- ชุดสีเเบบเดียว
- ชุดสีที่คล้ายคลึงกัน
- ชุดสีตรงข้ามเคียง
- ชุดสีตรงข้ามข้างเคียงทั้ง 2 ด้าน
- ชุดสีเย็น
- ชุดสีเเบบสามเส้า
- ชุดสีตรงข้ามสีกับอารมณ์บอกความรู้สึกต่างๆ
สีเเดง เเสดง ถึงพลัง อำนาจความโมโห ความก้าวร้าว
สีน้ำเงิน เเสดง ถึงความซื่อสัตย์ ความมั่นคง ปลอดภัย
สีเขียว เเสดงถึง ธรรมชาต สุขภาพ ความยินดี
สีเหลือง เเสดงถึง ความสดใส ร่าเริง การมองโลกในเเง่ดี ความหวัง ความอบอุ่น
สีม่วง เเสดงถึง ความสูงส่ง ความสร้างสรรค์ ความรอบรู้ ความแปลกใหม่
สีส้ม เเสดงถึง กำลังความสามารถ ความเข้มเเข็ง กระตือรือร้น
สีน้าตาล เเสดงถึง ความเรียบง่าย ความสะดวกสบาย ความมั่นคง เชื่อถือได้
สีเทา แสดงถึง ความสุภาพ ความเป็นไปได้ ความมั่นคง
สีขาว เเสดงถึง ความบริสุทธฺ์ ความไร้เดียงสา ความรัก ความฉลาด
สีดำ เเสดงถึง อำนาจ ความฉลาด ความเป็นเลิศ ความสุขม รอบคอบ
รูปแบบชุดสีพื้นฐาน (Simple Color Schemes)- ชุดสีร้อน
- ชุดสีเเบบเดียว
- ชุดสีที่คล้ายคลึงกัน
- ชุดสีตรงข้ามเคียง
- ชุดสีตรงข้ามข้างเคียงทั้ง 2 ด้าน
- ชุดสีเย็น
- ชุดสีเเบบสามเส้า
- ชุดสีตรงข้ามสีกับอารมณ์บอกความรู้สึกต่างๆ
สีเเดง เเสดง ถึงพลัง อำนาจความโมโห ความก้าวร้าว
สีน้ำเงิน เเสดง ถึงความซื่อสัตย์ ความมั่นคง ปลอดภัย
สีเขียว เเสดงถึง ธรรมชาต สุขภาพ ความยินดี
สีเหลือง เเสดงถึง ความสดใส ร่าเริง การมองโลกในเเง่ดี ความหวัง ความอบอุ่น
สีม่วง เเสดงถึง ความสูงส่ง ความสร้างสรรค์ ความรอบรู้ ความแปลกใหม่
สีส้ม เเสดงถึง กำลังความสามารถ ความเข้มเเข็ง กระตือรือร้น
สีน้าตาล เเสดงถึง ความเรียบง่าย ความสะดวกสบาย ความมั่นคง เชื่อถือได้
สีเทา แสดงถึง ความสุภาพ ความเป็นไปได้ ความมั่นคง
สีขาว เเสดงถึง ความบริสุทธฺ์ ความไร้เดียงสา ความรัก ความฉลาด
สีดำ เเสดงถึง อำนาจ ความฉลาด ความเป็นเลิศ ความสุขม รอบคอบ
การออกแบบกราฟิกสำหรับเว็บไซต์
ระบบการวัดขนาดของรูปภาพ
เมื่อจอมอนิเตอร์ทำการแสดงผลรูปภาพในเว็บเพจ
พิกเซลในรูปภาพจะจับคู่กันแบบหนึ่งต่อหนึ่งกับพิกเซลตามความละเอียดของหน้าจอ
ทำให้หน่วยการวัดรูปภาพในเว็บจึงเป็นพิกเซล ไม่ใช่นิ้วหรือเซ็นติเมตรแต่อย่างใด
ดังนั้นในกระบวนการ ออกแบบกราฟิกและรูปภาพต่างๆ คุณจึงความลดขนาดเป็นพิกเซลไว้เสมอ
ซึ่งจะมีประโยชน์ในการเปรียบเทียบขนาดกราฟิกกับองค์ประกอบอื่นๆ ในหน้าเว็บ
รวามถึงขนาดวินโดว์ของบราวเซอร์อีกด้วย
ความละเอียดของรูปภาพ
โดยปรกติแล้ว รูปภาพทุกรูปในเว็บไซท์ควรจะมีความละเอียดแค่ 72 ppi
ก็ เพียงพอแล้ว
เรื่องจากจอมอนิเตอร์องผู้ใช้ส่วนใหญ่มีความละเอียดต่ำ (72 ppi) ดังนั้นแม้ว่ารูปภาพจะมีความละเอียดสูงกว่านี้เราก็ไม่อาจมองเห็นความแตกต่างได้
ปัญหาเกี่ยวกับขนาดไฟล์ของกราฟิก
แม้ว่ากราฟิกและรูปภาพต่างๆ จะช่วยสึความหมายและสร่างประโยชน์อีกหลายอย่าง
เราควรรู้ถึงข้อเสียของกราฟิกเหล่านี้ไว้บ้าง โดยปรกติ
แล้วข้อมูลในเว็บไซท์ประกอบด้วยไฟล์ HTML ที่เป็นตัวอักษร
และกราฟิกหรือรูปภาพเป็นสิ่งสำคัญ กราฟิกใช้เวลาในการดาวน์โหลดมาก
กว่าตัวอักษรหลายเท่า ดังนั้นกราฟิกขนาดใหญ่อาจใช้เวลาในการสแดงผลนานมาก เมื่อผู้ใช้ระบบการเชื่อต่อกับอินเตอร์เน็ทที่ค่อนข้างช้า
ลดขนาดไฟล์กราฟิกสำหรับเว็บ (Optimizing Web Graphic)
ปัญหาความเชื่องช้าของอินเตอร์เน็ททำให้ผู้ออกแบบเว็บไซท์ต้องระมัดระวังในเรื่องของเวลาที่ใช้ในการดาวน์โหลดเป็นอย่างมาก
แนวทางง่ายๆ สำหรับผู้มีหน้าที่ออกแบบกราฟิกำหรับเว็บก็คือพยายามทำให้กราฟิกมีขนาดเล็กมากที่สุดเท่าที่จะเป็นไปได้
ใดๆ เลยย่อมไม่น่าสนใจ เพราะกราฟิกมีบทบาทสำคัญในการแนะนำ
และสร้างความบันเทิงต่อผู้ชม
ดังนนั้นแนวทางที่ดีที่สุดคือการสร้างเว็บที่มีประสิทธิภาพ โดยใช้กราฟิกที่แสดงผลได้อย่างรวดเร็ว ทั้งนี้ผู้ออกแบบต้องรู้จักที่จะสร้างความสมดุลระหว่างความสวยงามกับความเร็วในการแสดงผลเรื่องจากการสร้างเว็บโดยไม่มีรูปภาพกราฟิก
รูปแบบกราฟฟิกสำหรับเว็บ
(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)
ไม่มีความคิดเห็น:
แสดงความคิดเห็น