ออกแบบกราฟฟิกสำหรับเว็บไซต์
- กราฟฟิกเป็นองค์ประกอบที่สำคัญอย่างหนึ่งของเว็บเพจ ช่วยสื่อความหมายสร้างความเข้าใจให้กับผุ้ใช้ รวมทั้งช่วยสร้างความสวยงามให้เว็บไซต์น่าดูยิ่งขึ้น
- ปัญหาที่มักเกิดขึ้นกับการสร้างกราฟฟิกคือ การเลือกใช้รูปแบบกราฟฟิกที่ไม่เหมาะสมกับลักษณะของรูป โดยไม่รู้จักความแตกต่างของรูปแบบกราฟฟิก ส่งผลให้รูปที่ได้มีลักษณะไม่สมบูรณ์และมีไฟล์ใหญ่เกินความจำเป็น
รูปแบบกราฟฟิกสำหรับเว็บ ( 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) ในตัวเอง
ระบบการวัดขนาดของรูปภาพ
- รูปภาพใช้หน่วยวัดขนาดตามหน้าจอมอนิเตอร์ นั่นก็คือหน่วยพิกเซล ซึ่งจะมีประโยชน์ในการเปรียบเทียบขนาดของกราฟฟิกกับองค์ประกอบอื่นๆในหน้าเว็บ รวบถึงขนาดของหน้าต่างเบราเซอร์
- ระบบความละเอียดของรูปภาพที่แสดงผลบนจอมอนิเตอร์ควรใช้หน่วย pixel per inch (ppi)
- แต่ในทางการใช้งานจะนำหน่วย dot per inch (dpi) ซึ่งเป็นหน่วยวัดความละเอียดของสิ่งพิมพ์มาใช้งานแทน ppi
- ความละเอียดของรูปภาพที่ใช้ในเว็บไซต์ควรมีความละเอียดแค่ 72 ppi ก็เพียงพอแล้ว
- ปัจจุบันมีโปรแกรมหลายประเภทที่นำมาใช้ในการสร้างกราฟฟิกสำหรับเว็บ
* Adobe Photoshop เป็นโปรแกรมที่ได้รับความนิยมตั้งแต่อดีตจนถึงปัจจุบัน
* Adobe ImangeReady ลักษณะหน้าตาและเครื่องมือคล้ายคลึงกับ Photoshop แต่จะถูกพัฒนาข้นเพื่องานกราฟฟิกโดยเฉพาะ เพิ่มความสามารถในการสร้าง animation ได้
* Firework มีคุณสมบัติในการตกแต่งตัวอักษรกราฟฟิกที่เห็นผลทันที การแสดงค่าของสีในระบบเลขฐานสิบหก การสร้างภาพเคลื่อนไหว การตัดแบ่งภาพให้มีขนาดเล็กๆสำหรับไฟล์ HTML
- ค่าพื้นฐานที่สามารถเลือกปรับได้คือ รูปแบบไฟล์ , ชุดสีที่ใช้ , จำนวนสี , ระดับความสูญเสีย , ความโปร่งใสและสีพื้นหลัง
กราฟฟิกรูปแบบ GIF
- มีไฟล์นามสกุลเป็น .gif
- ลักษณะเด่นของ GIF คือการไม่ขึ้นกับระบบปฏิบัติการใดๆ
- GIF เป็นกราฟฟิกประเภทเดียวที่ไม่สามารถนำไปใช้เบราเซอร์ทุกชนิด โดยไม่ต้องคำนึงถึงเวอร์ชันใดๆ
- GIF มีคุณสมบัติในการเคลื่อนไหว
- GIF มีระบบสีแบบ Index เก็บข้อมูลสีได้สูงสุด 8 bit
- คุณสมบัติ Interlacing คือการบันทึกไฟล์ GIF เป็น 4 ระดับ คือ ที่คุณภาพ 12.5% , 25% , 50% , 100% ตามลำดับ
* ข้อดี คือผู้ใช้เห็นภาพที่กำลังดาว์นโหลดอยู่มีความชัดเจนขึ้นเรื่อยๆ
* ข้อเสีย คือขนาดไฟล์จะเพิ่มขึ้นเล็กน้อย
- ระบบการบีบอัดข้อมูลของ GIF
* GIF มีการบีบอัดข้อมูลแบบไม่สูญเสีย (Lossiess) หมายความว่าจะไม่มีการสูญเสียข้อมูลภาพจากการบีบอัด
* GIF ใช้การบีบอัดที่เรียกว่า LZW (Lempei-Ziv-Weleh) ซึ่งเป็นแบบเดียวกับที่ใช้ในโปรแกรม Zip โดยใช้ประโยชน์จากการจากความซ้ำซ้อนของข้อมูล
- คุณสมบัติในการเคลื่อนไหว (Animated GIF)
* รูปที่ประกอบด้วยหลายๆเฟรมในรูปเดียวกัน เมื่อมีการแสดงผลจะเห็นรูปมีการเปลี่ยนแปลงตามเฟรมต่างๆที่มีอยู่อย่างต่อเนื่อง
* ข้อดี ของ Animated GIF คือไม่ต้องอาศัย plug-in ใดๆเนื่องจากเบราเซอร์สนับสนุนคุณสมบัตินี้
- ข้อคิดในการใช้ Animated GIF
* ใช้ภาพเคลื่อนไหวในจุดที่ต้องการให้ผู้ชมสนใจมากที่สุด
* ไม่ควรใช้ภาพเคลื่อนไหวมากเกินไป จะทำให้ผู้ใช้สับสน
* ทำให้ภาพเคลื่อนไหวนั้นโหลดได้เร็ว
- เราสามารถใช้โปรแกรมสร้าง Animated GIF ได้หลายโปรแกรม เช่น ImageReady , Firework , GifBuilder เป็นต้น
- ค่าต่างๆที่สามารถกำหนดได้ในการออกแบบ Animeted GIF
* จำนวนรอบของการแสดงผล
* เวลาที่ใช้ในแต่ละเฟรม
* ชุดสีที่ใช้
* ความโปร่งใส
* ลักษณะการแสดงรูปเป็นลำดับขั้น (Interlacing)
การลดขนาดไฟล์ GIF
- จำกัดขนาดของกราฟฟิก
* พยายามลดขนาดรูปหรือกราฟฟิกให้เล็กไว้เสมอ
* ตัดเอาบางส่วนของรูปที่ไม่มีความจำเป็นออกไป
* ใช้กราฟฟิกขนาดเล็กหลายๆรูปรวมกัน แทนที่จะใช้กราฟฟิกขนาดใหญ่เพียงรูปเดียว
- ออกแบบโดยใช้สีพื้นๆเข้าไว้
* เลือกใช้สีพื้นๆที่ไม่ซับซ้อน แทนที่จะเป็นการไล่สีจากสีหนึ่งไปอีกสีหนึ่ง
* จำกัดปริมาณของส่วนที่มีลักษณะของรูปภาพหรือภาพ่ายในไฟล์ GIF
- ลดจำนวนสีที่ใช้ลง
* แม้ว่ากราฟฟิกรูปแบบ GIF มีระบบสี 8 บิต แต่เราไม่จำเป็นต้องใช้ทั้งหมดที่มีอยู่ก็ได้
- ออกแบบลวดลายตามแนวนอน
* รูปลักษณะเดียวกัน 2 รูป รูปที่มีลวดลายตามแนวนอนจะมีขนาดไฟล์เล็กกว่า
กราฟฟิกรูปแบบ JPEG
- มีนามสกุลเป็น .jpg หรือ .jpeg
- ใช้วิธีการบีบอัดข้อมูลแบบ JFIF (JPEG File interchange format)
- ไฟล์ประเภท JPEG ไม่ยึดติดกับระบบปฏิบัติการใดๆและสามารถใช้ได้กับเบราเซอร์ทั้ง Netscape และ IE version 2 เป็นต้นไป
- ใช้ระบบสีขนาด 24 บิต ซึ่งจะให้สีสมจริงมากถึง 16.7 ล้านสีส่งผลให้ได้รูปที่มีคุณภาพสูง
- ระบบการบีบอัดข้อมูลในไฟล์ JPEG
* เป็นการบีบอัดแบบ lossy คือสูญเสียรายละเอียดบางส่วนของภาพไป
* อาศัยประโยชน์จากการที่สายตาคนเราสามารถสังเกตเห็นการเปลี่ยนแปลงอย่างช้าๆในบริเวณกว้างๆได้ดีกว่าการเปลี่ยนแปลงในบริเวณแคบๆ
* ใช้วิธีเก็บข้อมูลความสัมพันธ์ของสีและความสว่างในรูปเหลี่ยมขนาด 8*8 พิกเซลให้อยู่ในรูปแผนภาพความถี่ โดยมีระบบ Discrete Cosine Transform(DCT) แบ่งแยกข้อมูลที่มีความถี่สูงและต่ำออกจากกัน จากนั้นข้อมูลบางส่วนในความถี่สูงจะถูกตัดไป จะมากหรือน้อยขึ้นอยู่กับระดับคุณภาพ
* ประสิทธิภาพจะขึ้นอยู่กับการรวมกลุ่มของรายละเอียดในรูป เช่น ท้องฟ้า ( ความถี่ข้อมูลต่ำ ) จะบีบอัดได้ดีกว่าใบไม้ใบหญ้า ( ความถี่ข้อมูลสูง )
* JPEG สามารถบีบอัดข้อมูลในอัตราสูงตั้งแต่ 10:1 จนถึง 20:1 โดยที่สายตามนุษย์ไม่อาจมองเห็นคุณภาพที่ลดลงแต่อย่างใด
- การขยายข้อมูลของ JPEG
* เนื่องจากข้อมูลถูกบีบอัดให้อยู่ในรูปของ DCT ดังนั้นเบราเซอร์ต้องทำการขยายข้อมูลก่อนแสดงผล ดังนั้นเบราเซอร์จะใช้เวลาในการแสดงผลรูป JPEG มากกว่า GIF
* เนื่องจากจำนวนบิตของสีไฟล์ JPEG เป็น 24 บิตเสมอจึงไม่สามารถลดขนาดไฟล์โดยการลดจำนวนบิตของสีลงได้
* การลดขนาดไฟล์ทำได้โดยการบีบอัดในอัตราที่สูง ทั้งนี้ก็ขึ้นอยู่กับคุณภาพที่ต้องการด้วย
คำแนะนำในกระบวนการออกแบบกราฟฟิกสำหรับเว็บ
- ออกแบบกราฟฟิกโดยใช้ชุดสีสำหรับเว็บ (Web Palette)
- เลือกใช้รูปแบบกราฟฟิกที่เหมาะสม GIF หรือ JPEG
- ตัดแบ่งกราฟฟิกออกเป็นส่วนย่อย (Slices)
- สามารถปรับแต่งชิ้นส่วนของกราฟฟิกได้ตามความเหมาะสมของแต่ละบริเวณ
จัดรูปแบบตัวอักษรสำหรับเว็บไซต์
- ตัวอักษรมีความสำคัญในการสื่อข้อความถึงผู้ใช้
- ตัวอักษรมีหลายชนิด แต่ละชนิดจะให้อารมณ์และความรู้สึกที่แตกต่างกัน ควรเลีอกใช้ตัวอักษรให้เหมาะสมกับเนื้อหาและข้อมูลที่ต้องการสื่อสาร
การจัดข้อความในหน้าเว็บ
- การจัดตำแหน่ง
- ช่องว่างระหว่างตัวอักษร และช่องว่างระหว่างคำ
การจัดตำแหน่งแบบ justify ทำให้ช่องว่างของแต่ละคำแตกต่างไปในแต่ละบรรทัด ซึ่งอาจทำให้เกิดช่องว่างที่ไม่สวยงามได้
- ระยะห่างระหว่างบรรทัด
- ความยาวของหน้าเว็บ
- ขนาดของตัวอักษร
- ดึงดูดความสนใจด้วยอักษรขนาดใหญ่
- การเน้นข้อความให้เด่นชัด
เลือกใช้สีสำหรับเว็บไซต์
เลือกใช้สีสำหรับเว็บไซต์
- สีสันในเว็บเพจเป็นสิ่งที่สำคัญมากในการดึงดูดความสนใจของผู้ใช้ เนื่องจากสิ่งแรกที่ผู้ใช้มองเห็นจากเว็บก็คือสี ซึ่งเป็นสิ่งกำหนดบรรยากาศและความรู้สึกโดยรวมของเว็บไซต์
- เราสามารถใช้สีได้กับทุกองค์ประกอบของเว็บเพจ ตั้งแต่รูปภาพ ตัวอักษร สีพื้นหลัง การใช้สีที่เหมาะสมจะช่วยในการสื่อความหมายของเนื้อหา- การใช้สีพื้นใกล้เคียงกับสีตัวอักษร บางครั้งอาจสร้างความลำบากในการอ่าน
- การใช้สีที่มากเกินความจำเป็นอาจสร้างความสับสนให้กับผู้อ่านได้
- การใช้สีที่กลมกลืนกันช่วยให้เว็บไซต์น่าดูชมมากยิ่งขึ้นประโยชน์ของสีในเว็บไซต์
- สามารถชักนำสายตาผู้อ่านให้ไปยังทุกบริเวณในหน้าเว็บเพจที่ต้องการได้ เช่น ข้อมูลใหม่ หรือโปรโมชั่นพิเศษ
- สีช่วยเชื่องโยงบริเวณที่ได้รับการออกแบบเข้าด้วยกัน
- สีสามารถนำไปใช้ในการแบ่งบริเวณต่างๆออกจากกัน
- สีสามารถใช้ในการดึงดูดความสนใจของผู้อ่าน
- สีสามารถสร้างอารมณ์โดยรวมของเว็บเพจ
- ช่วยสร้างระเบียบให้กับข้อความต่างๆ เช่น ใช้สีแยกระหว่างหัวเรื่องกับเนื้อเรื่อง
- สามารถส่งเสริมเอกลักษณ์ขององค์กรหรือหน่วยงานนั้นๆความรู้เบื้อต้นเกี่ยวกับสี
- มีสีขั้นต้น ( Primary color )
* สีแดง
* สีเหลือง
* สีน้ำเงิน
- สีขั้นที่ 2
- สีขั้นที่ 3
- สีขั้นที่ 4การผสมสี ( Color Mixing )
- การผสมสีแบบบวก ( Additive mixing ) จะเป็นรูปแบบการผสมของแสง ไม่ใช่การผสมของวัตถุที่มีสีบนกระดาษ
- การผสมสีแบบลบ ( Subtractive mixing ) การผสมสีแบบนี้ไม่เกี่ยวข้องกับแสง แต่เกี่ยวกับการดูดกลืนและสะท้อนแสงของวัตถุต่างๆ
- การนำไปใช้งาน
* การผสมสีแบบบวก จะนำไปใช้ในสื่อใดๆที่ใช้แสดงออกมา เช่น จอโปรเจคเตอร์ ทีวี หรือจอมอนิเตอร์
* การผสมสีแบบลบ จะนำไปใช้ในสื่อที่เกี่ยวข้องกับการใช้วัตถุมีสี เช่น ภาพวาดของศิลปิน รูปปั้น หรือ สิ่งพิมพ์ต่างๆวงล้อสี ( Color Wheel )
- เป็นรูปแบบหนึ่งในการจัดเรียงสีทั้งหมดไว้ในวงกลม และเป็นการจัดลำดับเฉดสีอย่างมีเหตุผลและง่ายต่อการนำไปใช้
* วงล้อสีแบบลบ ( Subtractive Color Wheel )
* วงล้อแบบบวก ( Additive Color Wheel )สีที่เป็นกลาง ( Neutral Colors )
- คือสีกลุ่มหนึ่งที่ไม่ได้ถูกบรรจุไว้ในวงล้อสี เพราะเป็นสีที่ไม่ได้รับอิทธิพลมาจากสีอื่น ซึ่งก็คือ สีเทา , ขาว , ดำสีอ่อน สีเข้ม และโทนสี ( Tint , Shade and Tone )
- ในการผสมสีกลางเข้าสีบริสุทธิ์ จะเกิดเป็นสีต่างๆจำนวนมากมาย
* สีบริสุทธิ์ผสมกับสีขาว จะได้เป็นสีอ่อน ( tint of the hue )
* สีบริสุทธิ์ผสมกับสีเทา จะได้เป็นโทนสีระดับต่างๆ ( tone of the hue )
* สีบริสุทธิ์ผสมกับสีดำ จะได้เป็นสีเข้ม ( Shade of the hue )
- สีอ่อน สีเข้ม และโทนสีมีประโยชน์อย่างมากในการจัดชุดของสี เพราะทำให้สีสีหนึ่งสามารถแสดงออกและให้ความรู้สึกได้หลายแบบยิ่งขึ้นความกลมกลืนของสี ( Color Harmony )
- ความเป็นระเบียบของสี ที่ทำให้ผู้ชมรู้สึกถึงสมดุลและความสวยงามในเวลาเดียวกัน
* การใช้สีที่จืดชืดเกินไป จะทำให้เกิดความรู้สึกที่น่าเบื่อ และไม่สามารถดึงดูดความสนใจจากผุ้ชมได้
* การใช้สีที่มากเกินไป ก็จะดูวุ่นวาย ขาดระเบียบ และอาจสร้างความสับสนให้กับผู้ชม
- เป้าหมายในเรื่องสี คือ การนำเสนอเว็บไซต์โดยใช้ชุดสีในรูปแบบที่เข้าใจได้ง่าย น่าสนใจ และสื่อความหมายได้อย่างเหมาะสมรูปแบบชุดสีพื้นฐาน ( Simple Color Schemes )
- ชุดสีที่ถูกจัดกลุ่มอย่างเข้ากันด้วยรูปแบบต่างๆ
* ชุดสีร้อน ( Warm Color Scheme ) ประกอบด้วยสีม่วงแกมแดง , แดงแกมม่วง , แดง , ส้ม , เหลือง และเขียวอมเหลือง สีเหล่านี้สร้างความรู้สึกอบอุ่น สบาย และรู้สึกต้อนรับแก่ผู้ชม
* ชุดสีเย็น ( Cool Color Scheme ) ประกอบด้วยสีม่วง , สีน้ำเงิน , สีน้ำเงินอ่อน , ฟ้า , น้ำเงินแกมเขียว และ สีเขียว ชุดสีเย็นหึความรู้สึกเย็นสบาย องค์ประกอบที่ใช้สีเย็นจะดูสุภาพ เรียบร้อย
* ชุดสีแบบเดียว ( Monochromatic Color scheme ) เป็นรูปแบบชุดสีที่ง่าย คือมีค่าของสีบริสุทธิ์เพียงสีเดียว แต่เพิ่มความหลากหลายโดยการเพิ่มความเข้ม อ่อน ในระดับต่างๆ ชุดสีแบบนี้ค่อนข้างจะมีความกลมกลืนเป็นหนึ่งเดียว แต่ในบางครั้งอาจทำให้ดูไม่มีชีวิตชีวา เพราะขาดความหลากหลายของสี* ชุดสีที่คล้ายคลึงกัน ( Analogous Color Scheme ) ประกอบด้วยสี 2 หรือ 3 สีที่อยู่ติดกันในวงล้อ สามารถเพิ่มเป็น 4 หรือ 5 สีได้ แต่อาจส่งผลให้ขอบเขตของสีกว้างไป
* ชุดสีตรงข้าม ( Complementary Color Scheme ) คือ สีคู่ที่อยู่ตรงข้ามกันในวงล้อ เมื่อนำสีทั้งสองมาใช้คู่กันจะทำให้สีทั้งสองมีความสว่างและสดใสมากขึ้น* ชุดสีตรงข้ามข้างเคียง ( Split Complementary Color Scheme ) เป็นชุดสีที่เปลี่ยนแปลงมาจากชุดสีตรงข้าม ชุดสีแบบนี้มีความหลากหลายเพิ่มขึ้น แต่จะมีผลให้ความสดใส ความสะดุดตา และความเข้ากันของสีลดลงด้วย
* ชุดสีตรงกันข้ามข้างเคียงทั้ง 2 ด้าน ( Double Split Complementary color Scheme ) ดัดแปลงมาจากชุดสีตรงกันข้ามเช่นกัน แต่สีตรงข้ามทั้ง 2 สีถูกแบ่งแยกเป็นสีด้านข้างทั้ง 2 ด้าน ชุดสีแบบนี้มีความหลากหลายของสีที่มากขึ้น แต่จะมีความสดใสและความกลมกลืนของสีที่ลดลงผลทางจิตวิทยาที่มีต่อสี ( Color Psychology )
- มนุษย์เราตอบสนองต่อสีด้วยจิตใจ ไม่ใช่สมอง เช่นสีบางสีอาจทำให้รู้สึกสดชื่น แต่บางสีทำให้รู้สึกซึมเศร้าได้
- ดังนั้นหากเราเลือกสีอย่างรอบคอบ และความเข้าใจเกี่ยวกับจิตวิทยาของสีเบื้องต้นก็จะทำให้เราเลือกใช้ชุดสีได้อย่างเหมาะสมกับอารมณ์ เนื้อหาของเว็บไซต์สีกับอารมณ์ ความรู้สึก และความสัมพันธ์กับสิ่งต่างๆ
- สีแดง อันตราย
- สีน้ำเงิน เทคโนโลยี
- สีเขียว ธรรมชาติ
- สีเหลือง แสงอาทิตย์ , ฤดูร้อน- สีส้ม กระตุ้นต่อมหิว เกี่ยวกับอาหาร
- สีน้ำตาล โลก พื้นดิน
- สีเทา บ่งบอกถึงความเรียบง่าย- สีขาว ความเรียบง่าย สุภาพ
- สีดำ หดหู่ , เศร้า , ไว้อาลัยข้อคิดเกี่ยวกับการใช้สีในเว็บไซต์
- ใช้สีอย่างสม่ำเสมอ
- ใช้สีอย่างเหมาะสม
- ใช้สีเพื่อสื่อความหมาย
- สีสันในเว็บเพจเป็นสิ่งที่สำคัญมากในการดึงดูดความสนใจของผู้ใช้ เนื่องจากสิ่งแรกที่ผู้ใช้มองเห็นจากเว็บก็คือสี ซึ่งเป็นสิ่งกำหนดบรรยากาศและความรู้สึกโดยรวมของเว็บไซต์
- เราสามารถใช้สีได้กับทุกองค์ประกอบของเว็บเพจ ตั้งแต่รูปภาพ ตัวอักษร สีพื้นหลัง การใช้สีที่เหมาะสมจะช่วยในการสื่อความหมายของเนื้อหา- การใช้สีพื้นใกล้เคียงกับสีตัวอักษร บางครั้งอาจสร้างความลำบากในการอ่าน
- การใช้สีที่มากเกินความจำเป็นอาจสร้างความสับสนให้กับผู้อ่านได้
- การใช้สีที่กลมกลืนกันช่วยให้เว็บไซต์น่าดูชมมากยิ่งขึ้นประโยชน์ของสีในเว็บไซต์
- สามารถชักนำสายตาผู้อ่านให้ไปยังทุกบริเวณในหน้าเว็บเพจที่ต้องการได้ เช่น ข้อมูลใหม่ หรือโปรโมชั่นพิเศษ
- สีช่วยเชื่องโยงบริเวณที่ได้รับการออกแบบเข้าด้วยกัน
- สีสามารถนำไปใช้ในการแบ่งบริเวณต่างๆออกจากกัน
- สีสามารถใช้ในการดึงดูดความสนใจของผู้อ่าน
- สีสามารถสร้างอารมณ์โดยรวมของเว็บเพจ
- ช่วยสร้างระเบียบให้กับข้อความต่างๆ เช่น ใช้สีแยกระหว่างหัวเรื่องกับเนื้อเรื่อง
- สามารถส่งเสริมเอกลักษณ์ขององค์กรหรือหน่วยงานนั้นๆความรู้เบื้อต้นเกี่ยวกับสี
- มีสีขั้นต้น ( Primary color )
* สีแดง
* สีเหลือง
* สีน้ำเงิน
- สีขั้นที่ 2
- สีขั้นที่ 3
- สีขั้นที่ 4การผสมสี ( Color Mixing )
- การผสมสีแบบบวก ( Additive mixing ) จะเป็นรูปแบบการผสมของแสง ไม่ใช่การผสมของวัตถุที่มีสีบนกระดาษ
- การผสมสีแบบลบ ( Subtractive mixing ) การผสมสีแบบนี้ไม่เกี่ยวข้องกับแสง แต่เกี่ยวกับการดูดกลืนและสะท้อนแสงของวัตถุต่างๆ
- การนำไปใช้งาน
* การผสมสีแบบบวก จะนำไปใช้ในสื่อใดๆที่ใช้แสดงออกมา เช่น จอโปรเจคเตอร์ ทีวี หรือจอมอนิเตอร์
* การผสมสีแบบลบ จะนำไปใช้ในสื่อที่เกี่ยวข้องกับการใช้วัตถุมีสี เช่น ภาพวาดของศิลปิน รูปปั้น หรือ สิ่งพิมพ์ต่างๆวงล้อสี ( Color Wheel )
- เป็นรูปแบบหนึ่งในการจัดเรียงสีทั้งหมดไว้ในวงกลม และเป็นการจัดลำดับเฉดสีอย่างมีเหตุผลและง่ายต่อการนำไปใช้
* วงล้อสีแบบลบ ( Subtractive Color Wheel )
* วงล้อแบบบวก ( Additive Color Wheel )สีที่เป็นกลาง ( Neutral Colors )
- คือสีกลุ่มหนึ่งที่ไม่ได้ถูกบรรจุไว้ในวงล้อสี เพราะเป็นสีที่ไม่ได้รับอิทธิพลมาจากสีอื่น ซึ่งก็คือ สีเทา , ขาว , ดำสีอ่อน สีเข้ม และโทนสี ( Tint , Shade and Tone )
- ในการผสมสีกลางเข้าสีบริสุทธิ์ จะเกิดเป็นสีต่างๆจำนวนมากมาย
* สีบริสุทธิ์ผสมกับสีขาว จะได้เป็นสีอ่อน ( tint of the hue )
* สีบริสุทธิ์ผสมกับสีเทา จะได้เป็นโทนสีระดับต่างๆ ( tone of the hue )
* สีบริสุทธิ์ผสมกับสีดำ จะได้เป็นสีเข้ม ( Shade of the hue )
- สีอ่อน สีเข้ม และโทนสีมีประโยชน์อย่างมากในการจัดชุดของสี เพราะทำให้สีสีหนึ่งสามารถแสดงออกและให้ความรู้สึกได้หลายแบบยิ่งขึ้นความกลมกลืนของสี ( Color Harmony )
- ความเป็นระเบียบของสี ที่ทำให้ผู้ชมรู้สึกถึงสมดุลและความสวยงามในเวลาเดียวกัน
* การใช้สีที่จืดชืดเกินไป จะทำให้เกิดความรู้สึกที่น่าเบื่อ และไม่สามารถดึงดูดความสนใจจากผุ้ชมได้
* การใช้สีที่มากเกินไป ก็จะดูวุ่นวาย ขาดระเบียบ และอาจสร้างความสับสนให้กับผู้ชม
- เป้าหมายในเรื่องสี คือ การนำเสนอเว็บไซต์โดยใช้ชุดสีในรูปแบบที่เข้าใจได้ง่าย น่าสนใจ และสื่อความหมายได้อย่างเหมาะสมรูปแบบชุดสีพื้นฐาน ( Simple Color Schemes )
- ชุดสีที่ถูกจัดกลุ่มอย่างเข้ากันด้วยรูปแบบต่างๆ
* ชุดสีร้อน ( Warm Color Scheme ) ประกอบด้วยสีม่วงแกมแดง , แดงแกมม่วง , แดง , ส้ม , เหลือง และเขียวอมเหลือง สีเหล่านี้สร้างความรู้สึกอบอุ่น สบาย และรู้สึกต้อนรับแก่ผู้ชม
* ชุดสีเย็น ( Cool Color Scheme ) ประกอบด้วยสีม่วง , สีน้ำเงิน , สีน้ำเงินอ่อน , ฟ้า , น้ำเงินแกมเขียว และ สีเขียว ชุดสีเย็นหึความรู้สึกเย็นสบาย องค์ประกอบที่ใช้สีเย็นจะดูสุภาพ เรียบร้อย
* ชุดสีแบบเดียว ( Monochromatic Color scheme ) เป็นรูปแบบชุดสีที่ง่าย คือมีค่าของสีบริสุทธิ์เพียงสีเดียว แต่เพิ่มความหลากหลายโดยการเพิ่มความเข้ม อ่อน ในระดับต่างๆ ชุดสีแบบนี้ค่อนข้างจะมีความกลมกลืนเป็นหนึ่งเดียว แต่ในบางครั้งอาจทำให้ดูไม่มีชีวิตชีวา เพราะขาดความหลากหลายของสี* ชุดสีที่คล้ายคลึงกัน ( Analogous Color Scheme ) ประกอบด้วยสี 2 หรือ 3 สีที่อยู่ติดกันในวงล้อ สามารถเพิ่มเป็น 4 หรือ 5 สีได้ แต่อาจส่งผลให้ขอบเขตของสีกว้างไป
* ชุดสีตรงข้าม ( Complementary Color Scheme ) คือ สีคู่ที่อยู่ตรงข้ามกันในวงล้อ เมื่อนำสีทั้งสองมาใช้คู่กันจะทำให้สีทั้งสองมีความสว่างและสดใสมากขึ้น* ชุดสีตรงข้ามข้างเคียง ( Split Complementary Color Scheme ) เป็นชุดสีที่เปลี่ยนแปลงมาจากชุดสีตรงข้าม ชุดสีแบบนี้มีความหลากหลายเพิ่มขึ้น แต่จะมีผลให้ความสดใส ความสะดุดตา และความเข้ากันของสีลดลงด้วย
* ชุดสีตรงกันข้ามข้างเคียงทั้ง 2 ด้าน ( Double Split Complementary color Scheme ) ดัดแปลงมาจากชุดสีตรงกันข้ามเช่นกัน แต่สีตรงข้ามทั้ง 2 สีถูกแบ่งแยกเป็นสีด้านข้างทั้ง 2 ด้าน ชุดสีแบบนี้มีความหลากหลายของสีที่มากขึ้น แต่จะมีความสดใสและความกลมกลืนของสีที่ลดลงผลทางจิตวิทยาที่มีต่อสี ( Color Psychology )
- มนุษย์เราตอบสนองต่อสีด้วยจิตใจ ไม่ใช่สมอง เช่นสีบางสีอาจทำให้รู้สึกสดชื่น แต่บางสีทำให้รู้สึกซึมเศร้าได้
- ดังนั้นหากเราเลือกสีอย่างรอบคอบ และความเข้าใจเกี่ยวกับจิตวิทยาของสีเบื้องต้นก็จะทำให้เราเลือกใช้ชุดสีได้อย่างเหมาะสมกับอารมณ์ เนื้อหาของเว็บไซต์สีกับอารมณ์ ความรู้สึก และความสัมพันธ์กับสิ่งต่างๆ
- สีแดง อันตราย
- สีน้ำเงิน เทคโนโลยี
- สีเขียว ธรรมชาติ
- สีเหลือง แสงอาทิตย์ , ฤดูร้อน- สีส้ม กระตุ้นต่อมหิว เกี่ยวกับอาหาร
- สีน้ำตาล โลก พื้นดิน
- สีเทา บ่งบอกถึงความเรียบง่าย- สีขาว ความเรียบง่าย สุภาพ
- สีดำ หดหู่ , เศร้า , ไว้อาลัยข้อคิดเกี่ยวกับการใช้สีในเว็บไซต์
- ใช้สีอย่างสม่ำเสมอ
- ใช้สีอย่างเหมาะสม
- ใช้สีเพื่อสื่อความหมาย
ไม่มีความคิดเห็น:
แสดงความคิดเห็น