Computer Graphic by คนสร้างสรรค์ : Creative People

คอมพิวเตอร์กราฟิก (Computer Graphic) หน้า 1

http://www.konsangsan.com , http://kitt.kvc.ac.th

“ฟ้าหลังฝนสว่างไสว ฉันใด คนที่ถูกบ่มเพาะและเจียระไน ย่อมมีคุณค่าและสง่างามฉันนั้นW

คอมพิวเตอร์กราฟิก (Computer Graphic) หน้า 2

Computer Graphics

1. เพื่อศึกษาทฤษฏีสีและวรรณะสี 2. เพื่อศึกษาอารมณ์และความหมายของสี 3. เพื่อศึกษาการออกแบบฟอนต์เพื่องานเว็บ 4. เพื่อศึกษาการจัดองค์ประกอบของภาพสาหรับงานออกแบบเว็บ

1. อธิบายทฤษฏีสีและวรรณะสี 2. อธิบายอารมณ์และความหมายของสี 3. อธิบายการออกแบบฟอนต์เพื่องานเว็บ 4. อธิบายการจัดองค์ประกอบของภาพสาหรับงานออกแบบเว็บ สี เป็ น องค์ ป ระกอบที่ ส าคั ญ ในงานออกแบบเว็ บ การเลื อ กใช้ สี จะต้องดูว่ามีจุดมุ่ งหมายอย่างไร จะสื่อความเป็นเอกลักษณ์ของเว็บไซต์ ด้านไหน ส่วนการจัดองค์ประกอบสาหรับการออกแบบเว็บนั้นประกอบไป ด้วย ความมีเอกภาพ การวางจุดน่าสนใจ การเสริมจุดเด่นเน้นจุดสาคัญ ความสมดุล การสร้างความเหมือนที่แตกต่าง และการกาหนดพื้นที่ว่างใน งานออกแบบเว็บ “ฟ้าหลังฝนสว่างไสว ฉันใด คนที่ถูกบ่มเพาะและเจียระไน ย่อมมีคุณค่าและสง่างามฉันนั้นW

คอมพิวเตอร์กราฟิก (Computer Graphic) หน้า 3

Computer Graphic 1

COLOR THEORY

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

คอมพิวเตอร์กราฟิก (Computer Graphic) หน้า 4

2 สี คื อ ลั ก ษณะของแสงที่ ป รากฏแก่ ส ายตาให้ เห็ น เป็ น สี ในทาง วิทยาศาสตร์ให้คาจากัดความของสีว่า เป็นคลื่นแสงหรือความเข้มของแสง ที่สายตาสามารถมองเห็น ธวัชชัย ศรีสุเทพ ( 2547) กล่าวไว้ว่า ในทางศิลปะ สีคือทัศนะธาตุอย่างหนึ่งที่เป็นองค์ประกอบสาคัญของงาน ศิ ล ปะ และใช้ ใ นการสร้ า งงานศิ ล ปะโดยจะท าให้ ผ ลงานมี ค วาม สวยงาม ช่วยสร้างบรรยากาศ มีความสมจริง เด่นชัดและน่าสนใจมาก สี เป็นองค์ประกอบสาคัญอย่างหนึ่งของงานศิลปะ และเป็นองค์ประกอบที่มี อิทธิพลต่อความรู้สึก อารมณ์ และจิตใจ ได้มากกว่าองค์ประกอบอื่น ๆ ในชีวิตของมนุษย์มีความเกี่ยวข้องสัมพันธ์กับสีต่าง ๆ โดยบอกประโยชน์ ของสีได้ดังนี้ 1. ใช้ในการจาแนกสิ่งต่าง ๆ เพื่อให้เห็นชัดเจน 2. ใช้ในการจัดองค์ประกอบของสิ่งต่าง ๆ เพื่อให้เกิดความสวยงาม เช่น การแต่งกาย 3. ใช้ในการจัดกลุ่ม พวก คณะ ด้วยการใช้สีต่าง ๆ เช่น คณะ สี เครื่องแบบต่าง ๆ 4. ใช้ในการสื่อความหมาย เป็นสัญลักษณ์ หรือใช้บอกเล่าเรื่องราว 5. ใช้ในการสร้างสรรค์งานศิลปะ เพื่อให้เกิดความสวยงาม และ น่าสนใจ 6. เป็นองค์ประกอบในการมองเห็นสิ่งต่าง ๆ ของมนุษย์

