สวัสดีครับพี่น้อง เอ็นทรี่นี้ขอเจ้าของบล๊อกพักเหนื่อยจากงาน 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 ดูแล้วกันนะครับ

จะช่วยให้เข้าใจมากขึ้น

วันนี้ผมแนะนำได้แค่นี้ สวัสดีครับ

ปล.สงสัยตรงไหนถามได้นะครับ ^^

Comment

smilebig smileopen-mounthed smileconfused smilesad smileangry smiletonguequestionembarrassedsurprised smilewinkdouble winkcry ???????????????   ??????????????????
smilebig smileopen-mounthed smileconfused smilesad smileangry smiletonguequestionembarrassedsurprised smilewinkdouble winkcry ???????????????

Tweet

โอ้วววว

ลุงจ้า How To ยอดแจ่มหลายๆ >w<b!!!

ยังงี้ มิเล่นเลย

อาวีร่า จงเจริญ!!!!

#1 By @☆MIMURA☆@ on 2007-06-19 19:09

โอ้ว...มานยอดมากเ
รยอิอิ

#2 By MintiNa de lALA on 2007-06-19 19:17

อร๊ากกส์ ยอดมากเสี่ย
ถึงว่า เราลบตาไม่เนียนซะที แต้งกิ้วเวรี่มัช!!

#3 By ★๐Zerellenz๐★ on 2007-06-19 19:37

กี้ดดดดดดดดดดดดดด
น่าฮ้ากกกกกกกกกกก
เฮาจะทำบ้างงงงง
ก้ากกก
รอว่างๆก่อน
จะทำเย้อเย้อเยย

#4 By Rabbie^Ghocote on 2007-06-19 20:13

It's Wonderful !!!

เสี่ยแนนยอดจริงๆ ทำเอาอาวี่จังน่ารักขึ้นอีกแล้ว

#5 By Phuwin on 2007-06-19 20:35

โอว..เจ๋วครับ ไม่ยักรู้ว่าเขาทำกันแบบนี้..เหอๆๆ...เดี๋ยวทำมั่ง..(จะมีเวลาไหมหนอ)

#6 By NEKOmimi on 2007-06-19 21:18

ว่างๆเดี๋ยวทำเล่นมั่ง

#7 By (^_^)/nana on 2007-06-19 22:19

อืมม์ มันต้องแบบนี้นี่เอง เป็นของมีประโยชน์ดีครับ

#8 By Donaldo Zombie on 2007-06-19 22:32

ฮาวทูอิมเมจเรดี้..ว้าวๆๆๆๆๆ

#9 By nonworld on 2007-06-20 10:01

อิโมลูกฉาวเฮียน่ารักมากมาย

#10 By [ i ]Rin on 2007-06-20 19:19

หูย ไม่ไปโรงเรียนเหรอยะเธอ
หนอยทำ gif anime ขยันซะไม่มีอะ
แต่กะเวลากะพริบตาเหมาะดีนะ พี่ว่า
ดูไม่หลอน (พี่เคยทำรู้สึกหลอนๆ เหอๆๆ)



*******************

เรื่องส่วนแบ่ง พี่ได้แค่ 30 เปอร์เซ็นต์เท่านั้นค่ะ
ตอนนั้นก็ไม่รู้เรื่องอะไร เขาให้ทำก็ทำ แหะๆๆ เสียดายเหมือนกัน
เพราะเรื่องนี้เบ็ดเสร็จ ค่าแรงทั้งสิ้น ร่วม 60,000 บาท
ทางสำนักพิมพ์จ่ายมาทางเพื่อนคนที่วาดรูป(เพราะเขาเป็นคนเข้าไปส่งงาน)
แล้วพอดีแกก็ประสบอุบัติเหตุ เลยต้องเอาเงินนี้ไปรักษาตัวก่อน

สรุป แกยังจ่ายพี่ไม่ครบแต่พี่ก็ไม่อยากซ้ำเติมคนเจ็บ

#11 By tifa_redeye on 2007-06-21 07:50

ขอบคุนค่ะ

#12 By (125.25.175.155) on 2007-10-30 12:45

