Animating Floral Element

floral_FEA




Animating Floral Element

จากที่มีเพื่อนสมาชิกได้ถามถึงการ Animate ลายกราฟฟิกชนิดหนึ่งที่เรียกว่า Floral Element (องค์ประกอบที่เกี่ยวกับดอกไม้และพันธ์ุไม้) การ Animate องค์ประกอบเหล่านี้มีวิธีที่ไม่ยาก อาศัยความพยายามและความละเอียดอ่อนในการทำเพื่อให้เกิดความสวยงาม

การ Animate องค์ประกอบประเภทนี้จะมีด้วยกัน 2 วิธีหลักๆคือ

ตัวกิ่งก้าน เราจะกำหนดให้มันงอกขึ้นมา (วาดตัวเองขึ้นมา)

ตัวใบและดอกไม้ จะกำหนดให้มันบานออกมาหรืองอกออกมากจากกิ่งก้าน (Animate ค่า Attribute ต่างๆเช่น Scale)


เมื่อเราทำการ Animate เสร็จแล้ว สิ่งที่จะทำให้งานนี้สมบูรณ์ก็คือ การไล่ลำดับของการเกิด (เกิด Delay กัน)
เพราะจะทำให้รู้สึก ต่อเนื่อง และ ดูเป็นธรรมชาติ คับ :)


ถ้าสงสัยอะไร ถามมาทาง Comment ได้นะคับ เรายินดีตอบทุกคำถามคับ :)



Link สำหรับผู้ที่สนใจ

Download ‘Animating Floral Element’ // 141 MB

Vimeo’s Direct Link of ‘Animating Floral Element’ *

*ในกรณีที่ Download ไม่ได้เป็นเพราะ Vimeo อาจจะทำการเปลี่ยนแปลง link ของระบบ ให้เข้าไปโหลดจากในหน้าของ Tutorial ชิ้นนี้โดยตรงนะคับ

Founder of chilltorial.net, Motion graphic designer who loves to share ideas and knowledges for the better of our community.

