พื้นที่ว่างรอบโลโก้: คำนวณและรักษาระยะขอบ

คำนวณพื้นที่ว่างรอบโลโก้จากหน่วยที่กำหนดในงานที่อนุมัติ แล้ววัดออกจากขอบเขตที่เห็นของโลโก้ครบชุด หากหน่วยเป็น 10 และโลโก้ 150 คูณ 40 เขตเว้นหนึ่งหน่วยทุกด้านจะกินพื้นที่ 170 คูณ 60 ส่วนโลโก้เองยัง 150 คูณ 40

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

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

เลือกหน่วยที่มาจากโลโก้นี้

ใช้คุณสมบัติวัดได้ที่คงสัดส่วนเมื่อโลโก้ที่อนุมัติย่อขยาย เช่นความสูงสัญลักษณ์ ขนาดตัวอักษรเฉพาะ หรือเศษส่วนภาพทั้งหมด ระบุว่าคุณวัดอะไร อย่าใช้กฎ “เว้นหน่อย” หรือรูปสี่เหลี่ยม X ที่ไม่อธิบาย

คู่มือแบรนด์ทางการแสดงว่าเป็นนโยบายออกแบบ ไม่ใช่อัตราส่วนสากล คู่มือพื้นที่ว่าง University at Buffalo ใช้ความสูง UB ที่ประสานกันรอบชุดแบรนด์หลัก พร้อมคำแนะนำแยกสำหรับงานเส้น คู่มือ Vevo แยกเครื่องหมายสูงกว่าและต่ำกว่า 30 px และระยะเว็บกับแท็บเล็ตเฉพาะบริบท ใช้กฎของเครื่องหมายและงานจริง

ในตัวอย่างต้นฉบับ สัญลักษณ์กลมสูง 40 หน่วย เราเลือก X เป็นหนึ่งในสี่ของความสูง: X = 10 ระยะที่ต้องเว้นคือหนึ่ง X ต่อด้าน นี่เป็นกฎสร้างเพื่อยกตัวอย่าง ไม่ใช่แนะนำทุกแบรนด์ใช้ 25% ของความสูงสัญลักษณ์

เขียนกฎภาษาง่าย: “สำหรับชุดแนวนอนนี้ X เท่ากับหนึ่งในสี่ของเส้นผ่านศูนย์กลางวงกลม เว้นอย่างน้อยหนึ่ง X นอกทุกขอบของชุดทั้งหมด” ข้อความยังสื่อนโยบายแม้แอปครอปพื้นที่ว่าง

วัดชุดครบแล้วเพิ่มระยะขอบ

lockup คือการจัดสัญลักษณ์และตัวอักษรโลโก้ร่วมกันที่อนุมัติ วัดทั้งชุด หากใช้แค่กรอบวงกลม ตัวอักษรจะอยู่นอกการคำนวณเขตเว้น

วงกลมกับตัวอักษรที่วาดสามตัวของเราอยู่ x = 0 ถึง 150 และ y = 0 ถึง 40 ไม่มีเส้นขอบ เงา หรือวัตถุซ่อน เขตสี่เหลี่ยมจึงอยู่ x = -10 ถึง 160 และ y = -10 ถึง 50

X = circle height / 4 = 40 / 4 = 10
zone width = artwork width + 2X = 150 + 20 = 170
zone height = artwork height + 2X = 40 + 20 = 60

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

เก็บกฎใน SVG ที่มีขอบว่าง

SVG viewBox แมปสี่เหลี่ยมพิกัดภายในกับ viewport ที่แสดง ในตัวอย่าง viewBox="-10 -10 170 60" รวมขอบที่คำนวณโดยไม่ย้ายหรือขยายภาพ

บันทึกตัวอย่างเต็มเป็น logo-padded.svg ตัวอักษรเป็นรูปวาดจึงไม่พึ่งฟอนต์ แบบวงกลมและตัวอักษรเป็นงานตัวอย่างต้นฉบับ ไม่ใช่ไฟล์อนุมัติของแบรนด์อื่น

