35
โรงเรียนสตรีนครสวรรค์ การใช้อุปกรณ์ในการวาดภาพ การทางานกับสี เครื่องมือตบแต่งภาพ อ.อลงกรณ์ ราชคฤห์ รายวิชา การงานอาชีพและเทคโนโลยีพื้นฐาน 5 กลุ่มสาระการเรียนรู้การงานอาชีพและเทคโนโลยี

การใช้อุปกรณ์ในการวาดภาพ การท ... · 2012-07-09 · Shape [ วาดรูปทรงพื้นฐาน ] 4. การวาดรูปทรงเรขาคณิต

  • Upload
    others

  • View
    4

  • Download
    0

Embed Size (px)

Citation preview

Page 1: การใช้อุปกรณ์ในการวาดภาพ การท ... · 2012-07-09 · Shape [ วาดรูปทรงพื้นฐาน ] 4. การวาดรูปทรงเรขาคณิต

โรงเรียนสตรีนครสวรรค์

การใช้อุปกรณ์ในการวาดภาพ การท างานกับสี เครื่องมือตบแต่งภาพ

อ.อลงกรณ์ ราชคฤห์รายวิชา การงานอาชีพและเทคโนโลยีพื้นฐาน 5

กลุ่มสาระการเรียนรู้การงานอาชีพและเทคโนโลยี

Page 2: การใช้อุปกรณ์ในการวาดภาพ การท ... · 2012-07-09 · Shape [ วาดรูปทรงพื้นฐาน ] 4. การวาดรูปทรงเรขาคณิต

Color [ ท างานกับสี ]

วัตถุใน Flash จะประกอบด้วยส่วนประกอบอย่างน้อยๆ 2 ส่วน ได้แก่ พ้ืนของวัตถุ (Background หรือ Fill) และเส้นขอบวัตถุ (Stroke) แต่ละส่วนสามารถแสดงผลด้วยสีที่แตกต่างกันได้ เช่น รูปสี่เหลี่ยมที่มีเส้นขอบสีด้า และพ้ืนข้างในเป็นสีน้้าเงิน ดังนั้นการท้างานเกี่ยวกับสี จึงเป็นการท้างานที่จะต้องเกี่ยวข้องตลอดเวลา โดยอาศัยชุดเครื่องมือเลือกสี จาก Toolbox

Page 3: การใช้อุปกรณ์ในการวาดภาพ การท ... · 2012-07-09 · Shape [ วาดรูปทรงพื้นฐาน ] 4. การวาดรูปทรงเรขาคณิต

Color [ ท างานกับสี ]

รายละเอียดเกี่ยวกับส่วนควบคุมสีใน Toolbox

Page 4: การใช้อุปกรณ์ในการวาดภาพ การท ... · 2012-07-09 · Shape [ วาดรูปทรงพื้นฐาน ] 4. การวาดรูปทรงเรขาคณิต

Color [ ท างานกับสี ]

รายการเลือก No Color จะแสดงผลเมื่อคลิกเลือกวาดสี่เหลี่ยม หรือวาดวงกลม ดังนั้นก่อนเลือกสีให้กับการวาดสี่ เหลี่ยม , วงกลม ควรคลิกเลือกเครื่องมือวาดสี่เหลี่ยม หรือวาดวงกลมก่อนที่จะคลิกปุ่มเลือกสี ซึ่ง เป็นรายการส้าคัญมาก และมักจะเป็นรายการที่เข้าใจผิด เช่น ถ้าต้องการวาดวงกลมไม่มีสีพ้ืน หลายๆ ท่าน จะใช้วิธีการเลือก Fill Color ให้กับสีของ Background เช่น ถ้า Background เป็นสีขาว ก็จะเลือก Fill Color เป็นสีขาว ซึ่งมีความหมายที่ต่างไป

Page 5: การใช้อุปกรณ์ในการวาดภาพ การท ... · 2012-07-09 · Shape [ วาดรูปทรงพื้นฐาน ] 4. การวาดรูปทรงเรขาคณิต

Color [ ท างานกับสี ]

Page 6: การใช้อุปกรณ์ในการวาดภาพ การท ... · 2012-07-09 · Shape [ วาดรูปทรงพื้นฐาน ] 4. การวาดรูปทรงเรขาคณิต

Color [ ท างานกับสี ]

การเลือกสีให้กับกราฟิกต่างๆ ที่วาดด้วยเครื่องมือของ Flash นอกจากจะใช้ส่วนควบคุมสีที่กล่าวไปแล้ว ก็จะมีรายการเลือกสีใน Properties Panel ของเครื่องมือนั้นๆ

