วิธีแทรกภาพเคลื่อนไหว GIF ใน Illustrator คำแนะนำ: วิธีสร้างภาพเคลื่อนไหว SVG โดยใช้ After Effects CC การเตรียมไฟล์ SVG ใน Illustrator

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

คำสั่งส่งออก (SWF)

ให้การควบคุมภาพเคลื่อนไหวและการบีบอัดบิตได้มากที่สุด

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

เมื่อเตรียมออบเจ็กต์สำหรับการบันทึกในรูปแบบ SWF โปรดคำนึงถึงหลักเกณฑ์ต่อไปนี้

เมื่อใช้แอป Device Central คุณจะเห็นว่ากราฟิก Illustrator จะมีลักษณะอย่างไรในแอป แฟลชเพลเยอร์บนอุปกรณ์มือถือต่างๆ

การแทรกกราฟิก Illustrator

กราฟิกที่สร้างใน Illustrator สามารถคัดลอกและวางได้อย่างรวดเร็ว ง่ายดาย และง่ายดาย แอปพลิเคชั่นแฟลช.

เมื่อคุณแทรกกราฟิก Illustrator ลงในแอปพลิเคชัน Flash คุณลักษณะต่อไปนี้จะยังคงอยู่

โครงร่างและรูปร่าง

• ความหนาของเส้นขีด

  คำจำกัดความของการไล่ระดับสี

  ข้อความ (รวมถึงแบบอักษร OpenType)

  รูปภาพที่เกี่ยวข้อง

• โหมดผสมผสาน

นอกจากนี้ Illustrator และ Flash ยังรองรับตัวเลือกต่อไปนี้เมื่อแทรกกราฟิก

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

รูปแบบสีของ Illustrator ที่ไม่ใช่ RGB (CMYK, ระดับสีเทา และรูปแบบที่กำหนดเอง) จะถูกแปลงเป็น RGB ด้วย Flash สี RGB จะถูกแทรกตามปกติ

เมื่อคุณนำเข้าหรือแทรกกราฟิก Illustrator คุณสามารถใช้ตัวเลือกต่างๆ เพื่อบันทึกเอฟเฟ็กต์บางอย่าง (เช่น เงาของข้อความ) เป็นฟิลเตอร์ Flash

Flash เก็บมาสก์ Illustrator ไว้

ส่งออกไฟล์ SWF จาก Illustrator

ไฟล์ SWF ที่ส่งออกจาก Illustrator ตรงกับคุณภาพและอัตราส่วนการบีบอัดของไฟล์ SWF ที่ส่งออกจาก Flash

เมื่อคุณส่งออก คุณสามารถเลือกสไตล์ที่กำหนดไว้ล่วงหน้าได้หลากหลายเพื่อผลลัพธ์ที่ดีที่สุด และระบุวิธีที่คุณต้องการใช้อาร์ตบอร์ดหลายรายการ และวิธีที่คุณต้องการแปลงสัญลักษณ์ เลเยอร์ ข้อความ และมาสก์ ตัวอย่างเช่น คุณสามารถเลือกส่งออกสัญลักษณ์ Illustrator เป็นภาพยนตร์หรือ ภาพกราฟิกและสร้างสัญลักษณ์ SWF จากเลเยอร์ Illustrator

การนำเข้าไฟล์ Illustrator ลงในแอปพลิเคชัน Flash

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

หากไฟล์ Illustrator ของคุณมีหลายอาร์ตบอร์ด ให้เลือกอาร์ตบอร์ดที่จะนำเข้าในกล่องโต้ตอบนำเข้าของ Flash และระบุการตั้งค่าสำหรับแต่ละเลเยอร์ในอาร์ตบอร์ดนั้น ออบเจ็กต์ทั้งหมดในอาร์ตบอร์ดที่เลือกจะถูกนำเข้าเข้าไป โปรแกรมแฟลชเป็นชั้นเดียว เมื่อคุณนำเข้าอาร์ตบอร์ดอื่นจากไฟล์ AI เดียวกัน ออบเจ็กต์ในอาร์ตบอร์ดนั้นจะถูกนำเข้าไปยัง Flash เป็นเลเยอร์ใหม่

