लोगो की खाली जगह: मार्जिन की गणना और संरक्षण

स्वीकृत आर्टवर्क की तय इकाई से लोगो की खाली जगह निकालें, फिर पूरे दिखाई लोगो की सीमा से बाहर मापें। इकाई 10 और लोगो 150 गुणा 40 हो, तो हर तरफ़ एक इकाई निषेध क्षेत्र कुल 170 गुणा 60 लेता है। लोगो स्वयं 150 गुणा 40 रहता है।

खाली जगह वह क्षेत्र है जिसे दूसरी सामग्री लोगो के आसपास खाली छोड़े। फ़ाइल का पैडिंग यह जगह लेआउट तक ले जाने में मदद करता है, लेकिन खाली कैनवस केवल एक डिलीवरी तरीका है। नियम ब्रांड गाइड तय करती है। मौजूदा ब्रांड के एसेट बना रहे हों तो नया नियम बनाने से पहले उसका स्वीकृत नियम लें।

यह गाइड एक मूल प्रतीक-शब्द संयोजन की गणना, SVG निर्यात और आकार बदलाव बताती है। केवल रास्टर हो तो पहले दिखाई आकृतियाँ वापस पाएँ; इमेज वेक्टराइज़र स्वीकृत निषेध क्षेत्र का अनुमान नहीं लगा सकता।

इसी लोगो से संबंधित इकाई चुनें

ऐसी मापने योग्य विशेषता लें जो स्वीकृत लोगो स्केल होने पर अनुपात में रहे: प्रतीक की ऊँचाई, किसी अक्षर का आयाम या पूरे आर्टवर्क का तय अंश। साफ़ बताएँ कि क्या मापा। “थोड़ी जगह छोड़ें” या बिना व्याख्या X लिखे वर्ग से बचें।

आधिकारिक ब्रांड गाइड बताती हैं कि यह डिज़ाइन नीति है, सार्वभौमिक अनुपात नहीं। University at Buffalo की खाली-जगह गाइड मुख्य ब्रांड संयोजन के आसपास जुड़े UB की ऊँचाई लेती है और रेखांकन के अलग निर्देश देती है। Vevo गाइड 30 px से ऊपर और नीचे के चिह्न अलग करके वेब तथा टैबलेट के संदर्भ-विशिष्ट अंतर बताती है। असली चिह्न और उपयोग का नियम मानें।

हमारे मूल उदाहरण में गोल प्रतीक 40 इकाई ऊँचा है। X को उसका चौथाई चुनते हैं: X = 10। हर ओर एक X मार्जिन चाहिए। यह उदाहरण का बनाया नियम है, हर ब्रांड को प्रतीक ऊँचाई का 25% लेने की सलाह नहीं।

नियम साधारण भाषा में लिखें: “इस क्षैतिज संयोजन में X गोले के व्यास का चौथाई है। पूरे संयोजन के हर किनारे के बाहर कम-से-कम एक X छोड़ें।” ऐप खाली कैनवस ट्रिम करे तब भी शब्द नीति बताते हैं।

पूरा संयोजन मापें, फिर मार्जिन जोड़ें

लॉकअप साथ उपयोग होने वाले प्रतीक और शब्दचिह्न का स्वीकृत विन्यास है। पूरा विन्यास मापें। केवल गोले की सीमा लेने से अक्षर निषेध-क्षेत्र गणना से बाहर होंगे।

हमारा गोला और तीन बनाए अक्षर 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 अंदर का निर्देशांक आयत दिखते व्यूपोर्ट से मैप करता है। यहाँ 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" लें। नाम ऐसे रखें कि प्राप्तकर्ता समझे किसमें मार्जिन है। माप गाइड ब्रांड दस्तावेज़ या अलग समीक्षा लेयर में रखें, रखे जाने वाले आर्टवर्क में नहीं।

इच्छित लोगो छोटा किए बिना एसेट resize करें

