[How to] Animate1 ~ทำภาพดุ๊กดิ๊กอย่างง่าย!~PS CS3

posted on 22 May 2011 13:22 by kyoki in Gallery

Howto ชิ้นนี้มีอะไร
1. ขั้นตอนการทำงานชิ้นนี้ใน Photoshop CS3
2. พื้นฐานการอนิเมทด้วย PS CS3 เบื้องต้น
3. อ้าว มีแค่นี้เองเหรอ Foot in mouth

เหมาะสำหรับ
- ผู้มีพื้นฐานศิลปะเล็กน้อยขึ้นไป แต่ไม่เคยหรือกำลังหัดทำ animation

หวังว่าจะมีประโยชน์กับคนที่สนใจนะครับ

==================================================
ก่อนอื่นใดจะทำงานซักชิ้น

1. หัวข้อ ครับ จะวาดอะไรยังไง ไม่มีวาดไม่ออก
   สำหรับผม แค่อยากได้ รูปสาวน้อยขยับๆ รูปชัดๆ อยู่บนหัว blog ..

   แต่พอดีกำลังอยากได้ theme blog ใหม่
   อารมณ์ประมาณวาดเล่นบนสมุดวิชาสังคมของเทอมที่แล้ว
   ที่หน้ามันดันเหลือเยอะซะเหลือเกิน จะทิ้งก็เสียดาย Undecided

   งานนี้ผมเลยอนิเมทโดนใช้เส้นอย่างเดียวครับ ง่ายดีด้วย

2. อุปกรณ์ที่ใช้ทำงาน
    - ผมใช้ Photoshop CS3 กับ wacom graphire 4x5 ครับ
   เรื่อง version อื่นผมไม่ค่อยแน่ใจนัก แต่คิดว่า CS2 ก็น่าจะสามารถทำได้เหมือนกัน
   แต่ถ้าเป็นแต่ก่อนจะใช้ imageready กัน

   ไม่มี tablet (mouse ปากกา) ลำบากเหมือนกันน่อ
   มีแล้วจะทำให้ทำงานได้เร็วและสะดวกขึ้นครับ แนะนำสำหรับคนที่จะทำทางนี้จริงจัง

3. ขนาดชิ้นงาน
   ขนาดชิ้นงานสำคัญเหมือนกันเพราะจะส่งผลถึงการจัดวางองค์ประกอบของภาพ
   แต่สำหรับงานนี้ไม่ได้สำคัญมากมายนักสำหรับผม
   แค่จัดวางตำแหน่งไหนซักแห่งบนหัว blog ได้ก็พอแล้ว

4. เวลา
   งานนี้ใช้เวลาประมาณ 2-3 ชม. ครับ

LET's BEGIN !!
===================================================
มาถึง File > New เลือกขนาดตามการใช้งานครับ
สำหรับผมจะวาดขึ้นมาก่อนในไฟล์ขนาดสะดวกวาดบนหน้าจอ
ประมาณ 800x800 หรือ 1000x1000 ( resolution จอของผม 1280x1024 อยากได้ wide แล้ววว )
แล้วค่อยจัดลงในไฟล์ขนาดใช้งานจริงครับ

สร้างเลเยอร์ใหม่ครับ โดย layer นี้ขอตั้งชื่อว่า layer 1 เป็นเฟรมที่ 1 ของเราครับ

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

ใช้เส้นสีน้ำเงินให้เหมือนใช้ปากกาวาดเล่นลงสมุดครับ ตามคอนเซปท์

มีรูปเดียวยังอนิเมทไม่ได้ครับ ต้องมี รูปที่ 2 !
ปรับ opacity layer 1 ให้เหลือพอจะเห็นเป็นไกด์ในการวาดเฟรมที่ 2
คล้ายกับการใช้โต๊ะไฟครับ

แล้วสร้าง layer เฟรมที่ 2 ขึ้นมา
วาดตามรูปเดิม ให้เหมือนเดิมแต่ไม่เหมือนเดิมครับ
เอ๊ะ ยังไง Laughing

เพราะถ้าเหมือนเดิมเป๊ะมันก็ไม่ขยับน่ะสิ!! Undecided

เชื่อหรือไม่ !? รูปนี้เป็น gif animation 8 เฟรม ครับ !!
(แล้วเอ็งจะทำเป็น gif ani ทำม๊าย??) Foot in mouth

