ShoutMix chat widget

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
โน่ววววว  Undecided
ไม่ใช่ๆ ที่จะเพิ่มคือกะพริบตา! เพราะฉะนั้นวาดแค่ตาใหม่ก็พอ! 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
- ยังไม่ได้ลงสีด้วยนะเออ

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


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