เมื่อนำเข้าอาร์ตเวิร์ค Illustrator เป็น AI, EPS หรือ แอปพลิเคชัน PDF Flash ยังคงคุณลักษณะเดิมไว้เช่นเดียวกับเมื่อแทรกกราฟิก Illustrator นอกจากนี้ หากไฟล์ Illustrator ที่คุณกำลังนำเข้ามีเลเยอร์ คุณสามารถนำเข้าโดยใช้วิธีใดวิธีหนึ่งต่อไปนี้

แปลงเลเยอร์ Illustrator เป็นเลเยอร์ Flash

แปลงเลเยอร์ Illustrator เป็นเฟรม Flash

แปลงเลเยอร์ Illustrator ทั้งหมดเป็นเลเยอร์ Flash หนึ่งเลเยอร์

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

แล้วฉันชอบอะไรเกี่ยวกับนักวาดภาพประกอบ และฉันพบว่าอะไรที่ไม่ใช่แฟลช?
1. ฉันจะเริ่มด้วยวิธีที่ง่ายที่สุด แต่ในขณะเดียวกันก็จำเป็น ลองจัดเรียงวัตถุเป็นวงกลมด้วย Flash เคยเป็นมาก่อน เครื่องมือเดคโคแต่ถูกลบออกไป ถือว่าไม่จำเป็น เราตัดสินใจว่าถ้าทำด้วยมือจะสนุกกว่า Illustrator มีฟังก์ชันนี้: เอฟเฟกต์ – บิดเบือน&แปลง – แปลงร่าง.

ทุกอย่างรวดเร็วและง่ายดาย เราตั้งค่า (ระยะห่างระหว่างวัตถุ จำนวนสำเนา) ด้วยตัวเราเองในการตั้งค่า

2. ซิกแซก

สิ่งที่ง่ายกว่าแต่ก็มีประโยชน์ อาจดูเหมือนเป็นเรื่องเล็กๆ แต่ใน Flash คุณต้องวาดด้วยมือ ส่วนใน Illustrator ใช้เวลาเพียงไม่กี่วินาที

3. การเสียรูปของวัตถุ (Warp)

ไม่มีอะไรแบบนี้ใน Flash ในตัวอย่างด้านล่าง ฉันแสดงเพียง 2 วิธีในการเปลี่ยนรูปทรงง่ายๆ (เอฟเฟกต์ - บิดเบี้ยว - ส่วนโค้ง/ปลา) จริงๆแล้วมีถึง 15 ตัวเลย เวอร์ชันล่าสุดโปรแกรม

4. การปัดเศษมุมอัตโนมัติ (Round Corners)

คุณสามารถทำได้ด้วยตนเอง: เมื่อเลือกบนวัตถุกราฟิก จุดสีขาวและเครื่องหมายเส้นโค้งมนจะปรากฏขึ้นที่มุม (ในทุกมุม) เราลากด้วยเมาส์แล้วปรับให้เข้ากับรสนิยมของคุณ

