แปลงพิกเซลอาร์ตเป็นเวกเตอร์โดยรักษาขอบคม

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

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

หากเป้าหมายจริงเพียงแสดงพิกเซลอาร์ตคมบนเว็บหรือเกม คุณอาจไม่ต้องใช้ SVG เลย PNG ขนาดถูกต้องที่ขยายแบบ nearest-neighbor มักเล็กกว่าและตรงต้นฉบับกว่า บนเว็บ คุณสมบัติ image-rendering มีพฤติกรรม crisp-edges และ pixelated ที่ออกแบบให้รักษาขอบคม

เลือกผลก่อนเลือกเครื่องมือ

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

สามผลลัพธ์ที่แก้สามงานต่างกัน

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

การเก็บตารางกับการทำขอบเรียบเป็นคนละงาน

เส้นทางที่ 1: รักษาตารางพิกเซลตรงทุกจุด

การแปลงตรงที่สุดเปลี่ยนเซลล์แรสเตอร์เป็นสี่เหลี่ยมเวกเตอร์ พิกเซลแดงกลายเป็นสี่เหลี่ยมแดง แถวพิกเซลแดงติดกันอาจคงเป็นสี่เหลี่ยมแยกหรือรวมเป็นสี่เหลี่ยมใหญ่เมื่อไม่เปลี่ยนเงาร่าง

ก่อนเริ่ม หาขนาดตารางจริงของงาน สไปรต์ที่แสดง 800 คูณ 800 พิกเซลอาจเริ่มจากตาราง 32 คูณ 32 ที่ขยายด้วย nearest-neighbor โครงสร้าง 32 คูณ 32 คือสิ่งที่ควรทำซ้ำ ไม่ใช่ขนาดแสดงที่ขยายแล้ว

กระบวนการ Object Mosaic ของ Illustrator

Adobe ระบุวิธีในตัวสำหรับแปลงบิตแมปฝังเป็นโมเสก:

1. วางพิกเซลอาร์ตต้นฉบับใน Illustrator แล้วฝังภาพ
2. เลือกภาพแล้วใช้ Object > Create Object Mosaic
3. ตั้งจำนวนแผ่นให้ตรงตารางพิกเซลเดิมเมื่อทราบ
4. ใช้แผ่นสี่เหลี่ยมจัตุรัสและผลลัพธ์สี
5. เก็บแรสเตอร์ต้นฉบับจนตรวจโมเสกแล้ว จากนั้นลบหรือซ่อน
6. เทียบเงาร่างนอก ช่องว่างภายใน และชุดสีกับต้นฉบับที่ซูมสูง

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

โมเสกอาจตรงโครงสร้างแต่ไม่มีประสิทธิภาพ สไปรต์ 64 คูณ 64 มี 4,096 เซลล์ก่อนรวม ลบเซลล์ที่โปร่งใสเต็มที่ รวมสี่เหลี่ยมสีเดียวติดกันเมื่อทำได้ และอย่าเก็บวัตถุมองไม่เห็นใน SVG สุดท้าย

เส้นทางที่ 2: สร้าง SVG ตารางโดยไม่ใช้ Illustrator

สร้างไฟล์ชนิดเดียวกันด้วยสคริปต์ที่เข้าใจพิกเซลหรือเครื่องมือเฉพาะทางได้ หลักการสำคัญกว่าแอป:

1. อ่านต้นฉบับที่ขนาดตารางดั้งเดิม
2. แปลงทุกพิกเซลที่ไม่โปร่งใสเป็นสี่เหลี่ยมเวกเตอร์ตรงตำแหน่ง
3. รักษาค่าสีโดยไม่ลบรอยหยัก
4. รวมเซลล์ติดกันเฉพาะเมื่อรูปทรงรวมให้ตารางที่เห็นเหมือนเดิม
5. ส่งออก SVG พร้อม viewBox ตรงกับขนาดตารางเดิม
6. ทดสอบ SVG ที่ขนาดแสดงเป็นจำนวนเต็มและไม่เต็ม

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

หากถนัดมาร์กอัป SVG สไปรต์จิ๋วสร้างใหม่ด้วย <rect> ด้วยมือได้ สมเหตุสมผลสำหรับไอคอน 12 คูณ 12 แต่ไม่คุ้มเวลาช่วงบ่ายสำหรับฉากละเอียด

เส้นทางที่ 3: ตั้งใจทำรูปทรงให้เรียบ

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

หากตั้งใจตีความแบบเรียบ PerfectVector เหมาะกับเส้นทางขอบ อัปโหลดเวอร์ชัน nearest-neighbor ใหญ่ที่สุด ที่มี แล้วประเมินเป็นภาพประกอบใหม่:

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

เส้นทางนี้เปลี่ยนงาน เก็บ PNG ต้นฉบับคู่ SVG เพื่อไม่ให้ใครเข้าใจว่าการตีความเวกเตอร์เป็นฉบับเก็บรักษาตรงทุกจุด

ปัญหาเตรียมภาพที่ทำให้ทุกเส้นทางแย่ลง

ต้นฉบับถูกปรับขนาดแบบทำให้เรียบ กลับไปสไปรต์เดิมหรือปรับด้วย nearest-neighbor เมื่อสีขอบผสมใหม่ติดในภาพแล้ว กู้ตารางเดิมยากขึ้น

ไฟล์เป็น JPG การบีบอัดสร้างบล็อกสีและรอยขอบซ้อนจากการบีบอัดรอบขอบพิกเซลคม ใช้ PNG ต้นฉบับเมื่อทำได้

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

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

เว็บไซต์ต้องใช้เวกเตอร์ไหม?

ไม่จำเป็น หากเป็นสไปรต์เกมหรือไอคอนอินเทอร์เฟซ PNG อาจยังเป็นต้นฉบับที่ถูก ใช้แอสเซ็ตขนาดเดิม ขยายเป็นจำนวนเท่าเต็มเมื่อทำได้ และตั้งเบราว์เซอร์หรือเอนจินให้ประมาณค่าแบบ pixelated หรือ nearest-neighbor

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

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

ตรวจสุดท้าย

ก่อนส่ง เทียบกับต้นฉบับที่ขนาดเดิมและขนาดผลลัพธ์ที่ต้องการ

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

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

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

1. Adobe Illustrator — สร้างภาพร่างและโมเสก — คำสั่ง Object Mosaic แผ่นสี่เหลี่ยม ผลลัพธ์สี และข้อกำหนดแรสเตอร์ฝัง
2. MDN — CSS image-rendering — การแสดงแบบ nearest-neighbor สำหรับพิกเซลอาร์ตเว็บ
3. W3C — ข้อกำหนด PNG ฉบับที่สาม — โมเดลแรสเตอร์ไม่สูญเสียข้อมูลและช่องอัลฟาของ PNG
4. W3C — รูปทรงพื้นฐาน SVG — เรขาคณิตสี่เหลี่ยมสำหรับ SVG เซลล์ตารางตรงต้นฉบับ
5. W3C — ระบบพิกัด SVG และ viewBox — การจับคู่ระบบพิกัดตารางเดิมกับ viewport SVG

---

หากต้องการขอบเรียบแทนเก็บตาราง นำภาพผ่าน PerfectVector แล้วเทียบเงาร่าง ช่องหนึ่งพิกเซล และรายละเอียดเล็กกับต้นฉบับพิกเซลก่อนใช้