บทที 8 เลือกใช้สีสําหรับเว็บไซต์

Designing Web Colors

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

ประโยชของสีในเว็บไซต์

-ช้วยสร้างระเบียบให้กับข้อความต่างๆเช่นใช้สีเเยกระหว่างหัวเรื่องกับเนื้อเรื่อง

-สามารถสงเสริมเอกลักษณ์ขององค์กรหรือหน่วยงานนั้นๆ

-สามารถชักนำสายตาผู้อ่านให้ไปยังทุกบริเวณในหน้าเว็บเพจที่เราต้องการได้

-สีช่วยเชื่อมโยงบริเวณที่ได้รับการออกแบบเข้าด้วยกัน

-สีสามารถนำไปใช้ในการเเบ่งบริเวณต่างๆออกจากกัน

-สีสามารถช่วยดึงดูดความน่าสนใจของผู้อ่าน

-สีสามารถสร้างอารมณ์โยรวมของเว็บเพจ

สีอ่อน สีเข้ม และโทนสี

ในการผสมสีกลางเข้ากับสีบริสุทธ์ จะเกิดเป็นสีต่างๆมากมาย

- สีบริสุทธ์ผสมกับสีขาวจะได้สีอ่อน

- สีบริสุทธ์ผสมกับสีเทา จะได้โทนสีระดับต่างๆ

- สีบริสุทะ์ผสมกับสียดำจะได้สีเข้ม

สีอ่อน สีเข้ม เเละโทนสี มีประโยชน์อย่างมากในการจัดชุดของสี เพราะทำให้สีสีหนึ่งสามารถแสดงออกและให้เห็นถึงความรู้สึกได้หลายเเบบยิ่งขึ้น

ความกลมกลืนของสี

ความเป็นระเบียบของสีที่ทำให้ผู้ชมรู้สึกถึงสมดุลเเละความสวยงามในเวลาเดรยวกัน

เป้าหมายในเรื่องของสี คือการนำเสนอเว็บไซต์โดยใช้รูปแบบที่เข้าใจได้ง่าย น่าสนใจ และสื่อความหมายได้อย่างเหมาะสม

รูปแบบชุดสีพื้นฐาน

- ชุดสีร้อน

- ชุดสีเย็น

- ชุดสีแบบเดียว

- ชุดสีคล้ายคลึงกีน

- ชุดสีตรงข้ามข้างเคียง

- ชุดสีตรงข้าม

- ชุดสีสามเศร้า

ชุดสีร้อน

- ประกอบด้วยสีม่วงเเก้มเเดง แดงแก้มม่วง เเดง ส้ม เหลืองแกละเขียวอมเหลือง

- สีเหล่านี้สร้างความรู้สึกอบอุ่นสบาย และรู้สึกต้อนรับแก่ผู้ชม

ชุดสีเย็น

- ประกอบด้วยสีม่วง น้ำเงิน น้ำเงินอ่อน ฟ้า น้ำเงินเเก้มเขียวเเละเขียว

- ชุดสีเย็นให้ความรู้สึกเย็นสบาย องค์ประกอบที่ใชสีเย้น จะทำให้ดูสุภาพ เรียบร้อย

ชุดสีเเบบเดียว

- เป็นรูปแบบสีที่ง่ายที่สุด คือมีค่าของสีบริสุทธ์เพียงค่าเดียว เเต่เพิ่มความหลากหลายโดยการเพิ่มความเข้มอ่อนในระดับต่างๆ

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

ความกลมกลืนของสี

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

-การใช้สีที่จืดชืดเกินไปจะทำให้เกิดความรู้สึกที่น่าเบื่อและไม่สามารถดึงดูดความสนใจจากผู้ชมได้

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

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

สีกับอารมและความรู้สึก

ผลทางจิตวิทยาที่มีต่อสี

มนุษย์เราตอบสนองต่อสีด้วยจิตใจ ไม่ใช้สมองเช่น สีบางสีอาจทำให้รู้สึกสดชื่น แต่บางสีอาจทำให้รู้สึกซึมเศร้าได้

ดังนั้นหากเราเลือกสีอย่างรอบคอบ และความเข้าใจเกี่ยวกับจิตวิทยาของสีเบื้องต้นก็จะทำให้เราเลือกใช้ชุดสีได้อย่างเหมาะสมกับอย่างเหมาะสมกับอารมณ เนื้อหาของเว็บไซต์

