ลูกบอลเคลื่อนไหว

ในตัวอย่างนี้ เป็นการทำให้ลูกบอล กลายเป็นวัตถุเคลื่อนไหว โดยใช้ Photoshop และ Image Ready เป็นตัวสร้าง

รูปลูกบอล

ตัวอย่างที่ 1(คลิกเพื่อดูภาพตัวอย่าง)

ตัวอย่างที่ 2 (คลิกเพื่อดูภาพตัวอย่าง)

ขั้นตอนในการสร้างตัวอย่างที่ 1

• คลิกขวา ที่รูปลูกบอล และคลิกขวา เลือก Save image as เพื่อทำการเก็บรูปลูกบอลไว้ในเครื่องคอมพิวเตอร์
• เปิด photoshop เพื่อทำการลบพื้นหลังของรูปลูกบอล
• เปิดเอกสารใหม่ กำหนดเป็นขนาด 200x200 พิกเซล เป็น Transparent
• เปิดรูปลูกบอล จากนั้นนำไปวางในเอกสารใหม่
• เลือกเครื่องมือ Magic Wand Tool และคลิกที่ภาพพื้นหลังของรูปลูกบอล (บริเวณ พื้นที่สีเขียว)
• กด Delete เพื่อทำการลบภาพพื้นหลังออก
• จากนั้น คลิกที่ปุ่ม Jump to Image Ready เพื่อไปทำงานในโปรแกรม Image Ready
• เปิดเอกสารใหม่ขึ้นมา และกำหนดให้เป็น Web Banner มีลักษณะเป็น Transparent
• ใช้พู่กันระบายสีน้ำเงินให้กับ Web Banner
• ลาก ลูกบอล ไปวางใน Web Banner ที่ระบายสีน้ำเงินเรียบร้อยแล้ว
• ทำการลดขนาดของลูกบอลโดยกด Ctrl + T
• ที่ Layer Palette ทำการคลิกขวาที่ เลเยอร์ ลูกบอล แล้วทำการคัดลอก เลเยอร์ลูกบอลเพิ่มอีก 6 เลเยอร์ (คลิกขวา เลือก Duplicate Layer)
• ทำการเปลี่ยนชื่อแต่ละเลเยอร์เป็น Layer1, ball1, ball2, ball3, ball4, ball5, ball6, ball7
• หลังจากนั้น ถึงขั้นตอนการเลื่อนลูกบอลในแต่ละเลเยอร์ให้เหลื่อมกัน (ตามเส้นทางการเคลื่อนที่)
• เปิด หน้าต่าง Animation Palette เพื่อทำการสร้างภาพเคลื่อนไหวทีละเฟรม
• เฟรมแรก ให้เลือกเฉพาะเลเยอร์ Layer1 และ ball1
• ทำการเฟรม ให้ได้ 7 เฟรม โดยคลิกที่ปุ่ม Dupliate ด้านล่าง Animation Pallete
• เฟรมสอง ให้เลือกเฉพาะเลเยอร์ Layer1 และ ball2
• เฟรมสาม ให้เลือกเฉพาะเลเยอร์ Layer1 และ ball3
• ทำจนครบ 7 เฟรม
• การที่จะเลือกเฟรมไหนให้มีเลเยอร์ไหนบ้างให้คลิกรูปดวงตา

เปลี่ยนชื่อแต่ละเลเยอร์เพื่อให้ง่ายต่อการจัดการแต่ละเฟรม

หลังจากเลื่อนลูกบอลแต่ละเลเยอร์ให้เหลื่อมกัน ตามเส้นทางการเคลื่อนที่

อินโทร-แอนิเมชั่น

บทนำ

• การสร้างเอกสารใหม่ และการกำหนดรายละเอียดของเอกสารใหม่
  
• หน้าต่าง Layers Palette
  
• เครื่องมือพื้นฐานในการแต่งภาพ
  
