บทเรียน
posted on 12 Sep 2009 01:02 by 5050110044บทที่8 เลือกใช้สีสำหรับเว้บไซต์
- สีสันในเว็บเพจเป็นสิ่งที่สำคัญมากในการดึงดูดความสนใจของผู้ใช้ เพราะสิ่งแรกที่เห็นคือสีซึ่งบ่งบอกถึงความรู้สึก
- เราสามารถใช้สีได้กับทุกองค์ประกอบของเว็บ ตั้งแต่รูปภาพ ตัวอักษร สีพื้นหลัง เป็นต้น
- การใช้สีพื้นหลังใกล้เคียงกับตัวอักษร บางครั้งอาจวร้างความลำบากในการอ่าน
- การใช้สีมากเกินความจำเป็นอาจสร้างความสับสนให้กับผู้อ่าน
- การใสที่กลมกลืนกันช่วยให้เว็บไซต์น่าดูชมมากยิ่งขึ้น
ประโยชน์ของสีในเว็บไซต์
- สามารถชักนำสายตาผู้อ่านให้ไปยังทุกบริเวณในหน้าเว็บเพจ
- สี่ช่วยเชื่อมโยงบริเวณที่ได้รับการออกแบบเข้าด้วยกาน
- สีสามารถนำไปในการแบ่งส่วนบริเวณต่างๆ ออกจากกัน
- สีสามารถสร้างความดึงดูดความสนใจของผู้อ่าน
- สีสามารถสร้างอารมณ์โดยรวมของเว็บเพจ
- ช่วยสร้างระเบียบให้กับข้อความต่างๆ
- สามารถส่งเสริมเอกลักษณ์ขององค์กรหรือหน่วยงานนั้นๆ
การผสมสี (Color Mixing) มี 2 แบบ
-
การผสมสีแบบบวก (Additive mixing)
จะเป็นรูปแบบการผสมสีของแสง ไม่ใช่การผสมสีของวัตถุที่มีสีบนกระดาษ
-
การผสมสีแบบลบ (Subtractive mixing)
การผสมสีแบบนี้ไม่เกี่ยวข้องกับแสง แต่เกี่ยวเนื่องกับการดูดกลืนและสะท้อนแสงของวัตถุต่างๆ
การนำสีไปใช้งาน
-
การผสมสีแบบบวก จะนำไปใช้ในสื่อใดๆ ที่ใช้แสงสว่างออกมา เช่น โปรเจ็คเตอร์ ทีวี หรือ จอคอมพิวเตอร์
-
การสมสีแบบลบ จะนำไปใช้ในสื่อที่เกี่ยวข้องกับการใสวัตถุสี เช่น ภาพวาดของศิลปิน รูปปั้น หรือ สิ่งพิมพ์ต่างๆ
บทที่ 9 ออกแบบกราฟฟิกสำหรับเว็บไซต์
รายละเอียดของกราฟฟิกรูปแบบหลัก 2 ประเภท คือ GIF และJIF
GIF ย่อมาจาก Graphic Interchang Format
- ได้รับความนิยมในยุตแรก
- มีระบบสีแบบ Index ซึ้งมีข้อมูลสีขนาด 8 บิต ทำให้สีมีมากสุด 256 สี
- มีการบีบอัดข้อมูลตามแนวของพิเซล เหมาะสำหรับกราฟฟิกที่ประกอบด้วยสีพื้น
JIF ย่อมาจาก Joint Photogrphic Experts Group
- มีข้อมุลสีขนาด 24 บิต สามารถแสดงสีได้ถึง 16.7 ล้านสี
- ใช้ระบบบีบอัดที่มีลักษณะที่สูญเสีย
- ไฟล์ประเภทนี้ควรนำไปใช้กับรุปถ่ายหรือการฟฟิกที่มีการไล่ระดับสีอย่างละเอียด
โปรแกรมสำหรับกราฟฟิกสำหรับเว็บ
-
Adobe Photoshop เป็นโปรแกมที่ได้รับความนิยมตั้งแต่อดีตจนถึงปัจจุน
-
Adobe ImageReady
- ลักษณะหน้าตาและเครื่องมือจะคล้ายคลึงกับ Photoshop แต่จะถูกพัฒนาขึ้นเพื่องานกราฟฟิกโดยเฉพาะ
- เพิ่มความสามารถในการสร้าง animation ได้
-
Macromedia Fireworks
- มีคุณสมบัติในการตกแต่งตัวอักษรกราฟฟิกที่เห็นผลทันที
- การแสดงค่าของสีในระบบเลขฐานสิบหก
- การสร้างภาพเคลื่อนไหว
- การตัดแบ่งภาพให้มีขนาดเล็กๆ สำหรับไฟล์ HTML
บทที่ 10 จัดรูปแบบตัวอักษรสำหรับเว็บไซต์
ส่วนประกอบของตัวอักษร
-
descender : ส่วนล่างของตัวอักษรพิมพ์เล็กที่ต่ำกว่าเส้น baseline
-
baseline : เส้นสมมติที่ตัวอักษรส่วนใหญ่ตั้งอยู่
-
cap height : ความสูงจากเส้น baseline ไปถึงส่วนบนสุดของตัวอักษรพิมพ์ใหญ่
-
x-height : ความสูงของตัวอักษร x ในแนวพิมพ์เล็ก ซึ่งมักใช้อ้างถึงความสูงของตัวอักษรที่ไม่รวม ascender และ descender
-
point size : ระยะความสูงทั้งหมดวัดจากส่วนบนสุดถึงส่วนล่างสุดของตัวอักษร
-
ค่าความสูง x-height จะมีผลต่อภาพรวมของตัวอักษรและความยากง่ายในการอ่าน
รูปแบบตัวอักษร แบ่งได้ 2 ประเภทใหญ่ๆ
-
ตัวอัการที่มีขนาดสัมพันธ์กับรูปร่าง(Proportional Font) หรือ ตัวอักษรที่มีขนาดไม่คงที่
- ตัวอักษรแต่ละตัวมีพื้นที่ตามแนวนอนไม่เท่ากันขึ้นอย฿กับรูปร่างของตัวอักษรนั้น
- สิ่งพิมพ์ต่างๆที่ผลิตด้วยคอมพิวเตอร์ส่วนใหญ่จะถูกออกแบบโดยใตวอักษรแบบนี้ เพื่อให้ดูเหมาะสมและอ่านง่าย
2. ตัวอักษรที่มีขนาดคงที่ (Fixed-width Font)
-
จะเป็นตัวอักษรที่มีพื้นที่ตามแนวนอนเท่ากันหมด ซึ่งเป็นรุปแบบที่เรียบง่ายและมีลักษณะคล้ายตัวพิมพ์ดีด
ตัวอักษรประเภท serif และ Sans-Serif
ตัวอักษรประเภท serif
-
ตัวอักษรประเภทนี้จะมีลายเส้นเพิ่มขึ้นที่ส่วนปลาย(บางคนเรียกตัวอักษรมีฐาน)
-
เช่น Times New Rooom,Garamond,Georgia เป็นต้น
-
ตัวอักษรประเภทนี้เหมาะที่จะในส่วนที่เป็นรายละเอียดเนื้อหา
-
ไม่เหมาะกับการใช้เป็นตัวหนา
ตัวอักษรประเภทSans-Serif
-
ไม่มีลวยเส้นตกแต่งติดอยุ่กับตัวอัดษร
-
เช่น Arial, Verdana, Geneva เป็นต้น
-
เหมาะที่จะใช้กับหัวข้อหรือตัวอักษรขนาดใหญ่
-
ไม่เหมาะกับลักษณะเอียงเพราะจะทำให้รูปร่างเปลี่ยนไปมาก