19 Comments

  • Reply July 15, 2011

    focus

    สุดยอดอีกแล้ว นักเรียนคนนี้จะขยันทำการบ้านที่คุณครูให้มาครับ ขอบคุณครับู^^

  • Reply August 3, 2011

    tob

    ดีครับ ชอบเลย
    แต่ของคอมเม้นนิสหนึ่งน่ะครับ
    คือ mask อ่านออกเสียงว่า แมสค์ น่ะครับ ไม่ใช่ มาสค์ ครับ ด้วยความเคารพน่ะครับ

    • Reply August 3, 2011

      Soetheby

      ขอบคุณคับ ที่ติมา จะปรับปรุงคับ :D

      จริงๆที่ผมอ่าน Mask เข้าใจว่าทางฝั่ง British English อ่านว่า มาสค์ นะคับ ทาง American จะอ่าน แมสค์ ~*

  • Reply August 23, 2011

    Coco11

    ขอบคุณค่ะ ที่ใหความรู้ดีๆ จะลองเอาไปทำดูค่ะ ขอบคุณค่ะ^^

  • Reply August 23, 2011

    Coco11

    พิมอีเมลพิมค่ะ_ _;

  • Reply September 1, 2011

    namtidfun

    ไม่ทราบว่าจะทำเป็นสีๆ แบบตอนเริ่มยังไงหรอครับ

    • Reply September 1, 2011

      Soetheby

      ถ้าหมายถึงปกของ tutorial ผมใช้ Photoshop ทำคับ ก็ใช้ Brush Tool ระบายเอาเลยคับ :D

      ถ้าจะเอาไปทำต่อใน After ก็เซฟไปทำต่อตาม Tutorial ได้เลยคับ :D ~*

  • Reply September 5, 2011

    วร

    ดีจริงๆๆๆๆๆๆๆๆๆๆๆๆ ท่านอยากให้มีแบบนีมานานแล้ว

  • Reply October 19, 2011

    Phienix

    ขอบคุณมากครับผม มีประโยชน์มากครับ

  • Reply November 9, 2011

    DANCEPEOPLEIDEA

    ถ้าเกิดว่าในกรณีที่ brush size ไม่สามารถ ครอบคลุมทั้งหมดได้จะทำอย่างไรคัพ มันได้ถึงแค่50 แต่มันก็ยังไม่เต็มพื้นที่ที่ผมต้องการ ถ้าสมมุติว่าผมใช้กับ โลโก้หรืออะไรสักอย่าง ที่มีขนาดใหญ่แล้วใช้วิธี ให้มันอนิเมทขึ้นมาแบบนี้ แต่ มันไม่ครอบคลุมน่ะคัพ มันเหลือพื้นที่ ที่ยังต้องการอยู่จะทำยังไงคัพ ขอบคุณมากคัพ T^T กำลังศึกษาเรื่องพวกนี้อยู่ ขอบคุณมากๆคัพ

    • Reply November 9, 2011

      Soetheby

      อาจจะวาดซ้อน 2 ครั้งก็ได้คับ โดยต้องวาดให้มันเกิดมาพอดีกัน ซึ่งอาจจะทำยากพอสมควร

      ถ้ามันใหญ่มาก เราอาจจะต้องย่อให้เล็กก่อนแล้ว Animate แล้วนำเอาส่วนที่ทำเสร็จแล้วมาเป็น Map ให้กับ Logo ที่เราใช้งานคับ

      หรือใช้ Mask เป็นส่วนๆไปคับ

      หวังว่าจะเป็นประโยชน์นะคับ ~*

  • Reply December 6, 2011

    Saa

    Download ‘Animating Floral Element’ไม่ได้ค่ะ
    รบกวนหน่อยนะคะ

    • Reply December 6, 2011

      Soetheby

      เข้าไปโหลดใน Vimeo เลยคับ :) Vimeo เค้าเปลี่ยน Address เรื่อยๆ ทางเว็บตามอั๊พเดทให้ไม่ไหวคับ ~*

  • Reply April 14, 2012

    thera0095

    ในช่วงที่พี่สร้าง mask วงกลมแล้วลองขยายไปพาดเพื่อแสดงการอนิเมทแบบ mask ตอน 4.15

    คือผมอยากรู้ว่าทำยังไงให้มันเห็นการเคลื่อนไหวของการซ้อนทับไปอีกอันแบบเรียลทาม

    ของผมมันต้องหยุดก่อนถึงจะเห็นวามันพาดโดนตรงไหนบ้าง

    พูดแบบนี้งงปะ -__- อธิบายไม่ถูก

    • Reply April 16, 2012

      Soetheby

      ต้องเช็ค Live Update ตรง Timeline ด้วยคับ ~*

  • Reply April 16, 2012

    thera0095

    ขอบคุณครับได้แล้วครับ

    อีกอย่างมีวิธีการตั้งค่า เกี่ยวกับค่าต่างที่เหมาะสมในการทำงานในส่วนของ > preference

    เช่นพวกการ พรีวิว หรือ คววามสามารถของคอมที่ให้กับโปรแกรม เพื่อจะได้ทำงานราบรื่นกว่าเดิน บ้างมั้ยครับ

    ขอบคุณร่วงหน้าครับ ติดตามพี่ๆอยู่ทุก tutorial ครับ

  • Reply January 13, 2013

    wisarn

    ขอบคุณครับ :D.

  • Reply March 14, 2013

    nus

    ขอบคุณสำหรับความรู้ดีๆครับ ท่านอาจารย์

  • Reply May 4, 2013

    Sunny

    สุดยอด มากกกก ขอบคุณมากกกกกกกก อาจารย์ใจดีมากกกกกกกกกกกก

Leave a Reply