คอมพิวเตอร์กราฟิก (Computer Graphic) หน้า 5

สีนั้นเป็นองค์ประกอบที่สาคัญในการออกแบบ แต่ละคนชอบสีไม่ เหมือนกัน ถามความเห็นแต่ละคนก็ออกมาไม่เหมือนกัน ในขณะที่เราไม่มี ทางที่จ ะรวบรวมความชอบของทุ กคนได้ แต่ เราก็ มีห ลัก การนาสีไปใช้ และการประยุกต์ใช้สีวรรณะต่าง ๆ การที่เรารู้และเข้าใจเกี่ยวกับเรื่องสี เหล่านี้ ทาให้เราสามารถเลือกสีให้เหมาะกับงานต่างๆอย่างเหมาะสม พอเราเข้าใจเกี่ยวกับสีแล้ว เราก็สามารถสร้างและออกแบบสิ่งต่างๆ ด้วยการใส่อารมณ์จากสีได้ สิ่งที่จะแนะนาต่อไปนี้ จะเป็นการใช้สีวรรณะ ต่าง ๆ ซึ่งจะเน้ น การนาไปใช้ เกี่ยวกั บ การออกแบบเว็บ แต่ ก็สามารถ นาไปใช้กับการออกแบบงานอื่น ๆ ได้เหมือนกัน เทคนิคและรายละเอียด อาจจะแตกต่างกัน อยู่ที่จุดประสงค์และประเภทของงาน แต่ความเหมือน ด้านทฤษฏีสี ใช้พื้นฐานตัวเดียวกัน การเลือกใช้สีกับงานออกแบบเว็บไซต์นั้น นักออกแบบจะต้องรู้ว่ามี จุดมุ่งหมายใด ที่จะสร้างความสนใจ ความเร้าใจต่อผู้ชม เพื่อ ให้เข้าถึง จุดหมาย หลักของการใช้สีมีวรรณะต่าง ๆ ดังนี้ 2.1 การใช้สีวรรณะเดียว ความหมายของสีวรรณะเดียว (Tone) คือกลุ่มสีที่แบ่งออกเป็นวง ล้อสีเป็น 2 วรรณะ คือ 2.2.1 วรรณะร้อน (Warm Tone) ซึ่งประกอบด้วย สีเหลือง สีส้ม สีแดง สีม่วง สีวรรณะร้อนจะให้อิทธิพล ต่อความรู้สึก เร้าใจ กระฉับ กระ เร่าร้อน รุนแรง มีพลัง “ฟ้าหลังฝนสว่างไสว ฉันใด คนที่ถูกบ่มเพาะและเจียระไน ย่อมมีคุณค่าและสง่างามฉันนั้นW

คอมพิวเตอร์กราฟิก (Computer Graphic) หน้า 6

2.2.2 วรรณะร้อน วรรณะเย็น (Cool Tone) ประกอบด้วย สี เหลือง สีเขียว สีน้าเงิน สีม่วง สีเหล่านี้ดูเย็นตา ให้ความรู้สึก สงบ มีชีวิต ชีวา มีความหวัง (สีเหลืองกับสีม่วงได้ทั้งสองวรรณะ)

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

คอมพิวเตอร์กราฟิก (Computer Graphic) หน้า 7

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

