ทำภาพเคลื่อนไหว(PS cs4)

posted on 25 Jul 2009 16:13 by subzero in Graphic

วันนี้ โฟโต้ฉอบ cs4 ขอเสนอการทำภาพเคลื่อนไหวไฮโซกุ๊กกิ๊กกะดุ๊กกะดิ๊ก ไว้สำหรับศึกษาดูเล่น หรือไว้ใช้งานในฮิ5 หรือเว็บของคุณก็ได้ ...

เวอร์ชั่นใหม่ๆของโฟโต้ฉอบเค้าไม่ต้องสลับโปรแกรมไปที่ Imagereadyให้ยุ่งยากนะ เค้าติดมาที่เมนู Window แล้ว ไม่เชื่อกดดูที่ Window--->Animation มันจะมีแถบล่างโผล่ขึ้นมา เว็บไหนที่สอนการทำภาพเคลื่อนไหวแล้วให้กดปุ่มตรง Toolbar สลับไปที่ Imageready ก็เลิกดูได้ละ

การทำภาพเคลีื่อนไหวในโฟโต้ฉอบนี้ต้องทำความเข้าใจความสัมพันธ์ของ 2 พาเลทนั่นคือ Layer กับ Animation
ซึ่งมันยุ่งอะไรกัน เดี๋ยวจะบอกไปเรื่อยๆนี่แหละรอก่อนจิ

-------------------------
เริ่มแบบง่ายๆก่อน เพื่อดูการทำงานร่วมกันของ Layer กับ Animation
- สร้างงานใหม่ขึ้นมาเป็นสีขาวนะ 200x250 px
- ใช้ Elipse Tool สร้างวงกลมขึ้นมา 3 สี

- ที่พาเลท Animation จิ้มที่ลูกศรชี้ 2ที มันจะกอปปี้แบบเฟรมแรกมา 2อัน เห็นมะ 1 2 3

- จิ้มที่เฟรม 1 แล้วมาดูที่ Layer ให้ปิดตา 2วงกลมบน

-จิ้มที่เฟรม 2 และ3 ก็มาปิดตาที่ Layer ที่เหลือโดยไม่ซ้ำกันนะห้ามงง
(เฟรม2 เปิดกลาง ปิดบนล่าง)(เฟรม3 เปิดบน ปิดกลางล่าง) จะได้แบบนี้

- กำหนดเวลาการเล่นแต่ละเฟรม ตรง 0 sec. ล่างๆนั่นไง กดปุ๊บลองจิ้มไปที่ 0.2 แล้วกดปุ่ม Play ดูก่อน

- File--->Save for web.. จิ้มที่ 4-Up ภาพช่องที่ 2(ขวาบน) และเลือก เป็นไฟล์ .gif

Forever เพื่อให้เล่นวนตลอด ,ลองกดเล่นดูก่อนก็ได้

ทดสอบ

ลองทำเป็นข้อความแทนวงกลมดูดีกว่า 2เฟรม และเปิดปิดตาหลักการเดียวกัน

2เฟรมเท่าเดิม แต่ปรับตรงเลเยอร์ให้ต่างกัน เหมือนวงกลมคนละสีนั่นแหละ
ต้องการมห้เป็นยังไงก็ปรับไป จะเปลี่ยนสีก็ได้แบบกระพริบ หรือจะเลื่อนขึ้นบนนิดๆ มันก็เป็นเด้งๆ
------------------------------------------------------------------

ลองแบบแนวๆขึ้นมาหน่อย มีภาพด้วยข้อความด้วย ก็ไม่ยากนะถ้าเข้าใจการทำงานของมัน
ว่าจะเปิดตรงไหนปิดตรงไหน มีจินตนาการในหัวก่อนว่าจะให้ออกมายังไง ส่วนเรื่องเทคนิคการปรับแต่งในโฟโต้ฉอบก็ ...หาดูเอง ว่าจะใส่ของใส่เอฟเฟคอะไรยังไง

- เปิดภาพที่ต้องการขึ้นมา
- ใส่ข้อความ เข้าไปอีก 2 เลเยอร์

- กอปปี้ Layer ตรงข้อความ 555++ ขึ้นมาอีก1(จิ้มเลเยอร์แล้ว Ctrl+J)
- จัดการขยับเลเยอร์ 555++ นั่นขึ้นไป เลเยอร์เดียวนะ 555++ อีกอันก็ไว้ที่เดิม

- ที่ Animation จิ้มกอปปี้เฟรมขึ้นมา 1 เฟรมพอ

- เฟรมแรกเปิดตา 555++ ที่ไม่ได้ขยับ ปิดตาอันที่ขยับขึ้นไว้ก่อน
- เฟรมที่ 2 เปิดตา555++ ที่เราขยับมันขึ้น และปิดตา555++อีกอันไว้
...

ผลที่ได้

**ไม่ต้องทำตามขั้นตอนนี้เป๊ะๆนะครับ คือถ้าเข้าใจตัวอย่างแรกแล้ว
มันจะพัฒนาได้อีกมากมายหลายแบบ มันก็แค่จะให้แสดงอันไหนก็เปิดตาตรงเลเยอร์
จะให้อันไหนไม่ต้องแสดงก็ปิดตาไว้ ... ง๊ายง่าย

edit @ 25 Jul 2009 17:55:12 by subzero™

2 Comments