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

ความสามารถอีกอย่างหนึ่งของโปรแกรม 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

แต่งหน้าให้สวยใส ลบริ้วรอยก่อนวัยด้วย Healing Brush

การลบริ้วรอยประเภทริ้วรอยก่อนวัย หรือริ้วรอยที่ฝังลึกในภาพ เรามักจะเลือกใช้บริการของเครื่องมือ Healing Brush Tool เพราะนอกจากจะก๊อปปี้พื้นที่มาวางแทนส่วนที่ต้องการลบแล้ว เครื่องมือชนิดนี้ยังปรับส่วนที่นำมาวางให้กลมกลืนไปกับพื้นหลังให้โดยอัตโนมัติอีกด้วย

เพื่อไม่ให้เป็นการเสียเวลา เรามาลงมือทำกันเลย

Save ภาพสาวสวยคนนี้ลงในเครื่องฯก่อนนะครับ (คลิกที่ภาพ เพื่อขยายเป็นขนาดจริง)

..เราจะเห็นว่าเธอเป็นคนหน้าตาดีทีเดียว ...แต่เสียอย่างเดียว หน้าเป็นกะ และเป็นสิวไปหน่อย!! เอาหละ! ไม่เป็นไรเราช่วยเธอได้ มาช่วยกันแต่งหน้าให้เธอกัน ...ให้สวยใสไร้สิวฝ้าไปเลย !!

1. เปิดไฟล์ภาพที่เรา Save ขึ้นมา ..เสร็จแล้ว

2. คลิกเลือกเครื่องมือ (Healing Brush Tool) ปรับค่าต่างได้จาก Option Bar (ใต้เมนู บาร์) หรือคลิกขวาที่ภาพ แล้วปรับค่าต่างๆ ของเครื่องมือได้เลย (เช่น ขนาดของเครื่องมือ ค่า Hardness เป็นต้น)

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

3. กดปุ่ม Alt+คลิกเมาส์ เลือกพื้นที่ ที่เราจะใช้เป็นต้นแบบ เสร็จแล้ว

4. คลิกลงบนส่วนที่ต้องการแทนที่

5. โปรแกรมจะเกลี่ยสีให้เข้ากับพื้นที่ ที่วางโดยอัตโนมัติ

6. จากนั้น เราก็จัดการลบริ้วรอยส่วนอื่นๆ ที่เหลือให้หมด เช่น ที่แก้มซ้าย ที่คาง ครับ
หมายเหตุ : นอกจากการคลิกตามปกติแล้ว เรายังสามารถใช้วิธีการแดรกเมาส์ (คลิกแล้วลาก) เพื่อแทนที่ริ้วรอยที่ต้องการลบได้เหมือนกับการใช้เครื่องมือ Stamp Tool ได้อีกด้วยครับ

7. ง่ายๆ แค่นี้ เราก็สามารถแต่งหน้า ลบริ้วรอย สิวฝ้าให้สาว ...ได้สวยหน้าใส ได้แล้วครับ

8. เสร็จแล้ว ก็จะได้ดังภาพด้านล่างนี้ครับ

เห็นไหมครับ ...ว่าสวยใสจริงๆๆๆๆ !!!

555 ...อย่าบอกใครเชียวหละ (ว่ามันดีจริง!!!)