Mascot Design

Mascot หนูน้อย Memo 

เป็นMascot หนังสือ  มีนิสัยชอบหาความรู้ใส่ตนและชอบช่วยเหลือผู้อื่น

รูปแบบท่าทาง Mascot

 ท่านั่ง

ท่ายกมือ

ท่าไหว้

ท่าเขินอาย

ท่าตกใจ

ท่าลั้ลลา

..........
Mascot นี้ นำมาทำเป็นAnimation การแนะนำตัวละคร เป็นการเรียนรู้การสร้างAnimation จากการสร้างงานจริง เพื่อประกอบการเรียนรู้ในวิชา Animation Design (ARTI3322)

14 ก.พ. 55

Pencil Animation (โปรแกรม วาดภาพ แล้ว ทำเป็น Animation 2D)
- เป็นโปรแกรมฟรี ที่โหลดมาใช้ได้เลย
- ซึ่งในโปรแกรมนี้มีเครื่องมือมากมายที่ช่วยให้ การ์ตูนที่คุณวาดนั้น ออกมาเป็น Animation แบบ 2D อย่างสมบูรณ์แบบ
- ผู้พัฒนาโปรแกรม Pencil ชอบงาน Animation มาตั้งแต่เด็ก โดยฝึกเขียนภาพแอนนิเมชั่นด้วยตนเอง ซึ่งก็สามารถทำได้ในระดับหนึ่ง แต่บางอย่างก็ยังไม่น่าพอใจนัก จึงเป็นแรงบันดาลใจให้พัฒนาโปรแกรมตัวนี้ขึ้นมา อย่างที่ทราบๆกันการสร้างภาพแอนนิเมชั่นในปัจจุบันไม่ใช่เรื่องยากนัก แต่ว่าเครื่องมือเหล่านั้นส่วนมากจะไม่สามารถทำงานข้ามแพลตฟอร์มได้ ที่สำคัญเครื่องมือเหล่านั้นจะเป็นโปรแกรมเชิงการค้าซะส่วนมาก คือไม่ฟรี! ...

Pencil คือโปรเจคหนึ่งในโครงงานของ SourceForge.net เป็นโปรแกรมที่ช่วยในการสร้าง การ์ตูน2D หรือการ์ตูนเคลื่อนไหว(Animation) สามารถใช้งานได้บนหลายแพลตฟอร์มโอเอส Linux, Mac-OSX, Windows และรองรับภาพกราฟฟิครูปแบบ bitmap และ Vector ที่สำคัญ Pencil เป็นโปรแกรมโอเพ่นซอร์ส คือสามารถใช้งานได้ฟรีหรือนำซอร์สโค๊ดไปต่อยอดหรือดัดแปลงได้อิสระตามลิขสิทธิ์ GPL ...


เว็บเจ้าของโครงการ
http://www.les-stooges.org/pascal/pencil/index.php?id=Home
ดาวน์โหลด
http://www.les-stooges.org/pascal/pencil/index.php?id=Download

Credit：http://ubuntuclub.com/node/750

ตัวอย่างการ์ตูนที่ทำจากโปรแกรม

วิธีทำงานของโปรแกรม

31 ม.ค. 55 (คาบเรียนที่9)

เพื่อนได้ทำการรายงานซอฟแวร์ เกี่ยวกับการตัดต่อเสียงที่จะใช้ในไฟล์ วีดีโอ วันนี้มีการสอบ ในวิชา

17 ม.ค. 54(คาบเรียนที่5)

อาจารย์ทำการแนะนำ เสียงประกอบ www.freesfx.co.uk
เวปนี้เราสารถมารถโหลดมาใช้ได้ และ นำเสียงของเราใส่ไปให้คนอื่นดาวน์โหลดได้

อาจารย์สอนวิธีการทำ Animation ใน PS/FL เป็นวิธีการทำในขั้นพื้นฐานเพื่อให้เข้าใจได้ง่ายขึ้นก่อนที่จะต้องศึกษาเองต่อไป และแนะนำการตัดต่อเสียง

- เพื่อนคนที่1ออกมาอภิธานศัพท์ Polygon / Bones ทั้ง2เป็นคำศัพท์เกี่ยวกับการสร้างตัวละครและดารเคลื่อนไหวของตัวละคร

-เพื่อนคนที่2ออกมาอภิธานศัพท์ Adobe Flash / Action Script

.........
ซอฟแวร์
ประเภท1. ไม่ต้องติดตั้ง สามารถใช้ได่เลย เช่นโปรแกรม pencil animation

รายงานอภิธานศัพท์

** Fream by Fream ** AND ** Tween **


 Frame by Frame...