ดังที่กล่าวไปได้ดังนี้
จะเห็นว่ามันต่างกันนิดๆ

พอเอามาทำอนิเมชั่นจะได้ประมาณนี้

โอ้ ขยับแล้วครับ!!
แต่ยังไม่โอครับ อ้าว Laughing

โดยส่วนตัวยังดูกะพริบมากเกินไปแค่สลับไปมาดูซ้ำๆ
เพราะฉะนั้นเพิ่ม เฟรม 3 !!

ออกแนวงานถึกครับ เริ่มเมื่อยๆ แล้ว Foot in mouth

แต่แค่ 3 เฟรมนี่ถือว่าชิลๆครับ ( สรุปว่าเมื่อยหรือชิล??? )
ทำอนิเมชั่นเนี๊ยบๆจริง วาดเป็นร้อยเฟรม ได้ไม่ถึง 10 วิ !

เอา 3 เฟรมมาวนลูปได้เช่นนี้

พอวน 3 เฟรม ความรู้สึกซ้ำจะลดลงไปมากครับ แลดูเป็นธรรมชาติขึ้น

แต่ยังครับยัง อ้าวจะเอาอะไรอีก? Innocent

หรือว่าเพิ่ม เฟรมที่ 4 Laughing

โน่ววววว

ไม่ใช่ๆ ที่จะเพิ่มคือกะพริบตา! เพราะฉะนั้นวาดแค่ตาใหม่ก็พอ! Surprised

เราใช้รูปเฟรมที่ 2 มาใช้ใหม่
copy layer 1 โดยลาก layer 1 ไปที่ปุ่มที่ 2 จากขวามือด้านล่าง
แล้วตั้งชื่อใหม่เป็น eyes close

ลบตาออกและวาดใหม่เป็นตาที่หลับสนิทครับ

และเพิ่ม หรี่ตา โดย copy layer 2 มาใช้ เป็น inbetween อีกภาพนึงครับ

( inbetween = การวาดภาพเคลื่อนไหวระหว่าง keyframe 2 เฟรม

ในงานนี้คือเฟรมเปิดตากับเฟรมที่ปิดตาสนิทครับ )

สำหรับคนที่ทำงานเรียบร้อย เป็นระเบียบจะแยกเลเยอร์ตาไว้ตั้งแต่แรก
ก็จะทำให้ทำงานสะดวกขึ้น Embarassed

ทีนี้รูปที่เราจะใช้ก็ครบแล้วครับ ลืมตา 3 เฟรม หรี่ตา 1 หลับตา 1

ได้เวลา animate กันซักที เขียนมาตั้งยาวไม่ได้ลืมสอนหรอกนะ Embarassed

LET's ANIMATE !!
===================================================

บางคนอาจจะงง Photoshop ทำ animation ได้ด้วยเหรอ

ไม่ต้องใช้ flash หรือ imageready เหรอ?

อันนี้ผมก็เพิ่งรู้ไม่นานนัก ( เพิ่งรู้คนเดียวรึเปล่าเนี่ย Undecided

)

ซึ่งผมก็ไม่ทราบเหมือนกันว่า Adobe นั้น ยุบ imageready

มารวมกับ Photoshop ตั้งแต่ version ไหน

เข้าเรื่องดีกว่าครับ Embarassed

โดยปกตินั้นหน้าต่าง Animation ของ PS จะปิดอยู่ ให้เราเปิดมันที่

Window > Animation แล้วติ๊กถูก

ก็จะมีหน้าต่างแบบนี้ขึ้นมาครับ

ในตอนนี้ให้เราเปิดแค่ layer เฟรม 1 ของเราอย่างเดียวครับ

เปิดปิด layer โดยจิ้มตา มันจะเจ็บแล้วปิดตาไปเอง !??

ตอนนี้เราก็จะมีเฟรมที่ 1 แล้วก็เริ่มใส่ เฟรมที่ 2 กัน

ทำเหมือนการ copy layer เลยครับ ไม่ต่างกัน

พอจิ้มแล้วเฟรมที่ 2 ก็จะถือกำเนิดขึ้นมา

ถ้ากด play ดูตอนนี้จะเห็นว่าไม่มีอะไรเกิดขึ้นครับ

เพราะเฟรมที่ 2 ยังเป็นรูปเดียวกับเฟรมที่ 1