ยอดเยี่ยมหลาย

#13 By sesshomaru (125.27.152.168) on 2007-11-23 17:48

เราอยากได้โปรแกรมทำภาพเคลื่อนไหว(เริ่มจากเบสิค)ถ้าเธอมีเราขอซื้อมาอ่านเพื่อการพัฒนา

#14 By เรา (เด็กเพิ่งหัด) (125.24.239.21) on 2007-12-15 21:38

เพ่คับรูปที่นำมาใช้ในตอนแรกอ่ะคับ ใช้รูปจากไหนหรอคับ คือ..ยังงอยู่อ่ะคับ วอนช่วยตอบเร็วๆหน่อยนะคับ

#15 By รุ่ง (203.113.71.8) on 2008-01-24 23:31

^
^
big smile คือว่าผมวาดเองน่ะครับ

#16 By เสี่ยแนน on 2008-01-25 10:27

เจ๋งจริงคร๊าบ ดูการ์ตูนมานานแต่ไม่ณู้วิธีทำง่ะ ขอบคุณครับ

#17 By Pteron on 2008-02-10 23:30

work ,มากๆๆๆๆๆๆๆๆsurprised smile wink

#18 By fern (202.91.18.206) on 2008-02-15 21:42

wow

อยากทำฮาวทูเปนมั้ง เห็นมีหลายคนอยากให้ทำ แต่ทำไม่เป็น สอนคนอื่นมันยากconfused smile
ตอน save เรา save .gif ง่ะค่ะ มันไม่มีให้เลือก มีแต่ jpg ทำไงดีคะเนี่ย -*-

#20 By Bua (203.170.234.20) on 2008-03-18 00:25

^
^
big smile ถ้าเป็นแบบนี้ ต้องไปตั้งค่าในหน้าต่าง optimize ก่อนนะครับ

ไปที่ Window > Optimize

ในช่อง Format ให้เปลี่ยนเป็น GIF

ถึงตอนนี้ก็สามารถ Save Optimize As.. เป็นไฟล์ GIF ได้แล้วครับ

#21 By เสี่ยแนน on 2008-03-19 10:53

ดีครับ ดีbig smile open-mounthed smile confused smile sad smile angry smile tongue question embarrassed surprised smile wink double wink cry

#22 By จีระภัทร ขีดสำโรง (125.24.135.94) on 2008-03-24 13:49

พี่ครับ

ถ้าหากเราต้องการฝากไฟล์อ่ะครับ

ที่เป็นภาพเคลื่อนไหว

ทำไมพอฝากรูปเสร็จมันเป็นภาพนิ่งอ่ะครับ

รบกวนหน่อยครับ

#23 By weerachot on 2008-03-25 20:17

^
^
embarrassed อาจจะเกี่ยวกับโฮสต์ที่ให้บริการฝากไฟล์ก็ได้ครับ

big smile เพราะปกติผมฝากใน http://photobucket.com/ ก็ยังดิ้นได้อยู่เลยครับ

#24 By เสี่ยแนน on 2008-03-26 01:04

ขอบคุณมากๆครับ แต่คุณเสี่ยอธิบายเข้าใจยากไปนี้ดดด
เลยไปอ่านเวบอื่นอย่างเดียวก็งง พอเอามารวมกัน ประสิทธิภาพก็มากขึ้นจนเข้าใจ
แจ่มมากของดีมีประโยชน์อย่างนี้
ต้องให้ดาวแว้วHot!

#25 By oatsmart on 2009-02-25 20:28

ปล.ลืม(ไม่ได้ปั๊มนะ)ที่ฝากที่ผมคิดว่าดีสุดคือhotmail(อุ๋ยเชย)เอ้ยwindowslive(ทันสมัยหน่อย)ครับให้เนื่อที่เยอะ25GBจัดเก็บไฟล์ง่ายมาก
เลยครับ ตรงskydrive.live.comหรือจะเข้าตรง
เพิ่มเติมหน้าเมล์ก็ได้confused smile

#26 By oatsmart on 2009-02-25 20:30

ไม่มีอิเมจเรดี้อ่ะเสี่ย

