31
หหหหหหหห 5 หหหหหหหหหหหหหหห หหหหหห หหหหหหหหหหหหหหหหห หหหหหหหหหหหหหหหห

หน่วยที่ 5

Embed Size (px)

Citation preview

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

สี�

การใสี�สี�ให�ขอบภาพื้

อยากลองออกแบบเสี��อก�น่ไหม?

เสี��อพื้�มพื้$ลาย

เสี��อเปล�า + ลายที่��ช้อบ = เสี��อไม�ซ้ำ'�าใคร

เที่คน่�คการเต�มสี�ภาพื้

ที่ฤษฎี�สี�

ร+ปด้�าน่ล�างวงล�อความสี�มพื้�น่ธ์$ของสี� ซ้ำ.�งบรรจุ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ด้เผู้ย การเก�ด้ ความร�ก ความหว�ง ความจุร�ง   ความเมตตา ความศร�ที่ธ์า ความด้�งาม ให�ความร+�สี.กร��น่เร�ง

โด้ยเฉพื้าะเม��อใช้�ก�บสี�แด้ง เหล�อง และสี�ม

สี�ที่��ใช้�ใน่งาน่ด้�าน่กราฟิ4ก

สี�ที่��ใช้�ใน่งาน่ด้�าน่กราฟิ4กที่��ควรร+� ม� 4 ระบบ ค�อ

• 1. RGB• 2. CMYK• 3. HSB• 4. Grayscale

โหมด้สี� 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ด้

HSB Color ค�ออะไร

โหมด้สี� 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. น่��ง

Bye Bye