Color for Graphic Design

สีในการออกแบบ

Pises Tantimala
Aj.pises@gmail.com
เรื่อง สีกับการออกแบบคอมืวเตอร์กราฟิกส์ Present by Pises

หัวข้อการนาเสนอ
• ความรูเ้ บื้องต้นเรื่องสี
• ระบบสี
• วงล้อสี
• ปฏิกรยาของสีทางด้านศิลปะ
ิิ
• โครงสร้างสี
• ความหมายของสี
• สีตามความเชือในแต่ละเชือชาติ
่ ้
• ข้อจากัดด้านสายตา


สีคืออะไร
• สี คือ ลักษณะของแสงที่
ปรากฏแก่สายตาเราให้เห็น
เป็นสีขาว ดา แดง เขียว
ฯลฯ เราสามารถมองเห็น
ด้วยจักษุสมผัส หรือสีคอ
ั ื
การสะท้อน รัศมีของแสง
(SPECTRUM) มาสูตาเรา
่

เราเห็นสีได้อย่างไร


เราเห็นสีได้อย่างไร
• สีที่มองไม่เห็น ของแสงอาทิตย์
ส่องมายังดอกกุหลาบ
• ดอกกุหลาบสีแดงดูดซึม สีของ
แสงทั้งหมด ยกเว้น สีแดง และ
สะท้อน หรือส่งต่อ สีแดงนี้มาสู่
ตามนุษย์
• ส่วนรับภาพ ของมนุษย์ รับ
แสงสีแดงนี้ และส่งไปยังสมอง
เพื่อประมวลผลการรับรู้


การมองเห็นของดวงตา

• Retina รับ แสงขาวดา
• Cornea รับ สีของแสง RGB

ระบบการผสมสี

• การผสมสีแบบบวก • การผสมสีแบบลบ
Additive Color Mixing Subtractive Color Mixing

ระบบการผสมสี

• การผสมสีแบบบวก • การผสมสีแบบลบ
Additive Color Mixing Subtractive Color Mixing
http://www.csusm.edu/iits/trc/training/lessons/graphicDesign/d6color2/6_design_color2.htm


วงล้อสี
เหลือง
เขียว-เหลือง เหลือง-ส้ม
1
3 3
เขียว ส้ม
2 2

น้ำเงิน-เขียว 3 3 ส้ม-แดง

1 1
น้ำเงิน แดง
3 3
2
น้ำเงิน-ม่วง ม่วง-แดง
ม่วง

วรรณะของสี
1. สีปฐมภูมิ แม่สีหลัก เด็กๆมักจะ
ชอบสีในกลุ่มนี้
2. สีทุติยภูมิ วัยรุ่นและวัยทางาน จะ
3. สีตติยภูมิ ผู้สูงอายุ คนแก่มักจะ

สีปฐมภูมิ


สีทุติยภูมิ


โทนของสี

สีโทนร้อน
• เป็นสีที่ช่วยเพิ่มแรงดึง
ดูดความสนใจ ให้ความรู้สึก
สว่าง อบอุ่น ชัดเจน


โทนของสี
สีโทนเย็น
• ให้ความรู้สึกเย็นสบาย สุภาพ
เรียบร้อย หดหู่ เสียใจ


ปฏิกริยาของสีทางด้านศิลปะ
• ด้านขนาด (Size)
• ด้านน้าหนัก (Weight)
• ด้านระยะทาง (Perspective)
• ด้านอุณหภูมิ (Temperature)
• เรื่องความแข็งแรง (Wrenght)


ด้านขนาด (Size)


ด้านน้าหนัก (Weight)


ด้านระยะทาง (Perspective)


ด้านอุณหภูมิ (Temperature)


เรื่องความแข็งแรง (Wrenght)


Color Scheme
• Monochromatic
• Complementary
• Triads
• Split Complementary
• Quadratic
• Analogous

Monochromatic โครงสร้างสีเอกรงค์

• มีเนื้อสี เดียว
• ให้ความแตกต่างด้วยน้าหนักสี
• ให้ความรู้สึกกลมกลืนกัน
• งานขาดจุดดึงดูดความสนใจ

Monochromatic

street type 2 ©Michael Bretherton


Monochromatic

leaves ©Michael Bretherton


Monochromatic

http://www.ideali.it/

Monochromatic

hans-brinker.com

Complementary สีคู่ตรงข้าม
• สีที่มีความ ขัดแย้งซึ่งกัน
และกัน รุนแรง บาดตา ถ้าดู
จากวงสีธรรมชาติ จะเป็นสี
ที่อยู่ใน ตาแหน่งตรงกัน
ข้ามกัน และมีค่าที่ตัดกัน
อย่างรุนแรง
http://fireflyforest.net/firefly/2006/02/05/complementary-colors/



lamp by the window by zitherica


Swiss Airline



Newtown Railway Sign. Sydney Australia. :Berkeley



http://static.flickr.com/66/177807823_4dfcdebe18_o.jpg


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


Dunlop Ads


