วิธีเวกเตอร์ไอคอน
อ่าน 6 นาที · เผยแพร่ 2 ส.ค. 2569 · ปรับปรุง 7 ต.ค. 2569
ไอคอนต้องมีชีวิตอยู่ในทุกขนาดพร้อมกัน ไฟล์เดียวกันเป็นรายการ 16 พิกเซลในเมนู ปุ่ม 24 พิกเซล ไทล์แอป 512 พิกเซล และบางครั้งเป็นโปสเตอร์ มันได้ผลเฉพาะเมื่อเรขาคณิตข้างในซื่อสัตย์: โหนดน้อย เส้นทางปิด และไม่มีขอบมัวตกค้างจากการลบขอบของราสเตอร์ตัวตั้งต้น
การเวกเตอร์ไอคอนจึงเป็นเรื่องของสิ่งที่คุณป้อนเข้าไปและสิ่งที่คุณตัดแต่งทีหลังมากกว่าตัวการแปลงเอง คู่มือนี้ครอบคลุมทั้งสองอย่าง
เริ่มจากราสเตอร์ที่ใหญ่ที่สุดที่มี แล้วทำให้แบน
การลบขอบคือศัตรูตัวหลักที่นี่ บนไอคอน 32 พิกเซล พิกเซลเทานุ่มตามแนวทแยงทุกเส้นคือส่วนใหญ่ของภาพ และตัวไล่เส้นไม่มีทางรู้ว่ามันคือขอบแข็งที่ตั้งใจมากกว่าโทนกลางจริง ๆ ให้เวอร์ชัน 512 พิกเซลกับเขา และขอบเดียวกันจะเป็นการเปลี่ยนผ่านหนึ่งพิกเซลท่ามกลางพิกเซลสะอาดสี่สิบเก้าตัว — รูปทรงชัดเจนไม่กำกวม
ถ้าไอคอนเป็นขาวดำ ให้เป็นขาวดำจริง ๆ ก่อนแปลง: ดำล้วนบนพื้นโปร่งใส หรือดำล้วนบนขาว ไม่มีเงาตก ไม่มีแสงเรืองในเนื้อ ทุกเอฟเฟกต์เหล่านั้นกลายเป็นรูปทรงในผลลัพธ์ และรูปทรงในผลลัพธ์คือโหนดที่คุณต้องหาและลบ
ตัดสินผลลัพธ์ด้วยจำนวนโหนด ไม่ใช่หน้าตาที่ 100%
ในขนาดที่คุณมองอยู่ การไล่เส้นแทบทุกแบบดูดีหมด สิ่งที่สำคัญคือจำนวนโหนด: เปิดเส้นทางแล้วนับจุด ไอคอนที่วาดดีมีจุดเฉพาะที่เส้นโค้งเปลี่ยนทิศจริง ๆ — สี่เหลี่ยมมุมมนมีแปด วงกลมมีสี่ ทรงคชสารมีสามหรือหก ถกรูปทรงง่าย ๆ กลับมาหกสิบจุด แปลว่าตัวไล่เส้นกำลังไล่ตาม noise ของพิกเซล และรูปทรงนั้นจะเรนเดอร์ช้า แก้ยาก และดูผิดจาง ๆ เมื่อขยาย
ใน Lite ขึ้นไป ตัวควบคุมรายละเอียดคือสิ่งที่กำกับเรื่องนี้โดยตรง: ลดรายละเอียดเพื่อรวมพื้นที่แรงขึ้นและได้โหนดน้อยและสะอาดกว่า ค่อย ๆ ลดลงจนมุมเพิ่งเริ่มนุ่ม แล้วถอยหลังหนึ่งขั้น ใน Trial ระดับถูกเลือกอัตโนมัติ และทางมีผลต่อมันคือคุณภาพของต้นฉบับ
จัดวางลงกริดพิกเซลทีหลัง ไม่ใช่ก่อน
ชุดไอคอนมีกริดของตัวเอง — มัก 24×24 พร้อมขอบปลอดภัยสองพิกเซล หรือ 16×16 สำหรับอินเทอร์เฟซหนาแน่น เส้นทางที่ไล่เส้นมาลงที่ใดก็ตามที่พิกเซลเคยอยู่ ซึ่งใกล้กริดนั้นแต่ไม่ตรง และที่ขนาดเรนเดอร์เล็ก 'ใกล้' คือสิ่งที่ทำให้ไอคอนหนึ่งในแถวดูหนักกว่าเพื่อนครึ่งพิกเซล
สแนปเส้นทางที่เสร็จแล้วเข้าพิกัดเต็มในโปรแกรมแก้ไข และตั้ง viewBox ของ SVG เป็นกริดของคุณ งานนี้ตอนแรกยุ่งยากแต่หลังจากนั้นเป็นกลไก และมันคือสิ่งที่แยกชุดไอคอนที่ดูออกแบบมาจากชุดที่ดูแปลงมา
น้ำหนักเดียว สไตล์เดียว ไฟล์เดียว
ถ้าคุณกำลังสร้างทั้งชุดใหม่ แปลงทั้งหมดเป็นชุดเดียวเพื่อให้ผ่านการตั้งค่าเหมือนกันเป๊ะ แล้วปรับน้ำหนักเส้นให้เท่ากันด้วยมือทั่วทั้งชุด ครอบครัวไอคอนอ่านออกว่าเป็นครอบครัวเพราะเส้นของมันเข้ากัน; ชุดที่ไล่เส้นแยกกันหลายรอบจะไม่เข้ากัน และความไม่เข้ากันนั้นมองเห็นแม้ไม่มีไอคอนตัวไหนดูผิดเมื่ออยู่โดดลำพัง
การแปลงเป็นชุดเริ่มตั้งแต่ Pro ซึ่งรับ 30 ไฟล์พร้อมกัน ต่ำกว่านั้นไฟล์แปลงทีละไฟล์ ซึ่งสำหรับยี่สิบชิ้นคือการคลิกไม่กี่นาที ไม่ใช่อุปสรรค
ทีละขั้นตอน
- 01
หาราสเตอร์เวอร์ชันใหญ่ที่สุด
512 พิกเซลขึ้นไปถ้ามี ต้นฉบับ 32 พิกเซลส่วนใหญ่คือการลบขอบ และการลบขอบคือสิ่งที่ตัวไล่เส้นพลาด
- 02
ทำให้เหลือสีเดียว
เอาเงาตก แสงเรืองใน และการไล่เฉดออกก่อนแปลง ทุกอย่างกลายเป็นรูปทรงพิเศษเพิ่มในผลลัพธ์
- 03
แปลงเป็น SVG
อัปโหลดแล้วดาวน์โหลดผลลัพธ์ SVG เป็นฟอร์แมตพื้นบ้านของไอคอนทั้งเว็บและแอป
- 04
ตรวจจำนวนโหนด
เปิดเส้นทางในโปรแกรมแก้ไข รูปทรงง่าย ๆ ควรมีจุดไม่กี่จุด ไม่ใช่หลายสิบ ถ้ามีหลายสิบ แปลว่าต้นฉบับมี noise
- 05
สแนปเข้ากริดไอคอนของคุณ
จัดเส้นทางเข้าพิกัดเต็มและตั้ง viewBox เป็นขนาดกริดของคุณ ไอคอนจึงเรนเดอร์คมที่ 16 และ 24 พิกเซล
ปัญหาที่พบบ่อย
- ไอคอนดูเบลอที่ 16 พิกเซลทั้งที่เป็นเวกเตอร์
- เส้นทางของมันไม่อยู่บนกริดพิกเซล ตัวเรนเดอร์จึงลบขอบทุกเส้น สแนปพิกัดเป็นเลขเต็มและตั้ง viewBox ให้ตรงกริดของคุณ
- รูปทรงง่าย ๆ กลับมาพร้อมโหนดหลายสิบ
- ต้นฉบับมีการลบขอบหรือ noise จาก JPEG ที่ตัวไล่เส้นอ่านเป็นรายละเอียด ใช้ต้นฉบับที่ใหญ่กว่าและสะอาดกว่า; ใน Lite ขึ้นไป ลดระดับรายละเอียด
- มุมที่ควรคมกลับกลม
- ความเรียบสูงเกินไป ใน Lite ขึ้นไป ลดลงมาหนึ่งขั้น — มุมจริงยังคมได้ถึงระดับแรง มีแต่สูงสุดเท่านั้นที่มนทุกอย่าง
- ไอคอนมีขอบลาง ๆ สีต่างออกไป
- นั่นคือขอบมัวจากการลบขอบของต้นฉบับ ถูกไล่เส้นเป็นรูปทรงบาง ๆ ของตัวเอง ลบมันทิ้งในโปรแกรมแก้ไข และครั้งหน้าทำต้นฉบับให้เป็นสีเดียวขอบแข็งก่อน
คำถามที่พบบ่อย
- ต้นฉบับไอคอนควรใหญ่แค่ไหน
- ใหญ่เท่าที่มี — 512 พิกเซลขึ้นไปสบาย ๆ ต่ำกว่าราว 64 พิกเซล การลบขอบกินภาพเป็นส่วนใหญ่และตัวไล่เส้นแยกขอบนุ่มกับขอบจริงไม่ออก ซึ่งเป็นต้นเหตุของเส้นโค้งตุ่น ๆ
- แปลงทั้งชุดไอคอนก้อนเดียวได้ไหม
- การแปลงเป็นชุดเริ่มตั้งแต่ Pro ซึ่งรับ 30 ไฟล์พร้อมกัน Studio รับ 50 และ Agency 100 การแปลงทั้งชุดในก้อนเดียวสำคัญกว่าความเร็ว — ทุกไฟล์ผ่านการตั้งค่าเหมือนกันเป๊ะ ไอคอนจึงออกมาเข้ากันเอง
- ความโปร่งใสจะรอดไหม
- รอด จากต้นฉบับที่มีมา พื้นที่โปร่งใสของ PNG หรือ WebP ว่างเปล่าต่อไปใน SVG ส่วน JPEG ไม่มีความโปร่งใสเลย ไอคอนจาก JPEG จึงมาพร้อมพื้นหลังเป็นรูปทรงทึบที่ลบได้
- ไอคอนควรเป็น SVG หรือฟอนต์
- SVG ฟอนต์ไอคอนเป็นเพียงวิธีเลี่ยงของยุคเบราว์เซอร์ที่จบไปแล้ว: ทำสีหลายสีไม่ได้ พังเมื่อไฟล์ฟอนต์หาย และโปรแกรมอ่านหน้าจออ่านมันเป็นข้อความ แปลงเป็น SVG แล้วใช้แบบ inline หรือ sprite
คู่มือที่เกี่ยวข้อง
- วิธีเวกเตอร์โลโก้ — สร้างโลโก้ที่มีอยู่แค่ไฟล์ JPG เล็ก ๆ ใหม่เป็นเส้นโค้งสะอาดพร้อมพิมพ์ ด้วยสีแบรนด์ที่ตรงเป๊ะ
- วิธีเวกเตอร์พิมพ์เขียวและแบบเทคนิค — แปลงแบบสแกนและแบบวงจรเป็นลายเส้นที่แก้ไขได้ โดยไม่เชื้อความผิดพลาดของเครื่องสแกน
- วิธีเวกเตอร์ใบปลิวหรือโปสเตอร์สำหรับงานขนาดใหญ่ — กู้งานออกแบบเรียบกลับมาสำหรับ A1 และใหญ่กว่าโดยไม่มีขอบเบลอ — และรู้ว่าส่วนไหนไม่ควรแปลง