ทำโลโก้สีเดียวโดยรักษารายละเอียดของแบบ

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

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

เริ่มจากไฟล์โลโก้ที่อนุมัติแล้ว

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

ตัวอย่างเช่น คำแนะนำเครื่องหมายของ Penn State อธิบายเวอร์ชันสีเดียวที่มีพื้นที่ภายในโปร่งใส และเตือนไม่ให้ทำด้วยการเปลี่ยนสีเวอร์ชันอื่นเฉย ๆ นี่เป็นกฎของแบรนด์นั้น แต่แสดงให้เห็นว่าทำไมไฟล์สีเดียวที่จัดไว้จึงอาจต่างจากไฟล์หลักสีเต็ม

หากคุณเป็นเจ้าของแบบและต้องสร้างเวอร์ชัน ให้เก็บข้อมูลเหล่านี้ร่วมกัน:

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

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

ตัดสินใจว่าขอบเขตใดต้องคงอยู่

ลองนึกถึงตราวงกลมสีน้ำเงินกับสายฟ้าเหลือง ขอบเขตสีทำให้เห็นสายฟ้า หากเติมทั้งสองรูปเป็นสีถ่านเดียวกัน จะเหลือเพียงวงกลมเรียบ พาธยังอยู่แต่สีเดียวกันซ่อนความต่างภายใน

พื้นที่ว่างหรือ negative space คือบริเวณไม่ระบายที่เผยพื้นผิวหลังภาพ การทำสายฟ้าเป็นพื้นที่ว่างรักษาลวดลายไว้ โดยตราใช้สีที่ระบายเพียงสีเดียว

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

สร้างช่องเปิดในรูปทรง SVG

เพื่อให้ทำซ้ำตัวอย่างได้ บันทึกงานต้นฉบับนี้เป็น original.svg พาธคือรูปทรงที่อธิบายด้วยคำสั่งวาด ไฟล์นี้มีพาธปิดหนึ่งเส้นสำหรับตราและอีกเส้นสำหรับสายฟ้า

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
  <path fill="#0d6efd"
    d="M128 24 A104 104 0 1 1 128 232 A104 104 0 1 1 128 24 Z"/>
  <path fill="#f5d447"
    d="M142 54 L88 142 H120 L110 202 L174 108 H138 Z"/>
</svg>

1. เปิดต้นฉบับในเบราว์เซอร์เพื่อดูแบบสองสี
2. บันทึกสำเนาที่สองและเปลี่ยนค่าสีเติมทั้งคู่เป็น #111827 เปิดใหม่ สายฟ้าจะกลืนกับตรา
3. บันทึกโค้ดที่ปรับด้านล่างเป็น one-color.svg พิกัดวาดยังเหมือนเดิม แต่เส้นขอบทั้งสองอยู่ในพาธเดียว
4. เปิดไฟล์ที่ปรับบนพื้นหลังสว่างและมืด แล้วตรวจขนาดที่ต้องการแสดง

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
  <path fill="#111827" fill-rule="evenodd"
    d="M128 24 A104 104 0 1 1 128 232 A104 104 0 1 1 128 24 Z
       M142 54 L88 142 H120 L110 202 L174 108 H138 Z"/>
</svg>

fill-rule กำหนดว่าบริเวณใดภายในพาธได้รับสี ในตัวอย่างซ้อนนี้ evenodd ทำให้พื้นที่สายฟ้าไม่ถูกระบาย ข้อกำหนด fill-rule ของ SVG นิยามพฤติกรรมนี้ ไฟล์มีสีเติมทึบหนึ่งสี และไม่มีรูปสีขาวทับด้านหน้าหรือสี่เหลี่ยมพื้นหลัง

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

ตรวจพื้นหลังและเวอร์ชันเล็ก

วางโลโก้ที่ปรับบนพื้นขาวและพื้นมืดหรือพื้นสีที่ตัดกัน สายฟ้าควรเผยพื้นหลังแต่ละแบบ สายฟ้าที่ระบายขาวจะยังขาวบนพื้นสี แม้บนพื้นขาวจะดูเหมือนช่อง

สำหรับตัวอย่างต้นฉบับนี้ เราเรนเดอร์ไฟล์ที่บันทึกด้วย Sharp และ librsvg ที่ 256 และ 32 พิกเซล ทั้งสองขนาด จุดตัวอย่างภายในสายฟ้าที่ปรับมีอัลฟา 0 หมายถึงโปร่งใสเต็มที่ ชุดควบคุมสีเหมือนกันมีสีถ่านทึบตรงจุดนั้น ส่วนชุดควบคุมที่ทับสีขาวแยกมีสีขาวทึบ นี่เป็นการตรวจดิจิทัลของไฟล์ที่สร้าง ไม่ใช่ผลจากเครื่องพิมพ์หรือแอปนำเข้า

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

ก่อนยอมรับเวอร์ชัน ให้ตรวจว่า:

• ลวดลายภายในสำคัญยังอ่านได้ตามต้องการ
• พื้นที่ว่างเผยพื้นหลังแทนปื้นสีขาวที่ระบาย
• ช่องเล็กและช่องในตัวอักษรยังเห็นที่ขนาดเลือก
• ไฟล์ที่บันทึกเปิดใหม่ได้พร้อมรูปทรงที่ต้องการและสีทึบเพียงสีเดียว

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

แก้เวอร์ชันที่รายละเอียดหาย

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

แยกข้อกำหนดส่งมอบออกจากการออกแบบ

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

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

หากต้นทางมีเพียง PNG หรือ JPG

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

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

คำถามที่พบบ่อย

โลโก้สีเดียวคืออะไร?

โลโก้สีเดียวใช้สีทึบที่ระบายเพียงสีเดียว พื้นที่ว่างเผยพื้นหลัง เวอร์ชันเข้มและเวอร์ชันกลับสีขาวเป็นคนละเวอร์ชัน ไม่ใช่ระบายสองสีรวมกันในเครื่องหมายเดียว

เปลี่ยนสีเติมทั้งหมดเป็นดำพอหรือไม่?

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

ต้องลากเส้นตามโลโก้ที่เป็นเวกเตอร์อยู่แล้วหรือไม่?

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

สีเติม SVG ขาวกำหนดหมึกขาวให้อัตโนมัติหรือไม่?

ไม่ สีเติมขาวอธิบายสีที่ระบาย ส่วนพื้นที่ว่างไม่ระบาย โรงพิมพ์กำหนดว่าจะระบุและส่งหมึกขาวอย่างไรในกระบวนการผลิตของตน

แหล่งข้อมูล

1. Penn State: สีและเครื่องหมาย — ตัวอย่างระบุแบรนด์ของเวอร์ชันสีเดียวและกลับสีที่อนุมัติ รวมถึงพื้นที่ภายในโปร่งใส
2. Adobe: สร้างพาธประกอบ — อธิบายพื้นที่โปร่งใส กฎเติม และทิศทางพาธในพาธประกอบของ Illustrator
3. W3C: fill-rule ของ SVG 2 — นิยามพื้นที่ของพาธประกอบที่ได้รับสีในตัวอย่าง SVG เนทีฟ

มีแค่ PNG หรือ JPG หรือไม่? แปลงโลโก้เป็น SVG ที่แก้ไขได้ ปลดล็อกผลลัพธ์ แล้วตรวจรูปทรงที่กู้ก่อนสร้างและตรวจเวอร์ชันสีเดียวของคุณ