• หน้าต่าง Animation Palette
  
  
  ถ้าทราบตรงส่วนนี้อยู่แล้ว สามารถข้ามไปได้เลยครับ
  
  การสร้างเอกสารใหม่
  ให้ไปที่ File -> New จากนั้น ใส่ชื่อเอกสารใหม่ จากนั้นกำหนดขนาดของรูปภาพ ในตัวอย่างนี้กำหนด ความกว้าง และความยาว เป็น 100 พิกเซล เท่ากัน และกำหนดเป็น Transparent
  
  

เมื่อกำหนดรายละเอียดของเอกสารใหม่เรียบร้อยแล้ว คลิก OK จะได้พื้นที่ในการสร้างสรรค์งาน ภาพด้านซ้าย เป็นพื้นที่ในการสร้างสรรค์งาน ส่วนรูปด้านขวา แสดง Layers Palette



หน้าต่าง Layers Palette
ในหน้าต่าง Layers Palette จะบอกถึงรายละเอียด ของเลเยอร์ต่างๆ ของเอกสาร ซึ่งในการสร้างสรรค์งานหนึ่งๆ นั้น จะต้องทำงานร่วมกันหลายเลเยอร์ ดังนั้น ให้สังเกตรูปพู่กันไว้ เพราะจะเป็นตัวบอกถึงสถานะว่า กำลังทำงานอยู่เลเยอร์ไหน รวมทั้งรูปดวงตา จะทำให้ทราบว่า เลเยอร์นั้น เรามองเห็นอยู่หรือไม่



เครื่องมือพื้นฐานในการแต่งภาพ




เครื่องมือย้ายตำแหน่งวัตถุ (เช่นข้อความ หรือรูปภาพ) Move Tool
เครื่องมือพู่กัน ใช้ระบายสี พื้นหลัง หรือ ตกแต่งรูปภาพ สามารถปรับขนาดพู่กันได้ Paintbrush Tool ก่อนใช้พู่กันควร เลือกสีก่อน



หน้าต่าง Animation Palette
หน้าต่าง Animation Palette ที่เปิดขึ้นมา เป็นหน้าต่างที่ใช้ทำการจัดเรียงภาพในแต่ละเฟรม ตามลำดับการเคลื่อนไหว หน้าต่าง Animation Palette จะต้องทำงานร่วมกับ หน้าต่าง Layers Palette

สร้างแอนิเมชั่น ด้วยโฟโต้ชอป เบื้องต้น ตอนที่ 2

ไฟล์รูปภาพที่ใช้สร้างภาพเคลื่อนไหว (lamp.gif)

ภาพเคลื่อนไหวที่สร้างขึ้นมา(คลิกเพื่อดูตัวอย่าง)

การทำภาพเคลื่อนไหวอย่างง่าย

1. เปิดโปรแกรม Adobe ImageReady ขึ้นมา

2. เปิดไฟล์ lamp.gif จากนั้น save as เป็น lamp1.psd

3. ใช้พู่กัน สีขาว ระบายทับเส้น สีดำ ให้เหลือแต่หลอดไฟ

4. เปิดไฟล์ lamp.gif ขึ้นมาอีกครั้ง จากนั้นลากให้ไปซ้อนกับ ภาพในขั้นตอนที่ 3

5. ทำการจัดตำแหน่งให้ซ้อนกันพอดี โดยทดสอบได้โดยคลิกที่รูปดวงตาเพื่อ สลับดูระหว่าง เลเยอร์

6. เปิด animation palette ขึ้นมา โดยไปที่ Window-> Animation

7. จะพบว่า เมื่อเปิด animation palette ขึ้น มา เฟรมแรก จะเป็นภาพที่ซ้อนกัน ของ 2 เลเยอร์

8. แต่เฟรมแรก เราต้องการให้เป็นภาพเฉพาะหลอดไฟอย่างเดียว ดังนั้น ให้คลิกรูปดวงตาที่ เลเยอร์ที่เหลือให้หายไปก่อน

