animation การสร้าง animation จาก Image Ready


612 ผู้ชม


การสร้าง animation จาก Image Ready
1.> การใช้งาน Image ready เราจะใช้คู่กับโปรแกรม Photoshop ขั้นแรกให้เราเตรียมภาพใน Photoshopเพื่อไปประกอบเนื้อเรื่องใน animation ก่อน ว่าต้องการกี่ภาพและจะให้ภาพเคลื่อนไหวอย่างไรบ้างในทีนี้เตรียมไว้ สองภาพ
animation การสร้าง animation จาก Image Ready

2.> อย่าลืมที่จะจัดตำแหน่งของเรื่องราวต่างๆ ที่เราต้องการใช้ ให้ตรงตำแหน่ง เสียตั้งแต่ตอนนี้ไว้ด้วย เวลาที่เรานำไปทำภาพเคลื่อนไหว จะได้ไม่ยุ่งยาก เมื่อได้ภาพแล้วให้คลิ๊กที่ Jump to ImageReady เราจะเข้าสู่โปรแกรม Image Ready
animation การสร้าง animation จาก Image Ready

3.> เราจะเจอ หน้าต่างๆ เล็กๆ 3 หน้าต่าง หน้าต่างที่ A คือไฟล์ภาพการแสดงผล ที่เราจะนำไปใช้ หน้าต่างที่ B คือหน้าต่าง Layer ที่เราใช้เก็บภาพต่างๆื ที่เราจะนำมาทำเรื่องราว หน้าต่างที่ C คือหน้าต่าง animationเราจะเอาภาพมาเรียงต่อกันที่นี่เพื่อทำภาพเคลื่อนไหว

animation การสร้าง animation จาก Image Ready

4.> ในที่นี้ เราจะทำภาพแบบง่ายๆ ให้กระพริบไปมาระหว่างสองภาพ โดยขั้นแรก ที่หน้าต่าง C เรามีเฟรมภาพรอไว้แล้ว หนึ่งเฟรม ให้เราเพิ่มเฟรมภาพที่สอง ที่เราจะใช้ได้เลยโดยคลิ๊กที่ Duplicates current frame เพื่อเพิ่ม frame ขึ้นมา 1 เฟรม ดังรูป 
animation การสร้าง animation จาก Image Ready
จะได้
animation การสร้าง animation จาก Image Ready

5.> จากนั้นให้เรากลับไปเปิดตา layer หน้าต่างที่ B เลือกเปิดตา layer 1 (หลักการง่ายๆ ของ animationคือ ในหน้าต่าง C ถ้าต้องการให้เฟรมใดๆ มีรูป ใดๆ ให้เปิดตาหรือปิดตาที่ layer ของ หน้าต่าง B)
animation การสร้าง animation จาก Image Ready
รูปเปิดตา Layer 1 เพื่อให้เฟรมที่ 2 แสดงผลรูปนี้


6 .> ต่อจากนั้นให้เรามาดูภาพเคลื่อนไหวของเรา คลิ๊ก Plays ที่หน้าต่าง C จะเห็นว่า ที่หน้าต่าง A ภาพจะกระพริบ

animation การสร้าง animation จาก Image Ready


7.> ที่หน้าต่าง A ภาพจะกระพริบเร็วมาก เราก็จะมาตั้งค่าให้เฟรมแต่ละเฟรมมีความหน่วงเวลา ในการแสดงผล ให้เรา Stop animation ก่อนแล้วเลือก Selects frame delay time ให้เป็น 0.5 แล้วจึง Plays อีกครั้งดูว่าการแสดงผลเป็นที่พอใจหรือเปล่า ถ้าพอใจก็นำภาพไปใช้ได้เลย

animation การสร้าง animation จาก Image Ready
animation การสร้าง animation จาก Image Ready
animation การสร้าง animation จาก Image Ready

8 .> วิธีที่เราจะนำภาพไปใช้นั้นให้ ไปที่ File > Save Optimized As.. ไฟล์ภาพที่เซฟให้ เซฟ เป็น .gifเท่านั้น ภาพจึงจะเคลื่อนไหวได้ ดังรูป 

animation การสร้าง animation จาก Image Ready

animation การสร้าง animation จาก Image Ready
ภาพที่เซฟออกมาใช้งาน


9 .> เคล็ดลับการเซฟงานให้ภาพออกมาสวยงาม ให้ปรับค่า Colors ที่หน้าต่าง Optimize เป็น 256 ก่อนที่จะทำการเซฟ แต่ไฟล์เราก็จะใหญ่ขึ้นด้วย

animation การสร้าง animation จาก Image Ready

animation การสร้าง animation จาก Image Ready    animation การสร้าง animation จาก Image Ready
เปรียบเทียบภาพความละเอียดสีที่แตกต่างกัน


อัพเดทล่าสุด