หนวยการเรี ยนรูที่ ๓
คอมพิวเตอรกราฟ ก (Computer Graphic)
1. ทฤษฏีสี (COLOR THEORY)
สี (Color) นับว่ามีความสําคัญมากในการออกแบบเว็บไซต์ เป็นสิÉ งทีÉมีอิทธิพลในการ
ดึงดูดความสนใจ กําหนดบรรยากาศและความรู้สึกโดยรวม เราสามารถใช้สีได้กับทุกองค์ประกอบ
ของเว็บเพจ  ตัÊงแต่ตัวอักษร รูปภาพ สีพืÊนหลัง สีพืÊนหลังรูปภาพ โสรชัย นันทวัชรวิบูลย์ (2548)
กล่าวไว้ว่าการเลือกใช้สีอย่างเหมาะสมจะช่วยให้สามารถสืÉ อสารเนืÊอหา และเป้ าหมายของเว็บไซต์
ได้อย่างชัดเจน แต่ในทางตรงกันข้าม ถ้าเลือกใช้สีไม่เหมาะสมจะทําให้รบกวนสายตาของผู้อ่านอีก
ทัÊงทําให้มีอิทธิพลต่อการตัดสินใจเข้าเยีÉยมชมอีกครัÊงการเลือกใช้สีทีÉเหมาะสมสืÉอความหมายชัดเจน
ตลอดจนเข้าใจทฤษฏีสี จะสร้างความเป็นเอกลักษณ์ ทีÉโดดเด่น กลมกลืนอย่างลงตัว
           
รูปภาพ 3.1 เว็บ www.bombaysapphire.com (วรรณะเย็น) และเว็บ www.designsbymanaf.com (วรรณะรอน)    กิ ตติ์กาญจน  ปฏิพันธ  (ศษ.ม.เทคโนโลยีและสื่อสารฯ)
หลักการออกแบบและพัฒนาเว็บ : ---------------->> หนวยการเรียนรูที่ 3 คอมพิวเตอรกราฟก 59
2. วรรณะสี
สีคือลักษณะของแสงทีÉปรากฏแก่ สายตาให้เห็นเป็ นสีในทางวิทยาศาสตร์ให้คําจํากัด
ความของสีว่า เป็นคลืÉนแสงหรื อความเข้มของแสงทีÉสายตาสามารถมองเห็น ธวัชชัย ศรีสุเทพ        
( 2547)กล่าวไว้ว่าในทางศิลปะ สีคือทัศนะธาตุอย่างหนึÉ งทีÉเป็นองค์ประกอบสําคัญของงานศิลปะ
และใช้ในการสร้างงานศิลปะโดยจะทําให้ผลงานมีความสวยงาม ช่วยสร้างบรรยากาศ มีความ
สมจริง เด่นชัดและน่าสนใจมาก ขณะทีÉ โสรชัย นันทวัชรวิบูลย์ (2548)กล่าวว่าสีเป็นองค์ประกอบ
สําคัญอย่างหนึÉ งของงานศิลปะและเป็นองค์ประกอบทีÉมีอิทธิพลต่อความรู้สึก อารมณ์ และจิตใจ
ได้มากกว่าองค์ประกอบอืÉน ๆ ในชีวิตของมนุษย์มีความเกีÉยวข้องสัมพันธ์กับสีต่าง ๆ โดยบอก
ประโยชน์ของสีได้ดังนีÊ
       1. ใช้ในการจําแนกสิÉ งต่าง ๆ เพืÉอให้เห็นชัดเจน
       2. ใช้ในการจัดองค์ประกอบของสิÉ งต่าง ๆเพืÉอให้เกิดความสวยงาม เช่น การแต่งกาย
       3. ใช้ในการจัดกลุ่ม พวก คณะด้วยการใช้สีต่าง ๆ เช่น คณะสีเครืÉองแบบต่าง ๆ
       4. ใช้ในการสืÉอความหมาย เป็นสัญลักษณ์หรือใช้บอกเล่าเรืÉ องราว
       5. ใช้ในการสร้างสรรค์งานศิลปะ เพืÉอให้เกิดความสวยงามและน่าสนใจ
       6. เป็นองค์ประกอบในการมองเห็นสิÉ งต่าง ๆ ของมนุษย์  