Page 7: การใช้อุปกรณ์ในการวาดภาพ การท ... · 2012-07-09 · Shape [ วาดรูปทรงพื้นฐาน ] 4. การวาดรูปทรงเรขาคณิต

Color [ ท างานกับสี ]

แผงควบคุมสี (Color Panel) Color Panel เป็นการเพ่ิมประสิทธิภาพของการท้างาน

เกี่ยวกับสี โดยเฉพาะในส่วนที่เป็นการไล่โทนสี (Gradient) เนื่องจากการสร้างชุดสีการไล่โทน ไม่สามารถท้าได้จากส่วนควบคุมสีปกติ Flash เตรียม Panel เกี่ยวกับสีไว้ 2 ชุดคือ1. Swatches ซึ่งมีการท้างาน/ใช้งานลักษณะเดียวกับ Toolbox 2. Color มีส่วนเพิ่มเติมการใช้สีมากกว่าปกติ

Page 8: การใช้อุปกรณ์ในการวาดภาพ การท ... · 2012-07-09 · Shape [ วาดรูปทรงพื้นฐาน ] 4. การวาดรูปทรงเรขาคณิต

Color [ ท างานกับสี ]แผงควบคุมสี (Color Panel)

1. Swatches ซึ่งมีการท้างาน/ใช้งานลักษณะเดียวกับ Toolbox

Page 9: การใช้อุปกรณ์ในการวาดภาพ การท ... · 2012-07-09 · Shape [ วาดรูปทรงพื้นฐาน ] 4. การวาดรูปทรงเรขาคณิต

Color [ ท างานกับสี ]

แผงควบคุมสี (Color Panel)2. Color มีส่วนเพ่ิมเติมการใช้สีมากกว่าปกติ ปกติ เช่น การท้า

สีแบบไล่โทนลักษณะต่างๆ, การใช้ภาพกราฟิกมาเป็นพ้ืนของกราฟิก (Texture) รวมทั้งการปรับค่าความโปร่งใสของสี (Alpha)

การเลือกรายการจาก Color มีรายการที่น่าสนใจ คือ Fill Type ซึ่งจะช่วยให้ผู้ใช้สามารถเลือกรูปแบบของสีได้หลากหลายลักษณะ เช่น สีพ้ืน (Solid Color), สีไล่โทนแบบเส้นตรง (LinearGradient), สีไล่โทนแบบรัศมี (Radial Gradient) และการน้าภาพจากภายนอกมาเป็นพ้ืนของวัตถ(ุBitmap Background)

Page 10: การใช้อุปกรณ์ในการวาดภาพ การท ... · 2012-07-09 · Shape [ วาดรูปทรงพื้นฐาน ] 4. การวาดรูปทรงเรขาคณิต

Color [ ท างานกับสี ]

แผงควบคุมสี (Color Panel)การท้าสีแบบไล่โทนลักษณะต่างๆ

Page 11: การใช้อุปกรณ์ในการวาดภาพ การท ... · 2012-07-09 · Shape [ วาดรูปทรงพื้นฐาน ] 4. การวาดรูปทรงเรขาคณิต

Color [ ท างานกับสี ]

แผงควบคุมสี (Color Panel) ความโปร่งใสของสีวัตถุ (Alpha)

Page 12: การใช้อุปกรณ์ในการวาดภาพ การท ... · 2012-07-09 · Shape [ วาดรูปทรงพื้นฐาน ] 4. การวาดรูปทรงเรขาคณิต

Shape [ วาดรูปทรงพื้นฐาน ]

1. รูปแบบการวาดภาพการวาดภาพจากโปรแกรม Flash สามารถแบ่งออกเป็น 2

รูปแบบ ดังนี้ 1) การวาดแบบ Merge Drawing รูปทรงที่วาดจะมีผลต่อ

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

Page 13: การใช้อุปกรณ์ในการวาดภาพ การท ... · 2012-07-09 · Shape [ วาดรูปทรงพื้นฐาน ] 4. การวาดรูปทรงเรขาคณิต

Shape [ วาดรูปทรงพื้นฐาน ]

1. รูปแบบการวาดภาพการวาดภาพจากโปรแกรม Flash สามารถแบ่งออกเป็น 2

รูปแบบ ดังนี้ 1.1) การวาดแบบ Merge Drawing รูปทรงที่วาดจะมีผลต่อ

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