#27 By อากิระซัง on 2009-03-04 18:02

ไม่มีimageready อ่ะ มีแต่โฟโต้

#28 By อากิระซัง on 2009-03-19 11:35

ขอบคุณจ้า

#29 By Shi-an on 2009-03-26 16:11

ขอบคุนมากมากค่ะ

cry cry cry

#30 By SEASEAZER on 2009-04-07 20:17

แจ่มหลาย!-w-big smile

#31 By S510.Light on 2009-05-01 19:25

ขอบคุณหลายๆเลยคั

ฮี่ๆๆ

#32 By Thriller on 2009-09-26 14:04

ถามหน่อยครับ เอารูปไฟล์ Gif แปะลง Entry อย่างที่คุณลงเป็น Emotion สามชิ้นท้าย entry นี่ทำไงอะครับ ผมทำเสร็จแล้วพอกดอัปโหลดมัน error ตลอดเลย ลองเปลี่ยน size ดูแล้วครับไม่ได้อะครับ ยังไงรบกวนด้วยนะครับ!

#33 By Alcoholrang on 2009-11-14 06:41

#33 By Alcoholrang

sad smile ไม่แน่ใจว่าขนาดภาพเกินกำหนดรึเปล่านะครับ ในเอ็กซ์ทีนจะอัพได้สูงสุดที่ 150k

ลองฝากไฟล์ไว้โฮสต์อื่นอย่าง #24 บอกดูครับbig smile

#34 By เสี่ยแนน on 2009-11-14 08:09

รูปข้างบนสุด(ที่มีปลาว่ายไปมา)ต้องทำไงเหรอครับ??

#35 By AT on 2010-03-19 16:43

นู๋ตุ่ม..ใจร้อน ขอขอบคุณ 'จารย์ หลังจากที่ งงงวย มาเนิ่นนาน ว่าเค้าทำ กระพริบ ๆ กานยางไงฟ่ะ 55+ Thank. เข้าไปแวะดูติชมนู๋มั่งเง้อ เค้ามีรัยถามเยอะแยะเกี่ยวกับ Photoshop ไปหมดเลย จะแวะมาถามทีละอย่างสองอย่าง คงไม่ว่ากานเด้อค่ะเด้อhttp://kapook-you.bloggang.com

#36 By ETCANOTHERFUL on 2010-04-11 08:55

โอ้วววววววววว.....
เจอเซียนมาช่วยแล้ว Hot! Hot! Hot!

#37 By เจ้นุช on 2010-05-17 14:43

มีวิธีทำให้ gift มีคุณภาพสี สูงกว่า 256 bit ไหมครับ?

#38 By Shinji on 2010-08-07 16:57

อ๊ะขออนุญาต add favor bloc นะครับ ^^''

#39 By Shinji on 2010-08-07 16:58

วาดรูปบนคอมได้ไงคะ แบบสวยๆ อ่ะค่ะ ใช้ penmouse หรอคะ

#40 By ~Smokin' Bomb~ on 2011-02-19 13:41

ถ้าจะใส่คำพูดลงไปในภาพทำไงอ่ะคะ
ทำไม่เป็นง่ะcry

#41 By Swit'z on 2012-03-25 20:14

ขอบคุณค่ะ รูปสวยมากๆ big smile

#42 By Packky N I on 2012-03-27 14:25

ขอบคุณมากเลยค่า

ขออนุญาต นำความรู้

ไปแชร์เป็นตัวอย่าง

ให้เพื่อนๆดูนะคะ

มีแต่คนถามว่าทำยังไง

เราก็สอนไม่เป็น


big smile Hot! Hot! Hot! Hot!

#43 By BO AND BOBBY on 2012-04-23 19:59

#44 By (176.31.99.48|148.251.91.38, 176.31.99.48) on 2014-04-08 09:25

#45 By การปกครอง (101.108.199.183|101.108.199.183) on 2014-07-21 14:42

#46 By (37.187.244.67|37.187.244.67) on 2014-08-06 12:42

#47 By (107.147.182.13|107.147.182.13) on 2014-09-16 00:11

เสี่ยแนน View my profile