แต่สิ่งนี้ใช้ได้กับรูปร่างเท่านั้น ด้วยเส้นดินสอเราจะทำแตกต่างออกไปเล็กน้อย - เราใช้เอฟเฟกต์การปัดเศษ ( เอฟเฟกต์ – ปรับสไตล์ – มุมโค้งมน- ที่ทางออกเราได้รับผลลัพธ์เดียวกัน

5. หยาบ

เอฟเฟกต์นี้ใช้กับรูปร่างที่เรียบง่าย ( เอฟเฟกต์ - บิดเบือนและแปลง - หยาบ- ผลลัพธ์ที่ได้คือสิ่งที่คล้ายกับโมเดล 3 มิติโพลีต่ำ ฉันคิดว่ามันเจ๋ง :) และที่สำคัญที่สุดมันง่ายมาก

6. รอยย่นและบวม(การเพิกถอนและอัตราเงินเฟ้อ)
ตัวอย่างในภาพด้านล่าง:

7. การขยายแบบฟอร์ม (เส้นทางออฟเซ็ต)

Flash มีฟังก์ชัน Expand Fill แต่ใช้ไม่ได้กับเส้นดินสอเลย ต่างจาก Illustrator

8. แปรง (แปรงศิลปะ, แปรงลวดลาย, แปรงกระจาย)
ดูภาพด้านล่างพร้อมตัวอย่าง:

9.แปรงเนื้อ

Illustrator ยังมีแปรงพื้นผิวอีกมากมาย ซึ่งฉันเขียนถึงและลักษณะที่ปรากฏของแปรงเหล่านี้ เวอร์ชันใหม่แฟลช - . พบว่าการใช้แปรงใน Adobe Animate นั้นช้ามาก นี่คือวิธีการ :(

10. ฉันไม่แน่ใจว่านี่เป็นกลอุบายจริงหรือไม่ แต่ฉันอยากเน้นไปที่พู่กันที่มีชื่อตลกๆ หยดแปรง- ตั้งอยู่ในแถบเครื่องมือ นี่เป็นแปรงที่ดีมากที่จะใช้ มันมีการตั้งค่ามากมาย ฉันชอบมันมากกว่าปกติ เป็นการยากที่จะอธิบายประโยชน์ของมันด้วยคำพูด ควรลองดูสักครั้งจะดีกว่า

10.แยกเป็นตาราง

สิ่งที่มีประโยชน์อีกอย่างคือฟังก์ชัน Split to Grid (Object-Path-Split to Grid) ช่วยให้คุณสามารถตัดรูปร่างออกเป็นส่วนเท่า ๆ กัน สิ่งนี้ทำให้เรานึกถึงอะไร? ใช่แล้ว - หน้าต่างในอาคารสูง ฉันคิดว่ามันเจ๋งมากสำหรับการวาดภาพ เช่น ทิวทัศน์ของเมือง ;)

เครื่องมือที่มีประโยชน์อีกประการหนึ่งที่นำเสนอใน Illustrator ซึ่งอาจตั้งแต่เปิดตัวครั้งแรก ด้วยความช่วยเหลือคุณสามารถสร้างพื้นผิวไม้ได้:

12. ย้าย (ขวา - แปลง - ย้าย)

แทนที่วัตถุตามระยะทางที่กำหนด หากต้องการ คุณสามารถสร้างสำเนาได้ทันทีที่จะวางไว้ที่ระยะห่างที่ต้องการจากวัตถุที่เลือกในแนวนอน/หรือแนวตั้ง มากขึ้น เวอร์ชันต้น flash มีปลั๊กอินที่ทำงานอยู่ ฟังก์ชั่นนี้- น่าเสียดายที่ฉันจำชื่อมันไม่ได้

Illustrator สะดวกมากสำหรับการสร้างลวดลายไร้รอยต่อ ( วัตถุ-รูปแบบ-สร้าง- ฉันจำได้ว่าฉันพัฒนาความซับซ้อนอย่างรวดเร็วเพียงใดด้วยการสร้าง . ใน Illustrator เวอร์ชัน SS 2015 ทุกอย่างจะเป็นแบบอัตโนมัติ การตั้งค่าต่างๆ มากมายจะช่วยให้คุณสร้างรูปแบบได้หลายรูปแบบ โดยมีเพียงไม่กี่รูปแบบเท่านั้น องค์ประกอบกราฟิก- ในโปรแกรมเวอร์ชันก่อนๆ ทุกอย่างจะต้องดำเนินการด้วยตนเอง เช่นเดียวกับใน Flash จนถึงปัจจุบัน

(หมายเหตุ – สามารถสร้างรูปแบบเป็นวัตถุเวกเตอร์ที่แก้ไขได้โดยใช้ฟังก์ชันแยกวิเคราะห์ ( วัตถุ – ขยายลักษณะที่ปรากฏ).

14. วัตถุโมเสก

การสร้างจานสีตามรูปภาพที่มีอยู่ นำเข้าภาพที่คุณชอบลงใน Illustrator (เปิด) จากนั้น วัตถุ – สร้างวัตถุโมเสก- ในการตั้งค่าเราระบุความถี่ของการหารความสูงและความกว้าง

และที่ผลลัพธ์เราได้รับ:

15.ผสมผสาน

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

เครื่องมือนี้ยังสามารถใช้เพื่อโคลนวัตถุได้ วางวัตถุสองชิ้นให้ห่างจากกัน และใช้ Blend Options เลือกจำนวนขั้นตอน (จำนวนวัตถุที่โคลน)

16. เครื่องมือสร้างรูปร่างสิ่งที่สะดวกมากสำหรับการทำงานกับพื้นฐาน สำหรับฉันแล้วดูเหมือนว่ามันจะสะดวกน้อยลง

กด Alt ค้างไว้แล้วคลิกส่วนที่เลือกเพื่อลบส่วนต่างๆ หากเราเพียงลากเมาส์ไปเหนือพื้นที่ที่เลือก - การเชื่อมต่อ

Add-on คือเครื่องมือที่ช่วยตัด เชื่อมต่อ ฯลฯ โดยอัตโนมัติ แบบฟอร์มที่เน้น ส่วนผมไม่สะดวกมากก็ใช้บ่อยกว่าครับ สร้างรูปร่างเครื่องมือ.

(อาร์ตบอร์ด)

18. แผงเครื่องมือแบบกำหนดเอง

ความสามารถในการสร้างแถบเครื่องมือของคุณเอง ละทิ้งแถบเครื่องมือที่ไม่จำเป็น และเลือกเฉพาะแถบเครื่องมือที่คุณใช้

ใน Flash อาร์ตบอร์ด ได้แก่ ฉาก ( ฉากที่ 1,2,3..) จะอยู่แยกกัน และคุณต้องสลับไปมาระหว่างกัน (Shift+F2) ใน Illustrator คุณสามารถวางสิ่งเหล่านี้ไว้ต่อหน้าต่อตาคุณได้ จะสะดวกเมื่อคุณสร้างภาพวาดเดียวกันหลายเวอร์ชัน เพื่อให้ตัวเลือกทั้งหมดอยู่ตรงหน้าคุณเพื่อการเปรียบเทียบ

19.การใช้ภาพสามมิติ สไตล์กราฟิก

และสิ่งสุดท้ายคือการสร้างภาพสามมิติโดยไม่ต้องใช้มันใน 1 คลิก (หรือแม่นยำกว่านั้นใน 3 คลิก เพราะเรามี 3 ด้าน;) โดยใช้สไตล์กราฟิก ( สไตล์กราฟิก- ฉันจะอธิบายวิธีการดำเนินการนี้ในครั้งต่อไป

สิ่งที่นักวาดภาพประกอบมีเหมือนกันกับแฟลชคือความสามารถในการบันทึกวัตถุลงในสัญลักษณ์ (สัญลักษณ์) และสามารถถ่ายโอนสัญลักษณ์นี้ไปยังแฟลชได้อย่างง่ายดาย (เปิดไฟล์ใน flash.ai โดย นำเข้า – นำเข้าไปยังขั้นตอน).
สัญลักษณ์ใน Illustrator มีคุณสมบัติเหมือนกับใน Flash
และโดยสรุปฉันจะเขียนว่าใน Illustrator ในความคิดของฉันมันด้อยกว่าแฟลช ใช่ใช่มีสิ่งนั้น และนี่คือเครื่องมือเติม ( ถังสี- ไม่ว่าฉันจะพยายามทำความคุ้นเคยกับมันใน Illa มากแค่ไหนก็ตาม มันจะสะดวกกว่าใน Flash
หากบันทึกของฉันมีประโยชน์สำหรับคุณหรือหากคุณต้องการเพิ่มสิ่งใด ๆ ของคุณเอง ยินดีต้อนรับในความคิดเห็น! โชคดีนะทุกคน ;)

GIF แบบโปร่งใสถูกสร้างขึ้นใน Adobe Illustrator ดังนี้ ไปที่เมนู ไฟล์ > บันทึกสำหรับเว็บและอุปกรณ์ (Alt+Ctrl+Shift+S) ในหน้าต่างที่เปิดขึ้น ในฟิลด์รูปแบบไฟล์ที่ปรับให้เหมาะสม คุณต้องไปที่แท็บก่อนขนาดภาพ (ขนาดภาพ) ความจริงก็คือโดยค่าเริ่มต้นทั้งหน้าจะรวมอยู่ในหน้าต่างการเพิ่มประสิทธิภาพและโดยปกติจะไม่จำเป็นดังนั้นในแท็บขนาดรูปภาพ ให้ยกเลิกการเลือกช่องนี้

คลิปไปที่ Artboard

(ครอบตัดตามขนาดหน้า) แล้วคลิกปุ่ม Apply จากนั้นเลือก GIF จากรายการการเลือกรูปแบบและทำเครื่องหมายที่ช่องความโปร่งใส(ตารางสี) และแสดงเป็นสี่เหลี่ยมสี เลือกเครื่องมือในแถบเครื่องมือทางด้านซ้ายของหน้าต่าง ยาหยอดตา(ปิเปต)

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

คำไม่กี่คำเกี่ยวกับวิธีการตั้งค่าความโปร่งใส เมนูแบบเลื่อนลงเป็นผู้รับผิดชอบ ระบุอัลกอริธึม Dither ความโปร่งใสในภาษารัสเซีย - อัลกอริทึมสำหรับจำลองความโปร่งใส (รูปที่ด้านล่าง) มีสี่ตัวเลือก: ไม่มี Dither ความโปร่งใส, Diffusion ความโปร่งใส Dither, ความโปร่งใสของรูปแบบ Dither และ Dither ความโปร่งใสของสัญญาณรบกวน ในโหมดอัลกอริธึมแบบกระจาย แถบเลื่อนจะเปิดใช้งาน จำนวน(ค่า) ให้คุณเปลี่ยนค่าการแพร่ได้ สิ่งที่จะนำไปใช้ในทางปฏิบัติ? ขึ้นอยู่กับวัตถุประสงค์และภาพลักษณ์ ฉันไม่ได้ใช้ตัวเลือกนี้และปล่อยให้เป็นค่าเริ่มต้นเสมอ - No Transparency Dither

คลิกบันทึก - GIF แบบโปร่งใสพร้อมแล้ว งานนี้ดำเนินการใน Adobe Illustrator เวอร์ชัน CS4 (v.14) แต่การดำเนินการและแป้นพิมพ์ลัดทั้งหมดยังเกี่ยวข้องกับ CS3 เวอร์ชันก่อนหน้า (v. 13) ด้วย

คุณมีไอคอนหนึ่งหรือสองไอคอนที่คุณต้องการทำให้มีชีวิตชีวาด้วยแอนิเมชั่น คุณจะเริ่มต้นที่ไหน? สมมติว่าคุณมีไฟล์ SVG, Illustrator CC และ After Effects CC แต่วิธีแก้ปัญหาก็หายไป

ในบทความนี้ ผมจะสาธิตวิธีการทำให้ไฟล์ SVG เคลื่อนไหวได้อย่างง่ายดาย รวมถึงการเตรียมไฟล์ SVG ใน Illustrator และนำเข้าไปยัง After Effects CC ฉันจะอธิบายด้วยว่าคุณสามารถแปลงเป็น Shape Layers และเพิ่มการเคลื่อนไหวได้อย่างไร สุดท้ายนี้ เรามาพูดถึงการส่งออกและการเรนเดอร์กัน

ผลลัพธ์สุดท้ายของการทำงาน

ตอนนี้เรามาดูส่วนที่สนุกกันดีกว่า - เรียนรู้วิธีทำให้ภาพมีชีวิต

การเตรียมไฟล์ SVG ใน Illustrator

เริ่มต้นด้วยการเปิดไฟล์ SVG ของคุณใน Adobe Illustrator CC ฉันจะสร้างภาพเคลื่อนไหวให้กับไอคอนรถยนต์ขนาดเล็กที่ให้บริการฟรีใน Week Of Icons

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

นำเข้าและจัดระเบียบไฟล์ใน After Effects CC

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

ในแผงไทม์ไลน์เราจะเห็น องค์ประกอบใหม่- ดับเบิลคลิกที่มัน ตอนนี้เราควรเห็นเลเยอร์ Illustrator CC พร้อมไอคอนสีส้มทางด้านซ้ายของชื่อ

ก่อนที่เราจะเริ่ม เราต้องแปลงเลเยอร์เหล่านี้ทั้งหมดเป็น เลเยอร์รูปร่าง- เราต้องเลือกทั้งหมดด้วย Ctrl+A/คำสั่ง+Aหรือใช้ด้วยตนเอง Shift + เมาส์ซ้าย- หลังจากนั้นให้คลิก คลิกขวาเลื่อนเมาส์ไปเหนือเลเยอร์แล้วเลือก สร้าง > สร้างรูปร่างจากเลเยอร์เวกเตอร์.

เมื่อเลือกเลเยอร์ใหม่แล้ว ให้ลากไปไว้ ส่วนบนแผงด้านบนเลเยอร์ Illustrator CC จากนั้นลบเลเยอร์ Illustrator CC ออกเพื่อไม่ให้เกะกะ

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

ใช้แป้นพิมพ์ลัดเพื่อกำหนดการตั้งค่า Ctrl+K/คำสั่ง+Kหรือ องค์ประกอบ > การตั้งค่าองค์ประกอบ...จากการตั้งค่าองค์ประกอบ เราจำเป็นต้องเลือกความกว้าง ความสูง อัตราเฟรม และระยะเวลา สำหรับโปรเจ็กต์นี้ ฉันเลือก 60 เฟรมต่อวินาทีเพื่อให้แอนิเมชั่นราบรื่น

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

ในตัวอย่างของเรา ฉันกำหนดเลเยอร์ที่มีนัยสำคัญน้อยกว่า (เลเยอร์ย่อย) เช่น กระจกบังลม ส่วนของร่างกาย ไม้ และเชือก ให้กับเลเยอร์ตัวถังหลัก (เลเยอร์หลัก) สิ่งนี้ทำให้ฉันสามารถควบคุมตำแหน่งและการหมุนของรถทั้งคัน (ยกเว้นล้อ) โดยใช้เลเยอร์พาเรนต์

การสร้างแอนิเมชั่น

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

ขั้นตอนแรกคือการสร้างองค์ประกอบหินหรือเลเยอร์ แต่แทนที่จะกลับไปที่ Illustrator CC เพื่อเพิ่มเลเยอร์อื่น ฉันเพิ่งใช้เครื่องมือปากกาใน After Effects CC สิ่งนี้ทำให้ฉันสามารถออกแบบหินก้อนเล็กๆ ได้อย่างรวดเร็ว

ท้ายรถเป็นงานที่ค่อนข้างง่าย ฉันติดตั้งมันไว้ที่ด้านหลังของรถและทำจุดยึดที่จุดยอดด้านซ้ายล่าง ใช้ Pick Whip ฉันกำหนดมันให้กับเลเยอร์เนื้อหาหลัก ขั้นตอนสุดท้ายคือการให้เอฟเฟกต์การหมุน ซึ่งจะทำให้ช่วงเวลาที่รถกระดอนได้สมจริงยิ่งขึ้น Bodymovin ร่วมกับห้องสมุดเคลื่อนที่ Lottie

ป.ล.คุณสามารถค้นหาไฟล์ Illustrator CC และ After Effects CC ของฉันได้

ชุดไอคอนสามารถดาวน์โหลดได้ฟรีที่

Adobe Illustrator และ After Effects
นำเข้าและ แอนิเมชั่นง่ายๆ

ทรัพยากร: อะโดบี อิลลัสเตรเตอร์ ซีซี
Adobe After Effects ซีซี

มาเริ่มเรียนรู้ด้วยการวาดภาพใน Illustrator กันดีกว่า

มาวาดกันเถอะ
1) วาดรูปสี่เหลี่ยมสีเหลืองเป็นพื้นหลัง

รูปที่ 1 - สี่เหลี่ยมผืนผ้า

2) วาดวงกลมแล้วเติมด้วยการไล่ระดับสี
มาทำงานเป็นวงกลมกันหน่อย:
- ลบจุดด้านล่างของรูปร่างเราจะได้ส่วนโค้ง
- ลากเส้นตรงปิดส่วนโค้งด้านล่างเราจะได้ครึ่งวงกลม

รูปที่ 2 - 1) วาดวงกลม; 2) การไล่ระดับสี; 3) ลบจุด

