บทนำ
แทบทุกงานออกแบบจะต้องเจอกับอุปสรรคเดียวกันในสักวันหนึ่ง นั่นคือ ไฟล์โลโก้ที่มีอยู่มีเพียงไฟล์เดียวในรูปแบบ พีเอ็นจี และจำเป็นต้องนำไปใช้กับวัสดุขนาดใหญ่ หากขยายไฟล์ภาพแรสเตอร์ ขอบภาพจะเบลอ เพราะรายละเอียดไม่เคยมีอยู่ตั้งแต่แรกอยู่แล้ว
การแปลงภาพเป็นเวกเตอร์คือทางออก การแปลงพิกเซลให้เป็นเส้นทางคณิตศาสตร์ที่คมชัดในทุกขนาด สามารถเปลี่ยนสีได้ และสามารถตัดด้วยเครื่องตัดงานฝีมือได้ ข้อเสียคือ การแปลงภาพอัตโนมัติทำงานได้ดีเยี่ยมกับภาพบางภาพ แต่ให้ผลลัพธ์ที่ใช้ไม่ได้กับภาพอื่นๆ และการรู้ความแตกต่างล่วงหน้าจะช่วยประหยัดเวลาได้มาก
คู่มือนี้ครอบคลุมวิธีการประเมินภาพก่อนทำการแปลงเป็นข้อมูล วิธีการเลือกการตั้งค่าโดยคำนึงถึงวัตถุประสงค์มากกว่าการลองผิดลองถูก และวิธีการอ่านข้อมูลการวินิจฉัยที่จะบอกคุณว่า SVG พร้อมใช้งานจริงหรือไม่
ตัดสินใจว่าภาพของคุณจะสามารถแปลงเป็นภาพได้ดีหรือไม่
นี่คือขั้นตอนที่คนส่วนใหญ่ข้ามไป และเป็นขั้นตอนที่กำหนดผลลัพธ์มากกว่าการตั้งค่าใดๆ การติดตามเส้นทำงานโดยการหาขอบเขตระหว่างพื้นที่สี เมื่อขอบเขตเหล่านั้นคมชัดและมีจำนวนน้อย จะได้รูปทรงเรขาคณิตที่สะอาดตา แต่ถ้าขอบเขตเหล่านั้นไม่คมชัดหรือมีจำนวนมาก จะได้รูปทรงที่ซ้อนทับกันนับพันๆ รูปทรงที่ใกล้เคียงกับภาพโดยไม่สามารถแก้ไขได้อย่างมีความหมาย
ตัวอย่างที่ดีจะมีลักษณะร่วมกันคือ สีเรียบ ขอบที่ชัดเจน และโทนสีที่จำกัด โลโก้ ไอคอน ภาพเงา ลายเซ็น ภาพวาดเส้น สเตนซิล และภาพประกอบแบบเรียบๆ ล้วนติดตามเส้นได้อย่างสะอาดตา เพราะวาดขึ้นด้วยคุณสมบัติเหล่านั้น
ภาพถ่ายเป็นตัวอย่างที่ไม่ดีอย่างเห็นได้ชัด ภาพถ่ายมีการไล่ระดับโทนสีอย่างต่อเนื่องในทุกพิกเซล และการติดตามเส้นจะสร้างเส้นทางจำนวนมากที่ใหญ่กว่าไฟล์ต้นฉบับและไม่สามารถแก้ไขได้ การไล่ระดับสีที่เข้มข้น เงาตกกระทบที่นุ่มนวล และแสงเรืองรองโปร่งแสงก็ล้มเหลวด้วยเหตุผลเดียวกัน
ToolBuddy รายงานว่ามีความเหมาะสมในระดับจำกัด แทนที่จะแสดงผลลัพธ์ที่ไม่ดีอย่างชัดเจน หากเครื่องมือบอกว่าภาพไม่เหมาะสม การประเมินนั้นคุ้มค่ามากกว่าการเสียเวลาปรับแต่งการตั้งค่าอีกยี่สิบนาที
- แปลงได้ดี — โลโก้ ไอคอน ภาพเงา ลายเซ็น ภาพลายเส้น ภาพประกอบแบบแบน
- แปลงได้ไม่ดี — ภาพถ่าย งานศิลปะที่มีการไล่ระดับสีมาก เงาและแสงเรืองรองที่นุ่มนวล
- อยู่ในระดับปานกลาง — การสแกนรายละเอียด ซึ่งมักจะดีขึ้นหลังจากผ่านเกณฑ์
โหลดภาพของคุณและเริ่มใช้งานจากโหมดที่แนะนำ
เลือกไฟล์ พีเอ็นจี, เจพีจี, เจเพ็ก หรือ เว็บพี การวิเคราะห์จะทำงานในเครื่อง และเครื่องมือจะแนะนำโหมดการแปลงตามสิ่งที่พบในภาพ
ให้ใช้คำแนะนำนี้เป็นจุดเริ่มต้น คำแนะนำนี้ได้มาจากการพิจารณาสีและลักษณะขอบของไฟล์ภาพของคุณ ซึ่งเป็นตำแหน่งการเปิดไฟล์ที่ดีกว่าค่าเริ่มต้นที่เลือกใช้สำหรับภาพทั่วไปที่ไม่ใช่ภาพของคุณ
มีค่าที่ตั้งไว้ล่วงหน้าตามเป้าหมายสามแบบให้เลือกใช้ โดยแต่ละแบบจะแปลงผลลัพธ์ที่เป็นรูปธรรมให้เป็นการตั้งค่าที่ผ่านการทดสอบแล้ว แทนที่จะให้คุณคิดวิเคราะห์เกี่ยวกับพารามิเตอร์การติดตามในเชิงนามธรรม
| ตั้งค่าล่วงหน้า | ปรับให้เหมาะสมที่สุดสำหรับ | ใช้เมื่อ |
|---|---|---|
| SVG พร้อมสำหรับการตัด | รูปทรงตันที่แยกออกจากกัน จำนวนเส้นทางที่จัดการได้ | ผลผลิตจะถูกส่งไปยังเครื่องตัด คริคัต หรือเครื่องตัดอื่นๆ |
| การทำความสะอาดโลโก้ | เส้นโค้งเรียบเนียน มุมแหลมคม พื้นหลังโปร่งใส | การกู้คืนเครื่องหมายการค้าที่ปรับขนาดได้จากไฟล์แรสเตอร์ |
| ภาพวาดเส้นและลายฉลุ | การกำหนดค่าขาวดำด้วยการลบจุดรบกวน | ลายเซ็น ภาพร่าง และภาพวาดสีเดียว |
ปรับสี รายละเอียด มุม และการลบมุม
เมื่อผลลัพธ์แรกจำเป็นต้องปรับปรุง ตัวควบคุมสี่ตัวจะช่วยปรับแต่งได้อย่างมีประสิทธิภาพมากที่สุด และการปรับทีละตัวจะช่วยได้มากกว่าการปรับหลายตัวพร้อมกัน
จำนวนสีจะกำหนดจำนวนการเติมสีที่แตกต่างกันที่การวาดเส้นสร้างขึ้น สีที่น้อยลงจะให้ผลลัพธ์ที่เรียบง่ายและแก้ไขได้ง่ายกว่า ในขณะที่สีที่น้อยเกินไปและองค์ประกอบที่แยกจากกันจะรวมกันเป็นรูปทรงเดียว สำหรับงานตัด การควบคุมนี้มีความสำคัญมากกว่าการควบคุมอื่นๆ เพราะแต่ละสีมักจะกลายเป็นเลเยอร์การตัดที่แยกจากกัน
ระดับรายละเอียดจะกำหนดว่าเส้นทางจะติดตามขอบเดิมได้แม่นยำแค่ไหน ระดับรายละเอียดสูงจะจำลองต้นฉบับได้อย่างเที่ยงตรงและสร้างจุดเชื่อมต่อจำนวนมาก ระดับรายละเอียดต่ำจะทำให้ภาพเรียบเนียนและเรียบง่าย ซึ่งโดยทั่วไปแล้วจะดูดีกว่าสำหรับโลโก้ เพราะเป้าหมายคือรูปทรงเรขาคณิตที่สะอาดตา ไม่ใช่การบันทึกรายละเอียดที่เกิดจากการบีอัดของไฟล์ภาพแรสเตอร์อย่างเที่ยงตรง
ค่าเกณฑ์มุมจะกำหนดว่าเส้นโค้งจะกลายเป็นมุมแหลมที่จุดใด เพิ่มค่านี้สำหรับรูปทรงที่เป็นธรรมชาติและลายมือ ลดค่านี้สำหรับเครื่องหมายเรขาคณิตที่มีมุมแหลมคมอย่างแท้จริง การทำความสะอาดจะลบจุดรบกวน: พิกเซลที่กระจัดกระจายจากการสแกนหรือการบีบอัด เจพีจี ซึ่งหากไม่ลบออกจะกลายเป็นเส้นทางเล็กๆ ที่ไม่มีความหมายหลายสิบเส้น
- จำนวนสี — ใช้สีน้อยลง ให้ผลลัพธ์ที่เรียบง่ายขึ้น และเลเยอร์ที่ตัดได้สะอาดขึ้น
- รายละเอียด — ลดค่าลงเพื่อลบสิ่งผิดปกติจากการบีบอัดบนโลโก้
- ค่าเกณฑ์มุม — เพิ่มค่าสำหรับรูปทรงที่เป็นธรรมชาติ ลดค่าสำหรับเครื่องหมายเรขาคณิต
- การทำความสะอาด — ลบจุดรบกวนจากการสแกนและสิ่งผิดปกติ เจพีจี
เปรียบเทียบผลลัพธ์และอ่านข้อมูลการวินิจฉัย
พื้นที่ทำงานเปรียบเทียบแสดงมุมมองสามแบบ: แรสเตอร์ดั้งเดิม เวกเตอร์ที่เติม และโครงร่างเส้นทาง มุมมองโครงร่างเป็นมุมมองที่บอกความจริง เอาต์พุตที่เติมสีแล้วอาจดูถูกต้องในขณะที่ซ่อนรูปทรงที่ทับซ้อนกันหลายร้อยรูปที่ไม่จำเป็น ซึ่งจะทำให้ไฟล์แก้ไขได้ยากมาก
นอกจากภาพตัวอย่างแล้ว ToolBuddy ยังรายงานจำนวนเส้นทาง จำนวนโหนดโดยประมาณ จำนวนสี และขนาดของเอาต์พุต ตัวเลขเหล่านี้คือวิธีที่คุณใช้ตัดสินคุณภาพอย่างเป็นกลาง โลโก้ง่ายๆ ที่มีเส้นทางหลายร้อยเส้นแสดงว่ามีข้อผิดพลาดบางอย่าง และวิธีแก้ไขมักจะเป็นการลดจำนวนสีหรือรายละเอียดลง
เปรียบเทียบกับต้นฉบับอย่างรอบคอบ ตรวจสอบว่าเส้นบางๆ ยังคงอยู่ ข้อความขนาดเล็กยังคงอ่านได้ชัดเจน และพื้นที่ปิดล้อม เช่น ด้านในของตัวอักษร O ช่องว่างระหว่างนิ้วในภาพเงา ยังคงเป็นรูแทนที่จะเป็นรูปทรงที่เติมสี
- ใช้มุมมองโครงร่างเพื่อตรวจหาเส้นทางที่ทับซ้อนกันที่ไม่จำเป็น
- ถือว่าจำนวนเส้นทางสูงในงานศิลปะที่เรียบง่ายเป็นสัญญาณให้ลดความซับซ้อน
- ตรวจสอบว่าเส้นขีดบางๆ และตัวนับที่อยู่ภายในยังคงใช้งานได้หลังจากตรวจสอบเสร็จสิ้น
ตรวจสอบความพร้อมในการตัดก่อนส่งออกไปยังเครื่องตัด
งานศิลปะที่จะส่งไปตัดด้วยเครื่องตัดงานฝีมือมีข้อกำหนดที่นอกเหนือไปจากการดูดีบนหน้าจอ และการตรวจสอบความพร้อมในการตัดมีไว้เพื่อตรวจจับข้อผิดพลาดที่จะปรากฏขึ้นก็ต่อเมื่อเครื่องเริ่มทำงานแล้วเท่านั้น
การตรวจสอบนี้จะตรวจสอบจำนวนเส้นทางเทียบกับขีดจำกัด 5,000 เส้นทางของ คริคัต ซึ่งเป็นข้อจำกัดที่มักจะทำให้การออกแบบที่ดูดีสมบูรณ์แบบในขั้นตอนการแสดงตัวอย่างไม่สามารถใช้งานได้ นอกจากนี้ยังปฏิเสธเนื้อหาที่เครื่องตัดไม่สามารถใช้งานได้ เช่น สคริปต์ การอ้างอิงภายนอก รูปภาพแรสเตอร์ที่ฝังอยู่ และเนื้อหา SVG ที่ไม่ปลอดภัย
ให้ถือว่าการตรวจสอบนี้เป็นเพียงด่านตรวจสอบ ไม่ใช่การรับประกัน การตรวจสอบนี้สามารถตรวจจับปัญหาโครงสร้างได้อย่างน่าเชื่อถือ แต่ไม่สามารถรู้ได้ว่าการออกแบบของคุณมีเส้นที่บางเกินไปที่จะตัดด้วยไวนิล หรือมีส่วนที่เล็กเกินไปที่จะลอกออก ตรวจสอบการออกแบบด้วยตนเองก่อนที่จะใช้งานจริง
- ตรวจสอบจำนวนเส้นทางแล้วว่าตรงกับขีดจำกัด 5,000 เส้นทางของ คริคัต
- สคริปต์ การอ้างอิงภายนอก และการฝังภาพแรสเตอร์ถูกปฏิเสธ
- ยังคงต้องตรวจสอบด้วยตนเองเพื่อหาเส้นบางๆ และรายละเอียดที่ไม่สามารถกำจัดได้
ส่งออกไฟล์เวกเตอร์จริง
ไฟล์ดาวน์โหลดมีเส้นทางเวกเตอร์แท้จริง ซึ่งสำคัญกว่าที่คิด เพราะข้อผิดพลาดทั่วไปของโปรแกรมแปลงไฟล์ออนไลน์คือการห่อภาพบิตแมปต้นฉบับไว้ภายในตัวห่อ SVG ซึ่งในทางเทคนิคแล้วเป็นไฟล์ SVG แต่ในทางปฏิบัติยังคงเป็นภาพแรสเตอร์ที่เบลอเมื่อขยาย
เนื่องจากเอาต์พุตเป็นรูปทรงเรขาคณิตจริง จึงเปิดเป็นเส้นทางที่แก้ไขได้ในแอปพลิเคชันการออกแบบที่เข้ากันได้ คุณสามารถเปลี่ยนสีรูปร่างแต่ละรูป ปรับโหนด แยกเลเยอร์สำหรับการตัดหลายสี และปรับขนาดได้โดยไม่สูญเสียคุณภาพ
กระบวนการทั้งหมดทำงานบนอุปกรณ์ของคุณ เอ็นจิ้นการติดตามถูกคอมไพล์เป็น WebAssembly และทำงานภายในตัวประมวลผลของเบราว์เซอร์ ดังนั้นพิกเซลต้นฉบับและเนื้อหา SVG ที่สร้างขึ้นจะไม่ถูกส่งออกจากเครื่องของคุณ และไม่มีการแปลงเป็นเวกเตอร์บนคลาวด์ API เข้ามาเกี่ยวข้อง สำหรับโลโก้ของลูกค้า ผลิตภัณฑ์ที่ยังไม่เปิดตัว และทรัพย์สินของแบรนด์ที่อยู่ภายใต้ข้อตกลงการรักษาความลับ นี่มักจะเป็นปัจจัยตัดสินใจ
- ผลลัพธ์คือรูปทรงเรขาคณิตของเส้นทาง ไม่ใช่บิตแมปที่ห่อหุ้มด้วย SVG
- สามารถแก้ไขและเปลี่ยนสีได้ในแอปพลิเคชันเวกเตอร์ที่เข้ากันได้
- การติดตาม วาส์ม ในตัวประมวลผลของเบราว์เซอร์ — ไม่มีคลาวด์ API ไม่มีการอัปโหลด
เขียนโดย
Ankit Kumar
วิศวกรซอฟต์แวร์อาวุโสและผู้ก่อตั้ง ToolBuddy
วิศวกรรมยูทิลิตี้เน้นเบราว์เซอร์เป็นหลักโดยไม่มีข้อกำหนดในการอัปโหลดโดยใช้เทคโนโลยี WebAssembly, Web Audio และ Canvas