การสร้างภาพเคลื่อนไหวแบบ  Frame by Frame  คือ การกำหนดการเปลี่ยนแปลงของออบเจ็กต์ที่แตกต่างกันในทุก ๆ คีย์เฟรม เหมาะสำหรับการสร้างภาพเคลื่อนไหวที่มีความซับซ้อนมากๆ แต่ก็มีข้อเสียเพราะภาพจะมีขนาดใหญ่กว่าการทำภาพเคลื่อนไหวแบบ Tween

ตัวอย่างการทำภาพเคลื่อนไหวแบบ  Frame by Frame
                1. สร้างไฟล์เอกสารใหม่ โดยคลิกเมนู File => New
                2. ให้ไปยืมให้ Libraly จากไฟล์อื่น
                พอเปิด Libraly ขึ้นมาให้ทำการลาก symbol จาก Libraly จาก Bitmap2 มาวางบนพื้นที่ว่าง

                                       จะได้ดังภาพ

                                      เสร็จแล้วมาคลิกขวาที่ เฟรม 2   แล้วเลือก Insert KeyFarme

                                      เสร็จแล้วให้ทำการลบภาพ ที่อยู่บนพื้นที่  Stage ออกไป

 แล้วนำภาพ ที่ Libraly ที่ชื่อ Bitmap 3 มาวาง แล้วให้ทำการ Insert Kiyfarme ที่เฟรมที่ 3  และลบภาพที่                                        Stage ออก แล้วนำภาพที่ Libraly ที่ชื่อ Bitmap 4 ทำแบบนี้ไปเรื่อย ๆ จนถึง เฟรมที่ 5

                                     เมื่อทำครบทั้ง 5 เฟรมเรียบร้อยแล้วแล้วให้คลิกเลือกที่ Onion Skin จะเกิดภาพราง ๆ ขึ้น

                                      แล้วลากภาพมาวางในจุดเดียวกันให้เรียบร้อย

                                     เสร็จแล้วให้ทำการรัน ดู โดยการคลิกเลือกที่ Control => Test Movie

                                      

ผลรันที่ได้

Tween...

การสร้างภาพเคลื่อนไหวแบบ Tween
            การสร้างภาพเคลื่อนไหวแบบ Tween เป็นการสร้างภาพเคลื่อนไหวจากเฟรมเบื้องต้นและเฟรมสุดท้าย ซึ่งโปรแกรมจะสร้างการเปลี่ยนแปลงระหว่างเฟรมให้โดยอัตโนมัติ นั่นคือ การสร้างภาพเคลื่อนไหวแบบ Tween จะมีการสร้างเฟรมเพียง 2 เฟรม คือเฟรมเบื้องต้นและเฟรมสุดท้าย ซึ่งคุณสมบัตินี้เองที่ทำให้ภาพเคลื่อนไหวแบบ Tween ซึ่งมีขนาดไฟล์ที่เล็กกว่าการสร้างภาพเคลื่อนไหวแบบ Frame-by-Frame

ลักษณะเฟรมของการสร้างภาพเคลื่อนไหวแบบ Tween
            การสร้างภาพเคลื่อนไหวในลักษณะต่าง ๆ จะปรากกฎรูปแบบและสีบนส่วนของเฟรมบนจอภาพ Timeline ในลักษณะที่แตกต่างกัน ดังนี้


Motion Tween
            ใช้สำหรับสร้างภาพเคลื่อนไหวที่มีการเปลี่ยนตำแหน่ง ขนาด หรือหมุนออบเจ็กต์ ตามต้องการ โดยจะมีลักษณะเป็นจุดสีดำที่คีย์เฟรมเริ่มต้นและคีย์เฟรมสุดท้าย มีสีพื้นระหว่างคีย์เฟรมเป็นสีม่วงและมีรูปลูกศรทีมีปลายหัวลูกศรอยู่ที่ที่คีย์เฟรมสุดท้าย

  

เป็นการสร้างภาพเคลื่อนไหว ที่มีการเคลื่อนกำหนดการเคลื่อนที่ หมุน ย่อ หรือขยายให้กับออบเจ็กต์, Instance,group หรือ Text black ก็ได้ นอกจากนี้ยังสามารถแก้ไขคุณสมบัติของออบเจ็กต์ในแต่ละช่วงได้อีกด้วย
การสร้างภาพเคลื่อนไหวแบบ Motion Tween เป็นรูปแบบการสร้างภาพเคลื่อนไหวทีใช้มากที่สุดและโปรแกรมจะกำหนดรูปแบบชนิดนี้เป็นค่าเริ่มต้นของการสร้างภาพเคลื่อนไหวทุกครั้ง  โดยโปรแกรมจะสร้างภาพเคลื่อนไหวและเส้นทางการเคลื่อนที่ให้เองโดยอัตโนมัติ

