Color

516 views
394 views

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
516
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Color

  1. 1. สีเปนเรื่องสวนบุคคลซึ่งเปนสิ่งที่สะทอนจากความชอบ และไมชอบของปจเจกที่มีตอสีนั้นเปนเรื่องกับจิตวิทยา เปนสัญลักษณ และความหมาย
  2. 2. สีปฐมภูมิ (Primary Color) สีน้ําเงิน, สีเหลือง, สีแดง
  3. 3. สีทุติยภูมิ (Secondary Color) สีเขียว, สีมวง, สีสม
  4. 4. จิตวิทยาของสีเปนการศึกษาและวิเคราะห เกี่ยวกับอารมณความรูสึกและผลกระทบตอ พฤติกรรมของบุคคลที่มีตอสี เจาของเว็บ พาณิชยอิเล็กทรอนิกสตองการรูวาสีไหนที่จะ กระตุนพฤติกรรมการซื้อของกลุมลูกคา จิตวิทยาของสีเปนสิ่งที่สําคัญในแวดวงธุรกิจ ในหลาย ๆ วัฒนธรรมมีความรูสึกตอสีที่ แตกตางกัน เชนในวัฒนธรรมตะวันตกเจาสาว จะแตชุดสีขาวเพื่อแสดงถึงความบริสุทธิ์และ สดใส แตสีขาวในวัฒนธรรมจีนกลับหมายถึง ความโศกเศรา จิตวิทยาของสี (Color psychology)
  5. 5. สีแดง สีแดงเปนสีที่สงผลกระตุนฮอรโมนอาเดร็น นาลินและความดันโลหิต นอกจากนั้นสีแดงยังชวย เพิ่มความสามารถในกระบวนการสันดาป (Metabolism) ของมนุษยอีกดวย สีแดงสื่อถึงความตื่นเตน,ความมั่ง คั่ง,อันตราย และความรัก สีแดงที่มีโทนสีเขมเชนสีแดง แกมมวง (burgundy) และสีเลือดหมู (maroon) มีพลัง ในการปลดปลอยอารมณความรูสึกที่เกี่ยวกับความรัก สีแดงออกน้ําตาล (brownish) เปนตัวแทนของฤดูใบไม รวงและฤดูเก็บเกี่ยว จิตวิทยาของสี (Color psychology)
  6. 6. สีส้ม เหมือนสีแดงสีสมเปนสีที่ทรง พลัง แตอาจจะไมดุเดือดเทากับสีแดง สี สมสามารถสื่อถึงความสุข, แสงแดด, ความกระตือรือรนและความคิด สรางสรรค นอกจากนั้นสีสมยังกระตุนให เกิดความอยากอาหาร สีสมจึงมักถูก นําไปใชในงานออกแบบที่เกี่ยวของกับ อาหาร จิตวิทยาของสี (Color psychology)
  7. 7. สีเหลือง สีเหลืองเปนสีที่สามารถมองเห็น ไดอยางชัดเจน เพราะสีเหลืองเปนสีที่มี ความสวางสูง ดังนั้นเราจึงเห็นการใชสี เหลืองไดจากรถเท็กซี่ และปายเตือนตาง ๆ สีเหลืองใหความรูสึกสนุกสานและสี่ถึง พลังงาน เครื่องดื่มที่ใหพลังงานอยาง Gatorade จึงใชสีเหลืองและสีเหลืองเขียว บนบรรจุภัณฑ จิตวิทยาของสี (Color psychology)
  8. 8. สีเขียว สีเขียวมีความเกี่ยวของกับธรรมชาติ เปน สัญลักษณสื่อถึงการเจริญเติบโต, ความสดชื่นและ ความหวัง สีเขียวเปนสีที่มองแลวสบายตา นัก ออกแบบหลายทานใชสีเขียวเพื่อดึงดูดความรูสึกที่ เกี่ยวกับธรรมชาติของผูชม สีเขียวเปนสีที่สามารถ ใชไดอยางสารพัดประโยชน ถาเรานําสีเขียวที่มี ความสวางสูงไปใชกับพื้นหลังที่เปนสีดําสีเขียวจะดู โดดเดนขึ้นมาจากพื้นหลัง นอกจากนั้นสีเขียวยัง ใชไดดีกับการสื่อถึงคอมพิวเตอรในยุคอดีต (เพราะคอมพิวเตอรในอดีตหนาจอเปนสีเขียว) จิตวิทยาของสี (Color psychology)
  9. 9. สีนํ้าเงิน สีน้ําเงินสีถึงความเปดเผย,อิสรเสรี, สติปญญา, ความซื่อสัตยและศรัทธา สีน้ําเงิน สามารถทําใหผูคนสงบและดับความอยาก อาหารลงได สีน้ําเงินจึงไมคอยถูกใชในการ ออกแบบที่เกี่ยวของกับอาหาร บริษัท คอมพิวเตอรหลายแหง เชน IBM, Dell, HP, และ Microsoft ใชสีน้ําเงินในการออกแบบโลโก เพราะสีน้ําเงินนั้นแสดงถึงความมั่นคงความมี เสถียรภาพของคอมพิวเตอร จิตวิทยาของสี (Color psychology)
  10. 10. สีม่วง ในแงมุมของประวัติศาสตรสีมวงถูกใช เพื่อแสดงราชวงศ,ตําแหนงกษัตริยและอํานาจ เพราะบุคคลผูมีอํานาจในอดีตมักสวนใสเสื้อผา เครื่องนุงหมที่ยอมดวยสีมวง แมแตในปจจุบัน สีมวงก็ยังเปนตัวแทนของความมั่งคั่งและความ สุลุย สุราย สีมวงยังถูกเชื่อมโยงกับดอกไม ,รัตนชาติและพระอาทิตยตก ถาตองการ ออกแบบเว็บไซตใหแปลกใหมและนาสนใจสี มวงจัด ๆ ก็เปนทางเลือกที่นาสนใจ จิตวิทยาของสี (Color psychology)
  11. 11. สีขาว เมื่อผูคนตองคิดถึงความสะอาดพวกเขาจะ คิดถึงสีขาวเปนสิ่งแรก สีขาวสื่อถึงความสมบรูณ, แสง สวาง,และความบริสุทธิ์ สีขาวเปนสีที่ไดรับความนิยม มากที่สุดในการใชเปนสีพื้นของหนาเว็บเพจ เพราะ เปนสีสีที่ไมมีความเขมของสีจึงสามารถเขาไดกับทุกสี และยังชวยเพิ่มความสามารถในการอานขอความบน หนาจอ ในบางครั้งสีขาวก็ไมไดมีความหมายในทางที่ดี เสมอไป สีที่จืดจางหรือซีดขาวสามารถสื่อถึงความ เจ็บปวยและความใจออนแอและความตาย จิตวิทยาของสี (Color psychology)
  12. 12. สีดํา แมวาสีดํามักจะสื่อถึงความตาย,ความ โศกเศราและปศาจ แตสีดําก็สามารถเปน ตัวแทนของพลัง,ความสงางามและความ แข็งแกรง ความหมายของสีดํานั้นจะเปลี่ยนไป ตามการใชงาน เชนหากนําสีดํามาอยูคูกับสี ขาวก็จะทําใหความหมายของสีดําเปลี่ยน กลายเปน ความฉลาดและความมั่นคั่ง และ เมื่อใชรวมกับสีอื่น ก็สามารถสรางความ ซับซอน ลึกลับไดเปนอยางดี จิตวิทยาของสี (Color psychology)
  13. 13. สีและรูปทรง สีน้ําเงิน (ความรูสึกสงบนิ่ง) แทนดวยรูปทรง “วงกลม” สีแดง (ความรูสึกหนักแนน, มั่นคง, กระฉบับกระเฉง) แทนดวย รูปทรง “สี่เหลี่ยม” สีเหลือง (ความรูสึกกระฉบับกระเฉง) แทนดวยรูปทรง “สามเหลี่ยม”
  14. 14. ๐ เมื่อสีบริสุทธิ์ผสมกับสีขาว จะได้เป็นสีอ่อน (Tint of the Hue) ๐ เมื่อสีบริสุทธิ์ผสมกับสีเทา จะได้เป็นโทนสีระดับ ต่าง ๆ (Tone of the Hue) ๐ เมื่อสีบริสุทธิ์ผสมกับสีดํา จะได้เป็นสีเข้ม (Shade of the Hue) การใส่สีขาว,สีเทาและสีดําเข้าไปนั้นมีประโยชน์มากใน การจัดชุดของสี เพราะทําให้สีสีหนึ่งสามารถแสดงออกและให้ ความรู้สึกได้หลายรูปแบบยิ่งขึ้น ทดแทนการใช้สีเพียงสีเดียว ค่านํ้าหนักสี (Color Value)
  15. 15. สีและรูปทรง สีน้ําเงิน (ความรูสึกสงบนิ่ง) แทนดวยรูปทรง “วงกลม” สีแดง (ความรูสึกหนักแนน, มั่นคง, กระฉบับกระเฉง) แทนดวย รูปทรง “สี่เหลี่ยม” สีเหลือง (ความรูสึกกระฉบับกระเฉง) แทนดวยรูปทรง “สามเหลี่ยม”
  16. 16. สีกับความเปรียบตาง ในงานออกแบบ เรามักไมนิยมที่จะสรางความเปรียบตางของสี โดยการใชสี หลายสี เนื่องจากความเปรียบตางของสีจะเห็นไดชัดเจนที่สุดในกรณีที่มีการ เปรียบเทียบกันเพียง 2 สี การใชสีมากเกินไป
  17. 17. สีกับความเปรียบตาง
  18. 18. สีกับความเปรียบตาง นักออกแบบสามารถสรางความเปรียบตางใหกับภาพไดโดยใชสีเพียงสีเดียว ผานการใชเทคนิคการไลคาน้ําหนักออนแกของสี ซึ่งการเพิ่มคาน้ําหนักออน แกใหกับสี "Shade" "Tint"
  19. 19. สีกับความเปรียบตาง "Shade" "Tint"
  20. 20. สีกับความเปรียบตาง "Shade" "Tint"
  21. 21. สีตติยภูมิ (Tertiary Color) ส้มเหลือง, ส้มแดง, ม่วงแดง, ม่วงนํ้าเงิน, เขียวนํ้าเงิน และเขียวเหลือง
  22. 22. Earth Tones สาเหตุที่เรียกว่าสีในลักษณะนี้ว่า EarthTones เพราะเป็นสีที่พบเห็นได้บ่อยในธรรมชาติ เช่น - สีแดงแกมนํ้าตาลเป็นสีที่พบเห็นได้ในก้อนหิน, - สีเหลืองแกมนํ้าตาลมีอยู่ในทราย, - สีเขียวแกมนํ้าตาลพบเห็นได้ในต้นไม้และใบไม้
  23. 23. Earth Tones
  24. 24. Earth Tones
  25. 25. Earth Tones
  26. 26. Earth Tones
  27. 27. สีคูตรงขาม คูที่ 1 สีเขียว ตรงกันขามกับสีแดง คูที่ 2 สีน้ําเงิน ตรงกันขามกับสีสม คูที่ 3 สีเหลืองตรงกันขามกับสีมวง
  28. 28. ขอควรระวังในการใชสีคูตรงขาม(Common Complementary Pitfalls) การใชสีแบบคูตรงขามนั้นเปนสิ่งที่ตองระวัง เพราะการใชสีคูตรงขามอาจทําใหเกิดความเปรียบตาง ขึ้นพรอมกัน (simultaneous contrast) เมื่อจับสีทั้งสอง มาวางคูกันบอยครั้งทําใหเกิดการกระตุนอารมณและ เกิดการสั่นสะเทือนความรูสึกผูใชอยางรุนแรง ดังรูป ดานซายมือ วิธีการแกไขคือใหเบรกสีใดสีหนึ่งหรือทั้ง สองสีดวยวิธีการ “ทิน” (Tint) และ “เฉด” (Shade) โดย การเติมสีขาวและสีดําเขาไป สีตรงข้าม (Complementary colors)
  29. 29. สีคูตรงขาม เจ. ดับบิว. ฟอน เกอเธ (J.W. Von Goethe) ได ระบุถึงคาความสวางของสีไวดังนี้ สีเหลืองมีคาเทากับ 9 สีสมมีคาเทากับ 8 สีแดงมีคาเทากับ 6 สีมวงมีคาเทากับ 3 สีน้ําเงินมีคาเทากับ 4 สีเขียวมีคาเทากับ 6
  30. 30. สีคูตรงขาม สีเหลืองมีคาเทากับ 9 สีสมมีคาเทากับ 8 สีแดงมีคาเทากับ 6 สีมวงมีคาเทากับ 3 สีน้ําเงินมีคาเทากับ 4 สีเขียวมีคาเทากับ 6
  31. 31. สีคูตรงขาม สีแดงมีคาเทากับ 6 สีเขียวมีคาเทากับ 6 อัตราสวนสีแดง:เขียว 1:1
  32. 32. สีคูตรงขาม สีแดงมีคาเทากับ 6 สีเขียวมีคาเทากับ 6 อัตราสวนสีแดง:เขียว 1:1
  33. 33. สีคูตรงขาม สีสมมีคาเทากับ 8 สีน้ําเงินมีคาเทากับ 4 อัตราสวนสีสม:น้ําเงิน 1:2
  34. 34. สีคูตรงขาม สีมวงมีคาเทากับ 3 สีเขียวมีคาเทากับ 6 อัตรสวนสีมวง:เขียว 1:2
  35. 35. สีคูตรงขาม สีเหลืองมีคาเทากับ 9 สีเขียวมีคาเทากับ 6 อัตรสวนสีมวง:เขียว 1:2
  36. 36. การใชสีโทนรอนและเย็นสรางระยะของภาพ สีโทนรอนสรางฉากหนา
  37. 37. การใชสีโทนรอนและเย็นสรางระยะของภาพ สีโทนรอนสรางฉากหนา
  38. 38. สีแบบชุดสีแบบเดียวคือการใชสี เพียงสีเดียว ความหลากหลายของสี ชุดนี้เกิดจากการเพิ่มความเขมหรือ ความออนในระดับตาง ๆ ใหกับสี เริ่มตน ชุดสีแบบนี้คอนขางจะมี ความกลมกลืนเปนหนึ่งเดียวกัน แต บางครั้งอาจดูไมมีชีวิตชีวาเพราะ ขาดความหลากหลายของสี ดังรูป ประกอบดานซายมือ ชุดสีแบบสีเดียว (monochromatic)
  39. 39. ตัวอยางการใชชุดสีแบบเดียว ออกแบบหนาเว็บไซต จากตัวอยางรูปดาน ซายมือเว็บไซต Mint ออกแบบโดย ใชสีชุดเดียวสรางความสงางามและ ความกลมกลืนโดยการใชสีเขียว เพียงสีเดียวและใชสีขาวและสีดําเขา มาเพิ่มคาน้ําหนักสี ชุดสีแบบสีเดียว (monochromatic)
  40. 40. เมื่อคุณตองการสรางแบรนดหรือ เอกลักษณโดยเริ่มจาการใชสี การใช ชุดสีแบบเดียวเปนทางเลือกที่ดี เพราะจะทําใหคนสามารถจดจํา ภาพลักษณขององคกรของคุณได เปนอยางดี ดังภาพประกอบดาน ซายมือ ชุดสีแบบสีเดียว (monochromatic)
  41. 41. การใชสีแบบงาย ๆ แบบเว็บไซต Superfluous Banter เชนตัวอยางจาก รูปทางดานซายมือที่ใชสีสมใน องคประกอบหลักของเว็บไซต แมวา จะใชแคสีสมเพียงสีเดียวในการ ออกแบบเว็บไซตแตการเพิ่มสีขาว และดําลงไปบนสีสมอยางถูกตองทํา ใหเหมือนกับวาเว็บเพจนี้มีการใชสี หลายสี ชุดสีแบบสีเดียว (monochromatic)
  42. 42. การใชสีแบบใชสีชุดเดียวนั้น บางครั้งอาจใชสีแบบ “แอคโครแม็ททิค” (achromatic) ซึ่งหมายถึงการใชสีแบบไม มีสีเลย กลาวคือใชแตสีขาวและสีดํา และ ใชวิธีการไลคาน้ําหนักสีเทา การใชสีแบบ นี้จะใหความรูสึกนาเกรงขามและสงางาม เปนอยางมาก เชนตัวอยางเว็บไซต Subtraction ในรูปดานซายมือ ชุดสีแบบสีเดียว (monochromatic)
  43. 43. ชุดสีแบบสีเดียว (monochromatic)
  44. 44. ชุดสีที่คล้ายคลึงกัน (analogous) การใชสีแบบชุดสีที่คลายคลึงกัน คือการใช สีที่อยูขางกันในวงจรสี วิธีการที่จะสรางงาน ออกแบบโดยใชชุดสีที่คลายคลึงกันคือตอง ระลึกวาเราไมควรใชสีใหหลายสีเพราะจะทําให ผูใชสับสน โดยปกติแลวการใชสีในลักษณะนี้ มักนิยมใชสีแคสามสีเพราะหากใชสีมากเกินไป สีจะขาดความสัมพันธกัน นอกจากนั้นการใชสี มากเกิดไปจะทําใหเว็บไซตขาดความมี เอกลักษณหาก
  45. 45. ตัวอยางการใชชุดสีที่คลายคลึงกัน ออกแบบหนาเว็บไซต ตามที่ไดกลาวไปแลวในเรื่องของจิตวิทยา ของสีวาสีสมนั้นกระตุนใหเกิดความอยาก อาหารสีสมจึงถูกใชกับงานออกแบบที่ เกี่ยวของกับอาหารคอนขางเยอะ สีแดงแกม มวง (burgundy) และสีเลือดหมู (maroon) ก็มี ความสามารถในการกระตุนความอยากเชนกัน เว็บไซต Regine’s Patisserie ในรูปดานซายมือ จึงใชสีทั้งสามสีนี้ ชวยกระตุนความอยาก อาหารของผูดู ชุดสีที่คล้ายคลึงกัน (analogous)
  46. 46. เว็บไซต Blinksale ก็เปน ตัวอยางที่ดีในการใชสีแบบ คลายคลึงกันภาพทางดานซายมือ แสดงใหเห็นถึงการใชสีสามสีที่ ใกลเคียงกันในวงจรสี คือน้ํา เงิน,เขียวและเหลือง ชุดสีที่คล้ายคลึงกัน (analogous)
  47. 47. ตัวอยางสุดทายคือเว็บไซต Michael Angeles’ จากรูปทาง ซายมือที่ใชความกลมกลืนของสี สรางเว็บไซตโดยใชสีในโทนรอน ชุดสีที่คล้ายคลึงกัน (analogous)
  48. 48. ชุดสีที่คล้ายคลึงกัน (analogous)
  49. 49. ชุดสีที่คล้ายคลึงกัน (analogous)
  50. 50. ชุดสีที่คล้ายคลึงกัน (analogous)
  51. 51. สีตรงขามในที่นี้หมายถึงสีที่อยูตรงกัน ขามกันในวงลอสี เชน สีแดงกับฟา หรือ สีน้ําเงินออนกับสม ขอไดเปรียบของการ ใชสีในรูปแบบนี้คือ ความสดใสและ สะดุดตา อยางไรก็ดีการใชสีในแบบนี้ อาจทําใหผูดูใหความสนใจงายแต หลังจากนั้นแลวก็อาจละทิ้งความสนใจ ไปไดอยางรวดเร็วตัวอยางของการใชสีคู ตรงขามอยูในรูปดานซายมือ โดยการใช สีที่อยูตรงกันขามกันในวงจรสี สีตรงข้าม (Complementary colors)
  52. 52. ตัวอยางการใชคูสีตรงขาม ออกแบบ หนาเว็บไซต จากรูปดานซายมือเว็บไซต ของมหาวิทยาลัย University of Florida ออกแบบโดยใชสีคูตรงขาม โดยใชสีน้ํา เงินและสีสมซึ่งเปนคูสีที่นิยมมากในงาน ออกแบบเว็บไซต เพราะสีน้ําเงินทําให เกิดอารมณสงบในขณะที่สีสมแสดงถึง ความกระตือรือรนและความคิด สรางสรรค สีตรงข้าม (Complementary colors)
  53. 53. เว็บไซต์ Faith Inkubators จากรูปด้านซ้ายมือใช้คู่สีตรงข้ามคือสีม่วงและสีเหลืองโดยให้สีเหลืองที่มีความสว่างน้อยเป็นพื้น หลังและเน้นจุดที่ต้องการให้เด่นโดยใช้สีม่วงสร้างเอกลักษณ์ให้กับเว็บไซต์ได้อย่างลงตัว สีตรงข้าม (Complementary colors)
  54. 54. เว็บไซต์ส่วนตัวของ Rob Goodlatte จากรูปด้านซ้ายมือซึ่งผู้ออกแบบเป็นนักศึกษาออกแบบที่มหาวิทยาลัย a Duke University ใช้การผสมผสานระหว่างการใช้สีแบบคล้ายคลึงกัน (ใช้สีแดงเป็นส่วนใหญ่ของเว็บไซต์) กับการใช้สีคู่ตรงข้าม (สีขียวที่ขาวมือด้านล่าง) สีตรงข้าม (Complementary colors)
  55. 55. สีตรงข้าม (Complementary colors)
  56. 56. สีตรงข้าม (Complementary colors)

×