9. ต่อไปทำการ คัดลอก (duplicate) เฟรมที่ 2 ขึ้นมา โดยคลิกที่ Duplicate (ด้านล่างของ) Animation Palette

10. ทำการคลิกให้รูปดวงตาที่ หายไปปรากฎขึ้นมา

11. ทำการ play ดู

12. ทำการปรับความเร็วที่ 0 Sec ใน Animation Palette ให้เป็น 1 Sec

13. ทำการบันทึก Save Optimized As เป็นชื่อไฟล์ตามที่ต้องการ และมีนามสกุลเป็น .gif

สร้างแอนิเมชั่น ด้วยโฟโต้ชอป เบื้องต้น ตอนที่ 1

ไฟล์รูปภาพที่ใช้สร้างภาพเคลื่อนไหว (pack1.gif)


รูปภาพที่ใช้สร้างภาพเคลื่อนไหว (pack2.gif)gif


ภาพเคลื่อนไหวที่สร้างขึ้นมา(คลิกเพื่อดูตัวอย่าง)

การทำภาพคลิปอาร์ทให้เป็นภาพเคลื่อนไหวอย่างง่าย

1. เปิดโปรแกรม Adobe ImageReady ขึ้นมา

2. ทำการสร้างเอกสารใหม่ โดยคลิกที่ File-> New

3. ทำการสร้างเอกสารใหม่ โดยเลือกขนาด 32x32 พิกเซล (Pixel) และมี content แบบ Transparent เนื่องมาจาก ขนาดภาพ pack1 และ pack2 มีขนาด 32x32 พิกเซล

4. ทำการใส่ภาพพื้นหลังให้เป็นสีขาว

5. จากนั้น ทำการเปิดไฟล์ pack1 ขึ้นมา โดยไปที่ File -> Open

6. ทำการลากให้ pack1 ไปวางซ้อนทับ เอกสารใหม่ที่ระบายเป็นสีขาวใน ขั้นตอนที่ 4

7. ทำการวางตำแหน่งให้เหมาะสม โดยใช้ Move Tool

8. เปิดไฟล์ pack2 ขึ้นมา จากนั้น ให้ลาก pack2 ไปซ้อนทับ เป็น เลเยอร์ที่ 3

9. ทำการจัดตำแหน่งให้ pack1 และ pack2 ซ้อนทับกัน โดยให้ขอบกล่องทับกันสนิท

10. แนะนำให้คลิกรูปดวงตา Layer ที่เป็น pack1 สลับกันไปมาเพื่อดูว่า ทับกันสนิทหรือไม่

11. เปิดหน้าต่าง animation palette ขึ้นมา โดยไปที่ Window -> Animation

12. คลิกรูปดวงตาที่ Layers ของ pack2 ให้หายไป เพื่อให้เฟรมแรก เป็นภาพกล่อง

13. ทำการคัดลอก (Duplicate) เฟรมแรก โดยคลิกที่ปุ่มด้านล่างของ Animation Palette

14. คลิกรูปดวงตาที่ Layers ของ pack2 ให้ปรากฎอีกครั้ง และคลิก รูปดวงตาที่ Layers ของ pack1 ให้หายไป

15. ลองคลิก play ดูจะเห็นว่า ได้ภาพ เคลื่อนไหวแล้ว แต่ยังเร็วเกินไป

16. ทำการเปลี่ยนความเร็วการสลับระหว่างเฟรมโดยคลิกที่ 0 sec แต่ละเฟรม และทำการเปลี่ยนให้เป็น 1 sec จากนั้นคลิก play ใหม่

17. ทำการ บันทึก โดยไปที่ File -> Save Optimized As แล้วทำการบันทึกชื่อไฟล์ นามสกุลจะเป็น .gif

18. หลังจากนั้น ลองไปคลิกไฟล์ .gif ที่สร้างขึ้นมา จะได้คลิปอาร์ทที่เป็นภาพเคลื่อนไหว