ตัวอย่างการทำภาพเคลื่อนไหวแบบ  Motion Tween

1. สร้างไฟล์เอกสารใหม่ โดยคลิกเมนู  File => New
2. ให้ไป Save รูปภาพที่ต้องการเก็บไว้ใน Library จากนั้นให้ทำการลาก Symbol จาก Library มาวางบนพื้นที่ว่าง

                          จะได้ดังภาพ

                         เสร็จแล้วมาคลิกขวาที่ เฟรม  แล้วเลือก Insert KeyFarme

                          เสร็จแล้วทำการย้ายภาพไปยังอีกจุดหนึ่งที่ต้องการ

                           จะได้ดังภาพ

                           คลิกขวาระหว่างเฟรม แล้วเลือก Create Motion Tween

                           เสร็จแล้วให้ทำการรัน ดู โดยการ  กด Ctrl + Enter 

                         


 ผลรันที่ได้



Shape Tween


  
เป็นการสร้างภาพเคลื่อนไหวที่มีการเปลี่ยนแปลงรูปทรงของออบเจ็กต์ จากรูปทรงหนึ่งไปเป็นอีกรูปหนึ่งโดยสามารถกำหนด ทิศทาง ตำแหน่ง ขนาด และสีของการเปลี่ยนแปลงได้ตามต้องการ
               
ออบเจ็กต์ที่สามารถนำมาสร้างการเคลื่อนไหวแบบ Shape Tween ได้ตามรูปทรงธรรมดา เช่น รูปทรงที่ผู้ใช้วาดขึ้นเอง นั่นคือ จะไม่สามารถใช้ Instance, Text Block หรือกลุ่มออบเจ็กต์ในการสร้างได้ แต่ถ้าผู้ใช้ต้องการนำออบเจ็กต์ดังกล่าวมาใช้สร้างการเคลื่อนไหวแบบ Shape Tween จะต้องเปลี่ยนให้กลายเป็นรูปทรงธรรมดาก่อน โดยใช้คำสั่ง Break apart
ตัวอย่าง
                            เลือกเครื่องมือ Rectangle Tool นำมาวาดที่พื้นที่ Stageดังรูป

                           เลือก เฟรมที่ 20 แล้วทำการ Insert KeyFarme

                            ทำการตัดภาพสี่เหลี่ยมสีแดง ที่ Stage ออกไป

                             แล้วเลือกเครื่องมือ Brush Tool วาดรูปตัวอักษร

                             เลือกเหตุการณ์ ที่ Panal Properties เป็นแบบ Shape Tween

                             สังเกตดูที่เฟรมจะมี animation แบบ Shape Tween เกิดขึ้น

                            ทำการรันโปรแกรมที่สร้างขึ้น โดยการคลิก Control => Test Movie

                               
