1
2

การทำภาพเคลื่อนไหว (GIF animation) อย่างง่าย ด้วย PhotoShop







http://www.klongfilm.com/forum/index.php?topic=132.0


เอ่อ... ว่าจะสอน ก็นะ = =' ได้แต่พื้นฐานอะคับ

เพราะว่า เพิ่งเรียนรู้เหมือนกัน ก็เทอมนี้แหละ ที่มีเรียน = =@

(มั่วเป็นหลัก รู้เป็นรอง)


เริ่มทีละนิดๆนะ ภาพเล็กหน่อยนะคับไม่งั้นยัดใส่บล็อคแล้วเกินขอบ





1. จากข้างต้นเราจะเห็นว่า มีอยู่ 2 ภาพ คือดะหลับตากับดะไม่หลับตานะ

อาจจะมีภาพมากกว่านี้ก็ได้ แล้วแต่ตามสะดวกนะงับ =w=

เสร็จแล้วเอาให้มันไปอยู่ในอันเดียวกัน ดังภาพข้างล่าง (จะเห็นว่ามี 2 layers

+ layer BG อีก 1) พยายามทำให้มันอยู่ในที่เดียวกันนะ จะได้เห็นว่ามันขยับเพียง

แค่ตา ไม่ใช่ตัวขยับ =w=''''' เดี๋ยวจะกลายเป็นดะกระตุก..... ล่ะซวย


เสร็จแล้วกดตรงหมายเลข 3 เพื่อให้มันเชื่อมไปยังโปรแกรม Image Ready เด้อ






2. พอมาที่โปรแกรม Image Ready แล้ว ถ้าไม่มีหน้าต่าง Animation ให้ไปที่

Window >>> Animation ตามที่วงไว้นะ






3. เมื่อภาพแรกเป็นดะหลับตา ให้เรากดตรงที่เป็นลูกตา (ในวงกลมสีแดง)

ให้เหลือเฉพาะภาพดะหลับตานะ จากนั้นค่อยไปกดเพิ่มที่วงกลมสีแดงข้างล่าง

มันจะเหมือนเพิ่มเลเยอร์ขึ้นมา แต่!! มันจะเป็นดะหลับตาเช่นเดียวกับภาพแรก

ให้เราไปกดเปิดตา/ปิดตา ออก ให้กลายเป็นภาพดะลืมตาซะ


จากนั้นไปกดที่ ลูกโซ่ข้างๆตัวเพิ่มเลเยอร์ด้านล่าง (ที่เป็นวงกลมสีดำ)

เมื่อขึ้นมาแล้วมันจะมีให้เลือกว่า Frame to Add จะเอาเท่าไหร่? Tween with อะไร?

ถ้าเลือก Frame to Add ที่ 2 ก็จะมีเพิ่มมาอีก 2 เลเยอร์

Tween with อะไร ให้เลือกไปที่ Previos Frame ก่อน (คือให้ต่อเนื่องกับเฟรมก่อน)


เครื่องมือลูกโซ่นี้ทำให้ภาพดู Smooth ขึ้น แต่จะไม่ใช้ก็ไม่เป็นไร


เมื่อคลิกเลือกมั่วๆแล้ว ตามใจชอบ ยังไงก็ได้ จะ Previos Frame หรือ First Frame

หรือ Next Frame แล้วแต่ความชอบของแต่ละคน


กด OK ปุ๊บ กลับมาที่หน้าต่างเดิม ตรง Animation จะมีเพิ่มเลเยอร์ขึ้นมา

ตามจำนวนที่เราเลือก ถ้าไม่พอใจไปกดที่ Histories คืนค่าได้





4. คลิกเลือกที่ภาพแล้วกดที่เวลา ซึ่งตอนแรกมันจะเป็น 0 = No Delay

แต่ถ้าอยากให้มันขยับช้ากว่านี้ก็เลือกที่เวลาเยอะๆก็ได้เด้อ


5. Save ให้กดเซฟที่ File >> Save optimized as เซฟภาพเป็น Gif

หลังจากนั้นก็สามารถขยับได้แล้ว~~



เอ้า!! Presenter ดะ ขยิบตาแล้วยิ้มมองหาคนอ่านบล็อคหน่อยเร้ว~ XD!





คันดะ : ".................................. ทำไมฉันต้องทำอะไรไร้สาระแบบนี้ด้วย"


(ทีเจ้าถั่วงอกยังเป็นภาพแบบ Full เลย ทำไมกุได้เป็นเพียงเส้นๆวะ!!)


คนวาด : " TwT ขอโต๊ด.... ช่วงนี้วาดไม่ออก วันนี้วาดไม่ออกเลย"


จริงๆก็คือว่า วันนี้วาดรูปไม่ออก ตั้งใจว่าจะทำให้วิ้งๆแบบของอเลน

แต่ว่าไม่รู้เป็นอะไร วาดเท่าไหร่ก็ไม่ได้ดั่งใจซักที T____T

เลยเลิกดีกว่า................... ก่อนที่จะเน่าไปมากกว่านี้


ต้องขอเวลาอีกหน่อยเพื่อฝึกๆ เพราะช่วงนี้ทำงานเลยไม่ได้เอาดินสอไปแตะ

กระดาษวาดรูป ออกมาเน่ากระโหล่ = = วาดดะไม่ได้ วาดกี้ไม่ได้

วาดบี้ยังไม่ได้เลย!! (วาดได้แต่เลน ตอนนี้ T[]T แล้วโดกี้บี้ชั้นล่ะ!!!! แง้!!)


ใกล้วาเลนไทน์ ส่งมอบความรักให้ทุกคน อาจจะไม่มีภาพให้ = ='' เพราะว่า

ยังไม่เสร็จงานดี ประกอบด้วยวาดไม่ออก เฟลคับ T_T;;;;

มีความสุขทุกๆคนมากๆนะคะ ขอบคุณที่มาใช้บริการ... เอ๊ย! มาเยี่ยมเยียน



ปล. สงสัยอะไรถามไว้ที่นี่ได้นะคะ XD'' (ถ้างงมากๆเราคงอธิบายไม่รู้เรื่องเอง แหะๆ)


ขอบคุณที่อ่านมายาวนาน......

http://kaokmchan.exteen.com/20070206/entry

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

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


http://dadeemodify.exteen.com/20070619/how-to-gif-animation-imageready

1
2

Wish You Happinessss

Success is not the key to happiness. Happiness is the key to success. 
If you love what you are doing, you will be successful. 

~ Albert Schweitzer ~

 คัมภีร์ 5 ห่วง  วิถีแห่ง "ซามูไร" วิถีแห่งนักรบ "บูชิโด"   แนวคิดของตัวเม่น   GOOD LUCK สร้างแรงบันดาลใจเพื่อความสำเร็จ ในชีวิตและธุรกิจด้วยตัวคุณเอง    Why complicate life ?   3 x 8 = เท่าไหร่ ?????   "ฉันชื่อ..โอกาส"

Wish You Happinessss