ใบความรู้ที่ 5...

16
วิชาการสรางภาพเคลื่อนไหว รหัส ง30245 โรงเรียนแนงมุดวิทยา หนา 1 ปรับเปลี่ยนทิศทางการเทสีดวยเครื่องมือ Gradient Transform Tool หนาที่การทํางานของเครื่องมือ Gradient Transform Tool สามารถแบงได 2 ลักษณะ คือ 1. เมื่อทํางานกับออบเจ็กตและไดทําการเทสีในลักษณะที่มีการไลเฉดสี (Gradient) เครื่องมือ Gradient Transform Tool จะมีหนาที่ในการปรับเปลี่ยนทิศทางการไลเฉดสี รวมถึง ปรับ ชวงโทนสีที่ตองการใหปรากฏขึ้นมาไดตามตองการ 2. เมื่อทํางานกับภาพกราฟกและไดสั่งทําการ Break Apart เพื่อแยกองคประกอบของภาพ ออกมาแลวเครื่องมือ Gradient Transform Tool จะมีหนาที่ในการปรับเปลี่ยนทิศทางของภาพ สําหรับขั้นตอนการทํางานกับเครื่องมือ Brush Tool ทั้ง 2 ลักษณะ สามารถแยกเปนหัวขอตาม ขั้นตอน ดังนีปรับเปลี่ยนรัศมีของคาสี เมื่อทําการเทสีลงบนออบเจ็กตโดยมีการไลเฉดสีในลักษณะเปนรูปวงกลมแลว ที่ดานนอกจะ เปนสีดํา ซึ่งมีความเขมมากกวาดานใน นักเรียนสามารถปรับเปลี่ยนรัศมีของคาสีดานนอกและดานใน ของรูปวงกลม ใหมีความเขมจาง มากนอยตามตองการได ดังนี1. คลิกเลือกออบเจ็กตที่ตองการเทสี 2. คลิกปุม Paint Bucket Tool ที่ทูลบ็อกซ 3. คลิกเลือกสีของพื้นที่ตองการเทจากชอง Fill Color ใบความรูที5 เรื่อง การตกแตงภาพใหมีสีสันสวยงาม (ตอ) วิชาการสรางภาพเคลื่อนไหว ชั้น ม.6 เวลา 2 ชั่วโมง ครูผูสอน ครูจิรัฐชญา ปาแปง

Transcript of ใบความรู้ที่ 5...

วิชาการสรางภาพเคล่ือนไหว รหัส ง30245 โรงเรียนแนงมุดวิทยา หนา 1

ปรับเปลี่ยนทิศทางการเทสีดวยเครื่องมือ Gradient Transform Tool

หนาที่การทํางานของเครื่องมือ Gradient Transform Tool สามารถแบงได 2 ลักษณะ คือ

1. เมื่อทํางานกับออบเจ็กตและไดทําการเทสีในลักษณะที่มีการไลเฉดส ี(Gradient)

เครื่องมือ Gradient Transform Tool จะมีหนาที่ในการปรับเปลี่ยนทิศทางการไลเฉดส ี รวมถึง

ปรับ ชวงโทนสีที่ตองการใหปรากฏข้ึนมาไดตามตองการ 2. เมื่อทํางานกับภาพกราฟกและไดสั่งทําการ Break Apart เพื่อแยกองคประกอบของภาพ

ออกมาแลวเครื่องมือ Gradient Transform Tool จะมีหนาที่ในการปรับเปลี่ยนทิศทางของภาพ

สําหรับข้ันตอนการทํางานกับเครื่องมือ Brush Tool ทั้ง 2 ลักษณะ สามารถแยกเปนหัวขอตาม

ข้ันตอน ดังน้ี ปรับเปลี่ยนรัศมีของคาสี เมื่อทําการเทสีลงบนออบเจ็กตโดยมีการไลเฉดสีในลักษณะเปนรูปวงกลมแลว ที่ดานนอกจะ

เปนสีดํา ซึ่งมีความเขมมากกวาดานใน นักเรียนสามารถปรับเปลี่ยนรัศมีของคาสีดานนอกและดานใน