สีนัÊนเป็นองค์ประกอบทีÉ สําคัญในการออกแบบ แต่ละคนชอบสีไม่เหมือนกัน ถาม
ความเห็นแต่ละคนก็ออกมาไม่เหมือนกัน ในขณะทีÉเราไม่มีทางทีÉจะรวบรวมความชอบของทุกคน
ได้ แต่เราก็มีหลักการนําสีไปใช้  และการประยุกต์ใช้สีวรรณะต่าง ๆ การทีÉเรารู้และเข้าใจเกีÉยวกับ
เรืÉ องสีเหล่านีÊทําให้เราสามารถเลือกสีให้เหมาะกับงานต่างๆโดยเฉพาะการนําไปออกแบบเว็บอย่าง
เหมาะสม
พอเราเข้าใจเกีÉยวกับสีแล้วเราก็สามารถสร้างและออกแบบสิÉ งต่างๆด้วยการใส่อารมณ์จาก
สีได้สิÉ งทีÉจะแนะนําต่อไปนีÊ จะเป็นการใช้สีวรรณะต่าง ๆ  ซึÉ งจะเน้นการนําไปใช้เกีÉยวกับการ
ออกแบบเว็บ แต่ก็สามารถนําไปใช้กับการออกแบบงานอืÉน ๆ ได้เหมือนกันเทคนิคและรายละเอียด
อาจจะแตกต่างกัน อยู่ทีÉจุดประสงค์และประเภทของงาน แต่ความเหมือนด้านทฤษฏีสี ใช้พืÊนฐานตัว
เดียวกัน    กิ ตติ์กาญจน  ปฏิพันธ  (ศษ.ม.เทคโนโลยีและสื่อสารฯ)
หลักการออกแบบและพัฒนาเว็บ : ---------------->> หนวยการเรี ยนรูที่ 3 คอมพิวเตอรกราฟก 60
การเลือกใช้สีกับงานออกแบบเว็บไซต์นัÊน นักออกแบบจะต้องรู้ว่ามีจุดมุ่งหมายใด ทีÉจะ
สร้างความสนใจความเร้าใจต่อผู้ชม  เพืÉอให้เข้าถึงจุดหมาย หลักของการใช้สีมีวรรณะต่าง ๆ ดังนีÊ
2.1การใชสีวรรณะเดียว
ความหมายของสีวรรณะเดียว (Tone)คือกลุ่มสีทีÉแบ่งออกเป็นวงล้อสีเป็น 2วรรณะ คือ
2.2.1 วรรณะรอน (Warm Tone) ซึÉ งประกอบด้วย สีเหลือง สีส้ม สีแดง สีม่วง ขณะทีÉ    
โสรชัย  นันทวัชรวิบูลย์ (2548)กล่าวว่า สีวรรณะร้อนจะให้อิทธิพล ต่อความรู้สึกเร้าใจ กระฉับ
กระเฉงเร่ าร้อน รุนแรง มีพลัง
2.2.2วรรณะรอนวรรณะเย็น(Cool Tone) ประกอบด้วย สีเหลือง สีเขียว สีนํ Êาเงิน สีม่วง สี
เหล่านีÊดูเย็นตาให้ความรู้สึก สงบ มีชีวิต ชีวา มีความหวัง (สีเหลืองกับสีม่วงได้ทัÊงสองวรรณะ)
รูปภาพ 3.3  www.teedin.com และ www.enviga.com
การใช้สีแต่ละครัÊ งควรใช้สีวรรณะเดียวในภาพทัÊงหมดเพราะจะทําให้ภาพมีความเป็น
อันหนึÉ งอันเดียวกัน (มีเอกภาพ) กลมกลืน มีแรงจูงใจให้คล้อยตามได้มาก
รูปภาพ 3.2
เว็บ www.central.com    กิ ตติ์กาญจน  ปฏิพันธ  (ศษ.ม.เทคโนโลยีและสื่อสารฯ)
หลักการออกแบบและพัฒนาเว็บ : ---------------->> หนวยการเรี ยนรูที่ 3 คอมพิวเตอรกราฟก 61
2.2การใชสีตางวรรณะ
โดยทัÉ วไปจะใช้อัตราส่ วน 80% ต่อ 20% ของวรรณะสี คือ ถ้าใช้สีวรรณะร้อน 80% สี
วรรณะเย็น 20% เป็นต้น ซึÉ งการใช้แบบนีÊสร้างจุดเด่น จุดสนใจของผู้ชม ไม่ควรใช้อัตราส่ วนทีÉ
เท่ากันเพราะจะทําให้ไม่มีสีใดเป็นจุดเด่น ไม่น่าสนใจ
รูปภาพ 3.4 www.sony.com  เปนการออกแบบสีตางวรรณะ
2.3การใชสีตรงกันขาม
สีตรงข้ามจะทําให้มีความรู้สึกตัดกันรุนแรง แตกหักสร้างความเด่นและเร้าใจได้มากแต่
หากใช้ไม่ถูกหลัก หรือไม่เหมาะสมหรื อใช้จํานวนสีมากจนเกินไป ก็จะทําให้ความรู้สึกพร่ ามัว
ขัดแย้งสายตาควรใช้สีตรงข้าม ในอัตราส่ วน 80%ต่อ20% หรือหากมีพืÊนทีÉเท่ากันทีÉจําเป็นต้องใช้
ควรนําสีขาว หรือสีดํา เข้ามาเสริมเพืÉอตัดเส้นให้แยกออกจากกันคือการลดความสดของสีตรงข้าม
รูปภาพ 3.5 เว็บที่มีการออกแบบสีตางวรรณะ    กิ ตติ์กาญจน  ปฏิพันธ  (ศษ.ม.เทคโนโลยีและสื่อสารฯ)
หลักการออกแบบและพัฒนาเว็บ : ---------------->> หนวยการเรี ยนรูที่ 3 คอมพิวเตอรกราฟก 62
3. การเลือกใชสีเพื่อการออกแบบเว็บ
งานออกแบบเว็บไซต์แต่ละชิÊนทีÉเราออกแบบออกมาสวยงามโดดเด่น น่าสนใจไม่ได้อาศัย
แค่เฉพาะ "ฝี มือ" ในการออกแบบ เท่านัÊน ประสบการณ์ในการออกแบบและการเลือกใช้สีคือ
คําตอบทีÉช่วยเสริมให้เว็บไซต์ดูเด่นสง่า สะดุดตา น่าชืÉนชม ขึÊนมาได้ แม้หลักการออกแบบจะเป็น
แค่พืÊนฐานเรียบๆ แต่การเลือกใช้ สี อย่างเหมาะสมก็ช่วยให้งานประสบความสําเร็จตามเป้ าหมายได้
                                               
