หน้าแรก
ส่งเคล็ดลับของคุณ
บทความทั้งหมด
ติดต่อโฆษณา
เพิ่มลิงค์
โปรโมทเว็บไซต์
 
สร้อยเพื่อสุขภาพ
 

[How to] การทำภาพเคลื่อนไหว (GIF animation) อย่างง่าย ด้วย PhotoShop และ ImageReady



แบ่งออกเป็นสอนขั้นตอนใหญ่ๆ ก็คือ การเตรียมเฟรมภาพที่จะใช้ และการนำภาพที่ได้ไปทำให้มันเคลื่อนไหวโดยใช้โปรแกรม ImageReady(มันแถมมากับ PhotoShop อยู่แล้วแหละ)

[Step 1] วางแผนและตระเตรียมเฟรมภาพต่างๆใน PhotoShop

ขอเล่าเป็นเรื่องเป็นราวเลยก็แล้วกันนะครับ - - เพราะแต่ละคนจะมีวีธีทำไม่เหมือนกัน

สำหรับงานนี้ผมต้องการภาพหนูอาวี่ทำตากระพริบปริบๆ เป็นวิธีการทำภาพเคลื่อนไหวที่ง่ายที่สุดแล้วมั้ง - -

เริ่มแรกผมจึงวาดภาพหนูอาวี่ขณะลืมตา และ หลับตา (ด้วยความขี้เกียจ อย่างหลังจึงวาดแต่ตา)

เปิดภาพที่ว่าใน PhotoShop

2.jpg


จัดการลงสีให้เรียบร้อย(ไม่ลงก็ได้ ตามสะดวก) ภาพได้จะใช้เป็นเฟรมตอนลืมตา

จากนั้นก็ทำการก๊อปปี้ภาพนี้ขึ้นมาอีก 1 เลเยอร์(ลากไปปล่อยตามลูกศรสีแดง) เพื่อทำการตกแต่งสำหรับใช้เป็นเฟรมหลับตา

3.jpg


ใช้เครื่องมือ Clon Stamp เนียนลบลูกตาออก (เป็นผีไม่มีตาชั่วคราว =[]=) วิธีใช้งานคือ กด Alt ค้างไว้แล้วไปคลิกที่สีผิว (กากบาท)

แล้วไปคลิกเพื่อลบลูกตาออกได้เลย (กว่าจะเสร็จก็คลิกไปหลายทีเหมือนกัน)

4.jpg


ใช้ Marquee Tool(1) ทำการเลือก (จะเรียกว่าครอบก็ได้ ^^) กด Ctrl+C และ Ctrl+V เพื่อก๊อปภาพตา(ตอนหลับตา)ไปยังเลเยอร์ใหม่

แล้ว ใช้ Move Tool(2) ลากไปวางบนหน้า สุดท้ายก็ปรับ Layer Mode(3) ให้เป็น Multiply เพื่อให้ส่วนที่เป็นสีขาวโปร่งใส(แบบว่าขี้เกียจลบ - -)

(สำหรับขั้นตอนนี้ใครอาจจะเขียนภาพตา(ตอนหลับตา)ลงไปเลยก็ได้ ไม่ต้องก๊อปให้เสียเวลา ^^)

5.jpg


จัดวางตำแหน่ง ตกแต่ง และทำการ Crop ให้เรียบร้อย โดยการใช้ Marquee Tool เจ้าเก่า

ครอบบริเวณภาพที่ต้องการ (สามารถกดปุ่ม Shift ค้างไว้เพื่อให้เป็นรูปสี่เหลี่ยมจัตตุรัส)

แล้วไปที่เมนู Image>>Crop เป็นอันเสร็จสิ้นการ Crop

6.jpg


สุดท้ายเราจะได้ 2 เฟรม คือ ลืมตา และหลับตา

(บางคนอาจได้หลายเฟรม) โดยเราจะใช้การเปิดปิดการแสดงผลของเลเยอร์(รูปลูกตา)(ลองทดสอบดูได้)

เพื่อให้ได้เฟรมตามต้องการ เมื่อพร้อมทุกเฟรมแล้วเราก็พร้อมที่จะผลงานของเราต่อไปยังโปรแกรม Image Ready


7.jpg




[Step 2] กำกับการเคลื่อนไหวใน ImageReady

หากใครยังค้างอยู่ใน PhotoShop ก็สามารถส่งงานไปยัง ImageReady ได้ง่ายๆโดยกดปุ่ม Edit in ImageReady

8.jpg


ยินดีต้อนรับพี่น้องทุกท่านสู่ ImageReady เพื่อความปลอดภัยกรุณาเลือกวงแดงทางด้านซ้ายเป็น Optimize

