Animation

การออกแบบภาพเคลื่อนไหวแอนิเมชัน (Animation Design)

ภาพที่ ภาพแมวที่วาดเพื่อนำมาสร้างภาพเคลื่อนไหวแอนิเมชัน (Animation) ที่มา : นุจรี บุรีรัตน์

ภาพที่ ภาพเคลื่อนไหวแอนิเมชัน (Animation) ที่นำไปใช้บนอินเทอร์เน็ต ที่มา : นุจรี บุรีรัตน์

การออกแบบกราฟิก 2

1. ขั้นตอนแรก เปิดโปรแกรม Photoshop ขึ้นมา เริ่มสร้างชิ้นงานใหม่โดยไปที่เมนู File>New จากนั้นเลือกประเภทงานนำเสนอผ่านทางเว็บไซต์ (Web) (ดังข้อ 1) จากนั้นตั้งชื่อไฟล์งาน Animation และกำหนดขนาดของผลงาน ซึ่งมีขนาด ความกว้าง (Width) เท่ากับ 300 Pixcel ความสูง (Height) เท่ากับ 400 Pixcel กำหนดกระดาษเป็นแนวตั้ง (ดังข้อ 2) กำหนดค่าความละเอียด Resolution เท่ากับ 72 Pixcel/Inch (ดังข้อ 3) จากนั้นคลิกที่ Create เพื่อสร้างงาน (ดังข้อ 4) 1 9

2 9

3 9

4 9

ภาพที่ การสร้างชิ้นงานใหม่ ที่มา : นุจรี บุรีรัตน์

2. เมื่อคลิกที่ Create จะได้ชิ้นงานใหม่ (ดังข้อ 5) ให้เลือกเมนู Window จากนั้นเลือกเครื่องมือในการทำงาน (Toolbars) (ดังข้อ 6) และเลือกเลเยอร์ (Layers) แสดงลำชั้นของวัตถุ (ดังข้อ 7)

6

5

7

9

9

9

ภาพที่ ชิ้นงานใหม่ ที่มา : นุจรี บุรีรัตน์ 3. คลิกที่เมนูแล้วเลือก Window>Timeline เพื่อเปิดเครื่องมือไทม์ไลน์ (ดังข้อ 8)

8 9

ภาพที่ การเปิดใช้เครื่องมือไทม์ไลน์ ที่มา : นุจรี บุรีรัตน์

การออกแบบกราฟิก 4

4. เมื่อเปิดใช้เครื่องมือไทม์ไลน์แล้ว จะได้ภาพดังที่ปรากฏ (ดังข้อ 9) จากนั้นให้ทำเครื่องหมายถูกหน้าเพื่อเลือกใช้เครื่องมือสร้างเฟรมแอนิเมชัน (Create Frame Animation) (ดังข้อ 10)

9 9

10 9

ภาพที่ การเลือกเครื่องมือสร้างเฟรมแอนิเมชัน (Create Frame Animation) ที่มา : นุจรี บุรีรัตน์ 5. เปิดไฟล์ภาพแมวที่วาดไว้แล้ว (ภาพที่ 1) โดยไปที่เมนู เลือก File>Open จากนั้นเลือกไฟล์ที่ต้องการ (ดังข้อ 11) แล้วคลิกที่ปุ่ม Open (ดังข้อ 12)

11 9

12 9

ภาพที่ การเปิดไฟล์ภาพ ที่มา : นุจรี บุรีรัตน์

6. ทำการคลิกเลือกเครื่องมือเคลื่อนย้ายวัตถุ (Move Tool) (ดังข้อ 13) จากนั้นใช้เมาส์ลากรูปแมวมาวางไว้ในชิ้นงาน (ดังข้อ 14) 13 9

14 9

ภาพที่ การย้ายภาพ ที่มา : นุจรี บุรีรัตน์ 7. เมื่อย้ายภาพแมว (ภาพที่ 1) มาวางไว้ในชิ้นงาน จะได้ภาพดังที่ปรากฏ (ดังข้อ 15)

15 9

