สรุป เรื่องคอมพิวเตอร์กราฟิก แฮ่ๆๆๆๆๆๆๆๆๆๆ

หน่วยการเรียนรู้ที่ 3


คอมพิวเตอร์กราฟิก ( computer  Grapvics )


1 ทฤษฏี  ( color  theory )


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


2 วรรณะสี
สี คือ ลักษณะของแสงที่ปรากฏแก่สายตาให้เห็นเป็นสีในทางวิทยาศาสตร์ให้คำจำกัดความของสีว่าเป็นคลื่นแสงหรือความเข้มของแสงทีสายตาสามารถมองเห็น


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


ในชีวิตมนุษย์มีความเกี่ยวข้องสัมพันธ์กับสีต่างๆโดยบอกประโยชน์ของสีได้ดังนี้


1 ใช้ในการจำแนกสิ่งต่างๆเพื่อให้เห็นชัดเจน


2 ใช้ในการจัดองค์ประกอบของสิ่งต่างๆเพื่อให้เกิดความสวยงาม เช่น การแต่งกาย


3 ใช้ในการจัดกลุ่ม พวก คณะ ด้วยการใช้สีต่างๆ เช่น คณะสี เครื่องแบบต่างๆ


4 ใช้ในการสื่อความหมายเป็นสัญลักษณ์ หรือใช้บอกเล่าเรื่องราว


5 ใช้ในการสร้างสรรค์ผลงานศิลปะ เพื่อให้เกิดความสวยงามและน่าสนใจ


6 เป็นองค์ประกอบในการมองเห็นสิ่งต่างๆของมนุษย์


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


หลักของการใช้สีมีวรรณะต่างๆ ดังนี้


การใช้สีวรรณะเดียว
ความหมายของสีวรรณะ  ( Tone ) คือกลุ่มที่แบ่งเป็นวงล้อสีเป็น 2 วรรณะ คือ


1.1 วรรณะร้อน ( warm tone ) ซึ่งประกอบด้วย สีเหลือง สีส้ม สีแดง สีม่วง  สีวรรณะร้อนจะให้อิทธิพลต่อความรู้สึก เร้าใจ กระฉับ กระเฉง เร่าร้อน  รุนแรง  มีพลัง


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


2 การใช้สีต่างวรรณะ
โดยทั่วไปจะใช้อัตราส่วน 80% ต่อ 20%  ของวรรณะสี คือ การใช้สีวรรณะร้อน 80% สีวรรณะเย็น 20%
เป็นต้น ซึ่งในการใช้แบบนี้ สร้างจุดเด่น จุดสนใจของผู้ชม ไม่ควรใช้อัตราส่วนที่เท่ากันเพราะจะทำให้ไม่มีสีใด เป็นจุดเด่นไม่น่าสนใจ


3 การใช้สีตรงกันข้าม
สีตรงกันข้ามจะทำให้มีความรู้สึกตัดกันรุนแรง แตกหัก สร้างความเด่นและเร้าใจได้มากแต่หากใช้ไม่ถูกหลักหรือไม่เหมาะสมหรือใช้จำนวนสีมากจนเกินไปก็จะทำให้ความรู้สึกพร่ามัว ขัดแย้งสายตา ควรใช้สีตรงข้ามในอัตราส่วน 80% ต่อ 20% หากพื้นที่เท่ากันที่จำเป็นต้องใช้ควรนำสีขาวหรือสีดำเข้ามาเสริมเพื่อตัดเส้นให้แยกออกจากกัน คือ การลดของสีตรงข้าม
การเลือกใช้สีเพื่อการออกแบบเว็บ
งานออกแบบเว็บแต่ละชิ้นที่เราออกแบบมาสวยงามและโดดเด่น น่าสนใจ ไม่อาศัยแค่เฉพาะ ฝีมือ
ในการออกแบบเท่านั้น


แม่สี ในวงการศิลปะจะมีอยู่ด้วยกัน 3 สี คือ น้ำเงิน เหลือง แดง


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


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


3.3 ชุดสีใกล้เคียงกัน
เป็นชุดสีที่กลมกลืนและไม่น่าเบื่อเลือกมาจากสีที่อยู่ติดๆกัน 3-5 สี จากวงจรสีไม่จืดชืด สร้างงานได้สดใสไปในอารมณ์เดียวกัน


4 อารมณ์และความหมายของสี


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


4.2 สีเหลือง
เป็นสีที่ให้อารมณ์สดใส ปลอดโปร่งให้ความหวัง ความทันสมัย สีเหลืองจะดึงดูดสายตาได้ดี และมองเห็นได้แต่ไกล


4.3 สีน้ำเงิน
จะให้ความหมายแห่งความสงบเงียบ สุขุม เยือกเย็น รอบคอบ อารมณ์หรูหรา มีระดับ


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


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


4.6 สีฟ้า
แสดงถึง ความสว่าง  ปลอดโปร่ง เปรียบเสมือน ท้องฟ้า


5 ประโยชน์ของสีในการออกแบบเว็บ


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


2. สีช่วยเชื่อมโยงบริเวณที่ได้รับการออกแบบเข้าด้วยกัน ทำให้ผู้อ่าน จะมีความรู้สึกว่าบริเวณสีเดียวกันจะมีความสำคัญเท่ากัน


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