Page 14: การใช้อุปกรณ์ในการวาดภาพ การท ... · 2012-07-09 · Shape [ วาดรูปทรงพื้นฐาน ] 4. การวาดรูปทรงเรขาคณิต

Shape [ วาดรูปทรงพื้นฐาน ]

1.1) การวาดแบบ Merge Drawing

Page 15: การใช้อุปกรณ์ในการวาดภาพ การท ... · 2012-07-09 · Shape [ วาดรูปทรงพื้นฐาน ] 4. การวาดรูปทรงเรขาคณิต

Shape [ วาดรูปทรงพื้นฐาน ]

1. รูปแบบการวาดภาพการวาดภาพจากโปรแกรม Flash สามารถแบ่งออกเป็น 2

รูปแบบ ดังนี้ 1.2) การวาดแบบ Object Drawing ซึ่งรูปทรงทั้งในส่วนของ

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

Page 16: การใช้อุปกรณ์ในการวาดภาพ การท ... · 2012-07-09 · Shape [ วาดรูปทรงพื้นฐาน ] 4. การวาดรูปทรงเรขาคณิต

Shape [ วาดรูปทรงพื้นฐาน ]

1.2) การวาดแบบ Object Drawing

Page 17: การใช้อุปกรณ์ในการวาดภาพ การท ... · 2012-07-09 · Shape [ วาดรูปทรงพื้นฐาน ] 4. การวาดรูปทรงเรขาคณิต

Shape [ วาดรูปทรงพื้นฐาน ]

2. การก าหนดคุณสมบัติของรูปทรง เร่ิมต้นก่อนที่จะวาดภาพใดๆ อาจก าหนดค่าคุณสมบัติเกี่ยวกับ

ส่วนของเส้นและพื้นของรูปทรงแล้วจึงเลือกปุ่มเคร่ืองมือ เพื่อวาดภาพต่างๆ ก็ได้ ซึ่งค่าคุณสมบัติต่างๆ เป็นดังนี้

Page 18: การใช้อุปกรณ์ในการวาดภาพ การท ... · 2012-07-09 · Shape [ วาดรูปทรงพื้นฐาน ] 4. การวาดรูปทรงเรขาคณิต

Shape [ วาดรูปทรงพื้นฐาน ]

Page 19: การใช้อุปกรณ์ในการวาดภาพ การท ... · 2012-07-09 · Shape [ วาดรูปทรงพื้นฐาน ] 4. การวาดรูปทรงเรขาคณิต

Shape [ วาดรูปทรงพื้นฐาน ]

Page 20: การใช้อุปกรณ์ในการวาดภาพ การท ... · 2012-07-09 · Shape [ วาดรูปทรงพื้นฐาน ] 4. การวาดรูปทรงเรขาคณิต

Shape [ วาดรูปทรงพื้นฐาน ]3. การวาดเส้น

1) การวาดเส้นตรงด้วย Line Tool

Page 21: การใช้อุปกรณ์ในการวาดภาพ การท ... · 2012-07-09 · Shape [ วาดรูปทรงพื้นฐาน ] 4. การวาดรูปทรงเรขาคณิต

Shape [ วาดรูปทรงพื้นฐาน ]3. การวาดเส้น

2) การวาดเส้นอิสระด้วย Pencil Tool

Page 22: การใช้อุปกรณ์ในการวาดภาพ การท ... · 2012-07-09 · Shape [ วาดรูปทรงพื้นฐาน ] 4. การวาดรูปทรงเรขาคณิต

Shape [ วาดรูปทรงพื้นฐาน ]4. การวาดรูปทรงเรขาคณิต

1) วาดรูปสี่เหลี่ยมด้วย Rectangle Tool

Page 23: การใช้อุปกรณ์ในการวาดภาพ การท ... · 2012-07-09 · Shape [ วาดรูปทรงพื้นฐาน ] 4. การวาดรูปทรงเรขาคณิต

Shape [ วาดรูปทรงพื้นฐาน ]4. การวาดรูปทรงเรขาคณิต

1) วาดรูปสี่เหลี่ยมด้วย Rectangle Tool

Page 24: การใช้อุปกรณ์ในการวาดภาพ การท ... · 2012-07-09 · Shape [ วาดรูปทรงพื้นฐาน ] 4. การวาดรูปทรงเรขาคณิต

Shape [ วาดรูปทรงพื้นฐาน ]4. การวาดรูปทรงเรขาคณิต