<svg xmlns="http://www.w3.org/2000/svg"
     width="170" height="60" viewBox="-10 -10 170 60">
  <g fill="#17324d" fill-rule="evenodd">
    <circle cx="20" cy="20" r="20"/>
    <path d="M50 5H80V35H50Z M57 12V28H73V12Z"/>
    <path d="M87 35V5H94L108 24V5H115V35H108L94 16V35Z"/>
    <path d="M122 5H150V12H129V16H145V23H129V28H150V35H122Z"/>
  </g>
</svg>

ทำไฟล์คู่แบบชิดด้วย width="150", height="40" และ viewBox="0 0 150 40" โดยคงวงกลมและพาธเดิม ตั้งชื่อให้ผู้รับรู้ว่าไฟล์ใดมีขอบ เก็บเส้นวัดในเอกสารแบรนด์หรือเลเยอร์ตรวจแยก ไม่ใช่ในงานที่จะวาง

ปรับขนาดไฟล์โดยไม่ทำโลโก้เล็กผิดเจตนา

ตัดสินใจว่าความกว้างหมายถึงภาพที่เห็นหรือไฟล์รวมขอบ ที่ไฟล์กว้าง 170 px ภาพกว้าง 150 px และขอบ 10 px ที่ไฟล์ 340 px ภาพ 300 px และขอบ 20 px กฎสัดส่วนยังอยู่เมื่อย่อขยายเท่ากัน

หากบรีฟขอโลโก้ที่เห็น 300 px ให้ตั้งไฟล์มีขอบนี้กว้าง 340 px หากตั้งทั้งไฟล์ 300 px ภาพจะเหลือประมาณ 264.7 px เพราะ 300 × 150 / 170 ประมาณ 264.7

หมายเหตุวิธีทดสอบ: เราเรนเดอร์ SVG เต็มแบบชิดและแบบขอบใน Chromium กรอบรูปทรงภาพคือ 150 คูณ 40 หน่วย ที่ไฟล์รวมขอบกว้าง 170 px และ 340 px ภาพแนวนอนวัดได้ 150 px และ 300 px พร้อมขอบ 10 px และ 20 px นี่ตรวจตัวอย่างเบราว์เซอร์ที่สร้าง ไม่ได้ยืนยันการนำเข้าทุกโปรแกรม

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

PerfectVector ช่วยตรงไหนในการส่งโลโก้

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

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

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

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

พื้นที่ว่างโลโก้เท่ากับหนึ่งในสี่ความสูงเสมอหรือไม่?

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

ควรเพิ่มสี่เหลี่ยมขาวเพื่อรักษาพื้นที่ว่างหรือไม่?

สงวนพื้นที่ด้วย SVG viewBox ได้โดยไม่เพิ่มสี่เหลี่ยมระบาย สี่เหลี่ยมขาวเปลี่ยนภาพบนพื้นสี ทดสอบไฟล์มีขอบโปร่งใสในการวางจริง

SVG มีขอบบังคับคู่มือแบรนด์อัตโนมัติหรือไม่?

ไม่ เก็บพื้นที่ว่างภายใน viewport แต่ตัวนำเข้าอาจครอปกรอบและวัตถุเลย์เอาต์ทับได้ ยังต้องมีกฎเขียนและตรวจวางขั้นสุดท้าย

แหล่งข้อมูล

1. University at Buffalo — พื้นที่ว่าง — ตัวอย่างทางการของหน่วยอิงเครื่องหมายและข้อยกเว้นตามงาน
2. Vevo — พื้นที่ว่างโลโก้ — แสดงคำแนะนำที่เปลี่ยนตามขนาดและบริบทดิจิทัล
3. MDN — SVG viewBox — อธิบายสี่เหลี่ยมพิกัดที่เก็บขอบว่างของตัวอย่าง

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