Wednesday, January 2, 2008

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


ในตัวอย่างนี้ เป็นการทำให้ลูกบอล กลายเป็นวัตถุเคลื่อนไหว โดยใช้ 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 เฟรม
  • การที่จะเลือกเฟรมไหนให้มีเลเยอร์ไหนบ้างให้คลิกรูปดวงตา





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





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