3. การเลือกใช้สีเพื่อการออกแบบเว็บ งานออกแบบเว็บไซต์แ ต่ละชิ้นที่เราออกแบบออกมาสวยงามโดด เด่ น น่ า สนใจ ไม่ ได้ อ าศั ย แค่ เฉพาะ "ฝี มื อ " ในการออกแบบ เท่ า นั้ น ประสบการณ์ในการออกแบบและการเลือกใช้สีคือคาตอบที่ช่วยเสริมให้ เว็บไซต์ ดูเด่นสง่า สะดุดตา น่าชื่นชม ขึ้นมาได้ แม้หลักการออกแบบจะ เป็ น แค่ พื้ น ฐานเรี ยบๆ แต่ ก ารเลื อ กใช้ สี อย่ า งเหมาะสมก็ ช่ วยให้ งาน ประสบความสาเร็จตามเป้าหมายได้

คอมพิวเตอร์กราฟิก (Computer Graphic) หน้า 8

แม่สี ในวงการศิลปะจะมีอยู่ด้วยกัน 3 สี คือ น้าเงิน เหลือง แดง ซึ่งเวลาผสมสีจะนึกออกอย่างแรกเลยคือ RGB สีอื่นที่อยู่ระหว่างสีทั้ง 3 สี จะเกิดจากการผสมกันของแม่สีทั้ง 3 สี โดยแบ่งสีออกเป็นสองวรรณะคือ วรรณะร้อน และวรรณะเย็น

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

คอมพิวเตอร์กราฟิก (Computer Graphic) หน้า 9

3.2 ชุดสีคู่ตรงข้าม เป็นสีที่อยู่ตรงข้ามกันสุดๆ ในวงจรสีให้ความรู้สึกตื่นเต้นเร้าใจ หัก ดิบ ถ้าไม่แน่จริงนักออกแบบจะไม่กล้าใช้สีชุดนี้เพราะ จะเป็นการเบรค ความเข้มของทั้งสองสีด้วยสีขาวหรือสีดา หรือถ้าไม่เบรค ก็จะใช้สีทั้งสอง สีในอัตราส่วน 70 ต่อ 30 หรือ 80 ต่อ 20 เปอร์เซ็นต์ ในการออกแบบ 3.3 ชุดสีใกล้เคียงกัน เป็นชุดสีที่กลมกลืนและไม่น่าเบื่อ เลือกมาจากสีที่อยู่ติดๆ กัน 3 - 5 สี จากวงจรสีไม่จืดชืด สร้างงานได้สดใสไปในอารมณ์เดียวกัน มีความเป็น เอกภาพในการออกแบบ อัตราส่วนตามชอบ แต่ว่า ถ้าในกรณีคาบเกี่ยว กันระหว่างสีร้อนและเย็นแล้วเกิดการขัดกัน ให้ใช้อัตราส่วนเดียวกับสีคู่ ตรงข้าม คือ 70 ต่อ 30 เปอร์เซ็นต์ จะช่วยให้สีดูกลมกลืนมากขึ้น

คอมพิวเตอร์กราฟิก (Computer Graphic) หน้า 10

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

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

คอมพิวเตอร์กราฟิก (Computer Graphic) หน้า 11

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

