PerfectVector
โดย Jay Leeอ่าน 3 นาที

Auto-Trace ใน After Effects: มาสก์หรือเลเยอร์รูปทรง SVG?

เลือกมาสก์ Auto-Trace หรือเลเยอร์รูปทรง SVG ที่แก้ไขได้สำหรับโลโก้ใน After Effects ปรับค่าลอกเส้น และตรวจพื้นที่สีกับช่องเปิดในตัวอักษร

ในหน้านี้

Auto-Trace ใน After Effects เปลี่ยนช่องอัลฟา สี หรือความสว่างของเลเยอร์เป็นมาสก์ ใช้เมื่อแอนิเมชันต้องการเส้นขอบเหล่านั้น มันไม่ได้สร้างโลโก้หลายสีขึ้นใหม่เป็นงานที่เติมสีแยกส่วน เอกสาร Auto-Trace ของ Adobe ระบุว่าผลลัพธ์เป็นมาสก์เบซิเยร์

สำหรับส่วนโลโก้ที่แก้ไขแยกกันได้ ให้พิจารณา SVG แทน เอกสารนำเข้า SVG ปัจจุบันของ Adobe ซึ่งอัปเดตเมื่อวันที่ 17 มิถุนายน 2026 แยกฟุตเทจที่ลิงก์กับไฟล์ออกจากคอมโพซิชันที่มีเลเยอร์รูปทรงแก้ไขได้ คำแนะนำเก่าที่ต้องใช้รูปแบบไฟล์กลางอาจไม่ตรงกับเวอร์ชันที่คุณติดตั้ง

เริ่มจากสิ่งที่โลโก้ต้องทำ

โลโก้อาจดูเหมือนกันทั้งในรูปบิตแมป เลเยอร์สีทึบที่มีมาสก์ หรือชุดรูปทรงเติมสี ความต่างจะปรากฏเมื่อคุณลองย้ายตัวอักษรหนึ่งตัวหรือเปลี่ยนสีส่วนหนึ่ง

เป้าหมายแอนิเมชันวิธีเริ่มต้นสิ่งแรกที่ต้องตรวจ
ใช้เส้นขอบโลโก้ทำเส้นรอบหรือเอฟเฟกต์มาสก์ Auto-Traceช่องที่เลือกแยกขอบเขตที่ต้องการได้ไหม?
ย้ายหรือเปลี่ยนสีพื้นที่โลโก้แต่ละส่วนนำเข้า SVG เป็นคอมโพซิชันเลเยอร์รูปทรงพื้นที่ ช่องเปิด และพื้นหลังมีโครงสร้างที่ใช้ได้ไหม?
แปลงตำแหน่ง ขนาด หรือหมุนโลโก้เวกเตอร์เป็นชิ้นเดียวที่ลิงก์กับไฟล์ฟุตเทจ SVGเลเยอร์เดียวให้การควบคุมทั้งหมดที่ช็อตต้องการไหม?
รักษาเกรน แสงเงา หรือพื้นผิวที่ระบายไว้ฟุตเทจแรสเตอร์ต้นฉบับใหญ่พอสำหรับช็อตไหม?
วาดลายสะบัดไปตามเส้นเดียวที่กำหนดอย่างตั้งใจพาธที่สร้างด้วยมือพาธวิ่งตามทิศทางการวาดที่ต้องการไหม?

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

หากคุณหมายถึง Adobe Animate กระบวนการ Trace Bitmap เป็นอีกฟีเจอร์ในอีกแอปหนึ่ง

สำหรับ Apple Motion ใช้ วิธีตรวจการนำเข้า SVG ใน Apple Motion เพื่อแยกสื่อภาพนิ่ง การตั้งค่าความโปร่งใส และวัตถุแยกชิ้นที่แอนิเมชันต้องการ

ใช้ Auto-Trace เมื่อคุณต้องการมาสก์

เลือกเลเยอร์ต้นฉบับแล้วเลือก Layer > Auto-trace ตัวเลือก Current Frame ลอกเส้นหนึ่งเฟรม ส่วน Work Area สร้างคีย์เฟรมมาสก์ตลอดช่วงนั้น ใช้ Preview ขณะปรับตัวควบคุมเหล่านี้ตาม คู่มือมาสก์ของ Adobe

