ความสามารถอีกอย่างหนึ่งของโปรแกรม Adobe Photoshop คือ ความสามารถในการสร้างภาพเคลื่อนไหว (แบบง่ายๆ) ได้ ซึ่งโปรแกรม Adobe Photoshop มีโปรแกรมเสริมอีกตัวหนึ่งที่ใช้ในการสร้างภาพเคลื่อนไหว (Animation) เพื่อใช้ประกอบหน้าเว็บเพจ เพิ่มความน่าสนใจให้มากยิ่งขึ้น ตัวอย่างเช่น การสร้างปุ่ม, Avatar, Favicon และแบนเนอร์โฆษณาต่างๆ เป็นต้น
โปรแกรมตัวนี้มีชื่อว่า Adobe ImageReady เป็นโปรแกรมที่มาพร้อมกับโปแกรม Photoshop เมื่อเราติดตั้งโปรแกรม Photoshop โปรแกรม ImageReady จะถูกติดตั้งโดยอัตโนมัติ
หลักในการสร้างภาพเคลื่อนไหว
การสร้างภาพเคลื่อนไหวด้วยโปรแกรม ImageReady นั้นมีหลักการเดียวกับการสร้างการ์ตูน กล่าวคือใช้วิธีการวาดภาพทีละภาพให้มีการเปลี่ยนแปลงทีละน้อย จากนั้นนำภาพทั้งหมดมาเปิดเรียงกันทีละภาพอย่างรวดเร็วจนทำให้ตาของเรามองเห็นไปว่าภาพนั้นได้มีการเคลื่อนไหวเกิดขึ้น
ซึ่งในความเป็นจริงแล้ว ภาพที่เรามองเห็นนั้นเป็นเพียงภาพนิ่งที่วิ่งต่อๆ กันเท่านั้นเอง โดยภาพ 1 ภาพ จะบรรจุอยู่ใน “เฟรม” หนึ่งเฟรม เราจึงเรียกการเคลื่อนไหวแบบนี้ว่า การเคลื่อนไหวแบบ Frame By Frame
การสร้างภาพเคลื่อนไหวแบบ Frame By Frame
การสร้างภาพเคลื่อนไหวแบบ Frame By Frame นั้นเป็นที่นิยมและพบเห็นกันโดยทั่วไป เนื่องจากสามารถทำได้ง่าย และไฟล์งานที่ได้ก็มีขนาดเล็กด้วย
เราจะมาลองสร้างภาพเคลื่อนไหวง่ายๆ กัน ดังนี้
1. อันดับแรก เราจะนำภาพทั้ง 2 ภาพ นี้ไปใช้ โดยใช้ภาพฉากกลางคืนเป็นพื้นหลัง และหญิงขี่ไดโนเสาร์ เป็นภาพที่สามารถเคลื่อนไหวได้
2. เซฟภาพทั้ง 2 ภาพนี้ลงในเครื่องก่อน
3. เปิดโปรแกรม Adobe Photoshop เสร็จแล้ว เปิดไฟล์ภาพทั้ง 2 ขึ้นมา (เปิด 2 หน้าต่าง) ให้เห็นทั้ง 2 ภาพ เสร็จแล้ว...
4. คลิกเมาส์ที่เครื่องมือ ( Move Tool) แล้วเอาเมาส์คลิกที่ภาพ หญิงขี่ไดโนเสาร์ แล้วลากเข้ามายังหน้าต่างของภาพที่เป็นพื้นหลัง เราจะสังเกตเห็นว่ามีเลเยอร์ใหม่เกิดขึ้นในหน้าต่าง Layer ของภาพพื้นหลัง ...ดังตัวอย่าง
5. ต่อไปเราจะเปิดโปรแกรม ImageReady เพื่อทำให้ภาพนี้เคลื่อนไหว ..คลิกตรงปุ่มนี้ เพื่อสับไปยังโปรแกรม ImageReady
สำหรับ Photoshop CS3 ให้คลิกที่เมนู Window และคำสั่ง Animation
หลังจากเราได้เปลี่ยนมายังโปรแกรม ImageReady แล้ว เราจะมาทำให้ภาพเคลื่อนไหวกันที่นี่ เริ่มจาก
กำหนดเฟรมที่ 1
เป็นการกำหนดตำแหน่งเริ่มต้นของภาพ หญิงขี่ไดโนเสาร์ เคลื่อนที่จากจุดนี้เป็นจุดแรก โดยให้อยู่ในเฟรมที่ 1
- ให้เปลี่ยนชื่อ Layer 1 เป็น Dino 1 โดยดับเบิลคลิกที่ชื่อ Layer 1 แล้วพิมพ์ Dino 1 ลงไป
- เสร็จแล้ว ใช้เครื่องมือ ( Move Tool) ย้ายรูป หญิงขี่ไดโนเสาร์ มาวางตำแหน่งเริ่มต้น ...ให้โผล่พ้นออกมาจากภาพหลัก ดังรูป
กำหนดเฟรมที่ 2
เป็นการกำหนดตำแหน่งของการเคลื่อนที่ ของภาพ หญิงขี่ไดโนเสาร์ เฟรมที่ 2 ที่ต่อจากเฟรมที่ 1 ดังรูป
กำหนดเฟรมที่ 3
เป็นการกำหนดตำแหน่งของการเคลื่อนที่ ของภาพ หญิงขี่ไดโนเสาร์ ในเฟรมที่ 3 ที่ต่อจากเฟรมที่ 2 ดังรูป
กำหนดเฟรมที่ 4
เป็นการกำหนดตำแหน่งของการเคลื่อนที่ ของภาพ หญิงขี่ไดโนเสาร์ ในเฟรมที่ 4 ที่ต่อเนื่องจากเฟรมที่ 3
วิธีการทำเช่นเดียวกับกับ เฟรมที่ 2 และเฟรมที่ 3 เพียงแต่ขั้นตอนที่ 2 ให้เปลี่ยนชื่อเลเยอร์ที่คัดลอกมา เป็นชื่อ Dino 4 แล้วปิด(ตา)เลเยอร์ Dino 3 และย้ายตำแหน่งไดโนเสาร์ เลื่อนไปทางขวามากยิ่งขึ้น
กำหนดเฟรมที่ 5
เมื่อกำหนดตำแหน่งการเคลื่อนที่ของภาพไดโนเสาร์บิน จากเฟรมที่ 1 – 4 แล้ว ในเฟรมสุดท้ายนี้เราจะทำให้ภาพหญิงขี่ไดโนเสาร์ หายไป และแสดงตัวอักษรขึ้นมา ทำได้ดังนี้
1. ใช้เครื่องมือ พิมพ์ข้อความ Wow! Wonderful ลงไป ให้ตัวอักษรขนาด 55 Px สีแดง จัดให้อยู่ตรงกลางภาพ
2. จากนั้นซ่อนเลเยอร์ ตั้งแต่ Dino 1 - Dino 4 ให้หมด
ดูผลลัพธ์ของการเคลื่อนไหว
ก่อนที่เราจะมาดูผลของภาพเคลื่อนไหวที่เราสร้าง เรามาตรวจสอบดูก่อน โดย...
- อันดับแรกไล่คลิกดูทีละเฟรม ตั้งแต่เฟรมที่ 1 – เฟรมที่ 4 ต้องมีรูปเดียวที่แสดงบนพื้นหลัง คือ รูปหญิงบนหลังไดโนเสาร์
- หากมีรูปอื่นอยู่ด้วยให้แก้ไขโดย คลิกปิดรูปตา หน้าชื่อเลเยอร์นั้นๆ
- และเฟรมที่ 5 ต้องมีข้อความคำว่า Wow! Wonderful ..ถ้าไม่มีให้คลิกหน้าชื่อเลเยอร์นั้น(เลเยอร์สุดท้าย) ให้แสดงรูปตา
เอาหละ ทีนี้มาดูกัน คลิกที่ปุ่ม (Play Animation) ในหน้าต่าง Animation ซึ่งสามารถกำหนดจำนวนครั้งการแสดงได้ โดยคลิกที่ปุ่ม ซึ่งแสดงผลดังนี้
- Once แสดงภาพเคลื่อนไหวเพียงรอบเดียว
- Forever แสดงภาพเคลื่อนไหว จนกว่าเราจะคลิกปุ่ม
- Other แสดงภาพเคลื่อนไหว ซ้ำตามจำนวนครั้งที่กำหนด
หรือกำหนดเวลาหน่วงในการแสดงภาพเคลื่อนไหวแต่ละเฟรมได้โดยคลิกเลือกเวลาที่
...หลังจากที่เราคลิกปุ่ม ดูแล้วจะเห็นว่าภาพเคลื่อนไหวของเรา มันเคลื่อนไหวเร็วเสียจนตาลาย มองแทบไม่ทัน ดังนั้นเราต้องทำให้มันช้าลง(พอดี) โดย
- คลิกเลือก เฟรมที่ 1 ซึ่งใต้เฟรมจะมี อยู่ ...ให้คลิกตรงรูปสามเหลี่ยมเล็กๆ เพื่อกำหนดการหน่วงเวลาการแสดงภาพ ให้กำหนด = 0.5 sec
- และคลิกเฟรมอื่นๆ ที่เหลือ ตั้งแต่เฟรมที่ 2 – เฟรมที่ 4 และกำหนดเวลาเท่ากับเฟรมที่ 1
- ส่วนเฟรมที่ 5 ซึ่งเป็นเฟรมสุดท้าย ให้กำหนดเท่ากับ 1.0 sec
- จากนั้นลองคลิกที่ปุ่ม เพื่อดูผลลัพธ์อีกครั้ง
Ok เรียบร้อยแล้วหละ หากลองเล่นดูแล้วยังไม่เป็นที่พอใจ เราก็สามารถปรับแต่งให้เป็นที่พอใจได้เลยครับ
ปล. ตอนต่อไป สร้างภาพเคลื่อนไหวง่ายๆ ด้วย Tweening