3) วาดรูปสี่เหลี่ยมผืนผ้าและทำสำเนา
- สี่เหลี่ยมสีเทาหนึ่งอัน
- สี่เหลี่ยมอีกอันเป็นสีเทาเข้ม
4) วาดรูปสามเหลี่ยมจากเครื่องหมายดอกจันโดยกำหนดจำนวนรังสีเป็น 3

รูปที่ 3 - 1) ไฟเรียงกระแส; 2) แก้ไขความมืด; 3)สามเหลี่ยม

5) วาดแมวโดยใช้ปากกาและรูปทรงที่เรียบง่าย

รูปที่ 4 - 1) หัว; 2) คอ; 3) ร่างกาย; 4) ขา; 5) หาง

และตอนนี้มากที่สุด หลักช่วงเวลา
มากระจายรูปภาพเป็นเลเยอร์กัน (สิ่งที่จะเป็นแอนิเมชั่นจะอยู่ในเลเยอร์ที่แยกจากกัน) แบบนี้:

รูปที่ 5 - ภาพทั้งหมด (เลเยอร์สำคัญที่มีเครื่องหมายสีแดง)

แค่นั้นแหละตอนนี้มาบันทึกกันดีกว่า
มาดูการตั้งค่าการบันทึกกัน

รูปที่ 6 - บันทึก