ของรูปวงกลม ใหมีความเขมจาง มากนอยตามตองการได ดังน้ี 1. คลิกเลือกออบเจ็กตที่ตองการเทส ี

2. คลิกปุม Paint Bucket Tool ที่ทูลบ็อกซ

3. คลิกเลือกสีของพื้นที่ตองการเทจากชอง Fill Color

ใบความรูที่ 5 เรื่อง การตกแตงภาพใหมีสีสันสวยงาม (ตอ)

วิชาการสรางภาพเคลื่อนไหว ชั้น ม.6 เวลา 2 ชั่วโมง ครูผูสอน ครูจิรัฐชญา ปาแปง

วิชาการสรางภาพเคล่ือนไหว รหัส ง30245 โรงเรียนแนงมุดวิทยา หนา 2

4. คลิกปุม Free Transform Tool ที่ทูลบ็อกซคางไว จากน้ันเลือก ที ่Gradient

Transform Tool

5. คลิกที่ออบเจ็กตจะปรากฏจุดแฮนเดิลข้ึนมา จากน้ันใหคลิกที่จุดแฮนเดิลรูปวงกลม

และดรากสเมาส ทําการยอ ขยายรัศมีของคาสีที่ไดในลักษณะเปนรูปวงกลม

วิชาการสรางภาพเคล่ือนไหว รหัส ง30245 โรงเรียนแนงมุดวิทยา หนา 3

ปรับเปลี่ยนการไลเฉดส ี

การไลเฉดสีลงบนออบเจ็กตไมเพียงแตมีลักษณะเปนรูปวงกลมเทาน้ัน แตหากตองการไลเฉด

สีในลักษณะเทส ีไลเรียงตอกับไปก็สามารถทําไดเชนกัน สําหรับตัวอยางตอไปน้ีเปนการไลโทนสีเปน

สายรุง จากน้ันจะทําการปรับเปลี่ยนชวงโทนส ีและตอมาจึงทําการปรับเปลี่ยนทิศทางการเทส ี

ตามลําดับ

1. คลิกเลือกออบเจ็กตที่ตองการเทส ี 2. คลิกปุม Paint Bucket Tool ที่ทูลบ็อกซ 3. คลิกเลือกสีของพื้นที่ตองการเทจากชอง Fill Color 4. คลิกปุม Free Transform Tool ที่ทูลบ็อกซคางไว จากน้ันเลือก ที ่Gradient

Transform Tool 5. คลิกที่ออบเจ็กตจะปรากฏจุดแฮนเดิลข้ึนมา จากน้ันใหคลิกที่จุดแฮนเดิลรูปสี่เหลี่ยม

และดรากสเมาสทําการยอ ขยายชวงโทนส ีของคาสีที่ตองการ

วิชาการสรางภาพเคล่ือนไหว รหัส ง30245 โรงเรียนแนงมุดวิทยา หนา 4

วิชาการสรางภาพเคล่ือนไหว รหัส ง30245 โรงเรียนแนงมุดวิทยา หนา 5

หนาตาง Color Swatches เปดหนาตาง Color Swatches ดวยการกดปุม <Shift+F3> จะปรากฏชองสี่เหลี่ยมเล็ก

แสดงส ีตางๆ ใหเลือกซึ่งสีที่ไดจะเปนสีเดียวกันกับ Swatches ของกรอบแสดงสีของเครื่องมือ

Fill ในกลองเครื่องมือน่ันเอง น่ันคือเมื่อเราเลือกสีใดจากกรอบแสดงส ี หรือหนาตาง Color

Swatches จะมีคาเทากันคือ เปนสีเดียวกันเสมอหากตองการสีสันมากกวาน้ีแนะนําใหไปเลือก

กําหนดเอาในหนาตาง Color Mixed ในหัวขอถัดไป

หนาตาง Color Swatches

วิชาการสรางภาพเคล่ือนไหว รหัส ง30245 โรงเรียนแนงมุดวิทยา หนา 6

