1. No category

http://dadeemodify.exteen.com/20070619/how-to-gif-animation-imageready
[How to] การทําภาพเคลื่อนไหว (GIF animation) อยางงาย ดวย
ImageReady
posted on 19 Jun 2007 18:53 by dadeemodify in Article
สวัสดีครับพี่นอง เอ็นทรี่นี้ขอเจาของบลอกพักเหนื่อยจากงาน BB มาสอนเบสิกการทํา
ภาพเคลื่อนไหวแบบเอ็นทรี่ที่แลวกอนก็แลวกันนะครับ ^^
โดนกระผมออกเปนสอนขั้นตอนใหญๆ ก็คือ การเตรียมเฟรมภาพที่จะใช และการนําภาพที่ไดไปทํา
ใหมันเคลื่อนไหวโดยใชโปรแกรม ImageReady(มันแถมมากับ PhotoShop อยูแลวแหละ)
[Step 1] วางแผนและตระเตรียมเฟรมภาพตางๆใน PhotoShop
ขอเลาเปนเรื่องเปนราวเลยก็แลวกันนะครับ - - เพราะแตละคนจะมีวีธีทําไมเหมือนกัน
สําหรับงานนี้ผมตองการภาพหนูอาวี่ทําตากระพริบปริบๆ เปนวิธีการทําภาพเคลื่อนไหวที่งายที่สุด
แลวมั้ง - เริ่มแรกผมจึงวาดภาพหนูอาวีข
่ ณะลืมตา และ หลับตา (ดวยความขี้เกียจ อยางหลังจึงวาดแตตา)
เปดภาพที่วาใน PhotoShop
จัดการลงสีใหเรียบรอย(ไมลงก็ได ตามสะดวก) ภาพไดจะใชเปนเฟรมตอนลืมตา
จากนั้นก็ทําการกอปปภาพนี้ขึ้นมาอีก 1 เลเยอร(ลากไปปลอยตามลูกศรสีแดง) เพื่อทําการตกแตง
สําหรับใชเปนเฟรมหลับตา
ใชเครื่องมือ Clon Stamp เนียนลบลูกตาออก (เปนผีไมมีตาชั่วคราว =[]=) วิธีใชงานคือ กด Alt
คางไวแลวไปคลิกที่สีผิว (กากบาท)
แลวไปคลิกเพื่อลบลูกตาออกไดเลย (กวาจะเสร็จก็คลิกไปหลายทีเหมือนกัน)
ใช Marquee Tool(1) ทําการเลือก (จะเรียกวาครอบก็ได ^^) กด Ctrl+C และ Ctrl+V เพื่อกอป
ภาพตา(ตอนหลับตา)ไปยังเลเยอรใหม
แลวใช Move Tool(2) ลากไปวางบนหนา สุดทายก็ปรับ Layer Mode(3) ใหเปน Multiply เพื่อให
สวนที่เปนสีขาวโปรงใส(แบบวาขี้เกียจลบ - -)
(สําหรับขั้นตอนนี้ใครอาจจะเขียนภาพตา(ตอนหลับตา)ลงไปเลยก็ได ไมตองกอปใหเสียเวลา ^^)
จัดวางตําแหนง ตกแตง และทําการ Crop ใหเรียบรอย โดยการใช Marquee Tool เจาเกา
ครอบบริเวณภาพที่ตองการ (สามารถกดปุม Shift คางไวเพื่อใหเปนรูปสี่เหลี่ยมจัตตุรัส)
แลวไปที่เมนู Image>>Crop เปนอันเสร็จสิ้นการ Crop
สุดทายเราจะได 2 เฟรม คือ ลืมตา และหลับตา
(บางคนอาจไดหลายเฟรม) โดยเราจะใชการเปดปดการแสดงผลของเลเยอร(รูปลูกตา)(ลองทดสอบ
ดูได)
เพื่อใหไดเฟรมตามตองการ เมื่อพรอมทุกเฟรมแลวเราก็พรอมที่จะผลงานของเราตอไปยังโปรแกรม
Image Ready
[Step 2] กํากับการเคลื่อนไหวใน ImageReady
หากใครยังคางอยูใน PhotoShop ก็สามารถสงงานไปยัง ImageReady ไดงายๆโดยกดปุม Edit in
ImageReady
ยินดีตอนรับพี่นองทุกทานสู ImageReady เพื่อความปลอดภัยกรุณาเลือกวงแดงทางดานซายเปน
Optimize
เพราะจะไดแสดงภาพงานเราหลังจากเซฟไปแลวจริงๆ (สามารถปรับแตงเพิ่มเติมไดที่วงแดง
ทางดานขวา)
เปนอันเสร็จสิ้นการเตรียมตัว (นี่เพิ่งเตรียมเรอะ =[]=')
ขั้นแรก ไปควบคุมการแสดงผลของเลเยอร(ปกติอยูขวาลางสุด) ใหแสดงภาพหนูอาวี่ตอนลืมตา
เปนอันเสร็จสิ้นเฟรมแรก คลิกปุม Duplicates Current Frame (2) เพื่อเริ่มการตั้งคาที่เฟรมตอไป
(ที่แท็บ Animation จะปรากฎเฟรมใหมขึ้นมา)
ที่เฟรมใหมนี้เราก็ตั้งคาการแสดงผลเลเยอรใหเฟรมนี้เปนเฟรมหลับตา
ใตเฟรมแตละเฟรมเริ่มตนจะมีคําวา 0 Sec (0 วินาที) อยู นี่คือเวลาในการแสดงผลของแตละเฟรม
(คางกี่วิ)
เราสามาถคลิกที่นี่เพื่อเลือกเวลาที่ตองการได (Other.. ถาพี่นองตองการกรอกเอง)
ทีนี้ผมก็สรางเฟรมตางๆขึ้นมาและปรับเวลาตามภาพ
ตามบทที่วางไววา กระพริบตาหนึ่งครั้ง คาง และกระพริบถี่ๆอีกสองครั้ง (แลวเริ่มใหม)
ลองกดปุม play ในวงแดง เพื่อทดลองเลนภาพเคลื่อนไหวดูได (อยาถามวาหยุดยังไง ^^')
เมื่อพอใจแลว พี่นองสามารถยอ/ขยายภาพไดที่ Image>>Image Size... (50x50 สําหรับอิโมชั่น
ใน msn)
และทําการเซฟไดที่ File>>Save Optimize As.. (ใครตั้งชื่อภาษาไทยจะมีการเตือนนิดหนอยไม
ตองไปสนใจมัน)
เอาเปนวาไปดูผลงานกันดีกวา ^^
ปดทายดวยภาพอิโมที่เคยทําไวนานแลว
อันสุดทายนี่คุนๆแฮะ - -a
สําหรับใครที่อยากแอดวานซมากกานี้ ลองเปดภาพ gif animation จากที่ตางๆโดยใช
ImageReady ดูแลวกันนะครับ
จะชวยใหเขาใจมากขึ้น
วันนี้ผมแนะนําไดแคนี้ สวัสดีครับ
ปล.สงสัยตรงไหนถามไดนะครับ ^^