ตัวควบคุมสิ่งที่เปลี่ยน
Channelช่องที่ใช้สร้างเส้นขอบ
Thresholdขอบเขตค่าของช่องที่ใช้จำแนกขอบ
Toleranceระยะที่อนุญาตให้เบี่ยงจากเส้นขอบ หน่วยพิกเซล
Minimum Areaรายละเอียดต้นฉบับที่เล็กที่สุดที่จะเก็บไว้
Blurการทำให้เรียบก่อนลอกเส้น
Corner Roundnessความมนของจุดยอดที่ได้
Invertกลับค่าข้อมูลก่อนตรวจจับขอบ
Apply To New Layerวางมาสก์บนเลเยอร์สีทึบใหม่

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

โลโก้พื้นหลังโปร่งใสมีเงารูปร่างในช่องอัลฟาให้ลอกตาม ภาพสี่เหลี่ยมที่ทึบทั้งหมดไม่ได้แยกส่วนในลักษณะเดียวกัน ตรวจความโปร่งใสของต้นฉบับก่อนคิดว่าสี่เหลี่ยมที่ไม่ต้องการเป็นปัญหาค่า Tolerance Adobe อธิบายความแตกต่างระหว่างสีและความโปร่งใสใน คู่มือช่องอัลฟาและมาสก์

หากผลลัพธ์เป็นสีขาว ให้ตรวจเลเยอร์

เมื่อ Auto-Trace ได้สีเดียว ให้ตรวจว่าคุณกำลังดูเลเยอร์สีทึบที่มีมาสก์หรือไม่ มาสก์เปลี่ยนความโปร่งใสของเลเยอร์ได้ แต่ไม่ได้เก็บสีเติมแยกส่วนของโลโก้ ตรวจมาสก์แต่ละชิ้นและโหมดของมัน สำหรับพาธที่ใช้กับเอฟเฟกต์อย่างเดียว โหมด None จะไม่เปลี่ยนอัลฟา เอกสารพฤติกรรมมาสก์ของ Adobe

หากช็อตต้องการพื้นที่สีแยกกัน ให้เลือกกระบวนการจัดการงานก่อนปรับ Threshold อีกครั้ง

นำเข้า SVG เมื่อคุณต้องการงานที่แก้ไขได้

ในกระบวนการปัจจุบันที่เอกสารระบุ เลือก File > Import > File จากนั้นเลือก Composition - Retain Layer Sizes ใต้ Import As เพื่อให้ได้รูปทรงที่แก้ไขได้ ตรวจ Contents หรือ Layer Contents เพื่อดูพาธ สีเติม และการแปลงรูป ส่วน Footage เก็บเป็นเลเยอร์เวกเตอร์เดียวที่ลิงก์กับ SVG ภายนอก โดยยังแปลงรูปทั้งชิ้นได้ Adobe ยังระบุ Create > Create Shapes from Vector Layer สำหรับแปลงฟุตเทจเวกเตอร์ที่นำเข้า คู่มือนำเข้า SVG ของ Adobe

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

ตรวจโลโก้ก่อนเข้าสู่คอมโพซิชัน

นี่คือคู่ตัวอย่าง PerfectVector ที่มีอยู่: ตราภูมิประเทศเหนือคำว่า VECTOR เราตรวจ SVG ที่เก็บไว้สำหรับบทความนี้ พบว่าไฟล์มี 22 พาธ สีเติมหกสี และไม่มีองค์ประกอบภาพฝัง ภาพประกอบแสดงการแปลงที่มีอยู่นั้น ไม่ใช่ผล Auto-Trace ใน After Effects หรือการทดสอบนำเข้า

ตรวจโครงสร้างเพื่อเตรียม SVG
บิตแมปโลโก้ภูมิประเทศต้นฉบับ ผลการแปลง SVG จริง และพาธส่วนในตัว O สีครีมที่แสดงแยกบนพื้นสีเขียวอมฟ้า
แสดง SVG ที่มีอยู่โดยไม่เปลี่ยนแปลง ภาพขยายแยกส่วนในตัว O ที่เติมสีครีมจริงออกมาบนพื้นเขียวอมฟ้าเพื่อให้เห็นรูปทรง นี่แสดงโครงสร้างไฟล์ก่อนนำเข้า ไม่ใช่ภาพหน้าจอ After Effects หรือข้ออ้างว่านำเข้าสำเร็จแล้ว