ภาพที่ ภาพทีไ่ ด้จากการย้ายมาวางไว้ในชิ้นงาน ที่มา : นุจรี บุรีรัตน์

การออกแบบกราฟิก 6

8. เปิดไฟล์ภาพแมวที่วาดไว้แล้ว (ภาพที่ 2) โดยไปที่เมนู เลือก File>Open จากนั้นเลือกไฟล์ที่ต้องการ (ดังข้อ 16) แล้วคลิกที่ปุ่ม Open (ดังข้อ 17)

16 9

17 9

ภาพที่ การเปิดไฟล์ภาพ ที่มา : นุจรี บุรีรัตน์ 9. ทำการคลิกเลือกเครื่องมือเคลื่อนย้ายวัตถุ (Move Tool) (ดังข้อ 18) จากนั้นใช้เมาส์ลากรูปแมวมาวางไว้ในชิ้นงาน (ดังข้อ 19) 18 9

19 9

ภาพที่ การย้ายภาพ ที่มา : นุจรี บุรีรัตน์

10. เมื่อย้ายภาพแมว (ภาพที่ 2) มาวางไว้ในชิ้นงาน จะได้ภาพดังที่ปรากฏ (ดังข้อ 20)

20 9

ภาพที่ ภาพทีไ่ ด้จากการย้ายมาวางไว้ในชิ้นงาน ที่มา : นุจรี บุรีรัตน์ 11. เปิดไฟล์ภาพแมวที่วาดไว้แล้ว (ภาพที่ 3) โดยไปที่เมนู เลือก File>Open จากนั้นเลือกไฟล์ที่ต้องการ (ดังข้อ 21) แล้วคลิกที่ปุ่ม Open (ดังข้อ 22)

21 9

22 9

ภาพที่ การเปิดไฟล์ภาพ ที่มา : นุจรี บุรีรัตน์

การออกแบบกราฟิก 8

12. ทำการคลิกเลือกเครื่องมือเคลื่อนย้ายวัตถุ (Move Tool) (ดังข้อ 23) จากนั้นใช้เมาส์ลากรูปแมวมาวางไว้ในชิ้นงาน (ดังข้อ 24) 23 9

24 9

ภาพที่ การย้ายภาพ ที่มา : นุจรี บุรีรัตน์ 13. เมื่อย้ายภาพแมว (ภาพที่ 3) มาวางไว้ในชิ้นงาน จะได้ภาพดังที่ปรากฏ (ดังข้อ 25) รวมภาพแมวทั้งหมด 3 ภาพ 3 เลเยอร์ (ดังข้อ 26)

25 9

26 9

ภาพที่ ภาพทีไ่ ด้จากการย้ายมาวางไว้ในชิ้นงาน ที่มา : นุจรี บุรีรัตน์

14. คลิกที่เครื่องมือ Timeline เพือ่ สร้างเฟรมที่ 1 (ดังข้อ 27) ให้คลิกเปิดตาที่เลเยอร์ที่ 1 เพื่อให้แสดง นอกนั้นให้ทำการปิดตา เพื่อทำการซ่อนไม่ให้แสดง (ดังข้อ 28)

28 9

27 9

ภาพที่ การสร้างเฟรมที่ 1 ที่มา : นุจรี บุรีรัตน์ 15. คลิกที่เครื่องหมายบวก (+) ของ Timeline เพื่อทำการคัดลอกเฟรม (Duplicates Selected frames) เฟรมที่ 1 (ดังข้อ 29)

29 9

ภาพที่ การคัดลอกเฟรมที่ 1 ที่มา : นุจรี บุรีรัตน์

การออกแบบกราฟิก 10

16. เมื่อทำการคัดลอกเฟรมที่ 1 เสร็จแล้ว จะได้เฟรมที่ 2 ดังภาพที่ปรากฏ (ดังข้อ 30) จากนั้นให้คลิกเปิดตาที่เลเยอร์ที่ 2 เพื่อให้แสดงนอกนั้นให้ทำการปิดตาที่เลเยอร์ 1 และ เลเยอร์ 3 เพื่อทำการซ่อนไม่ให้แสดง (ดังข้อ 31)

