วิธีเวกเตอร์โลโก้: จาก PNG เป็น SVG หลายสี ฟรี
เทคนิคฉบับเต็ม ไม่ใช่แค่เปลี่ยนนามสกุลไฟล์: เลือกพรีเซ็ตไหน เก็บกี่สี SVG แบบเลเยอร์ให้อะไร และตรวจผลลัพธ์อย่างไร ฟรี ไม่ต้องสมัครสมาชิก
การเวกเตอร์โลโก้หมายถึงอะไรกันแน่
การเวกเตอร์โลโก้คือการสร้างมันใหม่เป็นรูปทรงเรขาคณิต - เส้นทาง ไม่ใช่พิกเซล - เพื่อให้คมชัดตั้งแต่ favicon 16 พิกเซลจนถึงป้ายหน้าร้าน ทำถูกวิธี SVG จะเก็บทุกสีของต้นฉบับไว้เป็นเลเยอร์แก้ไขได้ของตัวเอง ถ้าไฟล์พร้อมแล้ว ตัวแปลงโลโก้ออนไลน์ฟรีจัดการเสร็จในหนึ่งนาที ส่วนที่เหลือของคู่มือนี้คือวิธีให้ได้ผลลัพธ์ที่ส่งต่อให้โรงพิมพ์ นักพัฒนา หรือเครื่องตัดได้เลย
คู่มือข้างเคียงอีกสองฉบับช่วยให้ฉบับนี้โฟกัส: การแปลงราสเตอร์ทุกชนิดอยู่ในคู่มือ แปลงรูปภาพใดก็ตามเป็น SVG ส่วนการกู้โลโก้เล็ก เบลอ หรือแตกเป็นพิกเซลมีเวิร์กโฟลว์กู้คืนของตัวเอง ลิงก์อยู่ด้านล่าง ที่นี่เราเจาะงานเฉพาะของโลโก้: จำนวนสี ผลลัพธ์แบบเลเยอร์ และการตรวจคุณภาพ
คำเตือนก่อนเริ่ม: บาง "ตัวแปลง" ยื่นไฟล์ .svg ที่แท้จริงคือ PNG ของคุณห่ออยู่ในแท็ก <image> แบบ base64 เปิดไฟล์ในโปรแกรมแก้ไขข้อความดู: ถ้าเห็นบล็อกโค้ดยักษ์ก้อนเดียวแทนที่จะเป็นอิลิเมนต์ <path> แปลว่าคุณได้บิตแมปที่เปลี่ยนชื่อ ไม่ใช่เวกเตอร์
ผลลัพธ์จริงจากตัวแปลงไฟล์
โลโก้สามแบบที่เดินเข้าประตูมา
พรีเซ็ตที่เลือกขึ้นกับว่าคุณถือโลโก้สามแบบนี้แบบไหนอยู่ ตัดสินใจเรื่องนี้ก่อน - มันคือคานงัดคุณภาพที่ใหญ่ที่สุดที่มี
แบรนด์สีเดียว
โลโก้ตัวอักษร ไอคอน ตราประทับ: สีเดียวบนพื้นเรียบ เคสที่ง่ายที่สุด: พรีเซ็ตขาวดำให้รูปทรงสะอาดหนึ่งรูป ไฟล์เล็กที่สุดเท่าที่เป็นไปได้ และตรงกับที่ช่างแกะสลัก เครื่องตัดวินิล และสเตนซิลต้องการ
โลโก้หลายสีแบน
สองถึงหกสีทึบ ไม่มีไล่เฉด - โลโก้ลูกค้าที่พบบ่อยที่สุด พรีเซ็ตโปสเตอร์ถูกสร้างมาเพื่อมัน: แต่ละโซนสีกลายเป็นเส้นทางเวกเตอร์ของตัวเอง ซ้อนกันเป็นเลเยอร์ คู่มือทั่วไปมักทำเคสนี้พังด้วยการบีบทุกอย่างเป็นขาวดำ
ตราสัญลักษณ์ไล่เฉดจัด
ประกายเมทัลลิก เงานุ่ม เอฟเฟกต์ 3D การเทรซทำได้แค่ประมาณไล่เฉดเป็นแถบสี พรีเซ็ตรูปถ่ายทำได้ดีที่สุด แต่ให้คาดหวังเวอร์ชันโปสเตอร์สไตลิชของตรา ไม่ใช่ฝาแฝด - และไฟล์ที่หนักกว่ามาก
พรีเซ็ตไหนสำหรับโลโก้แบบไหน
จับคู่โลโก้ของคุณกับแถวหนึ่งแล้วหยิบพรีเซ็ต - การตัดสินใจทั้งหมดอยู่ในตารางเดียว:
| โลโก้ของคุณ | พรีเซ็ต | สิ่งที่ได้ |
|---|---|---|
| โลโก้ตัวอักษร ไอคอน หรือตราประทับสีเดียว | ขาวดำ | รูปทรงสะอาดหนึ่งรูป ไฟล์มินิมอม พร้อมตัดทันที |
| 2-6 สีทึบ (โลโก้ลูกค้าส่วนใหญ่) | โปสเตอร์ | เส้นทางแก้ไขได้สีละหนึ่งเส้น |
| ไล่เฉด เมทัลลิก เงานุ่ม | รูปถ่าย | ไล่เฉดประมาณด้วยแถบสี |
| โลโก้บนพื้นหลังยุ่งหรือมีสี | เตรียมก่อน | ครอปหรือตัดพื้นหลังออกแล้วค่อยเทรซ |
| ภาพหน้าจอจิ๋ว กว้างต่ำกว่า ~200 px | หาไฟล์ที่ใหญ่กว่า | ไม่มีพรีเซ็ตไหนประดิษฐ์ความละเอียด - ดูคู่มือโลโก้เบลอ |
| โลโก้เซริฟบางหรือรายละเอียดเยอะ | โปสเตอร์ + รายละเอียดสูง | รายละเอียดเส้นทางสูงช่วยเส้นบางให้มีชีวิต |
สงสัยไหมว่าพิกเซลเจออะไรใต้แต่ละทางเลือก? กลไกถูกชำแหละไว้ใน การเวกเตอร์ทำอะไรกันแน่.
SVG ควรเก็บกี่สี?
นี่คือการตัดสินใจที่คู่มือทั่วไปข้าม - และมันกำหนดทั้งความเที่ยงและน้ำหนักไฟล์ ทุกสีที่เพิ่มมาเพิ่มเส้นทาง ฝีมืออยู่ที่การหยุดที่จำนวนสีที่โลโก้มีจริง:
- 1-2 สี: ขาวดำ. ถ้าแบรนด์คือสีเดียวบวกพื้นหลัง การเทรซแบบสีจ่ายแค่ค่าสัญญาณรบกวนของแอนติอะเลียสซิ่ง หนึ่งรูปทรง ไฟล์เบาดังขนนก
- 3-8 สีทึบ: โปสเตอร์. จุดหวานของโลโก้จริง สีแบรนด์อยู่รอดเป็นเลเยอร์มีชื่อที่ระบายใหม่ได้ หมอก JPEG ระหว่างรูปทรงถูกดูดซับ ไม่ถูกเทรซ
- หลายสิบเฉดสี: รูปถ่าย. เฉพาะตราไล่เฉด ความเที่ยงขึ้นแต่น้ำหนักก็ขึ้น: SVG รูปถ่ายอาจหนักกว่าพี่น้องโปสเตอร์สิบเท่าและยังดูสไตลิชอยู่
กฎนิ้วโป้ง: นับสีจากคู่มือแบรนด์ บวกหนึ่งสำหรับพื้นหลัง แล้วหยุดตรงนั้น ถ้าคุณบอกจุดประสงค์ของสีไม่ได้ ตัวเทรซก็ไม่ควรวาดมัน
SVG แบบเลเยอร์: ทำไมเส้นทางสีละเส้นถึงสำคัญ
เปิดโลโก้ SVG ที่เทรซดีในโปรแกรมแก้ไขข้อความ คุณจะเจอกองอิลิเมนต์ <path> เล็ก ๆ - สีละหนึ่ง ตัวใหญ่ก่อน โครงสร้างนี้ไม่ใช่รายละเอียดการ implement: มันคือสิ่งที่ทำให้ไฟล์เป็น asset ใช้งานได้ ไม่ใช่แค่รูปของ asset
เพราะแต่ละสีเป็นเส้นทางของตัวเอง การรีแบรนด์กลายเป็นการแก้ไขสองนาที: เลือกเลเยอร์ ใส่สีทับใหม่ เอ็กซ์พอร์ต - ใน Inkscape, Illustrator หรือโปรแกรมใดที่เปิด SVG ได้ บนเว็บ การชี้สีของเลเยอร์ไปที่ currentColor ทำให้โลโก้ตามธีมหน้าเว็บโดยอัตโนมัติ ผลเทรซที่ถูกบีบแบนไม่ให้อะไรเลย: ระบายใหม่ที = เทรซใหม่จากศูนย์
วิธีเวกเตอร์โลโก้ฟรี (4 ขั้น)
ไม่ต้องมีบัญชี ไม่ต้องติดตั้ง ไม่มีลายน้ำ:
- อัปโหลดโลโก้ - ลาก PNG, JPG, WebP หรือ BMP มาวาง เวอร์ชันใหญ่และสะอาดที่สุดที่มีเทรซได้ดีที่สุด
- เลือกพรีเซ็ตตามตารางด้านบน - ขาวดำสำหรับแบรนด์สีเดียว โปสเตอร์สำหรับโลโก้หลายสีแบน รูปถ่ายสำหรับตราไล่เฉด
- ตั้งจำนวนสีตามพาเลตต์แบรนด์ - ประมาณสีที่ใช้ออกแบบโลโก้ บวกพื้นหลัง
- เช็กพรีวิวด้วยเช็กลิสต์ด้านล่างแล้วดาวน์โหลด SVG - อิลิเมนต์ <path> ของแท้ พร้อมใช้พิมพ์ เว็บ หรือเครื่องตัด
ใต้ฝากระโปรง การแปลงรันด้วยเอนจินเทรซอัตโนมัติที่พัฒนาจาก VTracer ตัวเทรซ open source ภาษา Rust โลโก้ของคุณถูกสร้างใหม่เป็นรูปทรงเวกเตอร์ซ้อนเลเยอร์ - ไม่มีการห่อหุ้มหรือเปลี่ยนชื่อ
ผลเทรซดีไหม? เช็กคุณภาพ 60 วินาที
ก่อนส่งไฟล์ วิ่งผ่านสี่การเช็ก รวมกันใช้เวลาราวนาทีและจับทุกข้อผิดพลาดที่พบบ่อย:
- ซูม 400 %. ขอบต้องยังเป็นเส้นโค้งเรียบ ขั้นบันไดหรือหมอกแปลว่าต้นฉบับเล็กเกินหรือจำนวนสีสูงเกิน
- ย่อเท่า favicon. ถ้าแบรนด์อ่านไม่ออกที่ 16 px ผลเทรซเที่ยงแต่โลโก้ต้องการไอคอนเวอร์ชันกระชับ - เทรซเฉพาะส่วนสัญลักษณ์แยกต่างหาก
- เช็กสี. ทุกสีแบรนด์ต้องอ่านออกว่าเป็นสีนั้นเอง โทนเพี้ยนแปลว่าตัวเทรซเผียสีไปกับแอนติอะเลียสซิ่ง - ลดจำนวนลงแล้วเทรซใหม่
- ชั่งน้ำหนักไฟล์. SVG โลโก้ควรหนักไม่กี่ KB หลักสิบ KB แปลว่าตัวเทรซวาดสัญญาณรบกวน น้ำหนักนั้นจะตามไฟล์ไปทุกหน้าที่โหลดมัน
การทดสอบ favicon คืออันที่คนข้ามไปแล้วเสียใจ: เวกเตอร์ที่ใช้ได้แค่ขนาดเต็มไม่ปกป้องอะไรที่ PNG ความละเอียดสูงไม่ปกป้องอยู่แล้ว
เมื่อการเทรซโลโก้ใช้ไม่ได้ - และควรทำอะไรแทน
สามสถานการณ์พาคนมาที่คู่มือนี้ทั้งที่ตัวเทรซพูดตรง ๆ คือเครื่องมือผิด:
- ตราไล่เฉดจัด. การเทรซประมาณไล่เฉดเป็นแถบ ถ้าประกายนั่นคือแบรนด์ ขอเวกเตอร์ต้นฉบับจากลูกค้าหรืออยู่กับราสเตอร์ต่อ - SVG แบบแถบอาจดูแย่กว่า PNG คมชัด
- ไฟล์เดียวที่มีคือภาพหน้าจอ 150 พิกเซล. ไม่มีพรีเซ็ตไหนประดิษฐ์พิกเซล แต่อัปสเกลไม่ใช่ทางเดียว: เวิร์กโฟลว์กู้คืนใน คู่มือแก้โลโก้เบลอ รีดจากไฟล์เล็กได้มากกว่าการเทรซตรง ๆ อีกเยอะ
- จริง ๆ มันคือรูปถ่ายที่มีตัวอักษรทับ. รูปถ่ายต้องการพรีเซ็ตและความคาดหวังต่างออกไป - คู่มือรูปถ่ายเป็น SVG ครอบคลุมเขตนั้น
เส้นแบ่ง: การเทรซเปลี่ยนรูปทรงสะอาดให้สะอาดยิ่งขึ้น พอต้นทางไม่มีรูปทรงสะอาด ทางแก้คือต้นฉบับที่ดีกว่าหรือวาดใหม่ - ไม่ใช่เพิ่มการตั้งค่า
Illustrator vs Inkscape vs ตัวแปลงออนไลน์ฟรี
ทั้งสามทางนำไปที่ SVG เหมือนกัน ต่างที่ต้นทุน ความชันของการเรียนรู้ และสิ่งที่แก้ไขได้ทีหลัง:
| เครื่องมือ | เหมาะกับ | ระวัง |
|---|---|---|
| Adobe Illustrator | ควบคุมมือเต็มที่: วาดเส้นทางใหม่ด้วยมือ สีแบรนด์เป๊ะ ส่งโรงพิมพ์ | ค่าสมาชิกรายเดือนเพื่อสิ่งที่ส่วนใหญ่คือคลิก Image Trace ครั้งเดียว |
| Inkscape (ฟรี) | เทรซในเครื่อง แก้ไขและเก็บกวาดเส้นทางโดยไม่มีค่าซอฟต์แวร์ | ความชันการเรียนรู้ของโปรแกรมเต็มรูปแบบ หลายสีต้องใช้แท็บมัลติสแกน |
| ตัวแปลงออนไลน์ | โลโก้หนึ่งอัน หนึ่งนาที ไม่ต้องติดตั้ง - พรีเซ็ตสีปรับสำหรับโลโก้ ผลลัพธ์แบบเลเยอร์ | งานแบตช์และเก็บกวาดหนักยังเป็นงานเดสก์ท็อป โลโก้ลับตรวจนโยบายความเป็นส่วนตัว |
บันทึกตรงไปตรงมา: Image Trace ของ Illustrator กับ Trace Bitmap ของ Inkscape รันเอนจินชนิดเดียวกับตัวเทรซออนไลน์ ซอฟต์แวร์เสียเงินซื้อการแก้ไขด้วยมือหลังเทรซ - ไม่ได้ซื้อการเทรซอัตโนมัติที่ดีกว่า
โลโก้หนึ่ง ทุกเวอร์ชัน - และเส้นทางแบตช์
งานแบรนด์จริงไม่เคยมีไฟล์เดียว การแปลงเดียวกันครอบคลุมทั้งเซ็ต:
- เวอร์ชัน: ไอคอนเดี่ยว แนวนอน กลับสีสำหรับพื้นหลังเข้ม - เทรซแต่ละอันจากต้นฉบับราสเตอร์ของมัน พรีเซ็ตเดียวกัน ผลลัพธ์สม่ำเสมอ
- ปลายทาง: งานพิมพ์ (นามบัตรถึงป้าย) เว็บ (favicon ถึง hero) และเครื่องตัดหรือแกะสลักที่วิ่งตามเส้นทางเวกเตอร์ตรง ๆ
- ส่งมอบ: SVG แบบเลเยอร์สีละเส้นคือไฟล์ที่นักพัฒนาและโรงพิมพ์ขอ - จบกับอีเมล "ส่งเวอร์ชันใหญ่กว่านี้ได้ไหม"
แปลงชุดอัตลักษณ์ทั้งหมดในรอบเดียว - ทุกเวอร์ชัน ทุกโลโก้ยุคเก่า - นั่นแหละที่ คู่มือแปลงแบบชุด ทำให้อัตโนมัติด้วยแอปเดสก์ท็อปฟรี
คู่มือแปลงไฟล์ที่เกี่ยวข้อง
การกู้คืน ทฤษฎี และงานแบตช์ - คู่มือรอบข้าง
คำถามที่พบบ่อย
เวกเตอร์โลโก้ฟรีทำยังไง?
อัปโหลดโลโก้ไปที่ตัวแปลงออนไลน์ฟรี เลือกพรีเซ็ตที่ตรง (ขาวดำสำหรับแบรนด์สีเดียว โปสเตอร์สำหรับโลโก้หลายสีแบน รูปถ่ายสำหรับตราไล่เฉด) ตั้งจำนวนสีตามพาเลตต์แล้วดาวน์โหลด SVG ไม่ต้องมีบัญชี ไม่มีลายน้ำ แอปเดสก์ท็อปฟรีทำแบบเดียวกันในเครื่องสำหรับงานออฟไลน์
เวกเตอร์โลโก้ได้ไหมถ้าไม่มี Adobe Illustrator?
ได้ Image Trace ของ Illustrator ใช้เอนจินเทรซอัตโนมัติชนิดเดียวกับเครื่องมือฟรี: ค่าสมาชิกซื้อการแก้เส้นทางด้วยมือ ไม่ใช่การเทรซอัตโนมัติที่ดีกว่า สำหรับแปลงครั้งเดียว ตัวแปลงออนไลน์ฟรีหรือ Inkscape ให้ SVG ที่ใช้ได้เท่ากัน
โลโก้หลายสีจะคงสีไว้ใน SVG ไหม?
กับพรีเซ็ตโปสเตอร์ คงแน่นอน: แต่ละโซนสีกลายเป็นเส้นทางเวกเตอร์ของตัวเอง SVG ที่เทรซแล้วจึงเก็บพาเลตต์เป็นเลเยอร์แก้ไขได้ที่ระบายใหม่ได้ในทุกโปรแกรม หลีกเลี่ยงขาวดำกับโลโก้สี - มันบีบทุกอย่างเป็นรูปเดียว
SVG มีพื้นหลังโปร่งใสไหม?
การเทรซสร้างรูปทรงในไฟล์คุณขึ้นมาใหม่: ถ้า PNG ต้นทางพื้นหลังโปร่งใส SVG ก็คงไว้ ถ้าโลโก้อยู่บนพื้นสีทึบ พื้นนั้นก็ถูกเทรซเป็นรูปทรงเช่นกัน อยากได้ตัดโปร่งสะอาด ลบพื้นหลังก่อนอัปโหลด หรือลบเลเยอร์พื้นหลังทีหลังในโปรแกรมแก้ SVG
ปลอดภัยไหมที่จะอัปโหลดโลโก้ลูกค้าที่เป็นความลับ?
ตัวแปลงออนไลน์ประมวลผลภาพแล้วทิ้ง - ไม่มีการจัดเก็บใด ๆ สำหรับโลโก้ใต้ NDA หรือคู่มือแบรนด์เข้มงวด แอปเดสก์ท็อป open source รันการแปลงเดียวกันทั้งหมดบนเครื่องคุณ ออฟไลน์
เวกเตอร์โลโก้ของคุณเดี๋ยวนี้ - ฟรี ไม่ต้องสมัคร
อัปโหลด PNG หรือ JPG เลือกพรีเซ็ต ดาวน์โหลด SVG หลายสีแบบเลเยอร์ในไม่ถึงนาที - ไม่มีบัญชี ไม่มีลายน้ำ ไม่ต้องมี Illustrator
สนับสนุนการพัฒนาโอเพนซอร์ส
PixelToPath ใช้งานได้ฟรี หากเครื่องมือนี้ช่วยประหยัดเวลาของคุณ ลองพิจารณาเลี้ยงกาแฟฉันสักแก้ว
❤️ บริจาคผ่าน Ko-fi