तय करें कि चौड़ाई दिखाई आर्टवर्क की है या पूरे पैडिंग वाले फ़ाइल की। 170 px फ़ाइल पर आर्टवर्क 150 px और मार्जिन 10 px है। 340 px फ़ाइल पर आर्टवर्क 300 px और मार्जिन 20 px। समानुपाती resize में नियम बचता है।

निर्देश में 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 अनुपात से फिट करना पढ़ें ताकि placement से जुड़ी अतिरिक्त जगह समझें।

लोगो डिलीवरी में PerfectVector कहाँ उपयोगी है

ब्रांड के पास केवल रास्टर लोगो हो तो PerfectVector वेक्टर आकृतियाँ वापस दे सकता है। फिर पूरा चिह्न स्वीकृत संदर्भ से मिलाएँ, अनचाहे बैकग्राउंड टुकड़े साफ़ करें और दस्तावेज़ित खाली-जगह नियम अलग लगाएँ। लोगो वेक्टराइज़ेशन कार्यप्रवाह आकृतियाँ वापस पाने का चरण है।

पहले मूल वेक्टर मास्टर और ब्रांड गाइड माँगें। ये फ़ाइलें नई ट्रेसिंग से बेहतर इच्छित आर्टवर्क और दूरी निर्णय बचाती हैं। JPG का खाली बॉर्डर गलती से बना निर्यात पैडिंग हो सकता है; ब्रांड नीति का प्रमाण नहीं। लोगो फ़ाइल-फ़ॉर्मैट गाइड डिलीवरी फ़ाइल चुनने और लोगो वेक्टराइज़ेशन गाइड स्रोत तैयारी व जाँच में मदद करती है।

अंत में पूरा आर्टवर्क, लिखी X परिभाषा, पैडिंग फ़ाइल आयाम और आसपास का वास्तविक लेआउट जाँचें। तंग मास्टर और इच्छित placement एसेट दोनों रखें। अन्य डिलीवरी जाँच ब्लॉग कार्यप्रवाह संग्रह में हैं।

अक्सर पूछे जाने वाले सवाल

क्या लोगो की खाली जगह हमेशा ऊँचाई का चौथाई है?

नहीं। गोले की ऊँचाई का चौथाई इस मूल उदाहरण का चुना नियम है। मौजूदा ब्रांड विशेष उपयोगों के लिए दूसरी इकाइयाँ, अनुपात और अपवाद दे सकते हैं।

खाली जगह बचाने के लिए सफ़ेद आयत जोड़ूँ?

रंगा आयत जोड़े बिना SVG viewBox से खाली जगह रख सकते हैं। सफ़ेद आयत रंगीन बैकग्राउंड पर आर्टवर्क बदलता है। पारदर्शी पैडिंग फ़ाइल इच्छित जगह पर जाँचें।

क्या पैडिंग SVG ब्रांड गाइड अपने आप लागू करता है?

नहीं। व्यूपोर्ट में खाली जगह रखता है, लेकिन आयातक सीमा ट्रिम कर सकता है और लेआउट ऑब्जेक्ट ओवरलैप। लिखे नियम और अंतिम स्थिति जाँच ज़रूरी हैं।

स्रोत

1. University at Buffalo — खाली जगह — चिह्न-आधारित इकाई और उपयोग-विशिष्ट अपवादों का आधिकारिक उदाहरण।
2. Vevo — लोगो clearspace — चिह्न आकार और डिजिटल संदर्भ के साथ निर्देश बदलना दिखाता है।
3. MDN — SVG viewBox — उदाहरण का खाली मार्जिन रखने वाला निर्देशांक आयत समझाता है।

मूल वेक्टर न हो तो PerfectVector से रास्टर लोगो वापस पाएँ। पूरा संयोजन संदर्भ से मिलाएँ, फिर स्वीकृत खाली-जगह नियम लगाएँ और अंतिम placement में दिखाई लोगो का आकार जाँचें।