พื้นหลังเป็นพาธสีครีมเต็มผืนผ้าใบ ช่องที่ดูเหมือนเปิดอยู่ใน O และ R ก็เป็นพาธเติมสีครีมที่วางทับตัวอักษรสีเข้มเช่นกัน เมื่ออยู่บนพื้นครีมจะดูเหมือนพื้นที่ว่าง แต่จริง ๆ เป็นวัตถุที่เติมสี การลบวัตถุสีครีมทุกชิ้นจึงเป็นทางลัดที่ไม่เหมาะสม การลบส่วนในจะเผยรูปทรงสีเข้มด้านล่าง แทนที่จะสร้างช่องเปิด

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

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

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

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

แปลงเฉพาะส่วนที่ต้องสร้างขึ้นใหม่

หากโลโก้มีเพียง PNG หรือ JPG ที่สะอาด และคุณต้องการพื้นที่เติมสีที่แก้ไขได้ ให้ แปลงโลโก้เป็นเวกเตอร์ด้วย PerfectVector แล้วตรวจ SVG ก่อนนำเข้า ตรวจพื้นที่สีหนึ่งส่วน ช่องเปิดในตัวอักษรหนึ่งจุด และพื้นหลัง หลังนำเข้า ให้ยืนยันว่าวัตถุที่ต้องการทำแอนิเมชันควบคุมแยกกันได้ เก็บฟุตเทจแรสเตอร์เมื่อพื้นผิวมีความสำคัญ และใช้ Auto-Trace ในโปรแกรมเมื่อมาสก์ตอบโจทย์ช็อตอยู่แล้ว

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

แปลงพาธมาสก์เป็นพาธรูปทรง

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

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

คำถามที่พบบ่อย

Auto-Trace ใน After Effects สร้างเลเยอร์รูปทรงไหม? Auto-Trace สร้างมาสก์ คุณนำเรขาคณิตพาธไปใช้ในกระบวนการรูปทรงได้ แต่ไม่ได้สร้างงานสีของโลโก้ต้นฉบับขึ้นใหม่โดยอัตโนมัติ

After Effects นำเข้า SVG โดยตรงได้ไหม? ได้ เอกสาร Adobe ปัจจุบันอธิบายทั้งการนำเข้าเป็นฟุตเทจและคอมโพซิชันที่มีเลเยอร์รูปทรงแก้ไขได้ ตรวจตัวเลือกนำเข้าของเวอร์ชันที่ติดตั้ง และตรวจวัตถุที่ได้ก่อนทำแอนิเมชัน

ทำไม Auto-Trace ลอกขอบสี่เหลี่ยมแทนโลโก้? ตรวจช่องที่เลือกและความโปร่งใสของต้นฉบับ ภาพที่ทึบทั้งหมดมีพื้นที่อัลฟาเป็นสี่เหลี่ยม แม้พื้นหลังจะดูเรียบ เตรียมต้นฉบับหรือเลือกช่องที่แยกเส้นขอบที่ต้องการได้

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

แหล่งข้อมูล

  1. Adobe: สร้างมาสก์ — ผลลัพธ์มาสก์ของ Auto-Trace ช่วงเวลา และตัวควบคุม
  2. Adobe: นำเข้าไฟล์ SVG — กระบวนการนำเข้าเป็นฟุตเทจและคอมโพซิชันที่แก้ไขได้ในปัจจุบัน
  3. Adobe: ช่องอัลฟาและมาสก์ — ความโปร่งใส โหมดมาสก์ และการเลือก Mask Path เมื่อคัดลอกเรขาคณิต
  4. Adobe: สร้างและปรับแต่งรูปทรงและมาสก์ — การกำหนดพร็อพเพอร์ตี Path ของรูปทรงที่มีอยู่เป็นเป้าหมายเมื่อวาง

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

เพิ่มเติมจากบล็อก

เริ่มต้นด้วย SVG ที่เรียบร้อยขึ้น
และแก้ไขได้ง่ายกว่า