แม่สี   ในวงการศิลปะจะมีอยู่ด้วยกัน 3 สี คือ นํ Êาเงิน เหลือง แดงซึÉ งเวลาผสมสี จะนึกออก
อย่างแรกเลยคือ RGB สีอืÉนทีÉอยู่ระหว่างสีทัÊง 3 สีจะเกิดจากการผสมกันของแม่สีทัÊง 3 สี โดยแบ่งสี
ออกเป็นสองวรรณะคือ วรรณะร้อน และวรรณะเย็น
                                               
3.1การเลือกใชชุดสีออนไปหาเขม(ตามน้ําหนักของสี)
คือสีหลักหนึÉงสีและลดความเข้ม ความอ่อน ของสี สีชุดนีÊจะทําให้เกิดความรู้สึกไม่รุนแรง
วู่วาม ทําให้รู้สึกอ่อนโยน คลาสสิก แต่อีกมุมหนึÉงจะเป็นชุดสีไม่ค่อยมีมิติในการนําไปใช้ออกแบบ
รูปภาพ 3.8
ภาพชุดสีออนไปหาเขม
รูปภาพ 3.6
วงลอสี (รอน/เย็น)
รูปภาพ 3.7
แมสี น้ําเงิน แดง เหลือง    กิ ตติ์กาญจน  ปฏิพันธ  (ศษ.ม.เทคโนโลยีและสื่อสารฯ)
หลักการออกแบบและพัฒนาเว็บ : ---------------->> หนวยการเรี ยนรูที่ 3 คอมพิวเตอรกราฟก 63
3.2ชุดสีคูตรงขาม
เป็นสีทีÉอยู่ตรงข้ามกันสุดๆ ในวงจรสีให้ความรู้สึกตืÉนเต้นเร้าใจ หักดิบ ถ้าไม่แน่จริงนัก
ออกแบบจะไม่กล้าใช้สีชุดนีÊเพราะ จะเป็นการเบรคความเข้มของทัÊงสองสีด้วยสีขาวหรือสีดํา หรือ
ถ้าไม่เบรคก็จะใช้สีทัÊงสองสีในอัตราส่ วน70 ต่อ 30 หรือ 80 ต่อ 20เปอร์เซ็นต์ในการออกแบบ
3.3ชุดสีใกลเคียงกัน
เป็นชุดสีทีÉกลมกลืนและไม่น่าเบืÉอเลือกมาจากสีทีÉอยู่ติดๆ กัน 3 -5 สี จากวงจรสีไม่จืดชืด
สร้างงานได้สดใสไปในอารมณ์เดียวกันมีความเป็นเอกภาพในการออกแบบ อัตราส่ วนตามชอบ
แต่ว่าถ้าในกรณีคาบเกีÉยวกันระหว่างสีร้อนและเย็นแล้วเกิดการขัดกันให้ใช้อัตราส่ วนเดียวกับสีคู่
ตรงข้าม คือ 70 ต่อ 30เปอร์เซ็นต์จะช่วยให้สีดูกลมกลืนมากขึÊน
                                                       