4.4 สีเขียว เป็นสีของธรรมชาติ ทาให้เกิดความสดชื่น ชุ่มชื่น ราบเรียบ สบายตา บางครั้งก็มองถึงต้นไม้ ป่าเขา ลาเนาไพร ในทางตรงกันข้ามจะ มองไปถึงการย่อยสลายของธรรมชาติ สารเคมีหรือ สารพิษ ต่าง ๆ แต่ ทั้งนี้ ทั้งนั้นก็ขึ้นอยู่กับโทนสีที่นามาผสมกัน 4.5 สีขาว เป็นสีที่นิยมใช้มากที่สุด เพราะ จะใช้กับสีไหนก็ได้ จะทาให้มองว่าเป็นสี เรียบง่าย สะอาด โล่งสบาย บริสุทธิ์ แสดงถึงความสะอาด บริสุทธิ์ เหมือนเด็ก แรกเกิด แสดงถึงความว่างเปล่า ปราศจากกิเลส ตัณหา เป็นสีอาภรณ์ ของผู้ทรงศีล ความเชื่อถือ ความดีงาม ความศรัทธา และหมายถึงการเกิด โดยที่แสงสีขาว เป็นที่กาเนิดของแสงสี ต่าง ๆ เป็นความรักและความหวัง ความห่วงใยเอื้ออาทรและเสียสละของพ่อแม่ ความอ่อนโยน จริงใจ บาง กรณีอาจหมายถึง ความอ่อนแอ ยอมแพ้ ในทางตรงกันข้ามจะมองว่าเป็น อะไรที่จืดชืด ไม่มีจุดเด่น ขาดแรงดึงดูดใจ “ฟ้าหลังฝนสว่างไสว ฉันใด คนที่ถูกบ่มเพาะและเจียระไน ย่อมมีคุณค่าและสง่างามฉันนั้นW

คอมพิวเตอร์กราฟิก (Computer Graphic) หน้า 12

4.6 สีฟ้ า แสดงถึงความสว่าง ความปลอดโปร่ง เปรียบเหมือ นท้ อ งฟ้ า เป็นอิสระ เสรี เป็นสีขององค์การสหประชาชาติ สีของเทคโนโลยีที่ก้าว ไกล พัฒ นาต่อเนื่อง เป็น สีข องความสะอาด ปลอดภัย สีข ององค์การ อาหารและยา (อย.) แสดงถึงการอนุรักษ์สิ่งแวดล้อม การใช้พลังงานอย่าง สะอาด แสดงถึงอิสรภาพ เป็นสีแห่ง ความคิดสร้างสรรค์และจินตนาการที่ ไม่มีขอบเขต ความเป็นอิสระ

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

คอมพิวเตอร์กราฟิก (Computer Graphic) หน้า 13

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

คอมพิวเตอร์กราฟิก (Computer Graphic) หน้า 14

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

คอมพิวเตอร์กราฟิก (Computer Graphic) หน้า 15

การเลื อ กรู ป แบบฟอนต์ ค วรค านึ ง ถึ ง ความง่ า ยในการอ่ า น คน ส่วนมากจะเข้าใจผิดว่า การใช้ฟอนต์สวย ๆ วัยรุ่น ๆ แปลก ๆ จะทาให้ เว็บไซต์ดูแปลกตา ในทางกลับกันกลับทาให้เกิดความลาบาก สับสนใน การเข้าชมเว็บไซต์ ดังนั้นฟอนต์ที่เลือกใช้ควรเป็นฟอนต์ที่มาตรฐาน ทุก เครื่องคอมพิวเตอร์มี การออกแบบตัวอั กษรนั้น สิ่งแรกเราจะต้ อ งรู้จัก ตัวอักษรก่อน การเรียนรู้ตัวอักษรได้นั้นต้องประกอบไปด้วย 2 สิ่งคือ ชนิด ตัวอักษร และขนาดของอักษร 6.2 ชนิดของฟอนต์ (Type Style) ชนิดของตัวอักษรหรือตัวหนังสือเป็นสิ่งแรกที่ต้องทาความรู้จัก หรือ เรียกง่าย ๆ ว่า ฟอนต์ นั่นเอง โดยจะแบ่งชนิดตัวอักษรตามการทางาน เป็น 2 ประเภทคือ อักษรภาษาอังกฤษ กับอักษรภาษาไทย 6.3 ตัวอักษรภาษาอังกฤษ เป็ น ภาษาที่ เลี่ ย งไม่ ได้ เลยในงานออกแบบกราฟิ ก เพราะจะเป็ น ภาษาพื้นฐานในการใช้งาน เมื่อเราต้องการจะออกแบบงานต่าง ๆ เราจึง ควรจะเลือกตัวอักษรภาษาอังกฤษดังต่อไปนี้ Serif เป็นตัวอักษรแบบโรมัน จุดเด่นที่สุดของตัวอักษร แบบนี้คือ ตัวอักษรไม่มีหัว ไม่มีเท้า แบบอักษรที่ให้ความรู้สึก คลาสสิก สบาย ๆ เรียบง่าย กึ่งพิธีรีตอง แต่ค่อนข้างจะเป็นทางการ ปิยะบุตร สุทธิดารา (2551) กล่าวว่าจะเป็นฟอนต์ที่นิยมมากที่สุด ทั้งนี้ ทั้งนั้นต้องควบคุมเรื่องขนาดของฟอนต์ให้มีขนาดเดียวกัน