หนาตาง Color Mixer สิ่งสําคัญของการกําหนดสีสันในหนาตางน้ีจะอยูที่การกําหนดใหไลเฉดสีเรียกวา Gradient

นอกจากน้ียังสามารถกําหนดสีในโหมด RGB , HSB รวมถึงการกําหนดคาความโปรงใสของการเติมส ี

(Alpha) ไดอีกดวยเปดหนาตาง Color Mixed ดวยการกดปุม <Shift+F9> หรือคลิกเมนู Window

> Design Panels > Color Mixer การกําหนดสีแบบตางๆ ไดอยางอิสระในหนาตาง Color Mixed

มีรายละเอียดดังน้ี

การกําหนดสีแบบ Gradient ไดเอง การใสสีสันใหกับช้ินงานดวยวิธีไลเฉดสีน้ี นอกจากจะชวยเพิ่มความสนใจใหกับช้ินงานแลวยัง ทําใหมุมมองของภาพ 2 มิติ คลายกับภาพ 3 มิติไดอีกดวย การใสสีแบบ Gradient มีดวยกัน

2 ลักษณะ ที่ตางกัน คือ การไลเฉดสีแบบแนวรัศม ี(Radial Gradient) ซึ่งวิธีการกําหนดและใชงานสี

แบบ Gradient ทั้ง 2 แบบมีรายละเอียดดังน้ี

Radial Gradient ไลเฉดสีแนวรัศม ี การไลเฉดสีแบบน้ีมักจะใชกับช้ินงานที่เปนวงกลม วงรี หรือลักษณะของการสรางปุม

ก็เพราะ การไลเฉดสีแบบน้ีทําใหสรางมุมมองช้ินงาน ดังตัวอยางตอไปน้ี 1. คลิกเครื่องมือสรางรูปดาวในกลองเครื่องมือ 2. คลิกเมาสแลวลากสรางรูปดาวบนสเตจ

วิชาการสรางภาพเคล่ือนไหว รหัส ง30245 โรงเรียนแนงมุดวิทยา หนา 7

3. เปดหนาตาง Color คลิกเมนู Window แลวเลือก Color หรือกดปุม <Shift+F9>

4. คลิกตัวเลือก Radial Gradient

5. ตอนน้ีจะเลือกไลเฉดสีเพียง 2 สีกอน สังเกตวาปุมเลื่อนปรับสีจะม ี2 อัน อยูซายสุด

กับขวาสุดบนแถบส ี

6. คลิกถังเติมสีในกลองเครื่องมือ

7. คลิกเมาสกลางวงกลม 1 ครั้งเพื่อเปลี่ยนสีใหกับวงกลมตามที่กําหนด ซึ่งจะเห็นวาสีใหม

ที่ไดจะมีการเลือกเอาไว

8. คลิกเมาสบนปุมเลื่อนปรับสีอันขวามือ

วิชาการสรางภาพเคล่ือนไหว รหัส ง30245 โรงเรียนแนงมุดวิทยา หนา 8

9. ทําการเปลี่ยนสีโดยคลิกเมาสบนกรอบแสดงส ี

10. เมื่อเมาสเปลี่ยนเปน รูปวงกลม แลวใหคลิกเมาสเลือกสีที่ตองการ

11. คลิกเมาสคางไวแลวเลื่อนปุมเลื่อนอันขวามือมาทางซายเพื่อปรับขอบเขตของส ีย่ิงเลื่อน

เขามามากสีที่กําลังปรับจะมีพื้นที่ของสีน้ัน ๆมากข้ึนและจุดเปลี่ยนของสีจะขยับไปดวย

วิชาการสรางภาพเคล่ือนไหว รหัส ง30245 โรงเรียนแนงมุดวิทยา หนา 9

Linear Gradient ไลเฉดสีในแนวตรง ในทํานองเดียวกันกับการไลเฉดสีแบบแนวรัศม ี สามารถที่จะใสสีสันในแนวตรงไดเชนเดียว กัน มักจะนิยมใชเทคนิคน้ีไปตกแตงสีพื้นหลังของเว็บไซตหรือช้ินงานอิสระหรืออาจจะนํา ไปสรางเปน

