वेक्टर लोगो से ही शुरुआत क्यों करें?
ब्रांड की हर फ़ाइल, 16 px के ब्राउज़र टैब आइकन से लेकर 1,024 px की ऐप स्टोर इमेज तक, एक ही सोर्स से बननी चाहिए। अगर वह सोर्स PNG है, तो हर एक्सपोर्ट पिक्सेल का रीसाइज़ है, और छोटे साइज़ धुंधले होते हैं जबकि बड़े साइज़ नरम ही रहते हैं। अगर वह पाथ से बना SVG है, तो हर साइज़ नए सिरे से बनता है। नीचे के स्टेप एक SVG को बीच में रखते हैं और बाकी सब उसी से बनाते हैं।
हमारे उदाहरण लोगो में से एक, फिर उसके SVG से हमारे एक्सपोर्ट टूल का बनाया iOS आइकन, Android adaptive आइकन और favicon। favicon बड़ा करके दिखाया गया है; 32 px पर हर पिक्सेल मायने रखता है।
स्टेप 1: लोगो के बारे में बताएं और एक आइडिया चुनें
AI लोगो मेकर खोलें और लिखें कि लोगो में क्या दिखना चाहिए: “गोलों और त्रिकोणों से बना एक उल्लू, पढ़ाई वाले ऐप के लिए, इंडिगो और एम्बर रंग”। अगर लोगो में ब्रांड का नाम लिखा होना चाहिए, तो नाम जोड़ें। अगर आपको पता है कि किस तरह का लोगो चाहिए, तो स्टाइल चिप चुनें; लोगो स्टाइल कैसे चुनें वाली गाइड हर स्टाइल समझाती है। हर बार भेजने पर चार आइडिया बनते हैं, और उसकी कीमत पहले ही बटन पर लिखी होती है।
स्टेप 2: एक आइडिया को शब्दों में रिफ़ाइन करें
जो आइडिया आपकी चाहत के सबसे करीब हो उसे चुनें और बताएं कि क्या बदलना है: “R को और बोल्ड करें”, “पंख कम करें”, “सूरज को चोटी के ऊपर ले जाएं”। रिफ़ाइन लोगो का बाकी हिस्सा वैसा ही रखता है। दस बदलावों की लिस्ट के बजाय हर रिफ़ाइन में एक या दो सटीक बदलाव बेहतर हैं।
स्टेप 3: इसे वेक्टराइज़ करें
अपने चुने लोगो पर वेक्टराइज़ चुनें। यह ट्रेस होकर SVG बनता है जिसमें हर रंग के अपने पाथ होते हैं, और इस्तेमाल करने से पहले आप इसे ओरिजिनल के बगल में रखकर जांच सकते हैं। किसी हिस्से का रंग बदलने, कोई भटकी हुई शेप डिलीट करने या नाम के अक्षरों की दूरी बदलने के लिए इसे SVG एडिटर में खोलें।
आगे बढ़ने से पहले तीन चीज़ें देखें। छोटे साइज़ पर क्या मार्क अब भी पहचान में आता है? क्या कोई शेप या अक्षर आपस में छू रहे हैं जिन्हें नहीं छूना चाहिए? और क्या रंग ठीक वही हैं जो आप चाहते हैं? इन्हें अभी SVG में ठीक करने से उससे बनने वाली हर फ़ाइल ठीक हो जाती है।
स्टेप 4: ऐप आइकन बनाएं
ऐप आइकन जेनरेटर SVG से ये बनाता है:
- Android: 48 से 192 px तक के डेंसिटी PNG, 512 px की Play Store इमेज, और adaptive आइकन XML, जिसमें सेफ़ एरिया के अंदर फ़ोरग्राउंड और थीम वाले आइकन के लिए मोनोक्रोम लेयर होती है;
- iOS: Xcode के लिए एक
AppIcon.appiconset, जिसमें 1,024 px की एक बिना ट्रांसपेरेंसी वाली इमेज होती है।
बैकग्राउंड रंग और मार्क के आसपास की पैडिंग चुनें। जिस मार्क के आसपास ट्रांसपेरेंट जगह हो, उससे Android के मोनोक्रोम आइकन को उसकी असली शेप मिलती है। एक इमेज से Android और iOS ऐप आइकन में इंपोर्ट के स्टेप और डिवाइस पर क्या जांचना है, यह बताया गया है।
स्टेप 5: favicon और PWA आइकन बनाएं
favicon जेनरेटर ये बनाता है: favicon.ico (एक फ़ाइल में 16, 32 और 48 px), आर्टवर्क साफ़ वेक्टर पाथ हो तो favicon.svg, 16 और 32 px के PNG, 180 px का Apple touch आइकन, maskable वर्ज़न के साथ 192 और 512 px के आइकन, एक site.webmanifest, और आपके पेज के <head> में पेस्ट करने के लिए HTML। ब्राउज़र इनमें से कौन-सी फ़ाइलें इस्तेमाल करते हैं, और favicon को अब भी ICO की ज़रूरत क्यों है, यह SVG, PNG या ICO favicon: कौन-सा चुनें में समझाया गया है; maskable सेफ़ ज़ोन PWA maskable आइकन में है।
या सब कुछ एक साथ लें: ब्रांड किट
ब्रांड किट उन्हीं एक्सपोर्टर को उसी SVG पर ब्रांड की एक सेटिंग्स (नाम, छोटा नाम, थीम कलर, बैकग्राउंड रंग और पैडिंग) के साथ चलाती है और नतीजे एक ZIP में रखती है:
| फ़ोल्डर | क्या है |
|---|---|
favicon/ |
favicon और PWA पैकेज |
app-icons/ |
Android और iOS ऐप आइकन सेट |
ios/ |
ऐप के अंदर लोगो इस्तेमाल करने के लिए Xcode इमेज सेट |
android/ |
ऐप के अंदर लोगो इस्तेमाल करने के लिए VectorDrawable |
png/ |
ट्रांसपेरेंट PNG, सबसे लंबी साइड 256, 512, 1,024 और 2,048 px |
svg/ |
ऑप्टिमाइज़ किया गया SVG और पूरे प्रिसिज़न वाला ओरिजिनल |
हर फ़ोल्डर में ठीक वही है जो अलग टूल उसी इनपुट से बनाता है, इसलिए आप किट से शुरू करके बाद में कोई एक हिस्सा अलग से दोबारा बना सकते हैं। किट की कीमत डाउनलोड से पहले दिखाई जाती है।
लॉन्च करने से पहले
जिस-जिस देश में आप बेचते हैं, वहां के ट्रेडमार्क रजिस्टर में अपना नाम और मिलते-जुलते मार्क खोजें। जेनरेट किया गया लोगो नया होता है, लेकिन रजिस्टर्ड मार्क से उसकी कोई जांच नहीं होती। SVG को अपनी मास्टर फ़ाइल रखें, और नए साइज़ उसी से बनाएं, PNG से कभी नहीं।