คอมพิวเตอร์กราฟิก (Computer Graphic) หน้า 16

Ms Sans Serif เป็นฟอนต์ที่ถือได้วา่ เป็นที่นิยม ชมชอบ ทันสมัยในการออกแบบมาก ๆ จะรู้สึกเรียบง่าย สบาย ๆ ไม่เป็น ทางการเท่าไหร่ เหมาะสาหรับออกแบบเว็บไซต์บริษัท ห้างร้านฯ และ องค์กร ฯ ต่าง ๆ จะเป็นฟอนต์ที่ไม่มีหัว Script เป็ น แบบอัก ษรที่ เลีย นแบบลายมือ ตัวเขีย น ตั วอัก ษรมี ความหนา บาง เหมือนเขียนด้วยดินสอ จะทาให้เกิดความรู้สึกไม่เป็น ทางการ อิสระ เส้นสายของตัวอักษรทาให้สนุกสนาน สบาย เรียบง่าย ไร้ ขอบเขต กลุ่มเป้าหมายจะเป็นงานวัยรุ่น และงานที่เป็นศิลปะ 6.4 ตัวอักษรภาษาไทย (Thai Font) ตัวอักษรภาษาไทย อาจจะจัดวางยากกว่าตัวอักษรภาษาอังกฤษ เนื่องจากมีสระและวรรณยุกต์ ซึ่งบางครั้งก็ยุ่งยากในการจัดวางให้ลงตัว หรือดูสวยงาม แบ่งออกเป็นหลายชนิดดังนี้ แบบดังเดิมหรือฟอนต์แบบมีหัว แบบดั้งเดิม หรือแบบมีหัว เป็นแบบที่คุ้นเคยมากที่สุด จะมีมากใน ภาษาไทย เป็นรูปแบบฟอนต์ที่สาหรับเนื้อหายาว ๆ เช่นเดียวกับฟอนต์แบบ sans serif จะนิยมใช้เป็นเนื้อหา อธิบายรายละเอียดต่าง ๆ

คอมพิวเตอร์กราฟิก (Computer Graphic) หน้า 17

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

การใช้ข้อความที่เน้นให้เด่นชัด ควรจะให้พื้นสีเข้ม แล้วตัวอักษร อ่อน ๆ หรือสีขาว จะทาให้ข้อความเด่น สง่า น่าดูชมมากขึ้น

คอมพิวเตอร์กราฟิก (Computer Graphic) หน้า 18

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

คอมพิวเตอร์กราฟิก (Computer Graphic) หน้า 19