Theme เพื่อใหช้ินงานทั้งหมดมีลวดลายใกลเคียงกัน ในหัวขอน้ีจะเพิ่มเติมในเรื่องการเพิ่มสีที่จะเขา

มาเกี่ยวของกับการไลเฉดสีดวย

1. คลิกเครื่องมือสรางสี่เหลี่ยมในกลองเครื่องมือ

2. ปรับมุมของสี่เหลี่ยมโดยไปที ่ Properties

3. คลิกเมาสแลวลากเพื่อสรางสีเหลี่ยมบนสเตจ

4. คลิกตัวเลือก Linear Gradient ในหนาตาง Color

5. ตอนน้ีจะเลือกไลเฉดสีเพียง 2 สีกอน สังเกตวาปุมเลื่อนปรับสีจะม ี2 อัน อยูซายสุดกับ

ทางขวาบนแถบส ี

6. คลิกถังเติมสีในกลองเครื่องมือ

7. คลิกเมาสกลางสี่เหลี่ยม 1 ครั้ง เติมสีใหมที่ไดจะมีการไลเฉดส ี2 ส ี

วิชาการสรางภาพเคล่ือนไหว รหัส ง30245 โรงเรียนแนงมุดวิทยา หนา 10

8. วางเมาสใตแถบสีสังเกตที่เมาสจะแสดงเครื่องหมาย + ข้ึนมาใหเห็น คลิกเพิ่มปุมเลื่อน

ปรับสีข้ึนมาอีก 1 อันตรงการ

9. คลิกเมาสคางไวบนลูกศรปรับโทนส ี แลวเลื่อนข้ึนหรือเลื่อนลงเพื่อใหไดสีตามที่ตองการ

10. ทําการเลือกสีในกรอบใหญ โดยการคลิก 1 ครั้ง

11. คลิกเมาสเติมสีใหมใหกับสี่เหลี่ยม (หากเมาสไมเปลี่ยนเปนถังเติมสีใหคลิกเลือกเครื่องมือ

เติมสีในกลองเครื่องมือกอน)

วิชาการสรางภาพเคล่ือนไหว รหัส ง30245 โรงเรียนแนงมุดวิทยา หนา 11

12. หากตองการเอาปุมเลื่อนปรับตัวไหนออก ใหคลิกที่ปุมน้ันคางไวแลวลากใหหางจากแถบ

สีแลวปลอยเมาส

การปรับแตสีแบบ Gradient ดวยวิธีอื่น

ใสตัวเองลงในชองตัวเลขแสดงคาส ี โดยการเปลี่ยนตัวเลขคาสีของแมสีในชองโดยตรง ในหนาตาง Color ชอง R จะเปนสีแดง ชอง G จะเปนสีเขียว ชอง B จะเปนสีนํ้าเงิน ชอง Alpha จะปรับความโปรงใสของสีในหนวยเปอรเซ็นตสามารถเลื่อนแถบเลื่อนปรับ คาไดหรือจะใสตัวเลขลงไปโดยตรงก็ได

วิชาการสรางภาพเคล่ือนไหว รหัส ง30245 โรงเรียนแนงมุดวิทยา หนา 12

โคดสี (Hex Color) การแสดงโคดส ี จะแสดงเปนตัวเลขฐาน 16 จํานวน 6 หลักและข้ึนตนดวยเครื่องหมาย # เชน สีแดงจะแทนดวยโคดส ี #FF0000 เปนตน

เปลี่ยนพูกันสีเปนพูกันรูปภาพดวย Pattern

เปลี่ยนปลายแปรงทาส ีหรือปลายพูกันใหเปนรูปภาพ มักพบเห็นโดยทั่วไปในการสรางงาน ดวยโปรแกรมกราฟกในโปรแกรม Flash ก็ไดเตรียมคุณสมบัติน้ีเอาไวใหแลวเชนเดียวกัน ตัวอยาง

ตอไปน้ีนาจะชวยใหความกระจางไดเกี่ยวกับเทคนิคน้ี

