E-Book โปรแกรมกราฟิก 2204-2105

21. คลิกที่เฟรมท่ี1
22. แสดงเลเยอรข์ ้อความ และซ่อนเลเยอรข์ อ้ ความท่ีคัดลอก
23. คลิกทเ่ี ฟรมท่ี2
24. ซ่อนเลเยอร์ขอ้ ความ และแสดงเลเยอรข์ ้อความที่คัดลอก
25. ปรับเวลาให้เป็น0.5 ทั้ง2เฟรม
26. ทดลองการเคล่ือนไหวโดยคลิกทปี่ ุ่ม plays animation



การเพิม่ พ้นื ทีว่ า่ งจากรปู ภาพและทำขอ้ ความกะพรบิ

1. เปิดรูปภาพที่ต้องการ
2. เลือกสีพื้นหลังท่ี Background color ท่ตี อ้ งการ (จากภาพเลือกพน้ื หลังเปน็ ทขี่ าว)
3. เลอื กเมนู Image เลอื ก Canvas Size
4. ปรากฏกล่อง Canvas Size

4.1 ต๊ิก✔️ ที่กล่อง Relative
4.2 กำหนดค่า width เป็น 5 Cm
4.3 กำหนดค่า Anchor เปน็ จุดก่ึงกลางซา้ ย(สงั เกตลกู ศรจะชไ้ี ปทางขวาหมายถงึ เพ่ิมพืน้ ที่
ความกวา้ งทางขวา 5 cm ตามคา่ Width
4.4 แลว้ กดOK
5. รปู ภาพถูกเพม่ิ ข้นึ ทีท่ างขวา 5CM
6. เลอื กเครื่องมือ Vertical Type Tool
7. ปรบั ขนาด สี แบบอักษร และคลกิ บนพืน้ ทว่ี ่างเพ่ือพมิ พ์ข้อความ
8. กดป่มุ เพ่อื ยนื ยันการใชข้ อ้ ความ
9. คัดลอกเฟรมโดยคลิกทีป่ ุ่ม Duplicates selected frames
10. คลกิ เลือกเฟรมท่ี 2
11. ท่ีเฟรมที่ 2 ใหซ้ อ่ นเลเยอร์โดยการคลกิ ท่ี ของเลเยอรข์ ้อความ
12. ปรบั เวลาใหเ้ ป็น 0.5 ทั้ง 2 เฟรม
13. ทดลองการเคล่อื นไหวโดยคลิกที่ปุ่ม Plays animation







การสร้างภาพเคลอ่ื นไหว (Animation)

แนวคิด
ภาพเคลอ่ื นไหว คือ ลำดับของภาพนงิ่ ซง่ึ ถกู นำมาแสดงผลติดตอ่ กันอย่างตอ่ เนื่องในการสร้าง

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

สาระการเรียนรู้
7. ความหมายของภาพเคลอ่ื นไหว
8. ลกั ษณะของภาพเคลือ่ นไหว
9. หน้าตา่ ง Animation
10. การสรา้ งภาพเคล่ือนไหวโดย layer
11. การลดขนาดของภาพและสร้างข้อความดกุ๊ ด๊กิ
12. การเพ่ิมพนื้ ที่วา่ งจากรูปภาพเพื่อทำข้อความกะพริบ

ผลการเรยี นรูท้ ่ีคาดหวัง
7. อธบิ ายความหมายของภาพเคล่อื นไหวได้
8. อธบิ ายลักษณะของภาพเคล่ือนไหวได้
9. อธบิ ายหน้าตา่ งAnimationได้
10. สร้างภาพเคล่อื นไหวดว้ ยlayerได้
11. ลดขนาดของภาพสร้างความดุกดิกได้
12. เพ่ิมพน้ื ทวี่ า่ งจากรูปภาพเพ่อื ทำขอ้ ความกะพริบได้



แบบประเมินผลกอ่ นเรียนหนว่ ยท่ี 10

คำส่ัง จงเลอื กคำตอบทถี่ กู ต้องเพียงข้อเดยี ว

1. ขอ้ ความใดกล่าวไมถ่ ูกตอ้ งเก่ยี วกบั ภาพเคล่ือนไหว

ก. ภาพเคลอ่ื นไหวทีส่ มั พนั ธ์กันสามารถสร้างความสนใจให้เพมิ่ ขึ้นได้

ข. ภาพเคล่อื นไหวเปน็ การทำภาพกราฟิกให้ดเู หมอื นมีชวี ติ

ค. ควรมีการเลือกรูปแบบของการสร้างรปู ภาพเคลอื่ นไหววัตถุใหเ้ หมาะสม

ง. GIF เปน็ ภาพท่ีต้องการความคมชดั สงู

2. ข้อใดหมายถงึ ภาพนงิ่ แต่ละภาพท่ปี รากฏบนภาพเคล่ือนไหว

ก. Frame

ข. Record

ค. Layer

ง. GIF

3. ในการสรา้ งภาพเคล่ือนไหวตอ้ งกำหนดไฟล์ให้เปน็ นามสกลุ ใด

ก. .jpg ข. .gif

ค. .cad ง. .pig

4. ข้อใดหมายถึงภาพเคล่อื นไหวแบบ Frame by Frame

ก. เหมาะสำหรับการสรา้ งภาพเคลอ่ื นไหวทีม่ ีความซับซ้อนมากๆ

ข. เปน็ การสร้างภาพเคลื่อนไหวโดยไมส่ ามารถกำหนดการเปลี่ยนแปลงได้

ค. โปรแกรมจะสร้างการเปลี่ยนแปลงระหวา่ งเฟรมให้โดยอัตโนมตั ิ

ง. มกี ารสรา้ งเฟรมเพยี ง 2 เฟรม

5. ข้อใดหมายถงึ ภาพเคล่อื นไหวแบบ Tween

ก. การกำหนดการเปลีย่ นแปลงของวตั ถุทีแ่ ตกตา่ งกันในทุก ๆ เฟรม

ข. เหมาะสำหรับการสรา้ งภาพเคล่อื นไหวท่ีมีความซับซ้อนมากๆ

ค. สามารถกำหนดการเปลีย่ นแปลงของวัตถใุ นเฟรมตา่ งๆ ได้

ง. เปน็ การสรา้ งภาพเคลื่อนไหวจากเฟรมเบ้ืองตน้ และเฟรมสุดทา้ ยโดยโปรแกรมอตั โนมัติ

6.ขอ้ ใดต่อไปนกี้ ลา่ วถูกตอ้ ง

ก. การทำตวั อักษรกะพรบิ ไม่ถือเปน็ การทำแอนิเมชัน

ข. การทำตวั อักษรกะพริบเป็นการทำแอนเิ มชัน

ค. การทำตัวอักษรเล่ือนไม่ถอื เปน็ การทำแอนเิ มชนั



ง. การทำตัวอกั ษรดึกดกึ ไมถ่ ือเป็นการทำแอนิเมชัน

7. ขอ้ ใดคือคุณสมบัติของเครื่องมือ Constrain Proportions

ก. ปรับขนาดภาพตามผู้ใช้ทตี่ ้องการไดโ้ ดยไมร่ ักษาสเกล

ข. เป็นการปรับขนาดสเกลอัตโนมัตเิ ม่ือผ้ใู ช้มีการปรบั ขนาดภาพ

ค. เปลีย่ นภาพให้ตกุ๊ ติ๊กได้อัตโนมตั ิ

ง. ทำขอ้ ความใหเ้ ป็นข้อความเล่อื น

8. ขอ้ ใดหมายถึง Width

ก. ความสูง ข. ความลึก

ค. ความกวา้ ง ง. ความชดั

9. ข้อใดหมายถึง Height

ก. ความกวา้ ง ข. ความยาว

ค. ความสูง ง. ความลึก

10. ข้อใดเป็นเคร่ืองมือในการเพมิ่ พน้ื ทรี่ ูปภาพ

ก. Canvas Size ข. Image Size

ค. Add Size ง. ไม่มขี ้อใดถกู



ความหมายของภาพเคลื่อนไหว

ภาพเคล่ือนไหว (Animation) หมายถงึ ภาพกราฟฟกิ ท่มี ีการทำใหด้ เู หมือนมชี ีวติ เพ่ือแสดง
ขัน้ ตอนหรือปรากฏการณต์ า่ งๆท่ีเกิดขนึ้ อยา่ งต่อเนื่องเชน่ การเคล่อื นท่ีของตัวการ์ตนู การเคลือ่ นที่
ของขอ้ ความ หรือโฆษณาท่ีใชร้ ปู ภาพเป็นสือ่ บนอินเทอรเ์ น็ต เปน็ ต้น ซ่ึงภาพนิง่ แต่ละภาพที่ปรากฏ
บนภาพเคล่อื นไหวแต่ละภาพนน้ั เรียกวา่ เฟรม(Frame) ท้ังนี้เพื่อสรา้ งสรรคจ์ นิ ตนาการใหเ้ กดิ แรงจงู ใจ
จากผู้ชมการผลิตภาพเคลื่อนไหวจะต้องใชโ้ ปรแกรมทม่ี ีคุณสมบัตเิ ฉพาะทางซึ่งอาจมปี ญั หาเกิดขน้ึ อยู่
บา้ งเกี่ยวกับขนาดของไฟล์ท่ีต้องใชพ้ ืน้ ทใี่ นการจดั เกบ็ มากกว่าภาพนิง่ หลายเท่า

รปู ภาพแสดงการเคล่อื นไหวของตัวการต์ ูนตั้งแตเ่ ฟรมที่ 1 ถึง เฟรมท่ี 28

GIF ยอ่ มาจาก Graphics Interchange Format เป็นภาพที่ต้องการความคมชัดมาก จำนวน
สแี ละความละเอยี ดของภาพไมส่ ูงมากนัก (256 สี) สามารถกำหนดพ้ืนแบบโปร่งใสต้องการและ
แสดงผลโครงร่างก่อน แล้วคอ่ ยแสดงผลแบบละเอียดได้ และเหมาะสมกับการนำเสนอภาพแบบ
เคลอื่ นไหวในการสร้างภาพเคล่อื นไหว ต้องบนั ทึกไฟลน์ ามสกุล .gif

ลกั ษณะของภาพเคล่อื นไหว

การเคลือ่ นไหวของรูปภาพมี 2 รปู แบบ คอื
4. การเคลื่อนไหวแบบ Frame by Frame คอื การกำหนดการเปลยี่ นแปลงของวัตถุแตกตา่ ง

กนั ในทุกๆ เฟรม เหมาะสมสำหรับการสร้างภาพเคลื่อนไหวทมี่ คี วามซับซอ้ นมากๆ
5. การเคลื่อนไหวแบบ Tween เป็นการสรา้ งภาพเคล่ือนไหวจากเฟรมเบ้ืองต้นและเฟรม

สดุ ท้ายซงึ่ โปรแกรมจะสร้างการเปลี่ยนแปลงระหวา่ งเฟรมใหอ้ ัตโนมตั ิซ่งึ หมายถงึ การสร้าง



ภาพเคล่ือนไหวแบบ Tween จะมกี ารสร้างเซลลเ์ พยี ง 2 เฟรม คือเฟรมเร่ิมตน้ และสน้ิ
สดุ ท้าย

หน้าต่างAnimation

การสร้างภาพเคลื่อนไหวจำเป็นต้องเรยี นรเู้ ก่ียวกับหนา้ ต่างทใ่ี ช้สรา้ งภาพเคลื่อนไหวเพ่ือให้ทราบ
ถงึ ช่อื เรยี กในแต่ละส่วนวา่ มหี นา้ ที่การทำงานอย่างไรในการเรียกหน้าต่าง Animation สามารถทำได้
ดงั นี้

6. สรา้ งรปู ภาพใหม่โดยเลอื กเมนู fire แล้วเลอื ก new..
7. กำหนดพื้นท่ตี ามรูปภาพ แล้วกด ok
8. คดิ ท่ีเมนู window แลว้ เลือก Animation
9. ปรากฏหน้าตา่ ง Animation ใหค้ ลกิ ทป่ี ุ่ม Converts to frame animation
10. ปรากฏหน้าตา่ ง Frame animation



รายละเอยี ดของหนา้ ต่าง Frame animation

ตัวอกั ษร ช่ือเรยี ก ความหมาย
A
B Selects the first frame เลอื กเฟรมแรก
C
D Selects the previous frame เลอื กเฟรมก่อนหน้า
E
F Plays animation เลน่ ภาพเคลอ่ื นไหว
G
H Selects the next frame เลือกเฟรมถดั ไป

T Tweens animation frames ใชค้ ำสง่ั Tween

Duplicates Selected frame คัดลอกเฟรมท่เี ลอื ก

Deletes Selected frame ลบเฟรมทเ่ี ลือก

Converts to timeline mode แสดงเส้นเวลา (เฉพาะ Photoshop

Extended)

Animation panel menu เมนขู องหนา้ ตา่ ง Animation

การสร้างภาพเคล่ือนไหวด้วยlayer

การสร้างภาพเคล่ือนไหวจากทไ่ี ด้กลา่ วไป สามารถสร้างได้ 2 รูปแบบคือ การเคล่ือนไหวแบบ
Frame by Frame และการเคลือ่ นไหวแบบ Tween ซึ่งโปรแกรมอะโดบโี ฟโพช้อป รองรบั การสรา้ ง
ภาพเคลอ่ื นไหวทั้ง 2 แบบด้วยกันเช่น

2. การสร้างภาพเคลอ่ื นไหวดว้ ย layer แบบ Frame by Frame
(1) สร้างรูปภาพใหม่โดยเร่อื งเมนู fire แล้วก็เลือก new..
(2) กำหนดพนื้ ที่ตามรูปภาพ แลว้ กด ok
(3) เลือกเคร่ืองมือ Horizontal Type
(4) พื้นท่วี ่างเพื่อพิมพ์ข้อความ
(5) เลอื กเลเยอร์ข้อความที่ต้องการสรา้ งการเคลอื่ นไหว



(6) ใชเ้ ครือ่ งมือ moveเลือ่ นเฟรมแทรกขอ้ ความไวทางขวา
(7) คดั ลอกเฟรมโดยการคลกิ ทโ่ี ดยการคลิกที่ปุม่ Duplicates selected frames
(8) ท่ีเฟรมท่ี 2 ใช้เครื่องมือmove เล่ือนข้อความไวท้ างก่งึ กลาง
(9) คดั ลอกเฟรมโดยการคลิกทปี่ ุ่ม Duplicates selected frames
(10)ทเี่ ฟรมท่ี 3 ใชเ้ คร่ืองมือ move เลอื่ นข้อความไว้ทางซา้ ย
(11)ทดลองการเคลื่อนไหวโดยคลิกทีป่ มุ่ Plays animation
(12)ปรบั เปลยี่ นความเร็ว และการเลน่ ภาพเคลือ่ นไหวให้เหมาะสม



การบนั ทึกไฟลภ์ าพเคลื่อนไหวเพื่อนำไปใช้งานสามารถทำไดด้ งั นี้
6. เลอื กทเ่ี มนู file แล้วเลอื ก Save for Web & Devices..
7. เลือกประเภทของไฟลเ์ ป็น GIF
8. กดปมุ่ Save
9. ปรากฏหนา้ ตา่ ง Save Optimized As ให้เลอื กตำแหนง่ และใสช่ ื่อไฟลท์ ่ีทต่ี ้องการบันทึก
10. กดปมุ่ Save



รปู ภาพแสดงการบนั ทกึ ไฟลภ์ าพเคล่อื นไหวเพื่อนำไปใชง้ าน



การสร้างภาพเคลื่อนไหวดว้ ย layer แบบ Tween
12. สร้างรูปภาพใหม่โดยเลือกเมนู fire แล้วเลือก new..
13. กำหนดพืน้ ท่ีตามรปู ภาพ แลว้ กด ok
14. เลือกเคร่ืองมือ Horizontal Type
15. คลกิ พ้นื ท่ีวา่ งเพื่อพมิ พ์ข้อความ
16. เลือกเลเยอร์ขอ้ ความที่ต้องการสรา้ งการเคล่อื นไหว

17. ใช้เครอื่ งมือ move เล่ือนเฟรมแทรกขอ้ ความไวท้ างขวา
18. คดั ลอกเฟรมโดยการคลิกท่โี ดยการคลิกทปี่ ุ่ม Duplicates selected frames
19. ทเี่ ฟรมที่ 2 ใชเ้ ครื่องมือ move เลอื่ นข้อความไว้ทางซ้าย
20. คลิกทปี่ มุ่ Tween animation frame



21. กำหนดคา่ ต่างๆตามรูปภาพแลว้ กด ok
22. ทดลองการเคล่ือนไหวโดยคลิกทีป่ มุ่ Plays animation



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

การลดขนาดของภาพและสร้างขอ้ ความดุก๊ ดิ๊ก

27. เปดิ รปู ภาพทต่ี ้องการ
28. เลอื กเมนู Image เลือก Image Size
29. ปรากฏหนา้ ต่าง Image Size

29.1นำเคร่อื งหมายถูก ที่หน้าข้อความ Constrain Proportions ออก
29.2ในกรอบ Pixel Dimensions ปรับ Width เป็น 200 Pixels
29.3ในกรอบ Pixel Dimensions ปรบั Height เป็น 200Pixels
29.4กด OK
30. ขนาดของภาพมขี นาดเปน็ 200 Pixels x 200 Pixelsตามที่กำหนด

31. เลือกเคร่ืองมือ Horizontal
32. พิมพ์ข้อความที่ตอ้ งการ
33. คลกิ เพื่อยืนยันข้อความ
34. เลอื กเมนู Edit เลอื ก Free Transform



35. นำเมาส์ไว้ท่มี ุมข้อความจนเป็นรูป เอยี งข้อความตามภาพ
36. คลิก

37. คัดลอกเฟรมโดยการคลกิ ทป่ี ุ่ม Duplicates selected frames
38. ปรากฏเฟรมที่ 2 จากน่นั คลิกเลอื กทเ่ี ฟรมท่ี2
39. เลือกที่เลยเ์ ยอรข์ ้องความ
40. คดั ลอกLayer ข้อความโดยเลือกเมนู Layer เลอื ก Duplicate Layer
41. กดปมุ่ OK

42. คลกิ ที่เฟรมที่2
43. คลิกทเี่ ลเยอร์ขอ้ ความท่ีคดั ลอก
44. เลอื กเมนู Edit เลือก Free Transform
45. นำเมาสไ์ ว้ทมี่ ุมข้อความจนเป็นรปู เอยี งข้อความตามภาพ
46. คลิก



47. คลิกที่เฟรมท่ี1
48. แสดงเลเยอรข์ ้อความ และซ่อนเลเยอรข์ อ้ ความท่ีคัดลอก
49. คลิกทเ่ี ฟรมท่ี2
50. ซ่อนเลเยอร์ขอ้ ความ และแสดงเลเยอรข์ ้อความที่คัดลอก
51. ปรับเวลาให้เป็น0.5 ทั้ง2เฟรม
52. ทดลองการเคล่ือนไหวโดยคลิกทปี่ ุ่ม plays animation



การเพ่ิมพ้ืนท่วี ่างจากรปู ภาพและทำขอ้ ความกะพรบิ

14. เปดิ รูปภาพทตี่ ้องการ
15. เลือกสีพ้ืนหลังท่ี Background color ทต่ี ้องการ (จากภาพเลอื กพื้นหลงั เป็นทขี่ าว)
16. เลอื กเมนู Image เลอื ก Canvas Size
17. ปรากฏกล่อง Canvas Size

4.1 ต๊กิ ✔️ ทกี่ ล่อง Relative
4.2 กำหนดคา่ width เป็น 5 Cm
4.3 กำหนดคา่ Anchor เปน็ จดุ ก่ึงกลางซา้ ย(สังเกตลกู ศรจะชี้ไปทางขวาหมายถึงเพิ่มพื้นที่
ความกว้างทางขวา 5 cm ตามค่า Width
4.4 แลว้ กดOK
18. รูปภาพถกู เพ่มิ ขน้ึ ท่ีทางขวา 5CM
19. เลือกเคร่ืองมือ Vertical Type Tool
20. ปรบั ขนาด สี แบบอักษร และคลกิ บนพนื้ ท่วี า่ งเพ่ือพิมพข์ ้อความ
21. กดปมุ่ เพอ่ื ยนื ยันการใชข้ ้อความ
22. คดั ลอกเฟรมโดยคลิกทป่ี ุ่ม Duplicates selected frames
23. คลิกเลอื กเฟรมท่ี 2
24. ทีเ่ ฟรมที่ 2 ให้ซ่อนเลเยอรโ์ ดยการคลกิ ที่ ของเลเยอร์ข้อความ
25. ปรบั เวลาใหเ้ ปน็ 0.5 ทงั้ 2 เฟรม
26. ทดลองการเคลอื่ นไหวโดยคลิกทีป่ มุ่ Plays animation







แบบประเมนิ ผลหลังเรยี นหน่วยท่ี 10

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

ก. การเคลือ่ นไหวดว้ ยภาพสองมิตแิ ละสามมิติ
ข. ลำดบั ของภาพนง่ิ ซึ่งถกู นำมาแสดงผลติดต่อกนั อย่างต่อเนอื่ ง
ค. ลำดับของตัวอักษรและภาพน่ิงซง่ึ ถูกนำมาแสดงผลติดต่อกนั อยา่ งต่อเนื่อง
ง. ถกู ทุกขอ้
2. ขอ้ ใดคือคำเตม็ ของตัวย่อ GIF
ก. Graphics Interchange Format
ข. Graphics International File
ค. Graphics Interest File
ง. Graphics Internet File
3. การเคล่ือนไหวมกี ่รี ปู แบบ อะไรบา้ ง
ก. มี 1 รปู แบบ คอื การเคล่ือนไหวแบบ Frame by Frame
ข. มี 1 รูปแบบ คือ การเคล่อื นไหวแบบ Tween
ค. มี 2 รปู แบบ คือ การเคล่อื นไหวแบบ Frame by Frame และ Tween
ง. ไม่มีข้อใดถกู
4. ข้อใดคือความหมายของคำสั่ง Duplicates selected frames
ก. เลอื กเฟรมแรก
ข. เลอื กเฟรมถดั ไป
ค. คัดลอกเฟรมท่ีเลือก
ง. ลบเฟรมท่ีเลือก
5. ข้อใดเป็นขั้นตอนการ Save ไฟลภ์ าพ Animation เพ่อื ใชใ้ นเวบ็
ก. File / Save for Web & Devices... / Save
ข. File / Save for Web & Devices.../ เลอื กประเภทของไฟลเ์ ปน็ GIF I Save
ค. File/ Save for Web& Devices.../ เลือกประเภทไฟล์ GIF/Save/เลอื กตำแหนง่ และใสช่ ่อื
ไฟล์/Save
ง. ถกู ทกุ ข้อ
ก. เป็นการสรา้ งภาพเคลื่อนไหวโดยให้โปรแกรมช่วยสรา้ งภาพจากเฟรมเรมิ่ ตน้



6. ขอ้ ใดหมายถงึ การสร้างภาพเคลอื่ นไหวแบบ Tween
ก. เป็นการสรา้ งภาพเคลือ่ นไหวโดยใหโ้ ปรแกรมช่วยสรา้ งภาพจากเฟรมเร่มิ ต้น
ข. เปน็ การสรา้ งภาพเคลื่อนไหวโดยให้โปรแกรมชว่ ยสรา้ งภาพจากเฟรมสุดท้าย
ค. เป็นการสรา้ งภาพเคล่ือนไหวโดยผู้ใชร้ ะหวา่ งเฟรมเร่มิ ต้นกับเฟรมสุดท้าย
ง. เปน็ การสรา้ งภาพเคล่ือนไหวโดยใหโ้ ปรแกรมช่วยสร้างภาพระหว่างเฟรมเรมิ่ ตน้ กับ เฟรม

สุดทา้ ย
7. ขอ้ ใดคือเฟรมที่เพมิ่ ขน้ึ เมื่อสรา้ งภาพแบบ Tween

ก. เฟรมแรกผู้ใชไ้ ด้สรา้ งข้ึน
ข. เฟรมสดุ ท้ายผใู้ ช่ได้สร้างข้ึน
ค. เฟรมแรกและเฟรมสดุ ท้ายที่โปรแกรมชว่ ยสรา้ งภาพสรา้ งข้นึ
ง. ข้อ ก. และ ข. ถูก
8. ขอ้ ใดคือคุณสมบัติของเครื่องมือ Image Size
ก. สามารถลดขนาดไฟล์ของภาพได้
ข. สามารถปรบั ลดหรือขยายขนาดภาพ
ค. สามารถเคล่อื นท่ตี วั อักษรไดต้ ามตอ้ งการ
ง. สามารถเคลือ่ นตำแหน่งพร้อมปรับขนาดภาพ
9. ขอ้ ใดคือประโยชนข์ องเคร่ืองมือ Canvas Size
ก. ผสานภาพ Animation ใหเ้ ปน็ Layer เดียวกนั
ข. แตกไฟล์ Animation ออกเป็น Layer ต่างๆ
ค. เพิ่มหรอื ลดพ้นื ที่วา่ งจากรูปภาพ
ง. ทำภาพใหม้ ีลกั ษณะโปร่งใสโดยงา่ ย
10. ข้อใดเป็นการกำหนดค่า Anchor
ก. ต๊ิก √ ทกี่ ล่อง Relative

ข. ซอ่ นเลเยอร์โดยการคลกิ ท่ี ของเลเยอรข์ ้อความ
ค. กำหนดเปน็ จดุ ก่ึงกลางซ้ายเพื่อเพิม่ พน้ื ที่ความกว้างทางขวา
ง. ปรบั เวลาให้เปน็ 0.5 ทงั้ 2 เฟรม ก.



ใบงานท่ี 10.1

คำส่ัง สรา้ งปา้ ยโฆษณาบนเว็บไซต์ขนาดตามภาพ (เปน็ เวบ็ ไซต์ขายกระเป๋าบุรุษและสตรีโดยเปดิ
รูปภาพทก่ี ำหนดให้ แลว้ ใชเ้ ครือ่ งมือแทรกข้อความไม่เหมาะสมกับภาพและปรบั รูปภาพของ
ข้อความใหด้ นู ่าสนใจเชน่ layer Style, Style Warp Text จากนั้นใหท้ ำข้อความเคลอื่ นไหว
เพ่ือให้ดนู ่าสนใจ บันทกึ ไฟล์งานช่ือ “ใบงานท2่ี 0-1.gif”-“ใบงานท่2ี 0-2.gif”

ลำดับท่ี หวั ข้อ คะแนน
(เต็ม 10 คะแนน)

1 ใสข่ อ้ ความในรูปภาพได้
2 จัดตำแหนง่ ข้อความไดเ้ หมาะสมกบั รูปภาพ
3 ปรับแตง่ ข้อความไดน้ ่าสนใจ
4 ขอ้ ความเคล่ืนไหวดูนา่ สนใจ และอ่านได้ใจความ
5 บนั ทกึ ไฟลง์ านตามชอื่ ในใบงาน

คะแนนเฉล่ีย



หน่วยการเรียนรทู้ ี่ 11 รูปภาพกราฟฟิกแบบสามมติ ิ

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

การนำไป ประยุกต์ใช้การออกแบบผลิตภณั ฑ์ สถาปัตยกรรม ภาพเคลอื่ นไหวแบบสาม มติ ิ
โปรแกรมอะโดบีโฟโตช้อปก็มีการพัฒนาใหส้ ามารถใช้งานกราฟกิ สามมิติไมใ่ ชร่ ่วมกับภาพ

สองมิติไดด้ ้วย

สาระการเรียนรู้
1. ภาพกราฟกิ แบบ 3 มิติ (3D)
2. ความหมายและประเภทของ Texture
3. การเรียกใช้หนา้ ตา่ ง 3D
4. การสร้างภาพกราฟิกแบบสามมติ ิโดยใชเ้ ลเซอร์
5. การสร้มติ ิโดยใช้รูปภาพสาม มติ ิโดยใช้รปู ภาพ
6. การใชเ้ คร่อื งมือจัดรูปแบบสามมติ ิ
7. การประยุกต์นำภาพสามมิติไปใช้ร่วมกบั ภาพสองมติ ิ

ผลการเรียนรทู้ ี่คาดหวงั
1. อธบิ ายภาพกราฟิกแบบสาม มติ ิ(3D) ได้
2. อธบิ ายการเรียกใชห้ น้าตา่ ง 3D ได้
3. สรา้ งภาพกราฟกิ แบบสามมิติโดยใชเ้ ลเซอร์ได้
4. สร้างภาพกราฟกิ แบบสามมีติ โดยใชร้ ปู ภาพได้
5. ใช้เคร่อื งมือจัดการรูปภาพแบบสามมติ อได้
6. ประยกุ ตน์ ำภาพสาม มิติไปใช้ร่วมกบั ภาพสอง มติ ไิ ด้



ภาพกราฟกิ แบบสามมติ ิ (3D)

ภาพกราฟกิ แบบสามมติ ิน้นั มาจากภาพกราฟิกที่ใชโ้ ปรแกรมสรา้ งสามมิติ เช่น 3D max, Maya
สรา้ งขน้ึ เพื่อให้ภาพท่มี ีสีและแสงเงาเหมือนจริง เหมาะสมสำหรับการออกแบบและสถาปตั ยกรรม
เช่น การผลิตรถยนต์ ภาพยนตร์การต์ ูนสามมิติ

คำว่า 3D (Three Dimension) หมายถึง อาณาเขต 3 มติ ิ ประกอบด้วยความกวา้ ง ความสูง และ
ความลกึ ซ่งึ โดยปกติแกนx ใช้แทนความกว้าง แกน Yใช้แทนความสงู และแกน Z ใชแ้ ทนความลกึ

รูปภาพแสดงเส้นทเ่ี ป็นส่วนหนง่ึ ของ
และรปู ภาพแสดงการทำงานของแกนต่างๆ ในโปรแกรมอะโดบโี ฟโตชอ็ ป

ปัจจบุ ันการสรา้ งภาพสามมิติมจี ำนวนท่ีสูงขนึ้ ซึง่ โปรแกรมอะโดบโี ฟโตช้อปต้ังแตร่ ุ่น cs3ขึ้นไปมี
การสนบั สนุนการสรา้ งภาพ 3 มติ ทิ ี่เรยี กวา่ โมเดล 3 มติ ิ ซึ่งรองรับไฟลน์ ามสกลุ ดังน้ี

1. ไฟล์นามสกลุ 3ds เป็นไฟล์ท่ีได้จากโปรแกรม 3ds max
2. ไฟลน์ ามสกุล Obj เป็นไฟล์ได้จากโปรแกรม Wavefront
3. ไฟล์นามสกุล DAE เปน็ มาตรฐานไฟล์เพื่อใช้แลกเปลย่ี นข้อมูลระหว่างซอฟตแ์ วร์เพื่องาน

กราฟิก 3 มติ กิ ับซอฟต์แวร์ที่มีการประมวลผล 3 มติ ิ
4. ไฟล์นามสกุล KMZ เป็นไฟล์ไดจ้ ากโปรแกรม google Earth
5. ไฟลน์ ามสกลุ U3D เปน็ ไฟล์ของข้อมลู 3D ตามมาตรฐานของ w3c ปจั จบุ นั อะโดบีแอโคร

แบต และไมโครสเตชันรบั รองการทำงานของไฟลน์ ามสกลุ U3Dมเี ครอ่ื งมือในการแปลงไฟล์
โปรแกรมท่ีสำคัญตา่ งๆมาเป็นนามสกลุ น้ี