และตอนนี้ขั้นตอนต่อไป ปิดAdobe Illustrator และเปิด After Effects

นำเข้าสู่ After Effects
ไฟล์ - นำเข้า - ไฟล์ - เลือกไฟล์ที่บันทึกไว้ของเรานักวาดภาพประกอบ.
มาเลือกนำเข้าเลเยอร์จาก Illustrator กันดีกว่า ถ้าเราใส่ฟุตเทจ เราจะได้ภาพที่มีเลเยอร์ที่ผสานกัน แต่เราไม่ต้องการสิ่งนั้น

รูปที่ 7 - นำเข้าเป็นองค์ประกอบ

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

รูปที่ 8 - เปิดองค์ประกอบ

และสิ่งที่เราจะนำเสนอในวันนี้ก็คือแอนิเมชัน

แอนิเมชั่นใน อาฟเตอร์เอฟเฟ็กต์
กำหนดจุดหมุนที่ด้านบนของลูกศรโดยใช้เครื่องมือ Pan Behind ( ปุ่มลัด- ย) เราแค่เอาจุดหนึ่งแล้วย้ายมันไปในที่ที่จำเป็น ผลออกมาจะเป็นแบบนี้..

รูปที่ 9 - เครื่องมือแพนและเลเยอร์

แค่นั้นแหละ ทีนี้เรามาดูเลเยอร์สำหรับแอนิเมชั่นกันดีกว่า
เราจะต้องมีเลเยอร์ Arrow และ Head_cat
เริ่มจากลูกศรกันก่อน
มาขยายรายการค้นหาแล้วคลิกที่นาฬิกา ดังนั้นเราจึงกำหนดจุดแรกไว้ที่ศูนย์วินาที ภาพเคลื่อนไหวจะมีความยาวทั้งหมด 2 วินาที
ดังนั้น นี่คือการตั้งค่าที่คุณต้องทำ (เราจะรวม 3 คะแนน):

ทีนี้มาทำให้หัวแมวเคลื่อนไหวกันเถอะ
มาขยาย head_cat และค้นหากัน ตำแหน่ง.
ที่นี่จะมี 4 จุด
เฉพาะพิกัดสุดท้ายเท่านั้นที่จะเปลี่ยนแปลงโดยไม่ส่งผลกระทบต่อพิกัดอื่น

รูปที่ 11 - ตำแหน่งส่วนหัว

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

ขั้นตอนสุดท้าย

การผลิต
คุณต้องสร้างผลิตภัณฑ์สำเร็จรูปจากงานของคุณ
ไปที่เมนูกันเถอะ - เพิ่มลงในคิวการเรนเดอร์
แผง Render จะเปิดขึ้นและใน Output Module (คลิกสองครั้ง) ให้เลือกรูปแบบเอาต์พุต ฉันเอา *.mov

รูปที่ 12 - เรนเดอร์

คลิกที่ปุ่ม RENDER และรับผลลัพธ์ (อย่าลืมระบุเส้นทาง)
นั่นคือทั้งหมดที่