การออกแบบภาพเคลื่อนไหวแอนิเมชัน (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 ที่มา : นุจรี บุรีรัตน์