PerfectVector
लेखक: Irene Kim

डिज़ाइन बचाते हुए एक रंग का लोगो कैसे बनाएँ

बहुरंगी लोगो के ज़रूरी विवरण बचाकर उसे एक ठोस रंग में बदलें। खाली जगह उपयोग करें, हल्के-गहरे बैकग्राउंड पर जाँचें और छोटा रूप देखें।

9 मिनट का पठन
इस पेज पर

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

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

स्वीकृत लोगो फ़ाइलों से शुरू करें

चिह्न फिर बनाने से पहले ब्रांड मालिक से एक-रंग एसेट माँगें। ब्रांड के पास पहले से पूर्ण-रंग, एक-रंग और उलटे रंग वाले अलग संस्करण हो सकते हैं, जिन्हें विशेष बैकग्राउंड के लिए मंज़ूरी मिली हो।

उदाहरण के लिए, Penn State के चिह्न संबंधी निर्देश पारदर्शी भीतरी क्षेत्रों वाला एक-रंग संस्करण बताते हैं और दूसरे संस्करण को केवल दोबारा रंगकर इसे बनाने से मना करते हैं। यह उस विशेष ब्रांड का नियम है, लेकिन दिखाता है कि दिया गया एक-रंग एसेट पूर्ण-रंग मास्टर से अलग क्यों हो सकता है।

यदि डिज़ाइन आपका है और नया रूप बनाना है, तो ये इनपुट साथ रखें:

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

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

तय करें कि कौन-सी सीमाएँ बचनी चाहिए

नीले गोल बैज पर पीला बिजली का निशान सोचें। रंग की सीमा निशान को दिखाती है। दोनों आकृतियों को एक जैसा कोयला-धूसर फ़िल देने से साधारण गोला रह जाता है: पाथ मौजूद हैं, लेकिन समान रंग भीतरी अंतर छिपाता है।

नेगेटिव स्पेस बिना रंग वाला क्षेत्र है जो आर्टवर्क के पीछे की सतह दिखाता है। बिजली को खाली जगह बनाने से आकृति बचती है और बैज में एक ही रंग छपता है।

मूल का विवरणएक-रंग रूप का निर्णय
ज़रूरी भीतरी प्रतीकसीमा बचाएँ, संभव हो तो खाली छेद के रूप में
सजावटी रंग-अंतरडिज़ाइन सही पढ़ा जाता रहे तो हटा दें
अक्षर का छेद या हिस्सों के बीच अंतरइच्छित आकार पर दिखने जितना अलगाव रखें

कुछ लोगो को केवल फ़िल बदलना चाहिए। उस स्थिति में SVG का रंग बदलने की गाइड लें। कई रंग बचाते हुए मिलते-जुलते रंग जोड़ रहे हों तो पहले पैलेट घटाने का कार्यप्रवाह अपनाएँ।

पीले बिजली निशान वाले नीले बैज से साधारण कोयला-धूसर गोले और फिर खाली बिजली निशान वाले कोयला-धूसर बैज का वैचारिक क्रम
वैचारिक चित्र: समान रंग बिजली को छिपाता है; खाली जगह उसकी सीमा बचाती है। नीचे का 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 बिजली का क्षेत्र बिना रंग छोड़ता है। SVG fill-rule विनिर्देश यह व्यवहार तय करता है। फ़ाइल में एक ठोस फ़िल है और न सामने सफ़ेद आकृति, न बैकग्राउंड आयत।

ऐसा छेद वेक्टर एडिटर में भी बना सकते हैं। 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: SVG 2 fill-rule — मूल SVG उदाहरण में कंपाउंड पाथ के किन क्षेत्रों में रंग आएगा यह परिभाषित करता है।

केवल PNG या JPG है? लोगो को संपादन योग्य SVG में बदलें, परिणाम अनलॉक करें, फिर एक-रंग रूप बनाने और जाँचने से पहले वापस मिली आकृतियाँ देखें।

Blog से और

PerfectVector

अपने लोगो या आर्टवर्क को
साफ़, एडिट करने योग्य SVG में बदलें

क्रेडिट कार्ड की ज़रूरत नहीं