บทช่วยสอน Illustrator: วิธีสร้างภาพเคลื่อนไหวด้วย Illustrator

วันนี้ผมขอเสนอบทเรียน ง่ายๆ แต่มีประโยชน์ ที่จะช่วยให้คุณเรียนรู้วิธีสร้างแอนิเมชั่น Flash โดยใช้เพียงโปรแกรม Illustrator เท่านั้น Illustratorเป็นโปรแกรมกราฟิกและออกแบบเวกเตอร์ ซึ่งเช่นเดียวกับPhotoshop เป็นส่วนหนึ่งของชุดโปรแกรม Adobe และ เป็นหนึ่งในเครื่องมือสำคัญที่ช่วยให้บริษัทนี้กลายเป็นมาตรฐานอุตสาหกรรมด้านการออกแบบกราฟิกในปัจจุบัน

ชุดโปรแกรม Adobe ขยายตัวอย่างต่อเนื่อง นำเสนอแอปพลิเคชันใหม่ๆ สำหรับงานสร้างสรรค์ในด้านต่างๆ ที่เราเคยฝันถึงเมื่อหลายปีก่อน ตั้งแต่โปรแกรมสำหรับการสร้างแบบฟอร์ม ไปจนถึงโปรแกรมตัดต่อเสียงและวิดีโอ โปรแกรม Adobe มักส่งเสริมการบูรณาการแพลตฟอร์มต่างๆ ภายในชุดโปรแกรม เช่น การรวมเครื่องมือจากโปรแกรมหนึ่งไว้ในอีกโปรแกรมหนึ่ง หรือการถ่ายโอนคุณสมบัติจากโปรแกรมหนึ่งไปยังอีกโปรแกรมหนึ่ง วันนี้ เราจะมาแสดงตัวอย่างการสร้างแอนิเมชั่น อย่างง่าย ด้วยIllustratorและส่งออกไปยัง Flash กัน วันนี้ผมขอเสนอ: บทเรียน Illustrator : วิธีสร้างแอนิเมชั่นด้วยIllustrator

เราจะสร้างแอนิเมชั่นสำหรับเว็บด้วยFlash ( SWF ) แต่เราจะใช้Adobe Illustratorในการเริ่มต้น ให้เปิดเอกสารใหม่โดยไปที่ไฟล์ > เอกสารใหม่กล่องโต้ตอบพร้อมเมนูจะปรากฏขึ้น ป้อนชื่อและตรวจสอบให้แน่ใจว่าคุณได้เลือกโปรไฟล์เว็บแล้ว

ตอนนี้ ในเอกสารใหม่ เราจะเริ่มทำงานกัน สำหรับแอนิเมชั่น นี้ ฉันเลือกภาพวาดเวกเตอร์ที่ดาวน์โหลดมาจากอินเทอร์เน็ต จากเว็บไซต์ที่เราพูดถึงในโพสต์ก่อนหน้านี้Freepik ซึ่งเป็นเครื่องมือค้นหารูปภาพและเวกเตอร์ฟรีและฉันได้ปรับแต่งมันเล็กน้อย เราจะไปที่แผงเลเยอร์และตั้งชื่อให้ถูกต้อง การจัดระเบียบเลเยอร์ตั้งแต่เริ่มต้นนั้นสำคัญมาก เราจะตั้งชื่อว่าChicken01

แอนิเมชั่นนี้จะค่อนข้างง่าย เราจะขยับลูกไก่จากด้านหนึ่งของหน้าจอไปยังอีกด้านหนึ่ง และทำให้ดวงตาของมันขยับได้ ขั้นแรก ให้คัดลอกเลเยอร์ในแผงเลเยอร์โดยการคลิกที่เลเยอร์แล้วลากไปวางบนไอคอนเลเยอร์ใหม่ ตัวอย่างเช่น การเปลี่ยนชื่อเลเยอร์นั้นสำคัญมาก

เราจะเลือกดวงตาทั้งสองข้างของไก่ที่อยู่ใน เลเยอร์ Chicken02จากนั้นเราจะเลือกดวงตาของไก่