1. คลิกเมนู File > Import > Import to Library

2. ดับเบิลคลิกเลือกไฟลรูปที่จะเอามาทําปลายพูกัน

วิชาการสรางภาพเคล่ือนไหว รหัส ง30245 โรงเรียนแนงมุดวิทยา หนา 13

3. เปดหนาตาง Color กดปุม <Shift+F9>

4. คลิกตัวเลือก Bitmap จะพบวารูปที่ดึงเขามาจะแสดงในหนาตาง Color น้ีทั้งหมด

5. คลิกแปรงทาสีในกลองเครื่องมือ

6. เมื่อเมาสเปลี่ยนเปนแปรงทาสีแลว ใหคลิกไปบนรูปโดยตรงในหนาตาง Color

7. ทดสอบการวาดบนสเตจ

วิชาการสรางภาพเคล่ือนไหว รหัส ง30245 โรงเรียนแนงมุดวิทยา หนา 14

8. คลิกไปบนรูปอื่นโดยตรงในหนาตาง Color

9. ทดสอบการวาดอีกครั้ง คราวน้ีก็สามารถเปลี่ยนปลายพูกันไดแลว และนําไปประยุกตใช

งานไดตอไป

ลบพื้นที่สวนที่ไมตองการดวยเครื่องมือ Eraser Tool

หนาที่การทํางานของเครื่องมือ Eraser Tool คือ ใชสําหรับลบพื้นที่บริเวณสวนที่ไมตองการ ออกไปจากภาพโดยสามารถกําหนดรูปแบบลักษณะวิธีในการลบไดมากมายหลากวิธี ซึ่งการใชงาน

เครื่องมือน้ีจะคลายกับการใชเครื่องมือ Brush Tool เพียงแต Eraser Tool จะมีไวเพื่อลบสีออก แต

เครื่องมือ Brush Tool มีไวสําหรับระบายสีเพิ่มสําหรับข้ันตอนการลบโดยใชเครื่องมือ Eraser Tool

สามารถทําไดดังน้ี

1. คลิกปุม Eraser Tool ที่ทูลบ็อกซ

2. ที่ Options ในสวนของ Eraser Mode ใหคลิกเลือกลักษณะวิธีการลบ

Erase Normal ลบโดยทับลงสีเสนและสีพื้นของภาพ

Erase Fills ลบโดยทับลงบนสีพื้นของภาพเทาน้ัน

Erase Lines ลบโดยทับลงบนสีเสนของภาพเทาน้ัน

Erase Selected Fills ลบเฉพาะพื้นที่บริเวณที่ถูกเลือกไวเทาน้ันโดยไมทําการลบเสนให

Erase Inside ลบตามลักษณะการดรากสเมาส เชน หากเริ่มดรากสเมาสที่ดานในภาพ

พื้นที่บริเวณที่ถูกลบก็จะเปนเพียงแคพื้นที่ดานในภาพเทาน้ัน

วิชาการสรางภาพเคล่ือนไหว รหัส ง30245 โรงเรียนแนงมุดวิทยา หนา 15

3. คลิกเลือกรูปรางลักษณะของยางลบที่ใชในการลบ จากสวนของ Eraser Shape

4. ดรากสเมาสทําการลบบริเวณพื้นที่ที่ไมตองการ จากน้ันบริเวณพื้นที่ที่ทําการดรากสเมาส

จะถูกลบหายไป

5. คลิกปุม Faucet รูปกอกนํ้าลางส ีเพื่อใหการลบเปนไปอยางรวดเร็ว เน่ืองจากเพียง

แคคลิกที่บริเวณพื้นหรือเสนของภาพเทาน้ัน โปรแกรมก็จะทําการลบพื้นที่บริเวณที่คลิกเลือกให

ทั้งหมด

6. คลิกพื้นที่บริเวณที่ตองการลบ จากน้ันพื้นที่บริเวณที่คลิกไวจะถูกลบออกไป

วิชาการสรางภาพเคล่ือนไหว รหัส ง30245 โรงเรียนแนงมุดวิทยา หนา 16