4. อารมณและความหมายของสี
การเลือกใช้สีนัÊนมีอิทธิพลอย่างมากต่อภาพรวมของเว็บไซต์ เนืÉองจากสีแต่ละสีจะมีผลต่อ
อารมณ์และความรู้สึกของผู้ทีÉเข้ามาใช้บริการเว็บไซต์ ดังรายละเอียดต่อไปนีÊ
4.1 สีแดงจะทําให้รู้สึกถึงพลังทีÉเข้มแข็ง ตืÉนเต้น เร้าใจ เร่ าร้อน มีความอบอุ่น ในทางตรงกันข้ามจะ
ทําให้ก้าวร้าว รุนแรง แต่อีกมุมหนึÉ งคนจีนก็นําสีแดงมาออกแบบเพราะเชืÉอว่าเป็นสีมงคล การนําสี
อืÉนมาผสมจะทําให้ลดความร้อนแรงไปบ้างในทางจราจรสีแดงเป็นเครืÉ องหมายประเภทห้ามแสดง
ถึงสิÉ งทีÉเป็นอันตราย
                     
รูปภาพ 3.9
ชุดสีที่ใกลเคียงกัน
รูปภาพ 3.10
เว็บ www.central.com
ออกแบบโดยใชสีแดง     กิ ตติ์กาญจน  ปฏิพันธ  (ศษ.ม.เทคโนโลยีและสื่อสารฯ)
หลักการออกแบบและพัฒนาเว็บ : ---------------->> หนวยการเรี ยนรูที่ 3 คอมพิวเตอรกราฟก 64
4.2 สีเหลือง เป็นสีทีÉให้อารมณ์สดใส ปลอดโปร่ ง ให้ความหวัง ความทันสมัย สีเหลืองจะดึงดูด
สายตาได้ดีและมองเห็นได้แต่ไกล การออกแบบถ้าใช้สีนีÊสีเดียวจะไม่เหมาะเท่าไหร่ เพราะจะทําให้
จืดชืด ควรจะใช้สีอืÉนมาช่วยขับและสนับสนุนให้ดูโดดเด่น
                                       