Wecandolt.ca

Split Complementary ตรงข้ามข้างเคียง
• ลดความรุนแรง และความตัด
กัน ของค่าสีคู่ตรงกับข้าม
โดยตรงลง และได้ความ
หลากหลายของสีมากขึ้น ทาให้
งานออกแบบนั้น มีความ
น่าสนใจขึ้น แต่


http://static.flickr.com/66/177807823_4dfcdebe18_o.jpg



Firefox.com

Quadratic Color จตุสัมพันธ์

• การใช้สีในวงจรสี 4 สี
ทาให้งานดูมีความ
หลากหลาย สีสะดุดตา
ข้อเสียคือ คาดความ
กลมกลืนของสี


Quadratic Color จตุสมพันธ์
ั

Lego Ads

Tetrads โครงสี 4 สี

Ads

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


CMS Drupal Ads


CMYK Magazine

รูปต่อไปนี้เป็นการจัดสีแบบใด ?


รูปต่อไปนี้เป็นการจัดสีแบบใด ?

https://ssl.vds2000.com/ssl.psingerart.com/detail.php3?ID=1171529978r66.84.4.129r1063052n46716&detail=summer


ความหมายของสี

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

สีแดง
อิทธิพลในทำงดี อิทธิพลในทำงไม่ดี สัญลักษณ์วัตถุ

•พลังอานาจ •โมโห •หัวใจ
•ความรัก •ก้าวร้าว •ไฟ
•อบอุ่น •อันตราย •เลือด
•การแข่งขัน •รุนแรง •ดวงอาทิตย์
•กล้าหาญ •ความผิดพลาด •สงคราม
•ความเร็ว •สัญญาณ
•ตื่นเต้น อันตราย

สีแดง


สีน้าเงิน

•ความซื้อสัตย์ •หดหู่ •ท้องฟ้า
•ความมั่งคง •ซึมเศร้า •ทะเล
•ความสะอาด •เสียใจ •สวรรค์
•ระเบียบ •ความโมโห •เทวดา
•มีน้าใจ •ความเย็น
•ความเชื่อมั่น •เทคโนโลยี


สีน้าเงิน

http://bridger.us/mini/pictures/cabrio/cabrio_ad/cabrio_ad1.jpg
http://www.theapplecollection.com/azcom/iMac_Blue.jpg
http://www.franchisebusiness.com.au/Franchise/Jannies-Cleaning-Services

สีเขียว

•ธรรมชาติ •อิจฉา •ต้นไม้
•สุขภาพ •ริษยา •สิ่งแวดล้อม
•ความหวัง •โชคร้าย •พลังวังชา
•การเริ่มต้นใหม่ •เบื่อหน่าย •วัยรุ่น
•ความภัคดี
•ความเป็นอมตะ



http://www.greens.org.nz/office/posters/studentad.gif
http://66.89.75.166/gps/AdDetail.asp?AdId=172
http://www.techfresh.net/wp-content/uploads/2007/01/olpc-x0-unboxed.jpg
http://www.greeninnovations.ca/gi/imgs/modi-garden-grid-cv.jpg


สีเหลือง

•ความสดใส •ไม่ซื่อสัตย์ •สัญญาณให้ระวัง
•ร่ารวย •การทรยศ •ทอง
•ธรรมะ •ขลาดกลัว •แสง
•สง่างาม •อิจฉา •อุตสาหกรรม
•ปรัชญา •ไม่แน่นอน •ก่อสร้าง
•สร้าง •หลอกลวง


สีเหลือง

http://fyi.gmblogs.com/images/yellow_chevy_truck_102406.gif
http://firstborn.files.wordpress.com/2007/04/yellow21.jpg
http://www.siamphone.com/picture/motorola/razr_v3i_gold/razr_v3i_gold_1_b.jpg
http://www.ktc.co.th/press/pressinfo/download/gold03.jpg


สีม่วง

•สูงส่ง •ลึกลับ •จิตใจ
•ซื้อสัตย์ •โหดร้าย •วิญญาณ
•สร้างสรรค์ •หยิ่งยโส •ปัญญา
•เปลี่ยนรูปแบบ •โศกเศร้า
•แปลกใหม่ •ผิดหวัง
•ความรู้


สีม่วง

http://www.morningtours.com.tw/a/TG-air.gif
http://content.answers.com/main/content/wp/en/1/1c/RoyalFlagNetherlands.jpg

สีส้ม

•ความเข้มแข็ง •ไม่ซื่อตรง •มิตรภาพ
•กระตือรือร้น •หลอกลวง •ฮาโรวิน
•สมดุล •อิจฉา
•เจริญ •ไม่เรียบร้อย
•มิตรภาพ •อื้อฉาว


สีส้ม

http://www.palminfocenter.com/news/9046/palm-changes-ad-agency-to-young--rubicam/
http://www.foodbanknyc.org/images/NYCGO_06_ad_4_inch.jpg
http://iconpacks.mozdev.org/images/firefox_2005_icons_by_weboso.jpg
http://www.apta.com/services/campaign/images/gas_campaign_image.jpg

