gif animation (howto)

posted on 05 May 2008 20:32 by berserk-rabbit in howto

อา...อาโน

เพราะห่วงใยอย่างสุดซึ้ง ที่มีต่อน้องไข่น้อย ซึ่งทำ gif animation ไม่เป็น

เพราะฉนั้น....

วันนี้เรามาเรียนรู้การทำภาพเคลื่อนไหวแบบเด็กน้อย กันดีกว่าเนอะ

 

โปรแกรมที่ใช้ :

photoshop เวอร์ชั่นไรก็ได้

image ready เวอร์ชั่นไรก็ได้(ถ้าจำไม่ผิดมันจะมาพร้อมโปรแกรม photoshop นะแหละ)

 

เริ่มกันเลย

1 หาภาพที่จะนำมาทำภาพเคลื่อนไหวกันก่อน โดยของผมใช้ภาพ 4ภาพ(4ช็อต)

  

2 เข้า photoshop จัดการแยกภาพแต่ละช็อต ออกเป็นแต่ละเลเยอร์ โดยเราจะได้ 4เลเยอร์

   โดยอย่างลืมลบพื้นหลังออกด้วยนะจ้ะ

  

3 เมื่อได้ตามนี้แล้ว ให้เราสวิทไปที่โปรแกรม image ready โดยไปเลือกที่ แท็บเครื่องมือด้าน

   ซ้ายมือ

  

4 งานที่เราทำใน photoshop จะสวิทมาโปรแกรม image ready ต่อไปให้เราเปิดแท็บ animation

   ขึ้นมา โดยไปเลือกที่แท็บด้านบนเลือก window>>animation

   เมื่อได้แท็บ animation แล้วให้ดูที่มุมขวาบนของแท็บนะ จะเห็นเครื่องหมาย >>

   ให้เรากดไป จะมีเมนูให้เราเลือก เลือก make frames from layers

  

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

   วิธีใส่เวลา ให้กดตรงใต้ภาพเลย จะมีให้เลือกใส่เวลา ใส่ตามใจเลยให้ดูละมันไหลลื่นละกัน

  

    ลองกดปุ่ม play สำรวจความลื่นไหลของภาพด้วยนะ

6 เอาละ ทีนี้เราก็ได้รูปที่สมบูรณ์ละ แต่ก่อนที่เราจะนำไปใช้งาน ก็ต้องมาดูเรื่องขนาดกันก่อน

   จะย่อจะขยายตรงไหน ก็เหมือน photoshop เลย ถ้ายังไม่รู้ ก็...ไปที่ แท็บด้านบนนะครับ

   image>image size เปลี่ยนแค่ตัวเดียว เดียวโปรแกรมจัดการที่เหลือเองจ้า

  

7 ขั้นตอนสุดท้ายละ.....การนำไปใช้งาน ให้เรากดเซฟโดยเลือก file>optimized as

   เป็นอันเสร็จสิ้นกระบวนการ ทำภาพ gif animation แบบฉบับเด็กน้อยน่ารัก 

 

     ใครคอมเม้มไม่ดี ระวังป๋าแกไว้นะ

--------------------------------------------------------------------------------------

ในเทคนิคนี้ไปใช้ในการทำ banner กับ emoticon ได้นะจ้ะ

น้องไข่น้อยไปทำ banner มาแลกกันเร็ววว

>>วิธินำ emoticonทำเอง ไปใช้ใน msn

>>emoticon กระต่ายน้อย

---------------------------------------------------------------------------------------

howto

>>วิธีทำปุ่มลิงค์จาก flash

 

Comment

Comment:

Tweet

ขอบคุณครับ
ได้วิธีเล่นใหม่แล้ว

#17 By mitthai design&builders on 2008-05-10 14:42

ขอบคุณค่ะ
ป่อป๊อเคยใช้โปรแกรมนี้แบบมั่วๆ
และมันก็มั่วได้ด้วย คุๆ
ขอบคุณค่ะ

#16 By All Su on 2008-05-07 13:29