4.3 สีน้ําเงิน  จะให้ความหมายแห่งความสงบเงียบ สุขุม เยือกเย็น รอบคอบ อารมณ์หรูหรา มีระดับ
ถ้าเป็นผู้ชายจะทําให้มองถึงความสุภาพอ่อนโยนหนักแน่นน่าเชืÉอถือในมุมตรงกันข้ามทําให้ดูเศร้า
สร้อย  สิÊนหวัง เฉืÉอยชา โดยเฉพาะการนําสีนํ Êาเงิน เทา ฟ้ า มาผสมเข้าด้วยกัน
                                     
4.4 สีเขียวเป็นสีของธรรมชาติ ทําให้เกิดความสดชืÉน ชุ่มชืÉน ราบเรียบ สบายตา บางครัÊ งก็มองถึง
ต้นไม้ ป่ าเขา ลําเนาไพร ในทางตรงกันข้ามจะมองไปถึงการย่อยสลายของธรรมชาติ  สารเคมีหรื อ
สารพิษ ต่าง ๆ แต่ทัÊงนีÊ ทัÊงนัÊนก็ขึÊนอยู่กับโทนสีทีÉนํามาผสมกัน
                               
รูปภาพ 3.11
เว็บที่ออกแบบโดยใชสีเหลือง
ซึ่งบงบอกถึงความสวางไสว
          รูปภาพ 3.12 เว็บที่ออกแบบโดยใชสีน้ํา
เงิน ซึ่งบงบอกถึงความสุขุม นาเชื่อถือ
         รูปภาพ 3.13  เว็บที่ออกแบบโดย
ใชสีเขียวซึ่งบงบอกถึงความสดชื่น    กิ ตติ์กาญจน  ปฏิพันธ  (ศษ.ม.เทคโนโลยีและสื่อสารฯ)
หลักการออกแบบและพัฒนาเว็บ : ---------------->> หนวยการเรี ยนรูที่ 3 คอมพิวเตอรกราฟก 65
4.5 สีขาว เป็นสีทีÉนิยมใช้มากทีÉสุ ด เพราะจะใช้กับสีไหนก็ได้ จะทําให้มองว่าเป็นสีเรียบง่ าย
สะอาด โล่งสบาย บริสุทธิÍ  แสดงถึงความสะอาด บริสุทธิÍเหมือนเด็กแรกเกิด แสดงถึงความว่าง
เปล่า ปราศจากกิเลส ตัณหา เป็นสีอาภรณ์ของผู้ทรงศีลความเชืÉอถือ ความดีงาม ความศรัทธา และ
หมายถึงการเกิดโดยทีÉแสงสีขาว เป็นทีÉกําเนิดของแสงสีต่าง ๆ เป็นความรักและความหวัง ความ
ห่วงใยเอืÊออาทรและเสียสละของพ่อแม่ ความอ่อนโยน จริงใจ บางกรณีอาจหมายถึง ความอ่อนแอ
ยอมแพ้ในทางตรงกันข้ามจะมองว่าเป็นอะไรทีÉจืดชืด ไม่มีจุดเด่น ขาดแรงดึงดูดใจ
                                 
4.6 สีฟาแสดงถึงความสว่าง ความปลอดโปร่ ง เปรียบเหมือนท้องฟ้ า เป็นอิสระ เสรีเป็นสีของ
องค์การสหประชาชาติ  สีของเทคโนโลยีทีÉ ก้าวไกล พัฒนาต่ อเนืÉ อง  เป็นสีของความสะอาด
ปลอดภัยสีขององค์การอาหารและยา (อย.) แสดงถึงการอนุรักษ์สิÉ งแวดล้อม การใช้พลังงานอย่าง
สะอาด แสดงถึงอิสรภาพ เป็นสีแห่งความคิดสร้างสรรค์และจินตนาการทีÉไม่มีขอบเขต
รูปภาพ 3.15 เว็บที่ออกแบบโดยใชสีฟา ซึ่งบงบอกถึงเทคโนโลยีและความเปนอิสระ
     รูปภาพ 3.14  เว็บที่ออกแบบ
