อินเทอร์เฟซ

วิธีเวกเตอร์ไอคอน

อ่าน 6 นาที · เผยแพร่ 2 ส.ค. 2569 · ปรับปรุง 7 ต.ค. 2569

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

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

เริ่มจากราสเตอร์ที่ใหญ่ที่สุดที่มี แล้วทำให้แบน

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

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

ตัดสินผลลัพธ์ด้วยจำนวนโหนด ไม่ใช่หน้าตาที่ 100%

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

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

จัดวางลงกริดพิกเซลทีหลัง ไม่ใช่ก่อน

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

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

น้ำหนักเดียว สไตล์เดียว ไฟล์เดียว

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

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

ทีละขั้นตอน

  1. 01

    หาราสเตอร์เวอร์ชันใหญ่ที่สุด

    512 พิกเซลขึ้นไปถ้ามี ต้นฉบับ 32 พิกเซลส่วนใหญ่คือการลบขอบ และการลบขอบคือสิ่งที่ตัวไล่เส้นพลาด

  2. 02

    ทำให้เหลือสีเดียว

    เอาเงาตก แสงเรืองใน และการไล่เฉดออกก่อนแปลง ทุกอย่างกลายเป็นรูปทรงพิเศษเพิ่มในผลลัพธ์

  3. 03

    แปลงเป็น SVG

    อัปโหลดแล้วดาวน์โหลดผลลัพธ์ SVG เป็นฟอร์แมตพื้นบ้านของไอคอนทั้งเว็บและแอป

  4. 04

    ตรวจจำนวนโหนด

    เปิดเส้นทางในโปรแกรมแก้ไข รูปทรงง่าย ๆ ควรมีจุดไม่กี่จุด ไม่ใช่หลายสิบ ถ้ามีหลายสิบ แปลว่าต้นฉบับมี noise

  5. 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

คู่มือที่เกี่ยวข้อง

คุกกี้

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