2) วาดรูปสี่ เหลี่ยมพร้อมปรับแต่งรูปทรงด้วย Rectangle Primitive Tool

Page 25: การใช้อุปกรณ์ในการวาดภาพ การท ... · 2012-07-09 · Shape [ วาดรูปทรงพื้นฐาน ] 4. การวาดรูปทรงเรขาคณิต

Shape [ วาดรูปทรงพื้นฐาน ]4. การวาดรูปทรงเรขาคณิต

3) วาดรูปวงกลมด้วย Oval Tool

Page 26: การใช้อุปกรณ์ในการวาดภาพ การท ... · 2012-07-09 · Shape [ วาดรูปทรงพื้นฐาน ] 4. การวาดรูปทรงเรขาคณิต

Shape [ วาดรูปทรงพื้นฐาน ]4. การวาดรูปทรงเรขาคณิต

3) วาดรูปวงกลมด้วย Oval Tool

Page 27: การใช้อุปกรณ์ในการวาดภาพ การท ... · 2012-07-09 · Shape [ วาดรูปทรงพื้นฐาน ] 4. การวาดรูปทรงเรขาคณิต

Shape [ วาดรูปทรงพื้นฐาน ]4. การวาดรูปทรงเรขาคณิต

4) วาดรูปวงกลมพร้อมปรับแต่งรูปทรงด้วย Oval Primitive Tool

Page 28: การใช้อุปกรณ์ในการวาดภาพ การท ... · 2012-07-09 · Shape [ วาดรูปทรงพื้นฐาน ] 4. การวาดรูปทรงเรขาคณิต

Shape [ วาดรูปทรงพื้นฐาน ]4. การวาดรูปทรงเรขาคณิต

4) วาดรูปวงกลมพร้อมปรับแต่งรูปทรงด้วย Oval Primitive Tool

Page 29: การใช้อุปกรณ์ในการวาดภาพ การท ... · 2012-07-09 · Shape [ วาดรูปทรงพื้นฐาน ] 4. การวาดรูปทรงเรขาคณิต

Shape [ วาดรูปทรงพื้นฐาน ]4. การวาดรูปทรงเรขาคณิต

5) วาดรูปหลายเหลี่ยม/รูปดาวด้วย PolyStar Tool

Page 30: การใช้อุปกรณ์ในการวาดภาพ การท ... · 2012-07-09 · Shape [ วาดรูปทรงพื้นฐาน ] 4. การวาดรูปทรงเรขาคณิต

Shape [ วาดรูปทรงพื้นฐาน ]5. การใช้แปรงพู่กัน

1) วาดภาพลายเส้นด้วย Brush Tool

Page 31: การใช้อุปกรณ์ในการวาดภาพ การท ... · 2012-07-09 · Shape [ วาดรูปทรงพื้นฐาน ] 4. การวาดรูปทรงเรขาคณิต

Shape [ วาดรูปทรงพื้นฐาน ]5. การใช้แปรงพู่กัน

2) ระบายสีด้วย Brush Tool

Page 32: การใช้อุปกรณ์ในการวาดภาพ การท ... · 2012-07-09 · Shape [ วาดรูปทรงพื้นฐาน ] 4. การวาดรูปทรงเรขาคณิต

Shape [ วาดรูปทรงพื้นฐาน ]5. การใช้แปรงพู่กัน

2) ระบายสีด้วย Brush Tool

Page 33: การใช้อุปกรณ์ในการวาดภาพ การท ... · 2012-07-09 · Shape [ วาดรูปทรงพื้นฐาน ] 4. การวาดรูปทรงเรขาคณิต

Shape [ วาดรูปทรงพื้นฐาน ]6. การลบรูปทรง

2) ระบายสีด้วย Brush Tool

Page 34: การใช้อุปกรณ์ในการวาดภาพ การท ... · 2012-07-09 · Shape [ วาดรูปทรงพื้นฐาน ] 4. การวาดรูปทรงเรขาคณิต

Shape [ วาดรูปทรงพื้นฐาน ]6. การลบรูปทรง

2) ระบายสีด้วย Brush Tool

Page 35: การใช้อุปกรณ์ในการวาดภาพ การท ... · 2012-07-09 · Shape [ วาดรูปทรงพื้นฐาน ] 4. การวาดรูปทรงเรขาคณิต

Shape [ วาดรูปทรงพื้นฐาน ]6. การลบรูปทรง

2) ลบเส้น/พ้ืนด้วย Eraser Tool โดยใช้ปุ่ม Faucet