หน่วยที่ 5.

1. หน่วยที่ 5 การตกแต่งสีพืน้
เรื่อง การใช้สีและเทคนิคต่างๆเกี่ยวกับสี

2. การใส่สีให้ขอบภาพ

3. อยากลองออกแบบเสื้อกันไหม?

4. เสื้อพิมพ์ลาย

5. เสื้อเปล่า + ลายที่ชอบ = เสื้อไม่ซ้าใคร

6. เทคนิคการเติมสีภาพ

7. ทฤษฎีสี

8. รูปด้านล่างวงล้อความสัมพันธ์ของสี ซึ่งบรรจุสีที่นิยมใช้ในเว็บไซต์
ไว้ 20 สี เหมาะสา หรับผู้ที่กา ลังเลือกสีที่จะใช้ในการออกแบบงานกราฟิก
ต่างๆ อยู่เราสามารถใช้ความสัมพันธ์ของวงล้อขอสีนี้ให้เกิดประโยชน์ได้
อย่างมากมาย เช่น ต้องการออกแบบให้เว็บไซต์รู้สึกตัดกันโดยสิน้เชงิ
เราอาจใช้ชุดสี 4 สีที่ทา มุมกัน 90 องศา เช่นดังตัวอย่างถ้าเราเลือกชุดสี
1 , 6 , 11 , 16 สีที่ได้จะตัดกันชัดเจน ถ้าต้องการให้เว็บไซต์ดูกลมกลืนก็
อาจเลือกชุดสีใกล้เคียงกันก็ได้เช่น เลือกชุดสีเขียวเบอร์ 8 , 9 , 10 , 11
ก็จะได้สีในโทนสีเขียวสว่าง

10. ด้านล่างเป็นเบอร์สีที่ใช้แบ่งตามมาตราฐานการอ้างอิงของสี
• Hexadecimal - Browser Color Codes
1 - #FF0000 6 - #FFFF00 11 - #009900 16 - #0000FF
2 - #FF3300 7 - #CCFF00 12 - #006633 17 - #3300CC
3 - #FF6600 8 - #99CC00 13 - #006666 18 - #660099
4 - #FF9900 9 - #66CC00 14 - #003399 19 - #990066
5 - #FFCC00 10 - #339900 15 - #0033CC 20 - #CC0033

11. Red, Green and Blue Values
12 - R:000 G:102 B:051
13 - R:000 G:102 B:102
14 - R:000 G:051 B:153
15 - R:000 G:051 B:204
16 - R:000 G:000 B:255
17 - R:051 G:000 B:204
11 - R:000 G:153 B:000
18 - R:102 G:000 B:153
19 - R:153 G:000 B:102
20 - R:204 G:00 B:051
1 - R:255 G:000 B:000
2 - R:255 G:051 B:000
3 - R:255 G:102 B:000
4 - R:255 G:153 B:000
5 - R:255 G:204 B:000
6 - R:255 G:255 B:000
7 - R:204 G:255 B:000
8 - R:153 G:204 B:000
9 - R:102 G:204 B:000
10 - R:051 G:204 B:000

12. จิตวิทยาเกี่ยวกับสี
• สีนัน้มีความสาคัญอย่างยิ่งในการออกแบบ
เว็บไซต์ ในการทางานกราฟิกต่างๆ การเลือกสี
ให้เข้ากับเนือ้หาของงาน จะทาให้งานทที่า
ออกมามีความน่าเชื่อถือยิ่งขึน้ และยังส่งผล
อย่างมากกับความสวยงามของงานที่ออกมา
ด้วย

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

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

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

17. สีที่ใช้ในงานด้านกราฟิกที่ควรรู้ มี 4 ระบบ คือ
• 1. RGB
• 2. CMYK
• 3. HSB
• 4. Grayscale

18. โหมดสี RGB คืออะไร
• เกิดจากการผสมสีของแม่สีสามสีคือ แดง เขียวและน้า
เงิน
• เมื่อนามาผสมผสานกันทา ให้เกิดสีต่าง ๆ บน
จอคอมพิวเตอร์มากถึง 16.7 ล้านสี ซึ่งใกล้เคียงกับสีที่
ตาเรามองเห็นปกติ
• สีของแสงประเภทนี้ ได้แก่ สีแสงในจอมอนิเตอร์
จอโทรทัศน์ กล้องถ่ายรูป ฯลฯ

19. โหมดสี CMYK คืออะไร
• เป็นระบบสีที่ใช้กับเครื่องพิมพ์ที่พิมพ์ออกทาง
กระดาษ ซึ่งประกอบด้วย สีหลัก 4 สี คือ สีฟ้า
(Cyan), สีม่วงแดง (Magenta), สีเหลือง (Yellow) และ
สีดา (Black)
• เป็นโหมดสีที่ใช้ในงานสิ่งพิมพ์ที่ต้องการความ
ละเอียดสูงและได้สีที่ไม่ผิดเพี้ยน