โดยใชสีขาว ซึ่งบงบอกถึงความ
เรียบงาย สบาย ๆ     กิ ตติ์กาญจน  ปฏิพันธ  (ศษ.ม.เทคโนโลยีและสื่อสารฯ)
หลักการออกแบบและพัฒนาเว็บ : ---------------->> หนวยการเรี ยนรูที่ 3 คอมพิวเตอรกราฟก 66
5. ประโยชนของสีในการออกแบบเว็บ
สีเป็นเครืÉ องมือเอนกประสงค์อย่างหนึÉ งทีÉมีความสําคัญมากในการออกแบบเว็บเนืÉองจากสี
สามารถสืÉ อถึงความรู้สึกและอารมณ์ และยังช่วยสร้างความสัมพันธ์ระหว่างสถานทีÉกับเวลาอีกด้วย
ธวัชชัย  ศรีสุเทพ(2547)  กล่าวว่าสีเป็นปัจจัยสําคัญอย่างหนึÉ งทีÉจะช่วยเสริ มสร้างความหมายของ
องค์ประกอบของเว็บได้เป็นอย่างดี ซึÉงสามารถจําแนกประโยชน์ของสีได้ดังนีÊ
1. สีสามารถชักนําสายตาผู้อ่านให้ไปยังทุกบริเวณในหน้าเว็บ ผู้อ่านจะมีการเชืÉ อมโยง
ความรู้สึกกับบริเวณของสีในรูปแบบทีÉคาดหวังได้ การเลือกเฉดสีและตําแหน่งของสีอย่างรอบคอบ
ในหน้าเว็บไซต์สามารถนําทางสายตาให้ผู้อ่านติดตามเนืÊอหาได้เป็นอย่างดี
2. สีช่ วยเชืÉอมโยงบริเวณทีÉได้รับการออกแบบเข้าด้วยกัน ทําให้ผู้อ่านจะมีความรู้สึกว่า
บริ เวณทีÉมีสีเดียวกันจะมีความสําคัญเท่ากัน การเชืÉอมโยงแบบนีÊจะช่ วยจัดกลุ่ มของข้อมูลทีÉมี
ความสัมพันธ์อย่างไม่เด่นชัดเข้าด้วยกัน
3. สีสามารถช่วยดึงดูดความสนใจของผู้อ่าน นําสายตาผู้อ่านให้มองไปยังสีทีÉมีลักษณะเด่น
หรือผิดปกติเสมอ การออกแบบเว็บไซต์ด้วยการเลือกใช้สีอย่างรอบคอบ ไม่เพียงจะกระตุ้นความ
สนใจของผู้อ่านเท่านัÊน แต่ยังช่วยดึงดูดผู้ชมให้เข้าไปอยู่ในเว็บไซต์ได้นานยิÉงขึÊน
4. สีช่วยสร้างระเบียบให้กับข้อความต่าง ๆ เช่นการใช้สีแยกระหว่างหัวข้อกับเนืÊอเรืÉอง
หรือสร้างความแตกต่างให้กับข้อความบางส่ วน หรือบางทีก็ใช้เตือนเช่น สีแดงใช้สําหรับคําเตือน
กฎจราจรหรือสีเทาใช้สําหรับเป็นทางเลือก
5. สีสามารถสร้างอารมณ์โดยรวมของเว็บ และกระตุ้นความรู้สึกตอบสนองจากผู้ชมได้
นอกเหนือจากความรู้สึกทีÉได้รับจากสีตามหลักจิตวิทยาแล้วผู้ชมยังอาจมีอารมณ์และความรู้สึก