สีน้าตาล

•เรียบง่าย •ความเปรอะเปื้อน •โลก
•ความทนทาน •ซึมเศร้า •พื้นดิน
•มีเกียรติ •หดหู่ •ไม้
•เจริญเติบโต •สลดใจ •บ้าน
เต็มที่ •แห้งแล้ง
•เชื่อถือได้ •ทรุดโทรม


สีน้าตาล

http://www.jatukarmramathep50.com/images/ads_big_s.jpg
http://www.hydeparkantiques.com/hyde_park/featured_items/Books/images/BookCover316w.jpg
http://aaaquilterssupply.bizland.com/store/media/053AEN.jpg
http://www.maghribistyle.com/images/4thedition/brown1024x768.gif


สีเทา

•สุภาพ •ความโศกเศร้า •ปัญญา
•สงบเสงี่ยม •การเสื่อมลง •อนาคต
•เป็นไปได้ •น่าเบื่อ •อนุรักษ์นิยม
•มั่นคง •อายุมาก
•สุขุม •ปฏิบัติได้
•มีเกียรติ •สงบ


สีเทา

http://www.carbuyersnotebook.com/archives/caddydaddy.jpg
http://www.wetstation.net/blog/attachment/wallpaper/gray_1680x1050.jpg
http://www.onflex.org/roloflex/xd/1g.jpg


สีขาว

•บริสุทธิ์ •ความอ่อนแอ •พรหมจารี
•ไร้เดียงสา •การเจ็บป่วย •วัยสาว
•เรียบง่าย •ความตาย •นางพยาบาล
•เคารพนับถือ •ความโศกเศร้า •ฤดูหนาว
•นอบน้อม •ความเย็น
•ความดี •ความใหม่


สีขาว

http://www.dkimages.com/discover/previews/778/44011.JPG
http://www.craphound.com/images/indianmcdsbabyad.jpg

สีดา

•อานาจ •ซับซ้อน •ความมืด
•ความฉลาด •หลอกลวง •เกี่ยวกับเพศ
•ความเป็นเลิศ •ความลับ •ความตาย
•ความสุขุม •หดหู่ •ใต้ดิน
•ความตั้งใจ •หมดหวัง
•เป็นทางการ


สีดา

http://www.car2care.com/forum/image_post/1_06_0726_1533_01_Mercedes-Benz.jpg
http://www.siliconvalleysleuth.com/images/intel_ad.jpg
http://www.keynote2keynote.com/wp-content/uploads/Revolution_iPhone_by_Parody_Lost.jpg by Pises
เรื่อง สีกับการออกแบบคอมืวเตอร์กราฟิกส์ Present

สีตามความเชื่อในแต่ละเชื้อชาติ

http://www.navisworks.com/files/worldMap.png


สีแดง
ความสุข
อันตราย
การฉลอง
ความโกรธ
ความพิเศษ

อันตราย
ความโกรธ อันตราย
หยุด ปีศาจ

http://203.158.253.12/ritelearning/ritelearning-uploads/libs/html/2082/02studio2classrm/unit4/chapt4.1intro%20to%20colr/intro%20color.htm



สีเหลือง เกียรติยศ
ความภัคดี
สง่า โก้ ผู้ดี
ไร้เดียงสา

ระวัง ขี้ขลาด ความสุข
ความมั่งคั่ง




เยาว์วัย
เยาว์วัย
อนาคต
เจริญเติบโต
มีพลัง

ปลุกใจ
ปลอดภัย ความสมบูรณ์
ความแข็งแรง




สีขาว ความเศร้า
ความเศร้า
ความตาย

ความบริสุทธิ์
ความดี ความบริสุทธิ์




สีน้าเงิน การไว้ทุกข์
ความเศร้า

ความเป็น
ผู้ชาย อานาจ
ความสงบ ความชั่วร้าย




สีดา ปีศาจ
ความลึกลับ
ปีศาจ
ความลึกลับ

ปีศาจ ปีศาจ



ข้อจากัดด้านสายตา


มองไปที่ผนังสีขาวหรือกระดาษ
ให้กระพริบตา


1.การเมื่อยล้าของเรติน่า


2.ศูนย์เสียความทรงจา
ทางด้านสี


3.ตาบอดสี
ผู้ชาย 1 ใน 13 คนจะตาบอดสี
ผู้หญิง 1 ใน 300 คนจะตาบอดสี

4.เงื่อนไขของแสง


5.ความสามารถในการรู้ชื่อสี


สรุปข้อจากัดด้านสายตา
• การเมื่อยล้าของเรติน่า
• ศูนย์เสียความทรงจาทางด้านสี
• ตาบอดสี
• เงื่อนไขของแสง
• ความสามารถในการรู้ชื่อสี


การลวงตาของสี


Color for Graphic Design

Recommandé

Recommandé

Contenu connexe

Plus de Pises Tantimala

Plus de Pises Tantimala (20)

Color for Graphic Design