คอมพิวเตอร์กราฟิก ( Computer Graphic )
1. ทฤษฏีสี (COLOR THEORY)
สี (Color) นับว่ามีความสำคัญมากในการออกแบบเว็บไซต์ เป็นสิ่งที่มีอิทธิพลในการดึงดูดความสนใจ กำหนดบรรยากาศและความรู้สึกโดยรวม เราสามารถใช้สีได้กับทุกองค์ประกอบของเว็บเพจ เลือกใช้สีอย่างเหมาะสมจะช่วยให้สามารถสื่อสารเนื้อหา และเป้าหมายของเว็บไซต์
ได้อย่างชัดเจนแต่ในทางตรงกันข้ามถ้าเลือกใช้สีไม่เหมาะสมจะทำให้รบกวนสายตาของผู้อ่านควร
ใช้สีที่เหมาะสม สื่อความหมายชัดเจน
2. วรรณะสี
พอเราเข้าใจเกี่ยวกับสีแล้ว เราก็สามารถสร้างและออกแบบสิ่งต่างๆด้วยการใส่อารมณ์จาก
สีได้ วรรณของสีจะเน้นการนำไปใช้เกี่ยวกับการออกแบบเว็บ แต่สามารถนำไปใช้กับงานอื่น ๆ ได้
2.1การใช้สีวรรณะเดียว ความหมายของสีวรรณะเดียว(Tone)คือกลุ่มสีที่แบ่งออกเป็นวง ล้อสีเป็น 2 วรรณะ คือ
1. วรรณะร้อน (Warm Tone) ซึ่งประกอบด้วย สีเหลือง สีส้ม สีแดง สีม่วง
2. วรรณะร้อน วรรณะเย็น (Cool Tone) ประกอบด้วย สีเหลือง สีเขียว สีนํ้าเงิน สีม่วง
(สีเหลืองกับสีม่วงได้ทั้งสองวรรณะ)
2.2 การใช้สีต่างวรรณะโดยทั่วไปจะใช้อัตราส่วน 80% ต่อ 20% ของวรรณะสี คือ ถ้าใช้สีวรรณะร้อน 80% สีวรรณะเย็น 20% เป็นต้น ซึ่งการใช้แบบนี้สร้างจุดเด่น จุดสนใจของผู้ชม ไม่ควรใช้อัตราส่วนที่เท่ากันเพราะจะทำให้ไม่มีสีใดเป็นจุดเด่น ไม่น่าสนใจ
2.3การใช้สีตรงกันข้าสีตรงข้ามจะทำใหมี้ความรู้สึกตัดกันรุนแรงแตกหักสร้างความเด่นและเร้าใจได้มากแต่
หากใช้ไม่ถูกหลัก หรือไม่เหมาะสม หรือใช้จำนวนสีมากจนเกินไป ก็จะทำให้ความรู้สึกพร่ามัว
ขัดแย้งสายตา ควรใช้สีตรงข้าม ในอัตราส่วน 80% ต่อ 20% หรือหากมีพื้นที่เท่ากันที่จำเป็นต้องใช้
ควรนำสีขาว หรือสีดำ เข้ามาเสริมเพื่อ ตัดเส้นให้แยกออกจากกันคือการลดความสดของสีตรงข้าม
3. การเลือกใช้สีเพื่อการออกแบบเว็บ
งานออกแบบเว็บไซต์แต่ละชิ้นที่เราออกแบบออกมาสวยงามโดดเด่นน่าสนใจ ประสบการณ์ในการออกแบบและการเลือกใช้สีคือคำตอบที่ช่วยเสริมให้เว็บไซต์ดูเด่นสง่าสะดุดตาน่าชื่นชม การเลือกใช้สีอย่างเหมาะสมก็ช่วยให้งานประสบความสำเร็จตามเป้าหมายได้
แม่สี ในวงการศิลปะจะมีอยู่ด้วยกัน 3 สี คือ นํ้าเงิน เหลือง แดง ซึ่งเวลาผสมสี จะนึกออกอย่างแรกเลยคือ RGB สีอื่นที่อยู่ระหว่างสีทั้ง 3 สี จะเกิดจากการผสมกันของแม่สีทั้ง 3 สี โดยแบ่งสีออกเป็นสองวรรณะคือ วรรณะร้อน และวรรณะเย็น
3.1 การเลือกใช้ชุดสีอ่อนไปหาเข้ม(ตามน้ำหนักของสี) คือสีหลักหนึ่งสีและลดความเข้ม ความอ่อน ของสี สีชุดนี้จะทำให้เกิดความรู้สึกไม่รุนแรงวู่วาม ทำให้รู้สึกอ่อนโยน คลาสสิก แต่อีกมุมหนึ่งจะเป็นชุดสีไม่ค่อยมีมิติในการนำไปใช้ออกแบบ
3.2 ชุดสีคู่ตรงข้าม เป็นสีที่อยู่ตรงข้ามกันสุดๆ ในวงจรสีให้ความรู้สึกตื่นเต้นเร้าใจ จะเป็นการเบรคความเข้มของทั้งสองสีด้วยสีขาวหรือสีดำก็จะใช้สีทั้งสองสีในอัตราส่วน 70 ต่อ 30 หรือ 80 ต่อ 20 เปอร์เซ็นต์ ในการออกแบบ
3.3 ชุดสีใกล้เคียง เป็นชุดสีที่กลมกลืนและไม่น่าเบื่อ เลือกมาจากสีที่อยู่ติดๆ กัน 3 - 5 สี จากวงจรสีไม่จืดชืดจะสร้างงานได้สดใส อัตราส่วนตามชอบ
4. อารมณ์และความหมายของสี
การเลือกใช้สีนั้นมีอิทธิพลอย่างมากต่อภาพรวมของเว็บไซต์ เนื่องจากสีแต่ละสีจะมีผลต่อ
อารมณ์และความรู้สึกของผู้ที่เข้ามาใช้บริการเว็บไซต์เป็นอย่างยิ่ง
สีแดง จะทำให้รู้สึกถึงพลังที่เข้มแข็ง ตื่นเต้น เร้าใจ เร่าร้อนมีความอบอุ่น ในทางตรงกันข้ามจะ
ทำให้ก้าวร้าว รุนแรง
สีเหลือง เป็นสีที่ให้อารมณ์สดใส ปลอดโปร่ง ให้ความหวัง ความทันสมัย สีเหลืองจะดึงดูด
สายตาได้ดี
สีน้ำเงิน จะให้ความหมายแห่งความสงบเงียบ สุขุม เยือกเย็น รอบคอบ อารมณ์หรูหรา มีระดับ
สีเขียว เป็นสีของธรรมชาติ ทำให้เกิดความสดชื่น ชุ่มชื่น ราบเรียบ สบายตา บางครั้งก็มองถึงต้นไม้ ป่าเขา ลำเนาไพร
สีขาว เป็นสีที่นิยมใช้มากที่สุด เพราะจะใช้กับสีไหนก็ได้ จะทำให้มองว่าเป็นสีเรียบง่าย
สะอาด โล่งสบาย บริสุทธิ์แสดงถึงความสะอาด บริสุทธิ์ เหมือนเด็กแรกเกิด แสดงถึงความว่าง
เปล่า ปราศจากกิเลส ตัณหา
สีฟ้า แสดงถึงความสว่าง ความปลอดโปร่ง เปรียบเหมือนท้องฟ้า เป็นอิสระ เสรี เป็นสีของ
องค์การสหประชาชาติ สีของเทคโนโลยีที่ก้าวไกล พัฒนาต่อเนื่อง
5. ประโยชน์ของสีในการออกแบบเว็บ
1. สีสามารถชักนำสายตาผู้อ่านให้ไปยังทุกบริเวณในหน้าเว็บ ผู้อ่านจะมีการเชื่อมโยง
ความรู้สึกกับบริเวณของสีในรูปแบบที่คาดหวังได้
2. สีช่วยเชื่อมโยงบริเวณที่ได้รับการออกแบบเข้าด้วยกัน ทำให้ผู้อ่านจะมีความรู้สึกว่าบริเวณที่มีสีเดียวกันจะมีความสำคัญเท่ากัน
3. สีสามารถช่วยดึงดูดความสนใจของผู้อ่าน นำสายตาผู้อ่านให้มองไปยังสีที่มีลักษณะเด่นหรือผิดปกติเสมอ
4. สีช่วยสร้างระเบียบให้กับข้อความต่าง ๆ เช่นการใช้สีแยกระหว่างหัวข้อกับเนื้อเรื่อง
หรือสร้างความแตกต่างให้กับข้อความบางส่วน
5. สีสามารถสร้างอารมณ์โดยรวมของเว็บ และกระตุ้นความรู้สึกตอบสนองจากผู้ชมได้
6. การออกแบบฟอนต์เพื่องานออกแบบเว็บ
6.1 การใช้สีกับฟอนต์ เราไม่ควรใช้สีที่สว่าง หรือจัดจ้านเกินไป เพราะเมื่อผู้ชมอ่านเนื้อหาเป็นเวลานาน ๆ
จะทำให้รู้สึกแสบตาได้ ขณะเดียวกันก็ไม่ควรใช้สีที่ใกล้เคียงกับสีพื้น
6.2 ชนิดของฟอนต์ (Type Style) ชนิดของตัวอักษรหรือตัวหนังสือเป็นสิ่งแรกที่ต้องทำความรู้จัก หรือเรียกง่าย ๆ ว่าฟอนต์นั้นเอง โดยจะแบ่งชนิดตัวอักษรตามการทำงานเป็น2 ประเภทคือ อักษรภาษาอังกฤษ กับอักษรภาษาไทย
6.3 ตัวอักษรภาษาอังกฤษ เป็นภาษาที่เลี่ยงไม่ได้เลยในงานออกแบบกราฟิกเพราะจะเป็นภาษาพื้นฐานในการใช้งานเมื่อเราต้องการจะออกแบบงานต่าง ๆ เราจึงควรจะเลือกตัวอักษรภาษาอังกฤษ
6.4 ตัวอักษรภาษาไทย (Thai Font) ตัวอักษรภาษาไทย อาจจะจัดวางยากกว่าตัวอักษรภาษาอังกฤษ เนื่องจากมีสระและวรรณยุกต์ ซึ่งบางครั้งก็ยุ่งยากในการจัดวางให้ลงตัว หรือดูสวยงามแบ่งออกเป็นหลายชนิดดังนี
- แบบดั้งเดิมหรือฟอนต์แบบมีหัว
- แบบหัวตัดหรือแบบไม่มีหัว
6.5 แบบลายมือและแบบคัดลายมือ จะให้ความรู้สึกเป็นอิสระ หรือเป็นเอกลักษณ์เฉพาะ จะดูไม่เป็นทางการ ไร้ขอบเขตไร้กฎเกณฑ์ จะเป็นไปตามความต้องการ หรือ ความรู้สึกของผู้ใช้เป็นส่วนมาก
6.6 ขนาดของฟอนต์ (Font Size) ในการออกแบบเว็บ ขนาดของตัวอักษร เป็นปัจจัยหนึ่งที่ต้องรู้จักใช้ให้เหมาะสมข นาดอักษรมีหน่วยที่รู้จักกันดีที่สุดคือพอยท์ (Point) โดยขนาด 72 พอยท์จะมีขนาดตัวอักษรใหญ่เท่ากับ 1 นิ้ว ในการใช้ตัวอักษรในงานกราฟิก งานสิ่งพิมพ์ งานเว็บไซต์ โดยทั่วไป
7. การจัดองค์ประกอบภาพสำหรับงานออกแบบเว็บ
7.1 ความมีเอกภาพ (Unity) เอกภาพ คือสิ่งที่ทำให้งานสื่อความหมายออกมาตามวัตถุประสงค์ที่ชัดเจน ซึ่งงานที่ออกแบบต้องมีความกลมกลืน (Harmony) เป็นพวกพ้อง อันหนึ่งอันเดียวกันไ ม่ทำให้ผู้เข้าชมรู้สึกขัดแย้งในสายตา องค์ประกอบของภาพแต่ละจุดต้องมีความสัมพันธ์ สอดคล้อง ไปในทิศทางเดียวกัน
7.2 เสริมจุดเด่น เน้นจุดสำคัญ (Emphasize) องค์ประกอบด้านกราฟิก คือ การสร้างหรือเสริมจุดเด่น เน้นจุดสำคัญ เพื่อทำให้งานน่าสนใจ และการสร้างจุดสนใจให้ผู้ชมจับ
ประเด็นมิเช่นนั้นแล้วงานกราฟิกที่ได้จะไม่มีเสน่ห์
7.3 การวางจุดสนใจ (Focus Point) สิ่งแรกทุกคนกังวลใจคือ ไม่รู้ว่าจะวางจุดไหนที่คิดว่าจะเป็นจุดเด่นที่สุด ถ้าไม่มีประสบการณ์เป็นการยากที่จะบอกได้ว่า จุดไหนที่วางแล้วทำให้องค์ประกอบกราฟิกดู เด่น สง่า นำสายตาผู้ชมได้ดี
7.4 การวางองค์ประกอบภาพให้ดูโดดเด่น (Isolation) การวางองค์ประกอบให้ภาพโดดเด่น จะเน้นจุดสนใจเพื่อให้ผู้ชมได้เห็นนั้นง่าย อาจใช้กฎสามส่วนช่วยในการวางองค์ประกอบให้ถูกหลักการมากยิ่งขึ้นการสร้างความแตกต่างหรือจุดเด่น เป็นเรื่องที่เข้าใจง่าย ทุกองค์ประกอบมีจุดหมายเดียวกันคือ การผสมผสานให้งานครบองค์ประกอบ ดูดี ลงตัว สื่อความหมายของงานได้อย่างชัดเจน
7.5 ความสมดุล (Balance) เป็นองค์ประกอบที่สำคัญในงานออกแบบกราฟิก ส่งเสริมให้งานที่ได้มีเอกภาพ ซึ่งความสมดุลแบ่งได้ 2 อย่างคือสมดุลที่เหมือนกันและสมดุลที่ไม่เหมือนกัน
7.6 สร้างความเหมือนที่แตกต่าง (Contrast) ความแตกต่างเป็นตัวกำหนดความน่าสนใจหรือความโดดเด่นในงานได้ดี แต่ต้องระวัง เพราะการสร้างองค์ประกอบให้ภาพมีความแตกต่างมากเกินไป จะทำให้องค์ประกอบนั้นหลุดออกจากกรอบของงาน ทำให้ได้งานที่ไม่เป็นอันหนึ่งอันเดียวกันหรือขาดความมีเอกภาพ และองค์ประกอบนันจะเป็นสิ่งแปลกประหลาดในภาพมากกว่าจะเป็นจุดที่น่าสนใจในที่สุด
7.7 ที่ว่างในงานออกแบบ (Spacing) ในงานออกแบบกราฟิกหรืองานออกแบบงาน 2 มิติ และ 3 มิติ นอกจากองค์ประกอบหลักแล้ว ยังมีอีกสิ่งหนึ่งที่มีอิทธิพลกับภาพที่เราออกแบบ แต่นักออกแบบจำนวนไม่น้อยมองข้ามไป นั้นคือ ที่ว่าง( space)
8. หลักการสร้างงานกราฟิกเพื่อการออกแบบเว็บ
เมื่อเราได้แนวทางของชิ้นงานแล้วว่าจะเสนอเรื่องอะไร จะใช้สีอะไร รูปภาพและข้อความ
เป็นอะไร และรูปภาพพื้นเป็นอะไร ทุกอย่างจะไม่ตายตัวเสมอไป ให้ดูที่แนวทาง วัตถุประสงค์และสภาพแวดล้อมขณะนั้นเป็นองค์ประกอบด้วย
8.1 การกำหนดพื้นหลังของภาพการกำหนดพื้นหลังของภาพ โดยภาพหรือสีพื้นหลัง
ที่ใช้นั้นควรจะมีความหมายหรืออารมณ์ที่สื่อความหมายได้ถูกต้องตามวัตถุประสงค์ของชิ้นงาน
8.2 การเลือกภาพที่ต้องการใช้งานเป็นการตัดหรือคัดลอกบางส่วนของภาพที่เราจะนำมาใช้ในชิ้นงานของเรา
8.3 จัดวางภาพให้เหมาะสมเมื่อเรานำภาพส่วนประกอบมารวมกันในชิ้นงาน อาจจะมีบางภาพที่มีขนาดและมุมก่อนจัดวางไม่ลงตัว เราก็สามารถขยายหรือหมุนและบิดภาพให้ลงตัวได้
8.4 การใส่ข้อความเป็นการใส่ข้อความเพื่อให้ภาพมีชื่อเรื่องบรรยายภาพให้มีความสมบูรณ์ เป็นการสร้างองค์ประกอบของภาพให้มีรายละเอียดมากขึ้น
8.5 การนำภาพส่วนประกอบมาซ้อนกันนำภาพส่วนประกอบที่เลือกไว้มาวางซ้อนกัน บางส่วนอาจจะอยู่ด้านบนบางส่วนอาจจะอยู่ด้านล่าง หรืออยู่ตรงตามวัตถุประสงค์ที่วางไว้
8.6 การตกแต่งรูปภาพให้เข้าด้วยกันอย่างกลมกลืน สุดท้ายหรือท้ายที่สุดคือการได้ภาพที่สมจริง ภาพโดยรวมของชิ้งานที่ได้ และการปรับแต่งราละเอียดของภาพประกอบแต่ละส่วน
ต้องดูกลมกลืนกัน มีความเป็นเอกภาพอันหนึ่งอันเดียวกัน