ให้เราปิด layer 1 และเปิด layer 2 ขึ้นมาในระหว่างที่เลือก เฟรมที่ 2 อยู่

และทำซ้ำเหมือนเดิมครับ

ปิด layer 2 และเปิด layer 3 ขึ้นมาในระหว่างที่เลือก เฟรมที่ 3

ถ้ากด play สาวน้อยของเราก็จะสั่นเป็นเจ้าเข้าทีเดียว เพราะ framerate เป็นแบบ No delay

( framerate = ความเร็วในการเปลี่ยนเฟรมของอนิเมชั่น

ปกติจะใช้เป็น fps (frame per second) เช่น 12fps = 1 วิ จะใช้ภาพ 12 เฟรม ฯลฯ)

ผมอยากให้ช้าลงครับ เพราะฉะนั้นมาลด framerate กัน

เริ่มด้วย เลือกทุกเฟรม ด้วยการ กด Shift ค้างแล้วคลิ๊กเฟรมที่ 1 และ 3

จากนั้นคลิกขวาบริเวณด้านล่างของเฟรมที่เขียนว่า 0 sec ก็จะมี popup ขึ้นมา

ผมเลือกที่ 0.2 เพราะรู้สึกว่ากำลังดีครับไม่ช้าไปเร็วไป

ทีนี้ตาเริ่มแห้งแล้วครับ ต้องกะพริบกันบ้าง

จากคราวที่แล้วผมเลือกที่จะวาดปิดตาก่อนและใช้เฟรมที่ 1

เพราะว่าจะให้มันเล่นวนลูปแบบนี้ครับ

1 > 2 > 3 > ปิดตา( ที่วาดจาก 1 ) > หรี่ตา( ที่วาดจาก 2 ) > 3

แต่แบบนี้จะกลายเป็นกะพริบตาถี่ไปครับ แบบว่า...ง่วงก็นอนเถอะ! Foot in mouth

เราก็ต้องเพิ่มเฟรมที่ 1-3 ซ้ำให้พอดีๆครับ ผมใช้ซ้ำประมาณ 6 รอบ

โดยเลือกเฟรมที่ 1-3 แล้วก็คลิ๊ก Duplicates selected frames ตามจำนวนรอบที่ต้องการเพิ่ม

1 > 2 > 3 >......... 1 > 2 > 3 > ปิดตา( ที่วาดจาก 1 ) > หรี่ตา( ที่วาดจาก 2 ) > 3

*save ไฟล์ gif animation ด้วย save for web นะครับ

ตัดจบ คนอ่านเบื่อแล้ว! Undecided

===================================================

เสริม

*เนื่องจากที่ผมใช้ 0.2 วิ ต่อเฟรม จึงอาจทำให้ช่วงกะพริบตาดูไม่สมูทเท่าที่ควร

ผมจึงปรับเวลาเป็น 0.1 4 เฟรม

......... 1 > 2 > 3 > 1 (0.1) > ปิดตา( ที่วาดจาก 1 )(0.1) > หรี่ตา( ที่วาดจาก 2 )(0.1) > 2(0.1) > 3

และ crop ขนาดชิ้นงานด้วย Canvas Size สำหรับใช้บน head blog ครับ

ไม่ได้ใหญ่ขึ้น เพราะเกือบทุกภาพก่อนหน้านี้ผมย่อ 50%

*งานชิ้นนี้ผมต้องการให้งานใสเห็นลาย bg อาจทำให้ใช้กับ bg สีอื่นไม่ได้

เพราะฉะนั้นใครอยากให้ใช้ได้ก็เพิ่ม layer bg หลังรูปแต่ละเฟรมก็ได้ครับ

เป็นแค่ outline แบบสติ๊กเกอร์ หรือจะใส่สี ยังไงสุดแล้วแต่ความชอบ

ทุกอย่างนี้เป็นแค่การอนิเมทง่ายๆ

แต่แค่นี้ก็สามารถประยุกต์ทำภาพเคลื่อนไหวอื่นๆได้ตามใจชอบแล้วครับ Embarassed

อวสาน!!!!
--------------------------------------------------------------------------------

* หลังจากทำ How to ชิ้นนี้แล้วพบว่า
- นึกว่าจะสั้นแต่ยาวกว่า How to CG คราวที่แล้วซะอีก Sealed