31 9

30 9

ภาพที่ การสร้างเฟรมที่ 2 ที่มา : นุจรี บุรีรัตน์ 17. คลิกที่เครื่องหมายบวก (+) ของ Timeline เพื่อทำการคัดลอกเฟรม (Duplicates Selected frames) เฟรมที่ 2 (ดังข้อ 32) จะได้เฟรมที่ 3 เพิม่ ขึ้นมา (ดังข้อ 33) จากนั้นให้คลิกเปิดตาที่เลเยอร์ที่ 3 เพือ่ ให้แสดง นอกนัน้ ให้ทำการปิดตาที่เลเยอร์ 1 และเลเยอร์ 2 เพื่อทำการซ่อนไม่ให้แสดง (ดังข้อ 34)

34 9

33 9

32 9

ภาพที่ การคัดลอกเฟรมที่ 2 ที่มา : นุจรี บุรีรัตน์

18. คลิกที่เครื่องหมายมุมล่างของเฟรม (() เพื่อเลือกเวลาหน่วงเฟรม (Selects frame delay time) (ดังข้อ 35) จากนั้นเลือกเวลาที่ต้องการหน่วงเฟรมกี่วินาที (ดังข้อ 36)

36 9

35 9

ภาพที่ การเลือกเวลาที่ต้องการหน่วงเฟรม ที่มา : นุจรี บุรีรัตน์ 19. เมื่อเลือกเวลาที่ต้องการหน่วงเฟรมเสร็จแล้ว สามารถกดปุ่มแสดงผลแอนิเมชัน (Play Animation) (ดังข้อ 37) ภาพแมวจะเคลื่อนไหว จากภาพที่ 1 เปลี่ยนไปถึงภาพที่ภาพ 3 จะเป็นภาพเคลื่อนไหวลักษณะแมวกวักมือขึ้นลง

37 9

ภาพที่ การกดปุ่มแสดงผลแอนิเมชัน (Play Animation) ที่มา : นุจรี บุรีรัตน์

การออกแบบกราฟิก 12

20. กดปุ่มหยุดแอนิเมชัน (Stops Animation) (ดังข้อ 38) ภาพแมวจะหยุดเคลื่อนไหว

38 9

ภาพที่ การกดปุ่มหยุดแอนิเมชัน (Play Animation) ที่มา : นุจรี บุรีรัตน์ 21. ทำการบันทึกไฟล์ในกรณีที่ต้องการแก้ไขภายหลัง โดยที่เมนู File>Save as.. ให้บันทึกเป็นไฟล์นามสกุล .psd ซึ่งเป็นไฟล์งานที่ต้องเปิดแก้ไขด้วยโปรแกรม Adobe Photoshop ในครั้งนี้บันทึกไฟล์ชื่อ Animation.psd (ดังข้อ 39) จากนั้นคลิกที่ปุ่ม SAVE (ดังข้อ 40) 39 9

40 9

ภาพที่

การบันทึกไฟล์งานสำหรับแก้ไขได้ ที่มา : นุจรี บุรีรัตน์

22. ทำการบันทึกไฟล์ในกรณีต้องการนำไปใช้งานเป็นภาพเคลื่อนไหว ให้เลือกประเภทไฟล์ .GIF (ดังข้อ 41) จากนั้นคลิกที่ปุ่ม SAVE (ดังข้อ 42)

(Animation)

41 9

42 9

ภาพที่

การบันทึกไฟล์งานเป็นภาพเคลื่อนไหว (Animation) ที่มา : นุจรี บุรีรัตน์

23. เมื่อทำการบันทึกไฟล์ จะขึ้นป๊อปอับแสดงรายละเอียด จากนั้นให้คลิกที่ปุ่ม OK (ดังข้อ 43) 43 9

ภาพที่

การบันทึกไฟล์งานเป็นภาพเคลื่อนไหว (Animation) ที่มา : นุจรี บุรีรัตน์

การออกแบบกราฟิก 14

24. ตัวอย่างการนำไฟล์ภาพเคลื่อนไหว (Animation) ไปเผยแพร่บนเว็บไซต์ giphy.com (ดังข้อ 44) เมื่อเปิดเว็บไซต์แล้วให้กดปุ่มเพื่อเลือกไฟล์ (Choose File) (ดังข้อ 45) 44 9

45 9

ภาพที่

การนำไฟล์งานภาพเคลื่อนไหว (Animation) ไปเผยแพร่บนเว็บไซต์ ที่มา : นุจรี บุรรี ัตน์ 25. ทำการเลือกไฟล์ภาพเคลื่อนไหวที่สร้างเสร็จแล้ว ชื่อไฟล์ Animation.gif (ดังข้อ 46) แล้วคลิกปุ่ม Open (ดังข้อ 47) 46 9

47 9

ภาพที่

การเลือกไฟล์ภาพเคลื่อนไหว ที่มา : นุจรี บุรรี ัตน์

26. เมื่อเลือกไฟล์แล้วให้ทำการอัปโหลด โดยกดที่ปุ่ม Upload to GIPHY (ดังข้อ 48)

48 9

ภาพที่

การอัปโหลดไฟล์ภาพเคลื่อนไหว ที่มา : นุจรี บุรรี ัตน์

27. ขั้นตอนระหว่างการอัปโหลดไฟล์ภาพเคลื่อนไหว จะขึ้นรูปแถบสีเขียว Uploading รอจนกระทั่งอัปโหลดเสร็จสิ้น (ดังข้อ 49)

49 9

ภาพที่

ขั้นตอนระหว่างการอัปโหลดไฟล์ภาพเคลื่อนไหว ที่มา : นุจรี บุรรี ัตน์

การออกแบบกราฟิก 16

28. เมื่ออัปโหลดเสร็จแล้ว จะได้ภาพดังที่ปรากฏ และสามารถนำไฟล์ภาพไปแชร์ในสื่อออนไลน์ต่างๆ ได้ (ดังข้อ 51)

(ดังข้อ

50)

50 9

51 9

ภาพที่

การอัปโหลดไฟล์ภาพเคลื่อนไหวเสร็จสิ้น ที่มา : นุจรี บุรรี ัตน์

29. ตัวอย่างการนำลิงก์ไปใช้งาน สามารถคลิกที่หัวข้อคัดลอกลิงก์ (Copy Link) (ดังข้อ 52) จะปรากฏลิงก์ของภาพเคลื่อนไหวที่สามารถนำไปใช้งานได้ (ดังข้อ 53) GIF Link : https://media.giphy.com/media/W9zcr4Ws7kGkyfEjU3/giphy.gif

53 9

52 9

ภาพที่

ตัวอย่างการนำลิงก์ไปใช้งาน ที่มา : นุจรี บุรรี ัตน์

30. กรณีต้องการดาวน์โหลดไฟล์ประเภทต่าง ๆ สามารถคลิกที่หัวข้อมีเดีย (Media) (ดังข้อ 54) จะปรากฏลิงก์ให้ดาวน์โหลดไฟล์ประเภทต่าง ๆ ได้ตามต้องการ (ดังข้อ 55)

55 9

54 9

ภาพที่

การดาวน์โหลดไฟล์ประเภทต่าง ๆ ที่มา : นุจรี บุรรี ัตน์

31. กรณีต้องการนำไปใช้บนเว็บไซต์ สามารถคลิกที่หัวข้อฝัง (Embed) (ดังข้อ 56) แล้วสามารถคัดลอกโค้ดจากช่อง GIF Embed Code (ดังข้อ 57) แล้วนำไปวางบนเว็บไซต์ ในหน้าเว็บเพจที่ต้องการได้

56 9

57 9

ภาพที่

การนำไปใช้บนเว็บไซต์ ที่มา : นุจรี บุรรี ัตน์

การออกแบบกราฟิก 18

32. ผลงานการออกแบบภาพเคลื่อนไหว (Animation) ที่จัดทำเสร็จเรียบร้อย (ดังข้อ 58) 58 9

ภาพที่

ผลงานการออกแบบภาพเคลื่อนไหว Animation.gif ที่มา : นุจรี บุรีรัตน์