किस वजह से आइकन एक ही सेट के लगते हैं?
आइकन तब एक साथ जंचते हैं जब उनका ग्रिड, स्ट्रोक की मोटाई, कोनों का ढंग, डिटेल का स्तर और पैलेट एक जैसा हो। अलग-अलग पैक के आइकन मिलाने से, या हर आइकन अलग प्रॉम्प्ट से बनाने से, आमतौर पर इनमें से कम से कम एक बात बिगड़ जाती है। आइकन सेट जेनरेटर सेट का हर आइकन एक ही शीट में, स्टाइल के एक ही विवरण से बनाता है, इसलिए ड्रॉइंग से जुड़े फ़ैसले सबके लिए एक बार होते हैं। फिर हर आइकन काटकर अलग किया जाता है और अपने SVG में ट्रेस होता है।
हमारे तीन उदाहरण सेट, हर एक एक ही लिस्ट से: लाइन में एक कैफ़े ऐप, नुकीले कोनों के साथ भरा हुआ स्टाइल में एक फ़िटनेस ट्रैकर, और तीन रंगों वाले फ़्लैट कलर में एक ट्रैवल ऐप।
सेट कैसे बनाएं?
AI लोगो मेकर खोलें और आइकन चुनें। स्टूडियो का हेडिंग बदलकर आइकन सेट जेनरेटर हो जाता है।
- आइकन की लिस्ट दें। जो चीज़ें चाहिए उन्हें कॉमा लगाकर या हर एक को नई लाइन में लिखें:
कॉफ़ी का कप, क्रोसां, मैप पिन, लॉयल्टी कार्ड। हर एक चिप बन जाता है। एक सेट में 25 आइकन तक हो सकते हैं। - चुनें कि वे कैसे बनें। लाइन में एक जैसी मोटाई की आउटलाइन होती हैं, भरा हुआ में एक रंग के ठोस आकार, फ़्लैट कलर में तीन रंगों तक के ठोस आकार, और इस इमेज जैसा आपकी अपलोड की गई इमेज (साइन इन करके) या आपके पहले से बनाए किसी लोगो या आइकन सेट के लुक को अपनाता है।
- कोने चुनें। गोल या नुकीले।
- चाहें तो स्टाइल शब्दों में बताएं। 300 अक्षर तक, जैसे “दोस्ताना और मिनिमल, गोल सिरे, थोड़ा हाथ से बना अपनापन”। यह वाक्य सेट के हर आइकन की ड्रॉइंग में जाता है।
- भेजें। हर टाइल पर पहले उसका आइकन ट्रेस होता दिखता है, फिर तैयार SVG।
नए सेट की कीमत भेजने से पहले बटन पर लिखी होती है; जो सेट फ़ेल हो जाए उसका कोई चार्ज नहीं लगता।
बाकी को दोबारा बनाए बिना एक आइकन कैसे ठीक करें?
राउंड इस्तेमाल करें। एक राउंड में आप नोट के साथ आइकन दोबारा बना सकते हैं (“सादी लिपटी हुई चटाई, कोई टेक्सचर नहीं”) और नए आइकन जोड़ सकते हैं, एक बार में नौ बदलाव तक। दोबारा बने और नए जोड़े गए आइकन सेट के स्टाइल में ही बनते हैं, इसलिए वे मेल खाते रहते हैं। सेट के पहले कुछ राउंड शामिल होते हैं; जब किसी राउंड में क्रेडिट लगते हैं, तो शुरू करने से पहले उसका बटन यह बता देता है।
अगर सिर्फ़ एक छोटी-सी डिटेल गलत है और दोबारा बनाना ज़रूरत से ज़्यादा होगा, तो आइकन को SVG एडिटर में खोलें और पाथ या रंग सीधे बदलें।
डाउनलोड में क्या होता है?
ZIP के तीन हिस्से होते हैं:
| फ़ोल्डर | इसमें क्या है |
|---|---|
svg/ |
हर आइकन का एक SVG, viewBox="0 0 24 24" और 2 px पैडिंग के साथ |
png/ |
हर आइकन 16, 24, 32, 48, 64, 128, 256 और 512 px पर ट्रांसपेरेंट PNG के रूप में |
sprite.svg |
हर आइकन एक <symbol> के रूप में, id icon-NAME के साथ |
छोटे PNG (48 px तक) अपने ही साइज़ पर बनाए जाते हैं, इसलिए लाइनें किसी बड़ी इमेज से छोटी होने की बजाय पूरे पिक्सेल पर बैठती हैं। बड़े साइज़ 512 px से स्केल किए जाते हैं।
वेबसाइट पर आइकन कैसे इस्तेमाल करें?
लाइन या भरा हुआ सेट के SVG currentColor में बनते हैं, इसलिए आइकन अपने आसपास के टेक्स्ट का रंग ले लेता है। आप फ़ाइलें एडिट करने की बजाय CSS से उसका रंग बदलते हैं:
<button class="icon-button">
<svg width="24" height="24" aria-hidden="true"><use href="sprite.svg#icon-cup-of-coffee"/></svg>
Order
</button>
.icon-button { color: #6b3f24; }
.icon-button:hover { color: #1f2937; }
अगर आप चाहते हैं कि रंग हर फ़ाइल में ही लिखा रहे, तो डाउनलोड डायलॉग में जैसा डिज़ाइन किया चुनें। फ़्लैट कलर सेट हमेशा अपने रंग रखता है। सजावटी आइकन पर aria-hidden="true" लगाएं, और जो आइकन अकेले बटन का काम करता है उसे एक accessible नाम दें।
किस तरह की लिस्ट सबसे अच्छा काम करती है?
ठोस, बनाई जा सकने वाली चीज़ों के नाम सबसे अच्छे रहते हैं: “साइकिल”, “स्टॉपवॉच”, “दरवाज़े का ताला”। अमूर्त शब्द (“तरक्की”, “भरोसा”) जेनरेटर को बनाने के लिए कुछ खास नहीं देते, इसलिए पहले उन्हें किसी चीज़ में बदलें (“अंकुर”, “हाथ मिलाना”)। पूरी लिस्ट में डिटेल का एक ही स्तर रखें। जिस सेट में “बिंदु” के साथ “शहर का स्काईलाइन” हो, वह कैसे भी बने, असमान दिखेगा।
इस्तेमाल करने से पहले हर आइकन को टेक्स्ट के बगल में 16 और 24 px पर जांचें, अपने बैकग्राउंड के साथ कॉन्ट्रास्ट देखें, और पक्का करें कि मिलते-जुलते आइकन भी अलग पहचान में आएं। जेनरेटर यह नहीं जांचता कि कोई आइकन किसी और के निशान जैसा तो नहीं दिखता, इसलिए जिस आइकन को आप ट्रेडमार्क के रूप में रजिस्टर कराना चाहते हैं, उसे खुद ध्यान से देखें।