Upload
bee-saruta
View
69
Download
1
Embed Size (px)
Citation preview
ร+ปด้�าน่ล�างวงล�อความสี�มพื้�น่ธ์$ของสี� ซ้ำ.�งบรรจุ0สี� ที่��น่�ยมใช้�ใน่เว1บไซ้ำต$ไว� 20 สี� เหมาะสี'าหร�บผู้+�ที่��ก'าล�ง
เล�อกสี�ที่��จุะใช้�ใน่การออกแบบงาน่กราฟิ4กต�างๆ อย+�เราสีามารถใช้�ความสี�มพื้�น่ธ์$ของวงล�อขอสี�น่��ให�เก�ด้
ประโยช้น่$ได้�อย�างมากมาย เช้�น่ ต�องการออกแบบให� เว1บไซ้ำต$ร+�สี.กต�ด้ก�น่โด้ยสี��น่เช้�ง เราอาจุใช้�ช้0ด้สี� 4 สี�ที่��ที่'า
ม0มก�น่ 90 องศา เช้�น่ด้�งต�วอย�างถ�าเราเล�อกช้0ด้สี� 1 , 6 , 11 , 16 สี�ที่��ได้�จุะต�ด้ก�น่ช้�ด้เจุน่ ถ�าต�องการให�เว1บไซ้ำต$
ด้+กลมกล�น่ก1อาจุเล�อกช้0ด้สี�ใกล�เค�ยงก�น่ก1ได้�เช้�น่ เล�อก ช้0ด้สี�เข�ยวเบอร$ 8 , 9 , 10 , 11 ก1จุะได้�สี�ใน่โที่น่สี�เข�ยว
สีว�าง
ด้�านล่�างเป็นเบอร์�สี�ที่��ใช้�แบ�งตามมาตร์าฐานการ์ อ�างอ�งของสี�
• 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
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
จิ�ตวิ�ที่ยาเก��ยวิก�บสี� • สี�น� นม�ควิามสี"าค�ญอย�างย��งใน
การ์ออกแบบเวิ$บไซต� ในการ์ ที่"างานกร์าฟิ(กต�างๆ การ์เล่*อกสี�
ให้�เข�าก�บเน* อห้าของงาน จิะที่"าให้�งานที่��ที่"าออกมาม�ควิามน�าเช้*�อถื*อ
ย��งข. น แล่ะย�งสี�งผล่อย�างมากก�บควิามสีวิยงามของงานที่��ออกมาด้�วิย
ความร+�สี.กที่��คน่สี�วน่ใหญ่�ม�ต�อสี�ต�างๆ สี�ฟิ9า ให�ความร+�สี.กสีงบ สี0ข0ม สี0ภาพื้ หน่�กแน่�น่ เคร�งขร.ม
เอาการเอางาน่ ละเอ�ยด้ รอบคอบ สีง�างาม ม�ศ�กด้�:ศร� สี+งศ�กด้�: เป;น่ระเบ�ยบถ�อมตน่
สีามารถลด้ความต��น่เต�น่ และช้�วยที่'าให�ม�สีมาธ์� แต�ถ�าม�สี�น่'�าเง�น่ เข�มเก�น่ไป ก1จุะที่'าให�ร+�สี.กซ้ำ.มเศร�าได้�
สี�เข�ยว เป;น่สี�ใน่วรรณะเย1น่ จุะสีร�างความร+�สี.กเย1น่สีบาย ใช้�เป;น่สี�ที่��ช้�วยผู้�อน่คลายความเคร�ยด้ได้� ให�ความร+�สี.ก สีงบ เง�ยบ
ร�มร��น่ ร�มเย1น่ การพื้�กผู้�อน่ การผู้�อน่คลาย ธ์รรมช้าต� ความ ปลอด้ภ�ย ปกต� ความสี0ข ความสี0ข0ม เย�อกเย1น่
สี�เหล�อง เป;น่สี�แห�งความเบ�กบาน่ เร�าอารมณ$ และเร�ยก ร�องความสีน่ใจุ ให�ความร+�สี.กแจุ�มใสี ความสีด้ใสี ความร�าเร�ง
ความเบ�กบาน่สีด้ช้��น่ ช้�ว�ตใหม� ความสีด้ ใหม� ความสี0กสีว�าง การ แผู้�กระจุาย อ'าน่าจุบารม� ให�ลองสี�งเกตด้+ว�า ว�น่ที่��ที่�องฟิ9าม�ด้คร��ม
ปราศจุากแสีงแด้ด้ เราจุะร+�สี.กหงอยเหงา หด้ห+� แต�พื้อม�แสีงแด้ด้ ที่�องฟิ9าสีว�าง ม�สี�เหล�อง เราจุะร+�สี.กม�ช้�ว�ตช้�วาข.�น่
ความร+�สี.กที่��คน่สี�วน่ใหญ่�ม�ต�อสี�ต�างๆ สี�แด้ง เป;น่สี�ที่��สีร�างความต��น่เต�น่ และกระต0�น่สีมอง สี�แด้ง
ปาน่กลางแสีด้งถ.งความม�สี0ขภาพื้ด้� ความม�ช้�ว�ต ความร�ก ความสี'าค�ญ่ ความอ0ด้มสีมบ+รณ$ ความม��งค��ง สี�แด้งจุ�ด้ม�ความหมายแฝงด้�าน่
กามารมณ$ น่อกจุากน่��สี�แด้งย�งสีร�างความร+�สี.กร0น่แรง ให�ความร+�สี.กร�อน่ กระต0�น่ ที่�าที่าย เคล��อน่ไหว ต��น่เต�น่ เร�าใจุ ม�พื้ล�ง ม�น่จุะใช้�ก�น่กรณ�ที่��เก��ยว
ก�บความต��น่เต�น่ หร�ออ�น่ตราย สี�ม�วง ให�ความร+�สี.ก ม�เสีน่�ห$ น่�าต�ด้ตาม เร�น่ล�บ ซ้ำ�อน่เร�น่ ม�
อ'าน่าจุ ม�พื้ล�งแฝงอย+� ความร�ก ความเศร�า ความผู้�ด้หว�ง ความสีงบ ความ สี+งศ�กด้�:
เป;น่สี�ที่��ปลอบโยน่ และช้�วยลด้ความเคร�ยด้ แต�เด้�มสี�ม�วงได้�มาจุากสี�ตว$ม�กระด้อง, เปล�อก ใน่ที่ะเลเมด้�เตอร$เรเน่�ยน่ ม�ช้��อว�า Purpura จุ.งได้�ช้��อภาษา
อ�งกฤษว�า Purple สี�สี�ม ให�ความร+�สี.ก ร�อน่ ความอบอ0�น่ ความสีด้ใสี ม�ช้�ว�ตช้�วา
ว�ยร0�น่ ความค.กคะน่อง การปลด้ปล�อย ความเปร��ยว การระว�ง เป;น่สี�ที่��เร�า ความร+�สี.ก ปรกต�ควรใช้�แต�น่�อยเม��อเที่�ยบก�บสี�อ��น่ สี�งเกตว�าคน่ที่��อย+�ใน่
ห�องสี�สี�มจุะอย+�ได้�ไม�น่าน่
ความร+�สี.กที่��คน่สี�วน่ใหญ่�ม�ต�อสี�ต�างๆ
สี�น่'�าตาล ให�ความร+�สี.กอบอ0 �น่ ได้�พื้�กผู้�อน่ แต�ควรใช้� ร�วมก�บสี�สี�ม เหล�อง หร�อสี�ที่อง เพื้ราะถ�าใช้�สี�น่'�าตาลเพื้�ยงสี�
เด้�ยว อาจุที่'าให�เก�ด้ความร+�สี.กหด้ห+�ได้� สี�เที่า ให�ความร+�สี.ก เศร�า อาล�ย ที่�อแที่� ความล.กล�บ ความหด้ห+� ความช้รา ความสีงบ ความเง�ยบ สี0ภาพื้ สี0ข0ม
ถ�อมตน่ สี�น่��ม�ข�อด้�ค�อที่'าให�เย1น่ แต�สีร�างความสีร�างความ ร+�สี.กหม�น่หมองได้� ควรใช้�ร�วมก�บสี�ที่��ม�ช้�ว�ต โที่น่สีว�างอย�าง
น่�อยหน่.�งสี� สี�ขาว ให�ความร+�สี.ก บร�สี0ที่ธ์�: สีะอาด้ สีด้ใสี เบาบาง
อ�อน่โยน่ เป4ด้เผู้ย การเก�ด้ ความร�ก ความหว�ง ความจุร�ง ความเมตตา ความศร�ที่ธ์า ความด้�งาม ให�ความร+�สี.กร��น่เร�ง
โด้ยเฉพื้าะเม��อใช้�ก�บสี�แด้ง เหล�อง และสี�ม
โหมด้สี� RGB ค�ออะไร• เก�ด้จุากการผู้สีมสี�ของแม�สี�สีามสี�ค�อ
แด้ง เข�ยวและน่'�าเง�น่• เม��อน่'ามาผู้สีมผู้สีาน่ก�น่ที่'าให�เก�ด้สี�ต�าง ๆ
บน่จุอคอมพื้�วเตอร$มากถ.ง 16.7 ล�าน่สี� ซ้ำ.�งใกล�เค�ยงก�บสี�ที่��ตาเรามองเห1น่ปกต� • สี�ของแสีงประเภที่น่�� ได้�แก� สี�แสีงใน่จุอ
มอน่�เตอร$จุอโที่รที่�ศน่$ กล�องถ�ายร+ป ฯลฯ
โหมด้สี� CMYK ค�ออะไร• เป;น่ระบบสี�ที่��ใช้�ก�บเคร��องพื้�มพื้$ที่��พื้�มพื้$
ออกที่างกระด้าษ ซ้ำ.�งประกอบด้�วย สี�หล�ก 4 สี� ค�อ สี�ฟิ9า (Cyan), สี�ม�วงแด้ง (Magenta), สี�เหล�อง (Yellow) และสี�ด้'า (Black)• เป;น่โหมด้สี�ที่��ใช้�ใน่งาน่สี��งพื้�มพื้$ที่��
ต�องการความละเอ�ยด้สี+งและได้�สี�ที่��ไม�ผู้�ด้เพื้��ยน่
โหมด้สี� CMYK ค�ออะไร• หล�กการเก�ด้สี�ของระบบน่�� ค�อ หม.กสี�หน่.�งจุะ
ด้+ด้กล�น่แสีงจุากสี�หน่.�งแล�วสีะที่�อน่กล�บออกมาเป;น่สี�ต�าง ๆ เช้�น่ สี�ฟิ9าด้+ด้กล�น่แสีงของสี�ม�วงแล�วสีะที่�อน่ออกมาเป;น่สี�น่'�าเง�น่ ซ้ำ.�งจุะสี�งเกตได้�ว�าสี�ที่��สีะที่�อน่ออกมาจุะเป;น่สี�หล�ก ของระบบ RGB
HSB Color ค�ออะไร• H = Hue = ค�าสี�จุากวงจุรสี�ที่��เก�ด้จุากการแยกสีเปคต�ม
ของแสีง ค�อ สี�ต�าง ๆ ที่��สีะที่�อน่ออกมาจุากว�ตถ0แล�ว เข�าสี+�สีายตาของเรา ซ้ำ.�งม�กจุะเร�ยกสี�ตามช้��อสี� เช้�น่ สี�
เข�ยว• S = Saturation = ค�าความอ��มต�วของสี� ค�อ ความสีด้
ของสี� โด้ยค�าความสีด้ของสี�จุะเร��มที่�� 0 ถ.ง 100 ถ�า ก'าหน่ด้ Saturation ที่�� 0 สี�จุะม�ความสีด้น่�อย แต�ถ�า
ก'าหน่ด้ที่�� 100 สี�จุะม�ความสีด้มาก• B = Brightness = ค�าความสีว�างของสี� ค�อ ระด้�บความ
สีว�างของสี� โด้ยค�าความสีว�างของสี�จุะเร��มที่�� 0 ถ.ง 100 ถ�าก'าหน่ด้ที่�� 0 ความสีว�างจุะน่�อยซ้ำ.�งจุะเป;น่สี�ด้'า แต�ถ�า
ก'าหน่ด้ที่�� 100 สี�จุะม�ความสีว�างมากที่��สี0ด้
โหมด้สี� Grayscale ค�ออะไร• เป;น่โหมด้สี�ที่��ม�สี�เด้�ยว ค�อ สี�ด้'า • การแสีด้งผู้ลของภาพื้จุะเป;น่ล�กษณะ
การไล�น่'�าหน่�กสี� จุากด้'า เที่า จุน่ถ.งสี�ขาว• เราม�กใช้�สี�แบบน่��ก�บงาน่
พื้�มพื้$ภาพื้สี�เด้�ยวเป;น่การประหย�ด้ต�น่ที่0น่การพื้�มพื้$
Foreground VS Background
• สี�ของ Foreground จุะถ+กใช้�ก�บเคร��องม�อวาด้ ภาพื้หร�อลงสี�
• สี� Background จุะเป;น่สี�ของพื้��น่หล�ง เม��อใช้�Eraser ลบ จุะได้�สี�ตามสี� Background
งาน่ช้��น่ที่�� 1 ออกแบบสี�ของโลโก�• ให�น่�กเร�ยน่ลงสี�พื้��น่หล�งและสีร�างเสี�น่ขอบให�แก�
ว�ตถ0ของภาพื้• ก'าหน่ด้สี�ตามความร+�เร��องที่ฤษฎี�สี�• เซ้ำฟิงาน่ช้��อ ช้��น่_เลขที่��_ช้��อ_Unit5_LOGO • เช้�น่ 110_55_บ�งอร_Unit5_LOGO• น่ามสีก0ล JPEG หร�อ PNG• สี�งไฟิล$งาน่เข�าเคร��องคร+ ตามหมายเลข ip ที่��
ก'าหน่ด้• หากใครสี�งไม�ได้� ให�ยกม�อ คร+จุะเด้�น่ไปตรวจุที่��
เคร��อง
งาน่ช้��น่ที่�� 2 ออกแบบเสี��อ• ให�น่�กเร�ยน่ออกแบบเสี��อ โด้ยใช้�เที่คน่�ค Clipping Mask
ใน่การสีร�างลวด้ลายของเสี��อ (สีามารถค�น่หาลวด้ลายที่�� ช้อบ จุากอ�น่เตอร$เน่1ต)
• ต�ด้ต�อภาพื้ แปะเป;น่ลายเสี��อ• พื้�มพื้$ข�อความ และใสี�ขอบสี�ให�ข�อความ• เซ้ำฟิไฟิล$ช้��อ ช้��น่_เลขที่��_ช้��อ_Unit5_Shirt • เช้�น่ 110_55_บ�งอร_Unit5_Shirt• น่ามสีก0ล JPEG หร�อ PNG• สี�งไฟิล$งาน่เข�าเคร��องคร+ ตามหมายเลข ip ที่��ก'าหน่ด้• หากใครสี�งไม�ได้� ให�ยกม�อ คร+จุะเด้�น่ไปตรวจุที่��เคร��อง
พั�ฒนาแฟิ2มสีะสีมผล่งานอ�เล่$กที่ร์อน�กสี�
• อ�พัโห้ล่ด้งานล่งในอ�ล่บ� มภาพั facebook ตนเอง แล่ะกล่5�มร์ายวิ�ช้า
• งาน่ช้��น่ที่�� 13 เร์*�องการ์ล่งสี�แล่ะสีร์�างเสี�นขอบบ (ออกแบบโล่โก�)• ว�ธ์�ที่'า สีร์�าง Selection > เล่*อกสี� > คล่�ก Paint Bucket >คล่�ก
เต�มสี�ล่งไป็ > สีร์�าง Selection เล่*อกขอบเขตภาพั > เล่*อกค"าสี��งEdit > Stoke > เล่*อกสี�ของเสี�นขอบแล่ะควิามห้นา
• งาน่ช้��น่ที่�� 14 เร์*�อง การ์ใช้� Clipping Mask• ว�ธ์�ที่'า เป็(ด้ไฟิล่�ภาพั แล่ะเล่*อกภาพัสี�วินที่��จิะที่"า Clipping Mask > > กด้ค�ย� Ctrl + C แล่ะ Ctrl + V เพั*�อค�ด้ล่อกภาพั> น"าร์6ป็ภาพัที่��ต�องการ์ที่"าเป็นล่าย น"ามาวิางที่�บ> คล่�กขวิาเล่เยอร์� เล่*อก Clipping Mask
Time Up!
1. ป4ด้คอมพื้�วเตอร$2. วางเมาสี$ ค�ย$บอร$ด้ ให�เร�ยบร�อย3. เล��อน่เก�าอ��เข�าใต�โตAะ4. ย�น่หล�งเก�าอ��5. น่��ง