โอ้วเจ๋งหน้าลองทำอีกแล้วครับ

มีเทคนิคดีๆก็มาแนะนำอีกนะครับจะได้ไปปรับปรุงบล็อคตัวเองให้สวยๆกับเค้าบ้างbig smile Hot!

#15 By 7same:(7w7") on 2008-05-06 20:59

คุณกระต่ายมีความรู้ใหม่มาอีกแล้วcry
ขอบคุณมากค่า



ป๋าฮา
ฮ่าๆๆopen-mounthed smile

#14 By lullaby. on 2008-05-06 17:51

...พีทำแมงเป็นนาคับ...แต่ถ้าเราทำภาพจากjpg
มาปรับเป็น gif ทีไร ทำให้รายละเอียดภาพหายไป
ทู้กกกที...(รึต้องใช้อิลาสวาดนะ...) พอรู้วิธีไม่ให้
รายละเอียดภาพหายมะคับ....ยกตย.ภาพที่ว่า
http://img.photobucket.com/albums/v241/palbum/D_pre-webtptoon.gif
เผื่อมีวิธีบอกต่อใน ems. ทีเด้อ แหะๆ ขอบใจล่วงหน้า

ก่อนป๋าเตือน ผมห่วงป๋าจัง 555 โอ่ย..คุก คุก คุก

#13 By p.cobra on 2008-05-06 16:50

ดีจัง
กะจะถามวิธีทำ banner พอดีเลย confused smile


เอาไปเลย

Hot!

#12 By Choudate on 2008-05-06 13:37

sad smile
อา....gif ได้ใจ

#11 By AkE on 2008-05-06 13:19

หน้าคุ้นๆแฮะคุณลุงคนนี้confused smile

#10 By nonworld on 2008-05-06 10:56

โอ้ว หลักสูตรเร่งรัด ไม่ยากอย่างที่คิด...ว่าแต่จมูกเล็กไปป่าวคะ อิ อิ

#9 By (^_^)/nana on 2008-05-06 00:05

Hot! Hot! Hot! Hot! แว๊กเหมือน

#8 By HineyHelsinki on 2008-05-05 23:10

sad smile แสดงว่า วาดมะได้เรื่อง เลยมะมีใครเดาออก
....
...
คำใบ้2
มีลูกแต่ลูกแกบางทีก็จำแกไม่ได้ เลยอาจได้ยินคำว่า "มึงรู้ไหม กูลูกใคร"
อืม...จะว่าไป ก็ไม่เหมือนจริงๆแหละ เอิ้กๆ

#7 By berserkrabbit on 2008-05-05 22:35

ลุงคนนี้ที่มาเป็นต้นแบบ

หน้าเหลี่ยมๆ..เอ้ยไม่ใช่...หน้าคุ้นๆแหะ..sad smile

#6 By robocon on 2008-05-05 21:53

อู๋ชอบ ใช้Tween มันซามูต ตู๊ด ตู้ด ดี

#5 By พุงพุง on 2008-05-05 21:33

ใครงะ Hot!

#4 By KaTTo-+tOdA on 2008-05-05 21:33

ไม่ใช่แม้ว ดูประโยคที่ป๋าแกพูดซิ...ละลองเดาว่าใคร
หรือ ออมจะบอกว่า พี่วาดไม่ได้เรื่องดูไม่ออกว่าใคร
ถ้ายังเดาไม่ออก เดียวมาเพิ่มคำใบ้question

#3 By berserkrabbit on 2008-05-05 21:28

ออมทำจาก Flash แฮะ จิ้ม image ready ไม่ค่อยเป็น
ขอบคุณสำหรับฮาวทูค่ะ big smile
เอ๊ะ ภาพ gif ข้างล่างหน้าตา -- แม้ว? -- คุ้นๆ?

เอาไปสามดาว~ Hot! Hot! Hot!

#2 By * a o M * on 2008-05-05 21:25

มาเลยป๋าไม่มีกลัวอยู่แล้วconfused smile