4. สีช่วยสร้างระเบียบให้กับข้อความต่าง ๆ เช่นการใช้สีแยกระหว่างหัวข้อกับเนื้อเรื่องหรือสร้างความแตกต่างให้กับข้อความบางส่วน หรือบางทีก็ใช้เตือน เช่น สีแดงใช้สำหรับคำเตือนกฎจราจรหรือสีเทาใช้สำหรับเป็นทางเลือก

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

การออกแบบฟอนต์เพื่องานออกแบบเว็บ

1.   การใช้สีกับฟอนต์

2.   ชนิดของฟอนต์ (Type Style)

3.   ตัวอักษรภาษาอังกฤษ

 Serif

 Ms Sans Serif

 Script

4.   ตัวอักษรภาษาไทย (Thai Font)

5.   แบบลายมือและแบบคัดลายมือ

6.   ขนาดของฟอนต์ (FontSize) ในการออกแบบเว็บ

6. การออกแบบฟอนต์เพื่องานออกแบบเว็บ

6.1 การใช้สีกับฟอนต์

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

6.2 ชนิดของฟอนต์ (Type Style)

โดยจะแบ่งชนิดตัวอักษรตามการทำงานเป็น2 ประเภทคือ อักษรภาษาอังกฤษ กับอักษรภาษาไทย

6.3 ตัวอักษรภาษาอังกฤษ

เป็นภาษาที่เลี่ยงไม่ได้เลยในงานออกแบบกราฟิกเพราะจะเป็นภาษาพื้นฐานในการใช้งานเมื่อเราต้องการจะออกแบบงานต่าง ๆ

6.4 ตัวอักษรภาษาไทย (Thai Font)แบบดั่งเดิมหรือฟอนต์แบบมีหัว แบบดั่งเดิมหรือแบบมีหัว เป็นแบบที่คุ้นเคยมากทีสุด จะมีมากในภาษาไทย เป็นรูปแบบฟอนต์ที่สำหรับเนื้อหายาว ๆ6.5 แบบลายมือและแบบคัดลายมือจะให้ความรู้สึกเป็นอิสระ หรือเป็นเอกลักษณ์เฉพาะ จะดูไม่เป็นทางการ ไร้ขอบเขตไร้กฎเกณฑ์ 6.6 ขนาดของฟอนต์ (Font Size) ในการออกแบบเว็บ ขนาดของตัวอักษร พอยท์จะมีขนาดตัวอักษรใหญ่เท่ากับ 1 นิ้ว ในการใช้ตัวอักษรในงานกราฟิก งานสิ่งพิมพ์ งานเว็บไซต์ โดยทั่วไป สายตาคนทั่วไปจะอยู่ที่14 พอยท์

7. การจัดองค์ประกอบภาพสำหรับงานออกแบบเว็บ

 การได้ภาพทีมตรงตามความต้องการ มีคุณค่า มีความงามทางด้านศิลปะ สื่อสารให้ผู้รับสื่และผู้ส่งสื่อได้ตรงกัน ชัดเจน

7.1 ความมีเอกภาพ (Unity)

7.2 เสริมจุดเด่น เน้นจุดสำคัญ (Emphasize)

7.3 การวางจุดสนใจ (Focus Point)

7.4 การวางองค์ประกอบภาพให้ดูโดดเด่น (Isolation)

7.5 ความสมดุล (Balance)

7.6 สร้างความเหมือนที่แตกต่าง (Contrast)

- การสร้างขนาดที่แตกต่างขององค์ประกอบภายในภาพ

- รูปร่างที่แตกต่างกันขององค์ประกอบภายในภาพ

- รูปลักษณ์หรือลักษณ์ที่แตกต่างขององค์ประกอบภายในภาพ

7.7 ที่ว่างในงานออกแบบ (Spacing)

7.7.1 ภาพและพื้นภาพ  7.7.2 พื้นที่ของภาพและพื้นภาพ

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

8. หลักการสร้างงานกราฟิกเพื่อการออกแบบเว็บ

8.1  การกำหนดพื้นหลังของภาพ  การกำหนดพื้นหลังของภาพ โดยภาพหรือสีพื้นหลังที่ใช้นั้นควรจะมีความหมายหรืออารมณ์ที่สื่อความหมายได้ถูกต้องตามวัตถุประสงค์ของชิ้นงาน

8.2  การเลือกภาพที่ต้องการใช้งาน  เป็นการตัดหรือคัดลอกบางส่วนของภาพที่เราจะนำมาใช้ในชิ้นงาน

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

8.4  การใส่ข้อความ  เป็นการใส่ข้อความเพื่อให้ภาพมีชื่อเรืองบรรยายภาพให้มีความสมบูรณ์

8.5  การนำภาพส่วนประกอบมาซ้อนกั น นำภาพส่วนประกอบทีี่เลือกไว้มาวางซ้อนกัน บางส่วนอาจจะอยู่ด้านบนบางส่วนอาจจะอยู่ด้านล่าง หรืออยู่ตรงตามวัตถุประสงค์ที่วางไว้

8.6  การตกแต่งรูปภาพให้เข้าด้วยกันอย่างกลมกลืน สุดท้ายหรือท้ายที่สุดคือการได้ภาพที่สมจริง