7 การได้ภาพที่ตรงตามความต้องการ มีคุณค่า มีความงามทางด้าน ศิลปะ สื่อสารให้ผู้รับสื่อและผู้ส่งสื่อได้ตรงกัน ชัดเจน สิ่งที่สาคัญที่สุดคือ “การจัดองค์ประกอบภาพ” ก็เป็นสิ่งที่สาคัญ ที่จะทาให้ภาพมีคุณค่าขึ้น ดังนั้นเราจึงมาศึกษาการจัดองค์ประกอบภาพ ซึ่งในบทนี้ จะกล่าวถึงการ จัดองค์ประกอบภาพอยู่ 10 ลักษณะคือ 7.1 ความมีเอกภาพ (Unity) เอกภาพ คือสิ่งที่ทาให้งานสื่อความหมายออกมาตามวัตถุประสงค์ที่ ชัดเจน ซึ่งงานที่ ออกแบบต้ อ งมีค วามกลมกลืน (Harmony) เป็ น พวก พ้ อ ง อั น หนึ่ ง อั น เดี ย วกั น ไม่ ท าให้ ผู้ เ ข้ า ชมรู้ สึ ก ขั ด แย้ ง ในสายตา องค์ ป ระกอบของภาพแต่ ล ะจุ ด ต้ อ งมี ค วามสั ม พั น ธ์ สอดคล้ อ ง ไปใน ทิ ศ ทางเดี ย วกั น นอกจากความสั ม พั น ธ์ กั น แล้ ว ความซ้ า และความ ต่อเนื่องของภาพ ก็เป็นปัจจัยที่สาคัญที่ทาให้ภาพเกิดความมีเอกภาพที่ดี ได้

คอมพิวเตอร์กราฟิก (Computer Graphic) หน้า 20

7.2 เสริมจุดเด่น เน้นจุดส้าคัญ (Emphasize) เมื่ อ ภาพที่ ได้มี ความเป็ นเอกภาพแล้ว องค์ ป ระกอบด้านกราฟิ ก ต่อไปคือ การสร้างหรือเสริมจุดเด่น เน้นจุดสาคัญ เพื่อทาให้งานน่าสนใจ อีกประการหนึ่งคือ การสร้างจุดสนใจให้ผู้ชมจับประเด็นความหมายของ งาน มิเช่นนั้นแล้วงานกราฟิกที่ได้ จะไม่มีเสน่ห์ โสรชัย นันทวัชรวิบูลย์ (2548) กล่าวว่าการเสริมจุดเด่น แฝงจากความเป็นเอกภาพนั้น จะทาให้ งานที่ได้ดูน่าสนใจอย่างยิ่ง 7.3 การวางจุดสนใจ (Focus Point) สิ่งแรกทุกคนกังวลใจคือ ไม่รู้ว่าจะวางจุดไหนที่คิดว่าจะเป็นจุดเด่น ที่สุด ซึ่งถ้าไม่มีประสบการณ์ และหลักการที่ดีแล้วเป็นการยากที่จะบอก ได้ว่า จุดไหนที่วางแล้วทาให้องค์ประกอบกราฟิก ดู เด่น สง่า นาสายตา ผู้ชมได้ดี

คอมพิวเตอร์กราฟิก (Computer Graphic) หน้า 21

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

ตัวอย่างการออกแบบงานกราฟิกได้ตรงหลักการวางจุดโฟกัส

คอมพิวเตอร์กราฟิก (Computer Graphic) หน้า 22

ตาแหน่ง 1 (Love DigiArt) เป็นจุดแรกที่คนเราจะเห็น โลโก้ จึง เป็นสิ่งที่นาเสนอได้ดีที่สุด ตาแหน่ง 4 (รูปกราฟิก D และ นักออกแบบ) เป็นจุดรวมสายตา ที่ บ่งบอกถึงความเป็นตัวตนของงานที่ออกแบบ ซึ่งออกแบบได้อย่างลงตัว

ตัวอย่างการออกแบบงานกราฟิกได้ตรงหลักการวางจุดโฟกัส ตาแหน่ง 2 (PRINCE Design) เป็ นจุ ดน าสายตาที่ พ ยายามสื่อ ให้ ผู้ชมเห็น โลโก้ จึงเป็นสิ่งที่นาเสนอสู่สายตาอย่างอิสระ ลงตัว ตาแหน่ ง 4 (รูป กราฟิ ก มื อ ถื อ ) เป็ น จุด รวมสายตา ที่ บ่ งบอกถึ ง ความเป็นตัวตนของงานที่ออกแบบ ซึ่งออกแบบได้อย่างมีศิลปะ และเป็น จุดเด่นอย่างยิ่ง ต าแหน่ ง l 2 l 0 l 2 l (ข้ า งล่ า ง) เป็ น จุ ด ที่ น าเสนอข้ อ มู ล รายละเอียด เพื่อเป็นองค์ประกอบงานกราฟิก ให้ครบถ้วน สมบูรณ์มาก ยิ่งขึ้น

