แปลงภาพไล่ระดับสีเป็นเวกเตอร์ได้ไหม? เลือกวิธีที่เหมาะ

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

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

คำตอบสั้น ๆ

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

เริ่มจากแยกประเภทการไล่ระดับสี

“การไล่ระดับสี” ครอบคลุมหน้าที่ทางภาพหลายแบบ การมองทั้งหมดเป็นปัญหาเดียวกันอาจเปลี่ยนโลโก้สะอาดให้เป็นแถบสีแคบหลายร้อยแถบ

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

สามแนวทางสำหรับการไล่ระดับสี

เหตุใดการแกะรอยอัตโนมัติจึงสร้างแถบสีได้

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

เอกสาร Adobe Image Trace ปัจจุบัน มีการตรวจจับการไล่สีสำหรับค่าล่วงหน้าที่รองรับ และมีตัวควบคุม Smooth Adobe ยังแนะนำให้ตรวจเส้นรอบรูปที่แกะรอยและปรับการไล่สีหลังใช้ Expand ข้อนี้เตือนว่าควรให้ความสำคัญกับโครงสร้างผลลัพธ์เท่ากับภาพตัวอย่าง

หลังแกะรอยด้วยเครื่องมือใดก็ตาม ให้ตรวจสามอย่าง:

1. เลือกพื้นที่ไล่สี เป็นรูปทรงเดียวที่มีสีเติมไล่ระดับโดยตรง เป็นกลุ่มพื้นที่เล็กที่ตั้งใจ หรือเป็นแถบจำนวนมหาศาล?
2. เปิดแผง Layers หรือ Objects ระบุและแก้ไขภาพเงาหลักได้โดยไม่ต้องค้นผ่านชิ้นส่วนหลายร้อยชิ้นหรือไม่?
3. เปลี่ยนสีของจุดกำหนดสีหรือพื้นที่หนึ่งส่วน การแก้ไขทำงานตามลักษณะงานที่ต้องส่งหรือไม่?

เวิร์กโฟลว์ที่สะอาดกว่าสำหรับโลโก้แรสเตอร์

1. เก็บต้นฉบับที่ดีที่สุด

เก็บ PNG, JPG หรือเอกสารมีเลเยอร์ต้นฉบับ อย่าปรับขนาดและบันทึกซ้ำหลายครั้งก่อนแกะรอย หากมี AI, SVG, EPS หรือ PDF เวกเตอร์ต้นฉบับ ให้ใช้แทนการสร้างใหม่จากภาพส่งออกที่แบนแล้ว

2. ตัดสินใจว่าเวกเตอร์ต้องทำอะไร

ระบุปลายทางก่อนแปลง:

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

หากผู้รับระบุรูปแบบหรือการตั้งค่าสี ให้ทำตามข้อกำหนดนั้น คำว่า “เวกเตอร์” เพียงอย่างเดียวไม่ได้ตัดสินรายละเอียดการส่งงาน

3. แกะรอยรูปทรงสะอาด

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

PerfectVector ให้จุดเริ่มต้นรูปทรงที่แก้ไขได้ แต่ตัดสินไม่ได้ว่าเครื่องพิมพ์ของคุณจัดการสีพิเศษอย่างไร เครื่องตัดควรวางเส้นทางงานอย่างไร หรือการไล่สีซับซ้อนแบบภาพถ่ายควรอยู่ในรูปเวกเตอร์หรือไม่ สิ่งเหล่านี้เป็นการตัดสินใจผลิตขั้นถัดไป

4. สร้างการไล่สีเวกเตอร์เรียบง่ายใหม่

ใน Illustrator, Inkscape, Figma หรือโปรแกรมเวกเตอร์อื่น เลือกรูปทรงที่เก็บงานแล้วและใช้การไล่สีแบบเส้นตรงหรือรัศมี ให้ทิศทาง สีปลายทั้งสอง และจุดกลางสำคัญตรงกับภาพแรสเตอร์อ้างอิง องค์ประกอบ SVG <linearGradient> เก็บการเปลี่ยนสีนั้นเป็นจุดกำหนดสีที่สีเติมหรือเส้นขอบอ้างอิงได้

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

5. ทดสอบไฟล์ที่ส่งออก

เปิด SVG สุดท้ายอีกครั้งแทนการเชื่อพื้นที่แก้ไข ยืนยันว่า:

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

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

เมื่อการแบ่งโทนเป็นขั้นคือเป้าหมาย

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

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

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

ปัญหาที่พบบ่อย

ไฟล์ดูเรียบแต่แก้ไขยาก

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

การไล่สีหายหลังนำเข้า

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

ภาพตัวอย่างการตัดตามพื้นที่แสงเงา

เครื่องตัดต้องการพาธขอบเขตที่ตั้งใจตัด ลบหรือซ่อนพื้นที่ไล่สีตกแต่งจากไฟล์ตัด รวมภาพเงาที่ถูกต้อง และตรวจตามขั้นตอนเดียวกับSVG ก่อนตัด ทั่วไป

รายการตรวจการแปลงภาพไล่สีเป็นเวกเตอร์

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

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

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

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

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

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

แหล่งอ้างอิง

1. W3C — ระบบสีเติม SVG 2 — นิยามการไล่สีเส้นตรงและรัศมี จุดกำหนดสี และวิธีที่สีเติมเวกเตอร์อ้างอิงสิ่งเหล่านี้
2. Adobe — ตัวเลือกแผง Image Trace — อธิบายการตรวจจับการไล่สีปัจจุบัน การปรับให้เรียบ ตัวควบคุมพาธ และพฤติกรรม Expand
3. MDN — <linearGradient> — เอกสารใช้งานจริงขององค์ประกอบ SVG สำหรับนิยามการไล่สีเส้นตรงโดยตรง
4. George Mason University — การแยกภาพเป็นเลเยอร์ไล่สีเส้นตรง — นำเสนอโครงการวิจัย SIGGRAPH 2023 เรื่องแทนรูปลักษณ์แรสเตอร์ด้วยเลเยอร์ไล่สีที่แก้ไขได้

---

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