- กว่าจะทำ 2D อนิเมชั่นนั้นเมื่อยขนาดไหน เพราะนี่แค่กะพริบตาเท่านั้นเอง Undecided

- ยังไม่ได้ลงสีด้วยนะเออ

*** ถ้ามีอะไรผิดประการใด ขออภัยและโปรดชี้แนะด้วยครับ

มาสนุกกับอนิเมชั่นกันเถอะ!!

Tags: animation, how to, kyoki68 Comments

#1 By puck on 2011-05-22 18:17

พี่เคียวคิสุดยอด~คะ
เดียวรองไปทำบ้างดีกว่าแหะ

*โปรยดาว*><

Hot!

#2 By ◕Ｒｅ★ｆｉａ◕ on 2011-05-22 18:18

สุดยอดดด
ภาพสวยมากเลย กระพริบตาเนียนมาก โอ้ววว
cry

#3 By GOD on 2011-05-22 18:20

i like

#4 By blueboat on 2011-05-22 18:52

สุดยอดมากเลยค่ะ ><

#5 By Rinhara on 2011-05-22 18:57

ว้าวได้ทิปดีๆขอบคุณมากค่า

#6 By gimini on 2011-05-22 19:20

เจ๋งมากเลยค่า
ชอบลายเส้น งามสุดยอด
ขอแอดบล็อคนะคะ อร๊างงง

#7 By :RanRan: on 2011-05-22 20:17

สุดยอดครับบบบบ

#8 By -- HaKobuNE -- on 2011-05-22 21:35

#9 By ★ K T I G on 2011-05-22 22:47

สุดยอดๆๆ เคียวคิ

#10 By miru on 2011-05-22 23:58

เง้อ พยายามเข้าใจ งืมๆๆๆ

#11 By Kinno61 on 2011-05-23 05:24

กร๊ากกกกก ฮานะก็ใช้เป็นแต่โฟโต้ช็อปทำแบบนี้
แต่ของพี่เคียวกิมีเทคนิคโต๊ะไฟ!! น่าลอง!! ทำไมฮานะนึกไม่เคยออกเนี่ย กร๊ากกกกก

ได้เรียนรู้อีกแล้ว เดี๋ยวไว้ไปลองทำมั่งค่ะ เฮ

#12 By Lord Hanan on 2011-05-23 06:50

สุดยอดครับ ไว้จะทำให้แฟนบ้างครับ

#13 By watchapol on 2011-05-23 09:50

#14 By YiiM-YiiM on 2011-05-23 12:05

ขอบคุณมากๆค่ะ cry

#15 By nu_sine on 2011-05-23 12:13

งามมากคับ

ขอเสริมเรื่อง ImageReady นั้นได้ยุบมารวมกับครั้งแรก PhotoShop ตอนเวอร์ชั่น CS3 ครับ
แต่ก็ไม่ได้รวมหมดส่วนที่เป็น Animation ก็อยู่ที่ PhotoShop และส่วนที่เป็นการตอบสนองและการทำเว็บอยู่ที่ Firework ครับ

#16 By PLA Wanderer on 2011-05-23 12:31

มันทำกันแบบนี้นี่เอง!!
น่างลองไปทำมั่ง open-mounthed smile

#17 By kama* on 2011-05-23 13:02

#18 By Deathless (DeatH) on 2011-05-23 13:09

#19 By muayaoi on 2011-05-23 13:25

สุดยอดขอรับ

#20 By ลิงแว่น on 2011-05-23 14:25

มีCS4 และไม่มีเมาท์ปากกา ก็ยังไม่ค่อยได้เล่นอะไรเท่าไหร่เลยค่ะ

ไว้จะไปเล่นบ้าง เผื่อทำเฮดอนิเมชั่นใช้เอง

จะว่าไปนี่ก็ใกล้จะส่งบัญชีอีกแล้ว

#21 By jin on 2011-05-23 15:30

งดงามม

#22 By Patzuri on 2011-05-23 15:36

ยอดๆๆๆๆๆๆ

ได้วิธีทำธีมใหม่ละ ตอนนี้เหลือแค่...
หาเวลา!

กับหาฝีมือ!!

#23 By เป้ยเป้ย on 2011-05-23 16:30

ละเอียดมากเลยอ่ะ O_O ขอแอดนะคะ Hot!

#24 By 36miwaku36 on 2011-05-23 16:31