เมื่อเลือกดวงตาของเวกเตอร์ไก่ในเลเยอร์ด้านบนPollo02แล้ว ให้คลิกขวา และจากกล่องโต้ตอบที่ปรากฏขึ้น ให้เลือกเส้นทางTransform- Reflect

เมื่อคุณอยู่ใน ตัวเลือก Mirrorแล้ว ให้แตะตัวเลือก Vertical แล้วก็เสร็จเรียบร้อย ตอนนี้ภาพวาดไก่ด้านบนจะมีตาหันไปทางหนึ่ง และภาพวาดไก่ด้านล่างจะมีตาหันไปอีกทางหนึ่ง

ตอนนี้ขอไก่เพิ่มเป็นสองเท่า

อีกครั้งหนึ่ง เพื่อสร้างเลเยอร์ซ้ำ เราจะใช้ ปุ่ม " สร้างเลเยอร์ใหม่"ในเมนูเลเยอร์ คลิกที่ เลเยอร์ Chicken01 และ Chicken02พร้อมกับกดปุ่ม Shift ค้างไว้ แล้วลากเมาส์ไปที่ ปุ่ม " สร้างเลเยอร์ใหม่ "

เราจำเป็นต้องเปลี่ยนชื่อไก่ทั้งหมด โดยต้องแน่ใจว่าได้เรียงลำดับตามลำดับที่ถูกต้อง เช่น ไก่ที่เกิดจาก Chicken01 และ Chicken02จะอยู่ทางด้านซ้ายของพื้นที่ทำงาน และตามลำดับตัวเลข ไก่ที่เกิดจากเลเยอร์Chicken03 และ Chicken04จะอยู่ทางด้านขวา และเป็นเช่นนี้เรื่อยไป โดยให้สอดคล้องกับลำดับของเลเยอร์ในแผง Layers นี่เป็นสิ่งสำคัญมาก เพราะแอนิเมชั่นจะทำงานตามลำดับของเลเยอร์เสมอ โดยเฟรมแรกจะเป็นเลเยอร์แรก และเฟรมสุดท้ายจะเป็นเลเยอร์สุดท้าย

เมื่อจัดวางไก่ทั้งหมดอย่างถูกต้องแล้ว (ตามที่อธิบายไว้ข้างต้น) เราจะเข้าถึงหน้าต่างส่งออกเอกสารโดยไปที่ ไฟล์ > ส่งออก จากนั้นเลือกSWFหรือFlash เป็นรูปแบบการส่งออก กล่องโต้ตอบอีกกล่องจะปรากฏขึ้นเพื่อให้เรากำหนดค่าขั้นตอนสุดท้าย โดย เลือกตัวเลือก พื้นฐานเราจะเลือกส่งออกเป็นเลเยอร์ AI ไปยังเฟรม SWF และ เวอร์ชันFlashที่เราจะเลือกคือเวอร์ชันล่าสุดที่มีอยู่Adobe Flash Player 9นอกจากนี้เรายังจะเลือกตัวเลือก "ครอบตัดให้พอดีกับขนาดของอาร์ตบอร์ด" มีตัวเลือกที่น่าสนใจอื่นๆ อีกหลายอย่าง ซึ่งเราจะสำรวจในบทเรียนอื่น

ถัดไป ในกล่องโต้ตอบเดียวกัน ให้เลือก ตัวเลือก ขั้นสูงแล้วเลือกความละเอียดและอัตราเฟรม โดยตั้งค่าเป็น15ดังที่คุณเห็น ที่นี่เราสามารถเลือกการเรียงลำดับเลเยอร์ได้ ซึ่งอย่างที่ฉันได้กล่าวไว้ก่อนหน้านี้ เราได้กำหนดค่าไว้เพื่อให้แอนิเมชันทำงานจากด้านล่าง (เลเยอร์ที่ 1) ไปยังด้านบน (เลเยอร์สุดท้าย) ของแผงเลเยอร์ในอินเทอร์เฟซของคุณ เมื่อส่งออกแล้ว ให้ดูผลลัพธ์ในโปรแกรมเล่นวิดีโอใดก็ได้

ข้อมูลเพิ่มเติม – Freepik เว็บไซต์ค้นหารูปภาพและเวกเตอร์ฟรี