ผลรันที่ได้
( ขอขอบคุณ ความรู้นี้จาก http://www.wt.ac.th/~panumas/Workshop/workshop.html )


**ถึงแม้จะเป็นเพียงความรู้ขั้นพื้นฐาน แต่ความรู้นี้เป็นประโยชน์อย่างมากในการเริ่มต้นทำ Animation**  (-/\-) ..ขอบคุณอีกครั้ง

20 ธ.ค. 54(คาบเรียนที่3)

อาจารย์แนะนำวิธีการจัดแต่งบล๊อค โดยมีแทมเพลตของจารย์เป็นต้นแบบให้
เวลาทำงานหน้าเว็บ Resalution 72
...........
ขั้นตอนการทำ Animation Gif Banner
ขั้นตอนการดำเนินงาน 3 ส.
1. สืบค้น หา/โจทย์? แบนเนอร์สำหรับเว็บบล๊อคของเรา
1.1 สร้างบล๊อค มีขั้นตอน....ต้องดำเนินการอย่างำรบ้าง ต้องมีส่วนประกอบอย่างอื่นอะไรบ้าง
1.2 เตรียม....ภาพ ข้อความ
1.3 เสียง
1. 4ผลพิเศษ fx
1.5 นำเสนอ
= Storyboard =

คลิปสอนการทำ Banner และ วิธีอัพภาพ .glf ลงบล๊อค

คลิปนี้สอนการทำภาพ glf เป็นวิธีทำพื้นฐาน ถ้าจะนำไปทำตามก็สามารถทำกันได้ง่ายๆ คลิปที่สอนนี้ทำในโปรแกรม Photoshop CS5 ค่ะ
.........
(คลิปนี้ไม่มีเสียงนะคะ มีแต่ภาพค่ะ ขออภัยมา ณ ที่นี้ด้วยค่ะ)

วิธีทำ
1.ต้องทำรูปที่ต้องการจะทำเป็น Banner ของเราให้เสร็จเรียบร้อย
  
 - ทริคที่1 การทำภาพให้ขยับได้คือ เราต้อง Copy layer ไว้เยอะๆ หรือเท่าที่เราต้องการ (ดังเช่นตัวอย่างที่ยักคิ้วได้)
   
- ทริคที่2 การทำ Banner หรืองานอื่นๆก็ตาม เราควรทำงานเป็น Layer แยกไว้เป็นสัดส่วน ไม่ควนให้อยู่ใน Layer เดียวกัน มิฉะนั้นจะทำให้ทำงานยาก




2.เมื่อรูปภาพ Banner อันสวยงามของเราเสร็จเรียบร้อยแล้ว ต่อไปเราจะมาทำให้ภาพขยับได้กัน

- ไปที่ Window จะอยู่ด้านบนหน้าของโปรแกรม Photoshop CS5 ค่ะ คลิกเลือกเลย!!


- เลือก Animation คลิกอีกทีค่ะ


3.เมื่อเข้าสู่โหมด Animation เราจะเห็นแถบ Animation(Timeline)


- ปรากฏแถบ Timeline , Layer ที่เราสร้างไว้ตอนที่ทำรูปภาพ Banner (Layer ข้างซ้ายและข้างขวา จะเหมือนกันทุกอย่าง)


- แถบสีเขียวที่ปรากฏแต่ละช่อง คือการกำหนดเวลาของรูปภาพแต่รูปภาพที่อยากให้ปรากฏ สามารถเลือได้ตามใจเลย


- เมื่อกำหนดเวลาเรียบร้อยเราจะมาคลิกที่ Convert to fream animation (ช่องสี่เหลี่ยมเล็กๆที่มีสี่เหลี่ยมอยู่ในนั้น3อัน ข้างๆ Layer ที่อยู่ด้านขวามือของเรา) 


- เราจะมาเลือกการรอบของ Baner ว่าจะให้เล่นที่รอบ ...ให้นำเม้าท์ไปที่ Selects looping options (ช่องซ้ายสุดของหน้าจอและอยู่ด้านล่างสุด) 


4.Animation เสร็จแล้ว


- ไปที่ File จะอยู่ด้านบนหน้าของโปรแกรม Photoshop CS5 ค่ะ คลิกเลือกเลย!!


- ไปที่ Save for Web & Devices เปลี่ยนไฟล์ภาพเป็น GIF และ Save งาน พร้อมใส่ชื่อให้งานด้วย

คำเตือน : อย่าลืม Save งานทุกระยะ เผื่อไฟบ้านท่านดับ

..................................................

วิธี นำภาพเข้า บล๊อค

1. ไปบล๊อคของเราที่จะทำการอัพภาพ ต่อมาเลือกการออกแบบ ที่มุมบนขวาของจอหน้าบล๊อคเรา

- เลือกรูปแบบ และเลือก ช่องเพิ่ม Gadget ที่ต้องการ เมื่อกดแล้ว มันจะปรากฏอีกหน้าต่างนึงขึ้นมา

- เลือกรูปภาพ.....แต่เรายังไม่สามารถอัพภาพได้ ถ้าอัพเลยภาพจะไม่ขยับอย่างที่ต้องเป็น (ดังนั้นเราจะต้องไปฝากรูปภาพไว้ที่ www.imgur.com <สมัครสมาชิกให้เรียบร้อยนะคะ ไม่เสียค่าใช้จ่ายค่ะ>

- เมื่อเข้าสู่หน้า webแล้ว เลือกที่ช่อง Computer และอัพรูปทันที

- รูปภาพโหลดเรียบร้อย ให้เราคลิกขวาที่รูปภาพ เลือกCopy URL ของรูปภาพ

2. ใกล้เสร็จแล้วนะ

- นำ URL ที่ได้ มาใส่ในหน้าที่เราเปิดตอนจะใส่รูปในบล๊อคอันล่าสุด 

- คลิกเลือก ช่อง (จากเว็บ ให้วาง URL ของภาพด้านล่าง)

- เสร็จแล้วก็ใส่ URL รอโหลด.................

- บันทึกภาพเมื่อเรียบร้อย

3. เสร็จแล้วจ่ะ ไปดูบล๊อคของเรากัน ^v^

................................................................................

มาดู คลิปทำ Baner และวิธีอัพภาพกันดีกว่า (เผื่อจะเข้าใจกันมากขึ้น)

ลองทำกันดูแล้วมาสนุกด้วยกันนะคะ สวัสดีค่ะ  >.<