สุดยอด..

#25 By tingtongzero on 2011-05-23 17:34

(｡Ф∀Ф｡)b

#26 By TangUmay on 2011-05-23 17:50

มอบดราก้อนบอลฮะ.. สุดยอดมาก ๆ ^^

#27 By - นิพันธ์ ทารีมุกข์ - on 2011-05-23 17:51

ชอบๆ

#28 By Krai Wicharatana on 2011-05-23 17:59

สุดยอดค่ะ
ออกมางาม น่ารักมากๆเลยย :)
Hot!

#29 By littleffrog on 2011-05-23 18:55

สวยอ้า อยากทำมานานแล้วค่ะ ขอบคุณสำหรับHT♥

Hot!

#30 By HineyHelsinki on 2011-05-23 19:01

สุดยอดค่ะ ! เจ๋งมาก wink

#31 By M i n d z on 2011-05-23 19:03

ชาบูพี่เคียวคิ Hot!

#32 By sanaka on 2011-05-23 19:28

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

ภาพตัวอย่างน่ารักมากๆเลยครับ
surprised smile

#33 By Songwut on 2011-05-23 19:40

ว้าวว น่ารักจริงๆค่ะ เพิ่งรู้เลยว่า PS ทำดุ๊กดิ๊กได้ ขอบคุณนะคะ จะลองทำดู > < / Hot!

#34 By vg_jan on 2011-05-23 19:46

ขอบคุณสำหรับความรู้ดีๆครับ ^^
Hot!

#35 By Noru... on 2011-05-23 20:12

ท...เทพ

ถ้าไม่คลิกเข้ามานี่พลาดของดีอย่างแรง

#36 By Lofe on 2011-05-23 20:18

ชอบมากค่ะ
อ่านเพลินเลยอ่ะ
วาดสาวน้อยน่ารักมากๆ
Hot!

#37 By iiem on 2011-05-23 20:44

ขอบคุณมากครับผม big smile

#38 By คนหัวขี้เลื่อย on 2011-05-23 21:03

กรี๊ดดด สวยมากเลยค่ะทั้งอนิเมะและตัวละคร
ชอบๆ แอร๊ยย โฮกกก *** เอาดาวไปแบบพิเศษเลยค่ะ
Hot!

#39 By lablejung on 2011-05-23 22:03

*scream*

#40 By หมอกเทา on 2011-05-23 22:10

สุดยอดสวดดดด Hot!

#41 By ชิลลี๊ฟูล on 2011-05-23 22:35

มีข้อสงสัยค่ะ เวลาเซฟให้มันเล่นเมื่อคลิกไฟล์ำสำเร็จนี่ ทำอย่างไรคะ คือ ลองกดเซฟธรรมดาดูมันจะติดภาพเดียว แต่พอลองexport มันจะมาเป็นภาพนิ่งชุดใหญ่เลยน่ะค่ะ
ขอบคุณค่ะ ..> <.. Hot!

#42 By บาบิโลน on 2011-05-24 00:54

#43 By (^_^)/nana on 2011-05-24 00:56

โหด มาก มาย เดี๋ยว ลอง ทำ ดู แล้ว กัน

#44 By FKFT on 2011-05-24 01:30

ภาพเคลื่อนไหวเนี่ย ขอคารวะคนทำเลยค่ะ กว่าจะได้แต่ละวิ sad smile

แถมยังทำฮาวทูให้เป็นวิทยาทานด้วย ดีจังค่ะ big smile

สาวน้อยน่ารักมาก Hot!

#45 By สโนไวท์กับเจ้าชายทั้งหก on 2011-05-24 01:49

เคยแต่ใช้ flash ทำ ไม่รู้ว่า PS ทำได้ด้วย คงต้องแวะมาศึกษาบ่อยๆแล้ว Hot!

#46 By Deecaa on 2011-05-24 08:28

#42 ตอบคุณ บาบิโลน ครับ
ไม่รู้ว่าแก้ปัญหาได้รึยัง
ลอง Save for web ดูครับ เลือกเป็น gif จะมีให้ ปรับลดสีที่ใช้ได้ กด play เทสในหน้านั้นก็ได้ครับ ^^

ขออภัยครับลืมขั้นตอนนี้ไปเลยว่างๆจะมาเสริมครับ confused smile

ขอบคุณมากครับ^^