คอมพิวเตอร์กราฟิก (Computer Graphic) หน้า 23

7.4 การวางองค์ประกอบภาพให้ดโู ดดเด่น (Isolation) การวางองค์ประกอบให้ภาพโดดเด่น จะเน้นจุดสนใจเพื่อให้ผู้ชมได้ เห็นนั้นง่าย อาจจะใช้ กฎสามส่วนในการออกแบบช่วยในการวาง องค์ประกอบให้ถูกหลักการมากยิ่งขึ้น การสร้างความแตกต่างหรือจุดเด่น เป็นเรื่องที่เข้าใจได้ไม่ยาก การมองเรื่องความสมดุล (Balance) ในการ ออกแบบ การมองที่ว่าง (Spacing) ในการออกแบบ ทุกองค์ประกอบมี จุดหมายเดียวกันคือ การผสมผสานให้งานครบองค์ ประกอบ ดูดี ลงตัว สื่อความหมายของงานได้อย่างชัดเจน กฎสามส่วน (Rule of Third) หรือ กฎจุ ด ตั ด สี่ จุ ด ก็ เป็ น องค์ ป ระกอบหนึ่ ง ที่ ว างภาพให้ ดู เด่ น สง่ า สื่ อ ความหมายของงานกราฟิกได้ดียิ่งขึ้น

ตัวอย่างการออกแบบงานกราฟิกเพื่อวางองค์ประกอบภาพให้ดูโดดเด่น ในเรื่องการวางองค์ประกอบภาพให้ดูโดดเด่น น่าสนใจ ขนาดและ สัดส่วนที่เหมาะสมก็เป็นส่วนย่อยหนึ่งที่เสริมให้งานออกแบบมีความหมาย ชัดเจน ตรงประเด็นถ้าขนาดเล็กเกินไปก็จะทาให้อ งค์ประกอบนั้นไม่ได้ สาคัญอะไร อาจจะสื่อความหมายได้ไม่ชัดเจน ถ้าขนาดใหญ่เกินไป งาน กราฟิกจะไม่ได้สัดส่วน ทาให้งานที่ได้ดูอึดอัด เกิดความสับสน “ฟ้าหลังฝนสว่างไสว ฉันใด คนที่ถูกบ่มเพาะและเจียระไน ย่อมมีคุณค่าและสง่างามฉันนั้นW

คอมพิวเตอร์กราฟิก (Computer Graphic) หน้า 24

7.5 ความสมดุล (Balance) เป็นองค์ประกอบที่สาคัญในงานออกแบบกราฟิก ส่งเสริมให้งานที่ ได้มีเอกภาพ ซึ่งความสมดุลแบ่งได้ 2 อย่างคือสมดุลที่เหมือนกันและ สมดุลที่ไม่เหมือนกัน 1. สมดุลที่เหมือนกัน 2. สมดุลที่ไม่เหมือนกัน