เพราะจะได้แสดงภาพงานเราหลังจากเซฟไปแล้วจริงๆ (สามารถปรับแต่งเพิ่มเติมได้ที่วงแดงทางด้านขวา)

เป็นอันเสร็จสิ้นการเตรียมตัว (นี่เพิ่งเตรียมเรอะ =[]=')

9.jpg


ขั้นแรก ไปควบคุมการแสดงผลของเลเยอร์(ปกติอยู่ขวาล่างสุด) ให้แสดงภาพหนูอาวี่ตอนลืมตา

เป็นอันเสร็จสิ้นเฟรมแรก คลิกปุ่ม Duplicates Current Frame (2) เพื่อเริ่มการตั้งค่าที่เฟรมต่อไป

(ที่แท็บ Animation จะปรากฎเฟรมใหม่ขึ้นมา)

10.jpg


ที่เฟรมใหม่นี้เราก็ตั้งค่าการแสดงผลเลเยอร์ให้เฟรมนี้เป็นเฟรมหลับตา

11.jpg


ใต้เฟรมแต่ละเฟรมเริ่มต้นจะมีคำว่า 0 Sec (0 วินาที) อยู่ นี่คือเวลาในการแสดงผลของแต่ละเฟรม(ค้างกี่วิ)

เราสามาถคลิกที่นี่เพื่อเลือกเวลาที่ต้องการได้ (Other.. ถ้าพี่น้องต้องการกรอกเอง)

13.jpg


ทีนี้ผมก็สร้างเฟรมต่างๆขึ้นมาและปรับเวลาตามภาพ

ตามบทที่วางไว้ว่า กระพริบตาหนึ่งครั้ง ค้าง และกระพริบถี่ๆอีกสองครั้ง (แล้วเริ่มใหม่)

ลองกดปุ่ม play ในวงแดง เพื่อทดลองเล่นภาพเคลื่อนไหวดูได้ (อย่าถามว่าหยุดยังไง ^^')

14.jpg


เมื่อพอใจแล้ว พี่น้องสามารถย่อ/ขยายภาพได้ที่ Image>>Image Size... (50x50 สำหรับอิโมชั่นใน msn)

และทำการเซฟได้ที่ File>>Save Optimize As.. (ใครตั้งชื่อภาษาไทยจะมีการเตือนนิดหน่อยไม่ต้องไปสนใจมัน)

เอาเป็นว่าไปดูผลงานกันดีกว่า ^^


15.jpg


สำหรับใครที่อยากแอดวานซ์มากก่านี้ ลองเปิดภาพ gif animation จากที่ต่างๆโดยใช้ ImageReady ดูแล้วกันนะครับ




 ขอบคุณบทความดีๆจาก  http://dadeemodify.exteen.com
 
เข้าอ่านแล้ว : 94662 ครั้ง
ส่งต่อ : [How to] การทำภาพเคลื่อนไหว (GIF animation) อย่างง่าย ด้วย PhotoShop และ ImageReady
HTML โค้ดสำหรับแชร์ไปยังเว็บของคุณ:
BB CODE สำหรับเว็บบอร์ด:
 
เรื่องล่าสุดของหมวดหมู่นี้
 
คู่มือการใช้งาน Submit Digg Auto With imacro
คู่มือการใช้งาน Submit Digg Auto With imacro ก่อนการใช้งานให้ติดตั้ง addon filefox
[How to] การทำภาพเคลื่อนไหว (GIF animation) อย่างง่าย ด้วย PhotoShop และ ImageReady
แบ่งออกเป็นสอนขั้นตอนใหญ่ๆ ก็คือ การเตรียมเฟรมภาพที่จะใช้ และการนำภาพที่ได้ไปทำให้มันเคลื่อนไหวโดยใช้โปรแกรม ImageReady(มันแถมมากับ PhotoShop อยู่แล้วแหละ)
ความแตกต่างระหว่าง Autorun และ Autoplay
ที่ผ่านมานั้นหลายๆคน(รวมถึงผมด้วย)มักจะใช้คำทั้ง 2 คำนี้โดยคิดว่ามันมีความหมายเดียวกัน จนเมื่อลองศึกษาค้นคว้าอย่างจริงจังจึงได้เข้าใจว่าค ำทั้ง 2 คำนั้นมีความหมายต่างกันครับ ผมเห็นว่าน่าสนใจดีเลยเอามาเล่าสู่กันฟังเพื่อจะได้ท ำความเข้าใจกันใหม่ และแก้ไขปัญหาไวรัสที่เกิดจากไฟล์ Autorun.inf ได้ถูกต้องตรงจุดครับ
:: โปรแกรมแนะนำ
TipDD.com รวมทิป เทคนิค เคล็ดลับเกี่ยวกับคอมพิวเตอร์ และอินเตอร์เน็ต Sofrtware ใหม่ๆ