บทที่9 ออกแบบกราฟฟิกสําหรับเว็บไซต์

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

การนำกราฟฟิกประเภทGIFไปใช้กับรูปถ่ายทำให้ภาพเป็นจุดๆ

การใชตัวอักษรในกราฟฟิกประเภท JPEG ผลคือเป็นรอยขรุขระ

รูปแบบหลัก3ประเภทคือGIF JPG เเละ PNG

-คุณสมบัตรสำคัญ

-วิธีการบีบอัดข้อมูล

-การนำไปใช้งาน

-การลดขนาด

-แนะนำโปรเเกรมที่ใช้ในการสร้างและปรับเเต่ง

รูปแบบกราฟฟิกสำหรับเว็บ(GIF,JPG และ PNG

GIF ย่อมาจาก Graphic Interchange Format

-ได้รับความนิยมในยุคเเรก

-มีระบบสีแบบIndexซึ้งมีข้อมูลสีขนาด8บิต ทำให้มีสีมากสุด256สี

-มีการบีบอัดข้อมูลตามแนวของพิกเซล เหมาะสำหรับกราฟฟิกที่ประกอบด้วยสีพื้น

JPG ย่อมาจาก Joint Photographic Experts Group

-มีข้อมูลสีขนาด 24บิต สามมารถแสดงสีได้ถึง16.7ล้านสี

-ใช้ระบบการบีบอัดที่มีลักษณะที่สูญเสีย(lossy)

-ไฟล์ประเภทนี้ควรนำไปใช้กับรูปถ่ายหรือกราฟฟิกที่มีการไล่สี

PNG ย่อมาจาก Portable Network Graphic

-เป็นรูปแบบไฟล์ภาพที่ถูกคิดค้นเพื่อมาแทน GIF ที่มีปัญหาเรื่องลิขสิทธ์ ซึ่งคุณสมบัติของ PNG นั้นจะคล้ายกับ GIF

-สมารถสนับสนุนระบบสีได้ทั้ง 8 บิตและ 24 บิต

-มีระบบการบีบอัดแบบDeflate ที่ไม่ทำให้เกิดการสูญเสีย

-มีระบบควบคุมค่าแกรมม่าและความโปร่งใสในตัวเอง

-ทำพื้นหลังให้เป็นTransparent ได้ดีกว่า GIF

-รูปแบบไฟล์แบบGNP นั้นสามารถที่จะบีบอัดไฟล์ให้มีขนาดเล็กกว่า GIF ประมาณ10-30%

ระบบการวัดขนาดของรูปภาพ

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

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

-ระบบความละเอียดของรูปภาพที่แสดงผลบนจอมอนิเตอร์ควรใช้หน่วย pixel per (ppi)

-แต่ในทางกลับกันใช้ inch(dpi) ซึ่งเป็นหน่วยวัดความละงานจะนำหน่วย dot per ของสิ่งพิมมาใช้งานเเทน

-ความละเอียดของรูปภาพที่ใช้ในเว็บไซต์ควรมีความละเอียดแค่ 72 ppi ก็เพียงพอแล้ว

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

-ปัจจุบันมีโปรแกรมหลายประเภทที่นำมาใช้ในการสร้างกราฟฟิกสำหรับเว็บ

- Adobe Photoshop

- Coreldraw

- Gimp

คำแนะนำในกระบวนการออกแบกราฟฟิกสำหรับเว็บ

-ออกแบบกราฟฟิกโดยใช้ชุดสีสำหรับเว็บ (Web Palette)

-เลือกใช้รูปแบบกราฟฟิกที่เหมาะสม GIF หรือ JPEG

-ตัดแบ่งกราฟฟิกออกเป็นส่วนย่อย(Slices)

คำแนะนำในการเลือกใช้ชนิดของไฟล์ภาพ

-ภาพถ่าย:JPEGดีที่สุด

-โลโก้,พื้นหลัง,รูปส่วนต่างๆของเว็บ(ปุ่ม,ไอคอล):GIFและPNG-8 ดีที่สุด

-รูปที่เอฟเฟ็คอย่าง Drop shadow,Glowหรือรูปที่มี Transparent: PNG-24ดีที่สุด

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

ส่วนประกอบของตัวอักษร

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