7.6 สร้างความเหมือนที่แตกต่าง (Contrast) ความแตกต่างเป็นตัวกาหนดความน่าสนใจหรือความโดดเด่นในงาน ได้ดี ขณะเดียวกันในการออกแบบงานโดยใช้การสร้างความแตกต่างนั้น ต้องระวัง เพราะการสร้างองค์ประกอบให้ภาพมีความแตกต่างมากเกินไป จะทาให้องค์ประกอบนั้นหลุดออกจากกรอบของงาน ทาให้ได้งานที่ไม่เป็น อันหนึ่งอันเดียวกันหรือขาดความมีเอกภาพ และองค์ประกอบนั้นจะเป็น สิ่งแปลกประหลาดในภาพมากกว่ าจะเป็นจุดที่น่าสนใจในที่สุด โสรชัย นันทวัชรวิบูลย์ (2548) กล่าวว่าการสร้างความแตกต่างด้วยสีทาให้ เกิด ความชัดเจน แต่ก็ยังมี หลายวิธีในการทาให้ภาพเกิดความแตกต่างอย่าง สะดุดตา ดังเช่น “ฟ้าหลังฝนสว่างไสว ฉันใด คนที่ถูกบ่มเพาะและเจียระไน ย่อมมีคุณค่าและสง่างามฉันนั้นW

คอมพิวเตอร์กราฟิก (Computer Graphic) หน้า 25

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

การสร้างความเหมือนที่แตกต่าง 7.7 ที่ว่างในงานออกแบบ (Spacing) ในงานออกแบบกราฟิ กหรือ งานออกแบบงาน 2 มิติ และ 3 มิ ติ นอกจากองค์ประกอบหลักที่เราได้พยายามจัดให้ลงตัวแล้ว ยังมีอีกสิ่ง หนึ่ง ที่ มีอิ ท ธิพ ลมากกั บ ภาพที่ เราออกแบบ แต่ นั ก ออกแบบจ านวนไม่ น้ อ ย มองข้ามไป นั่นคือ ที่ว่าง (space) ที่ ว่ า งที่ อยู่ ร อบ ๆ อ งค์ ป ระกอ บภ าพ จะสอดป ระสานกั บ องค์ ป ระกอบที่ อ ยู่ ภ ายในภาพ ท าให้ เกิ ด ภาพความเป็ น พื้ น ภาพ ซึ่ ง มี อิทธิพลต่อการสื่อความหมายของงานออกแบบได้

คอมพิวเตอร์กราฟิก (Computer Graphic) หน้า 26

7.7.1 ภาพและพืนภาพ (Figure & Background) การมองภาพ หนึ่ง นอกจากเราจะมองหาองค์ประกอบต่าง ๆ ที่อยู่ภายในภาพแล้ว สิ่ง สาคัญอย่างหนึ่งมีอิทธิพลต่องานคือ ความสัมพันธ์ของพื้นภาพด้วย ในการ มองภาพ สมองของเราจะสั่งการให้รับรู้ความสาคัญขององค์ประกอบใน ภาพต่าง ๆ กันไป เรามองเห็นสิ่งที่เป็นองค์ประกอบหลักที่ถูกเน้น ให้เด่น กว่ า เป็ น ตั ว งาน เป็ น ตั ว ภาพ (Figure) ส่ ว นที่ ว่ า งรอบ ภาพหรื อ องค์ประกอบที่เหลือนั้นจะกลายเป็นพื้นภาพ ไปโดยอัตโนมัติ อาจกล่าวได้ ว่า ภาพเป็นตัวหลัก พื้นภาพเป็นรอง 7.7.2 พืนที่ของภาพและพืนภาพ (Positive & Negative Space) งานออกแบบกราฟิกที่ดีนั้นจะต้องมีความสัมพันธ์ของภาพและพื้นภาพที่ดี พื้นภาพในงานเป็นเสมือนองค์ประกอบที่ส่งเสริมตัวภาพหรืองานหลักให้ดู โดดเด่น มากกว่า ซึ่งการส่งเสริมกันนั้นก็ขึ้นอยู่กับขนาดและรูปร่างของ พื้ น ที่ ว่ า ง ๆ รอบ ๆ ภาพ หรื อ อาจเรี ย กว่ า (Positive & Negative Space) เป็นสาคัญ

คอมพิวเตอร์กราฟิก (Computer Graphic) หน้า 27

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