20. โหมดสี CMYK คืออะไร
• หลักการเกิดสีของระบบนี้ คือ หมึกสีหนึ่งจะดูดกลืนแสง
จากสีหนึ่งแล้วสะท้อนกลับออกมาเป็นสีต่าง ๆ เช่น สีฟ้า
ดูดกลืนแสงของสีม่วงแล้วสะท้อนออกมาเป็นสีน้าเงิน ซึ่ง
จะสังเกตได้ว่าสีที่สะท้อนออกมาจะเป็นสีหลัก ของระบบ
RGB

21. ระบบสีในคอมพิวเตอร์

22. HSB Color คืออะไร
• H = Hue = ค่าสีจากวงจรสีที่เกิดจากการแยกสเปคตมัของ
แสง คือ สีต่าง ๆ ที่สะท้อนออกมาจากวัตถุแล้วเข้าสู่สายตา
ของเรา ซึ่งมักจะเรียกสีตามชื่อสี เช่น สีเขียว
• S = Saturation = ค่าความอ่มิตัวของสี คือ ความสดของ
สี โดยค่าความสดของสีจะเริ่มที่ 0 ถึง 100 ถ้ากา หนด
Saturation ที่ 0 สีจะมีความสดน้อย แต่ถ้ากา หนดที่100
สีจะมีความสดมาก
• B = Brightness = ค่าความสว่างของสี คือ ระดับความ
สว่างของสี โดยค่าความสว่างของสีจะเริ่มที่ 0 ถึง 100 ถ้า
กา หนดที่ 0 ความสว่างจะน้อยซ่งึจะเป็นสีดา แต่ถ้ากา หนดที่
100 สีจะมีความสว่างมากที่สุด

23. HSB Color คืออะไร

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

25. Foreground VS Background
• สีของ Foreground จะถูกใช้กับเครื่องมือวาดภาพหรือลงสี
• สี Background จะเป็นสีของพืน้หลัง เมื่อใช้ Eraser ลบ
จะได้สีตามสี Background

26. งานชิ้นที่ 1 ออกแบบสีของโลโก้
• ให้นักเรียนลงสีพืน้หลังและสร้างเส้นขอบให้แก่วัตถขุองภาพ
• กา หนดสีตามความรู้เรื่องทฤษฎีสี
• เซฟงานชื่อ ชั้น_เลขที่_ชื่อ_Unit5_LOGO
• เช่น 110_55_บังอร_Unit5_LOGO
• นามสกุล JPEG หรือ PNG
• ส่งไฟล์งานเข้าเครื่องครู ตามหมายเลข ip ที่กา หนด
• หากใครส่งไม่ได้ ให้ยกมือ ครูจะเดินไปตรวจที่เครื่อง

27. งานชิ้นที่ 2 ออกแบบเสื้อ
• ให้นักเรียนออกแบบเสือ้ โดยใช้เทคนิค Clipping Mask ในการ
สร้างลวดลายของเสือ้ (สามารถค้นหาลวดลายที่ชอบ จาก
อินเตอร์เน็ต)
• ตัดต่อภาพ แปะเป็นลายเสือ้
• พิมพ์ข้อความ และใส่ขอบสีให้ข้อความ
• เซฟไฟล์ชื่อ ชั้น_เลขที่_ชื่อ_Unit5_Shirt
• เช่น 110_55_บังอร_Unit5_Shirt
• นามสกุล JPEG หรือ PNG
• ส่งไฟล์งานเข้าเครื่องครู ตามหมายเลข ip ที่กา หนด
• หากใครส่งไม่ได้ ให้ยกมือ ครูจะเดินไปตรวจที่เครื่อง

28. พัฒนาแฟ้มสะสมผลงานอิเล็กทรอนิกส์
• อัพโหลดงานลงในอัลบัม้ภาพ facebook ตนเอง และกลุ่มรายวิชา
• งานชิน้ที่ 13 เรื่องการลงสีและสร้างเส้นขอบบ (ออกแบบโลโก้)
• วิธีทา สร้าง Selection > เลือกสี> คลิก Paint Bucket >คลิก
เติมสีลงไป >สร้าง Selection เลือกขอบเขตภาพ >เลือกคาสงั่ Edit >
Stoke > เลือกสีของเส้นขอบและความหนา
• งานชิน้ที่ 14 เรื่อง การใช้ Clipping Mask
• วิธีทา เปิดไฟล์ภาพ และเลือกภาพส่วนที่จะทา Clipping Mask >
> กดคีย์ Ctrl + C และ Ctrl + V เพื่อคัดลอกภาพ
> นารูปภาพที่ต้องการทาเป็นลาย นามาวางทับ
>คลิกขวาเลเยอร์ เลือก Clipping Mask

29. ตัวอย่างการนาไปใช้

30. Time Up!
1. ปิดคอมพิวเตอร์
2. วางเมาส์ คีย์บอร์ด ให้เรียบร้อย
3. เลื่อนเก้าอเี้ข้าใต้โต๊ะ
4. ยืนหลังเก้าอี้
5. นิ่ง

31. Bye Bye