अपने ऐप्लिकेशन के आइकॉन डिज़ाइन करना और उनकी झलक देखना

1. परिचय

ee9fa08dcd988d4c.png

पिछली बार अपडेट किए जाने की तारीख़: 08/04/22

Android 13 से, उपयोगकर्ता अडैप्टिव लॉन्चर आइकॉन के लिए थीम सेट कर सकते हैं. इस सुविधा की मदद से, Android के साथ काम करने वाले लॉन्चर में मौजूद ऐप्लिकेशन आइकॉन को रंग दिया जाता है. इससे वे उपयोगकर्ता के चुने गए वॉलपेपर और अन्य थीम के रंग में दिखते हैं.

अपने Android ऐप्लिकेशन के लिए ज़रूरी सभी सिस्टम ऐसेट आसानी से बनाएं. इनमें अडैप्टिव कलर आइकॉन भी शामिल हैं.

आपको क्या सीखने को मिलेगा

  • अलग-अलग तरह के ऐप्लिकेशन आइकॉन के बारे में जानकारी और उन्हें डिज़ाइन करने के लिए सुझाव.
  • Android लॉन्चर के Figma टेंप्लेट का इस्तेमाल करने का तरीका.
  • Android Studio के ऐसेट जनरेटर का इस्तेमाल करने का तरीका.
  • Android Studio एम्युलेटर की मदद से, लॉन्चर आइकॉन की झलक देखने का तरीका.

ज़रूरी शर्तें

  • Figma की बुनियादी जानकारी
  • ज़रूरी नहीं: ऐप्लिकेशन आइकॉन का आर्टवर्क (फ़ोरग्राउंड, बैकग्राउंड, और मोनोक्रोमैटिक)

आपको किन चीज़ों की ज़रूरत होगी

2. अपनी प्रोफ़ाइल बनाना शुरू करें

सेटअप

शुरू करने के लिए, आपको Android ऐप्लिकेशन के आइकॉन की Figma फ़ाइल को ऐक्सेस करना होगा.

सबसे पहले, Figma में साइन इन करें या खाता बनाएं.

Figma Community से डुप्लीकेट किया गया

Android लॉन्चर टेंप्लेट फ़ाइल पर जाएं या Figma Community में जाकर, वैरिएबल फ़ॉन्ट पर माइग्रेट करने के बारे में खोजें. फ़ाइल को अपनी फ़ाइलों में कॉपी करने के लिए, सबसे ऊपर दाएं कोने में मौजूद कॉपी पाएं पर क्लिक करें.

35022ce2efffc29c.png

टेंप्लेट का इस्तेमाल करना

Android आइकॉन टेंप्लेट में दो पेज होते हैं:

  • कवर पेज में, काम के कॉन्सेप्ट और टेंप्लेट इस्तेमाल करने के तरीके के बारे में कम शब्दों में बताया गया है.
  • टेंप्लेट पेज में,ज़रूरी ऐसेट बनाने के लिए ज़रूरी सभी चीज़ें शामिल होती हैं. इन्हें तीन फ़्रेम (रंग, आकार, Play Store) में बांटा गया है.

e0182922e07c80f5.png

ध्यान दें: बाईं ओर मौजूद लेयर पैनल में, ज़्यादातर लेयर और ग्रुप लॉक होते हैं. इन्हें लॉक ही रहना चाहिए. (आपके पास अनलॉक किए गए आर्टवर्क ग्रुप में आर्टवर्क जोड़ने का विकल्प होगा.)

हालांकि, ऐसेट बनाने से पहले, आइए देखते हैं कि हम क्या-क्या बनाएँगे...

3. Android सिस्टम के आइकॉन

1b8d4ebe587e89a0.png

लॉन्चर आइकॉन

लॉन्चर आइकॉन या ऐप्लिकेशन आइकॉन, ऐप्लिकेशन लॉन्च करने के अनुभव का एक अहम हिस्सा होते हैं. लॉन्चर आइकॉन, होम स्क्रीन पर आपके ऐप्लिकेशन के एंट्री पॉइंट के तौर पर दिखते हैं.

अडैप्टिव शेप

AdaptiveIconDrawable या अडैप्टिव आइकॉन, डिवाइस की क्षमताओं और उपयोगकर्ता की थीम के हिसाब से अलग-अलग तरीके से दिख सकता है. अनुकूलनशील आइकॉन का इस्तेमाल मुख्य रूप से होमस्क्रीन पर लॉन्चर करता है. हालांकि, इनका इस्तेमाल शॉर्टकट, सेटिंग ऐप्लिकेशन, शेयर करने के डायलॉग बॉक्स, और खास जानकारी वाली स्क्रीन में भी किया जा सकता है.

8ae89f6ed03eaf57.png

अडैप्टिव आइकॉन, अलग-अलग डिवाइस मॉडल पर कई तरह के आकार में दिख सकता है. उदाहरण के लिए, यह एक OEM डिवाइस पर गोलाकार और दूसरे डिवाइस पर स्क्वेयर सर्कल के तौर पर दिख सकता है. हर डिवाइस ओईएम को एक मास्क उपलब्ध कराना होगा. सिस्टम इस मास्क का इस्तेमाल करके, सभी अडैप्टिव आइकॉन को एक ही शेप में रेंडर करता है.

शेप के हिसाब से अडजस्ट होने की सुविधा की वजह से, सिस्टम उपयोगकर्ताओं के इंटरैक्शन के साथ-साथ अलग-अलग ऐनिमेशन इफ़ेक्ट भी लागू कर सकता है.

अडैप्टिव कलर

अब अडैप्टिव आइकॉन, डाइनैमिक कलर का इस्तेमाल कर सकते हैं. इससे, ऐप्लिकेशन के आइकॉन को थीम के हिसाब से पसंद के मुताबिक बनाया जा सकता है.

अगर किसी उपयोगकर्ता ने थीम वाले ऐप्लिकेशन आइकॉन की सुविधा चालू की है (दूसरे शब्दों में, सिस्टम सेटिंग में जाकर थीम वाले आइकॉन टॉगल को चालू किया है) और लॉन्चर इस सुविधा के साथ काम करता है, तो सिस्टम, उपयोगकर्ता के चुने गए वॉलपेपर और थीम के रंग का इस्तेमाल करके, टिंट का रंग तय करता है.

381ea3ee1c973b4c.png

आकार के हिसाब से ढलने वाले आइकॉन की तरह ही, अडैप्टिव कलर आइकॉन में फ़ोरग्राउंड और बैकग्राउंड होता है. इसमें सिर्फ़ मोनोक्रोमैटिक फ़ोरग्राउंड आइकॉन ऐसेट देनी होती है. सिस्टम, निकाली गई कलर स्कीम के हिसाब से बैकग्राउंड और रंग, दोनों का ध्यान रखेगा.

सूचना आइकॉन के लिए, एक ही रंग के आइकॉन का इस्तेमाल किया जा सकता है.

लेगेसी

Android के पुराने वर्शन पर काम करने वाले डिवाइसों या अडैप्टिव सुविधाओं (8.0 से पहले के वर्शन) के साथ काम न करने वाले डिवाइसों के लिए, लेगसी आइकॉन शामिल किए जाने चाहिए.

इनमें फ़ोरग्राउंड और बैकग्राउंड के संसाधन नहीं होते. साथ ही, ये किसी भी आकार के हो सकते हैं. अगर दिए गए टेंप्लेट का इस्तेमाल किया जा रहा है, तो अडैप्टिव आइकॉन का फ़ाइनल आर्टवर्क, आपके लेगसी आइकॉन के लिए ज़रूरी साइज़ में एक्सपोर्ट किया जाएगा.

d29acf3d7ec8207c.png

सूचना आइकन

सूचना एक ऐसा मैसेज होता है जिसे Android, आपके ऐप्लिकेशन के यूज़र इंटरफ़ेस (यूआई) के बाहर दिखाता है. इससे उपयोगकर्ता को रिमाइंडर, अन्य लोगों से बातचीत या आपके ऐप्लिकेशन से समय पर अन्य जानकारी मिलती है. सिस्टम, सूचनाओं को अलग-अलग जगहों और फ़ॉर्मैट में दिखाता है. जैसे, स्टेटस बार में आइकॉन, सूचना पैनल में ज़्यादा जानकारी वाली एंट्री, ऐप्लिकेशन के आइकॉन पर बैज के तौर पर, और पेयर किए गए पहनने योग्य डिवाइसों पर अपने-आप.

a7fad196a542c189.png

स्टोर का आर्टवर्क

Google Play और Google के प्रमोशन वाले अन्य चैनलों पर अपने ऐप्लिकेशन को हाइलाइट करने और उसका प्रमोशन करने के लिए, फ़ीचर ग्राफ़िक, स्क्रीनशॉट, कम शब्दों में दी जाने वाली जानकारी, और वीडियो का इस्तेमाल किया जा सकता है.

ऐप्लिकेशन आइकॉन, आपके ऐप्लिकेशन के लॉन्चर आइकॉन की जगह नहीं लेता. हालांकि, इसकी क्वालिटी बहुत अच्छी होनी चाहिए और यह बेहतर रिज़ॉल्यूशन वाला होना चाहिए.

लॉन्चर आइकॉन की तरह, आर्टवर्क भी ऐसेट की पूरी जगह पर दिख सकता है. इसके अलावा, आर्टवर्क के एलिमेंट (जैसे कि लोगो) को कीलाइन ग्रिड पर डिज़ाइन और पोज़िशन किया जा सकता है.

अपने ऐप्लिकेशन के स्टोर पेज को पब्लिश करने के लिए, आपको 512x512 पिक्सल का स्क्वेयर ऐप्लिकेशन आइकॉन देना होगा. अगर Android ऐप्लिकेशन आइकॉन टेंप्लेट का इस्तेमाल किया जा रहा है, तो इसे अडैप्टिव शेप आर्टवर्क का इस्तेमाल करके एक्सपोर्ट किया जाता है.

4. डिज़ाइन के सबसे सही तरीके

लॉन्चर आइकॉन की मदद से, उपयोगकर्ता के लिए आपका ऐप्लिकेशन लॉन्च किया जाता है. आपके ऐप्लिकेशन में एंट्री के तौर पर, उन्हें पहचाना जा सकना चाहिए और पढ़ा जा सकना चाहिए. यहां, लॉन्चर आइकॉन में इन क्वालिटी को शामिल करने के कुछ सबसे सही तरीके दिए गए हैं.

आर्टवर्क को आसान रखें. कई लेयर, ज़्यादा इफ़ेक्ट, और टेक्स्ट का इस्तेमाल न करें. छोटे साइज़ में ये जानकारी दिखनी बंद हो जाएगी या इसे देखना मुश्किल हो जाएगा. 6295287d18a6dc89.png

जटिल आकृतियों का इस्तेमाल न करें. इसमें लोगो शामिल हैं. अगर हो सके, तो आसान लोगो का इस्तेमाल करें. इसके अलावा, ऐसे सिंबल का इस्तेमाल करें जो आपके ऐप्लिकेशन से जुड़े हों. पढ़ने में आसान और अलग आकार वाले लोगो से, उपयोगकर्ताओं को आपके ऐप्लिकेशन को अलग-अलग कॉन्टेक्स्ट (अनुकूल रंग और सूचना) में आसानी से पहचानने में मदद मिलती है. 3084a344b34b47f0.png

ग्रिड का इस्तेमाल करें. ग्रिड या कीलाइन का इस्तेमाल करें, ताकि यह पक्का किया जा सके कि फ़ोरग्राउंड आर्टवर्क को क्रॉप करने पर भी वह सही तरीके से काम करेगा. इसमें फ़ुल ब्लीड इलस्ट्रेशन आर्टवर्क भी शामिल है. e99f2fabd60e52d9.png

कंट्रास्ट का ध्यान रखें. अडैप्टिव आइकॉन और लेगसी आइकॉन के लिए, पक्का करें कि आइकॉन के फ़ोरग्राउंड और बैकग्राउंड में कंट्रास्ट हो, ताकि उन्हें आसानी से पढ़ा जा सके. ज़्यादा डार्क ड्रॉप शैडो का इस्तेमाल न करें. ऐसा करने पर, सिस्टम शैडो के साथ भ्रम हो सकता है. bd62aae6d5414f2e.png

आर्टवर्क को सेफ़ ज़ोन में रखें. फ़ोरग्राउंड ऐसेट को 72x72 पिक्सल के अंदर रखें. हालांकि, अगर आपको फ़ुल ब्लीड का इस्तेमाल करना है, तो ऐसा करने की ज़रूरत नहीं है. बैकग्राउंड का साइज़ 108x108 पिक्सल रखें. ध्यान दें: आइकॉन टेंप्लेट का आर्टवर्क फ़्रेम, 72x72 पिक्सल से बड़ा होता है. इससे आपको आइकॉन का आर्टवर्क बनाने में मदद मिलती है. ऐसेट का साइज़, स्पेसिफ़िकेशन के मुताबिक बदल दिया जाएगा.78c8a6d59f9320bc.png

वेक्टर फ़ॉर्मैट. रास्टर फ़ॉर्मैट (जैसे, PNG, JPG, और GIF फ़ाइलें) के बजाय, वेक्टर फ़ॉर्मैट (जैसे, SVG, AI, PDF, और EPS फ़ाइलें) में मौजूद आर्टवर्क का इस्तेमाल करें. इससे यह पक्का किया जा सकेगा कि आपका आर्टवर्क नई सुविधाओं के साथ काम करता हो और उसे आसानी से बदला जा सके. 4c6aae783bb5e415.png

5. अडैप्टिव कलर और सूचना आइकॉन

अब आपकी बारी है, Android सिस्टम के आइकॉन बनाने की.

  1. Android ऐप्लिकेशन के आइकॉन की Figma फ़ाइल ढूंढें.
  2. फ़ाइल में, अडैप्टिव कलर फ़्रेम ढूंढें. बाईं ओर मौजूद लेयर पैनल में, अडैप्टिव कलर > कॉम्पोनेंट > आर्ट > आइकॉन आर्टवर्क एरिया > थीम वाला आइकॉन आर्ट < अपना आइकॉन जोड़ें पर जाएं. अगर आपके पास मोनोक्रोमैटिक आइकॉन तैयार है, तो उसे यहां कॉपी करें, ताकि सैंपल के तौर पर दिए गए bugdroid आइकॉन को बदला जा सके. इसके बाद, छठे चरण पर जाएं.4249cd4ed81cc44b.png
  3. अगर आपके पास मोनोक्रोमैटिक आइकॉन नहीं है, तो अपने ऐप्लिकेशन से जुड़ा कोई लोगो या आइकॉन चुनें. आइकॉन अपडेट करने के लिए, डिज़ाइन से जुड़े सुझाव देखें. सबसे पहले, जटिल शेप को आसान बनाया जाता है. उदाहरण के लिए, यहां ऐप्लिकेशन में इस्तेमाल की गई इलस्ट्रेशन को आसान बनाया गया है. साथ ही, पत्तों की जटिलता को कम किया गया है. शैडो और लाइन की जानकारी को वाइट स्पेस की मदद से दिखाया गया है. 2c92cd6e441e7396.png
  4. अब कीलाइन ग्रिड का इस्तेमाल करके, साइज़ अपडेट करें. यहां हमने साइज़ बदलने की सेटिंग को स्केल करें पर सेट किया है. साथ ही, यह पक्का किया है कि आर्टवर्क, फ़ोरग्राउंड सेफ़ ज़ोन के अंदर हो. इस टेंप्लेट में, आर्टवर्क को 4x पर सेट अप किया गया है. साथ ही, एक्सपोर्ट करने के लिए इसका साइज़ अपने-आप बदल जाता है, ताकि आप अपने आइकॉन को बड़े साइज़ में डिज़ाइन कर सकें. 606367689d303633.png
  5. इस फ़ाइल को Material Theme Builder के साथ काम करने के लिए सेट अप किया गया है, ताकि डाइनैमिक कलर की झलक देखी जा सके. फ़ोरग्राउंड आइकॉन के रंग की स्टाइल को On-surface-variant से कनेक्ट करें. f4a805802fc9b2f7.png
  6. अब प्लगिन पैनल से Material Theme Builder को खोलने पर, सोर्स कलर को शफ़ल किया जा सकता है. इसके अलावा, एक्सट्रैक्ट किए गए सोर्स कलर का इस्तेमाल करके, रंगों को अपडेट करने के लिए कोई इमेज जोड़ी जा सकती है. b3a28c64e5488762.png
  7. यह अलग-अलग रिज़ॉल्यूशन या होम स्क्रीन पर कैसा दिखेगा? टेंप्लेट को इस तरह से सेट अप किया गया है कि आर्टवर्क फ़्रेम में रखा गया आर्टवर्क, झलक दिखाने के अलग-अलग कॉन्टेक्स्ट में दिखे.
  8. सिस्टम, सूचना के तौर पर मोनोक्रोमैटिक आइकॉन का इस्तेमाल करता है और झलक में इसे इसी तरह दिखाता है.

94e264c7bc7a881a.png

6. अडैप्टिव शेप और लेगसी आइकॉन

अब हम अडैप्टिव शेप और लेगसी आइकॉन बनाएंगे, ताकि यह पक्का किया जा सके कि आइकॉन ज़्यादा से ज़्यादा डिवाइसों पर काम करे.

  1. फ़ाइल में, शेप फ़्रेम ढूंढें. बाएं ओर मौजूद लेयर पैनल में, आइकॉन का बैकग्राउंड < अपना आइकॉन जोड़ें* ढूंढें. अगर आपके पास कोई आइकॉन तैयार है, तो उसे यहां कॉपी करें. इससे सैंपल के तौर पर दिए गए bugdroid आइकॉन की जगह आपका आइकॉन सेट हो जाएगा. इसके बाद, सीधे पांचवें चरण पर जाएं.* अगर आपके पास कोई आइकॉन नहीं है, तो अपने ऐप्लिकेशन से जुड़ा कोई लोगो या आइकॉन इस्तेमाल करें या मोनोक्रोमैटिक आइकॉन का फिर से इस्तेमाल करें. 4249cd4ed81cc44b.png
  2. आइकॉन के सबसे सही तरीकों को ध्यान में रखते हुए, फ़ोरग्राउंड आइकॉन अपडेट करें. यहाँ मैंने ओरिजनल इलस्ट्रेशन के रंगों को वापस लाया है, लेकिन जानकारी को कम रखा है. 245853d7421f0f41.png
  3. अब कीलाइन ग्रिड का इस्तेमाल करके, साइज़ अपडेट करें. यहां हमने साइज़ बदलने की सेटिंग को स्केल करें पर सेट किया है. साथ ही, यह पक्का किया है कि आर्टवर्क, फ़ोरग्राउंड के सुरक्षित ज़ोन में हो. 8e877043477b5fff.png
  4. अडैप्टिव शेप वाले ऐप्लिकेशन आइकॉन में अलग बैकग्राउंड भी हो सकता है. इससे आइकॉन की लेयर को सुरक्षित तरीके से काटा जा सकता है. साथ ही, इंटरैक्शन के दौरान आइकॉन में हल्के-फुल्के मूवमेंट इफ़ेक्ट दिखते हैं. Android Studio में, एक रंग वाले बैकग्राउंड का इस्तेमाल और उसे तय भी किया जा सकता है. 2e3513c3cf827f52.png
  5. झलक अपडेट हो जाती हैं. इससे पता चलता है कि फ़ोरग्राउंड और बैकग्राउंड एक साथ कैसे दिखते हैं. साथ ही, यह भी पता चलता है कि होमस्क्रीन पर, अलग-अलग तरह से काटी गई आकृतियों में, और लेगसी आइकॉन के तौर पर ये कैसे दिखते हैं.

e933e6a6dba859a6.png

होम स्क्रीन की झलक में, क्रॉप करने के लिए इस्तेमाल किए गए आकार को अपडेट किया जा सकता है. इसके लिए, आइकॉन चुनें और आकार के वैरिएंट का विकल्प बदलें. a4cf54ad48dbcd02.png

7. एक्सपोर्ट किए जा रहे हैं

बहुत बढ़िया, अब आपने अपने ऐप्लिकेशन के आइकॉन से टेंप्लेट को अपडेट कर दिया है! आइए, इन्हें लागू करने के लिए एक्सपोर्ट करें..

  1. पक्का करें कि कैनवस पर कुछ भी न चुना गया हो.
  2. Figma मेन्यू > फ़ाइल > एक्सपोर्ट करें (Shift + Cmd + E) पर जाएं.
  3. एक्सपोर्ट मेन्यू में जाकर, एक्सपोर्ट करने की पुष्टि करें. इससे टेंप्लेट से ऐसेट डाउनलोड हो जाएंगी.

f510263d7cf38b80.png

एक्सपोर्ट किए गए डेटा में क्या-क्या शामिल होता है?

एक्सपोर्ट की गई ऐसेट में, आपके ऐप्लिकेशन के आइकॉन को लागू करने के लिए सभी ज़रूरी फ़ाइलें हैं. जैसे, यहां दी गई फ़ाइलें

  • Figma, अडैप्टिव कलर के लिए मोनोक्रोमैटिक फ़ोरग्राउंड आइकॉन को SVG फ़ाइल के तौर पर एक्सपोर्ट करता है. साथ ही, अडैप्टिव शेप आइकॉन के लिए फ़ोरग्राउंड और बैकग्राउंड, दोनों को एक्सपोर्ट करता है.
  • Figma, लेगसी आइकॉन भी उपलब्ध कराता है. ये आइकॉन, अलग-अलग मिपमैप डायरेक्ट्री में रिज़ॉल्यूशन के हिसाब से व्यवस्थित किए जाते हैं.

f98accd8c1ce99fc.png

हो गया! आपका आइकॉन डेवलपमेंट टीम को भेजने के लिए तैयार है.

इसके अलावा, अगर आपको Android Studio में अपने आइकॉन की झलक देखनी है और उन SVG को उनके फ़ाइनल ऐसेट फ़ॉर्मैट में बदलना है, तो अगले चरण पर जाएं.

8. इमेज ऐसेट स्टूडियो का इस्तेमाल करना

Android Studio का इस्तेमाल शुरू करना

1c70e1d460e8be34.png

  1. Android Studio डाउनलोड और इंस्टॉल करें.
  2. Android Studio लॉन्च करें.

Android Studio, आपको नया प्रोजेक्ट शुरू करने या मौजूदा प्रोजेक्ट चुनने के विकल्प दिखाता है.

  1. फ़िलहाल, कोई नया प्रोजेक्ट चुनें. नीचे दी गई स्क्रीन से, आपको नया प्रोजेक्ट सेट अप करने का तरीका पता चलेगा. c3a666acd93b7b07.png
  2. स्टार्टर टेंप्लेट में से कोई भी टेंप्लेट चुनें, क्योंकि हमें सिर्फ़ लॉन्च आइकॉन देखने हैं. b4feedbfae851843.png
  3. इसके बाद, अपने नए प्रोजेक्ट का नाम डालें और पूरा करें को चुनें. नया प्रोजेक्ट बनने में कुछ समय लगेगा.

इमेज ऐसेट स्टूडियो का इस्तेमाल करना

अब हम ऐसेट स्टूडियो नाम के टूल का इस्तेमाल करके, आपके आइकॉन को प्रोजेक्ट में जोड़ सकते हैं.

  1. इस टूल को ऐक्सेस करने के लिए, फ़ाइल मेन्यू > नया > इमेज ऐसेट को चुनें. 5d379aab7d1bab51.png
  2. Image Asset Studio खुलने पर, पाथ में मौजूद फ़ोल्डर आइकॉन को चुनकर, फ़ोरग्राउंड लेयर जोड़ें. एक्सपोर्ट की गई SVG फ़ाइल को drawable-anydpi/ic_launcher.svg के तौर पर चुनें4864e066f02b8ad.png
  3. बैकग्राउंड लेयर टैब चुनें. इसके बाद, उसी तरह एक्सपोर्ट की गई बैकग्राउंड लेयर चुनें. इसके अलावा, लॉन्चर के बैकग्राउंड के लिए कोई एक रंग चुनने के लिए, ऐसेट टाइप: रंग चुनें. 6cdc173881a1fda3.png
  4. फ़ोरग्राउंड लेयर पर वापस जाएं और दो बार जांच करें कि इमेज सेफ़ ज़ोन में है या नहीं. आइकॉन का साइज़ बदलकर, उसे बेहतर तरीके से दिखाएं. b0beca093edf54f2.png
  5. इसके बाद, आगे बढ़ें पर क्लिक करें. इससे आपसे पूछा जाएगा कि आइकॉन को आपके प्रोजेक्ट में कहां रखना है. इसे डिफ़ॉल्ट पर छोड़ दें या मुख्य पर स्विच करें. इसके बाद, खत्म करें पर क्लिक करें. आपको लॉन्चर की ऐसेट, res > drawable में मिलेंगी. दो बार क्लिक करने पर, फ़ाइनल वेक्टर ड्रॉएबल की झलक दिखेगी.

6c780144c7204425.png

  1. मोनोक्रोम लेयर ऐसेट को मैन्युअल तरीके से कॉपी करके res/drawable या res/drawable-v24 में चिपकाएं. इसके अलावा, मोनोक्रोम लेयर को मैन्युअल तरीके से इंपोर्ट करने के लिए, res फ़ोल्डर पर राइट क्लिक करें और New > Vector Asset चुनें.
  2. res/mipmap-anydpi-v26/ic_launcher.xml और res/mipmap-anydpi-v26/ic_launcher_round.xml में, मौजूदा android:monochrome="path/to/monochrome/asset को जोड़ें या बदलें, ताकि यह सही मोनोक्रोम ऐसेट की ओर इशारा करे.

9. झलक और संसाधन

एम्युलेटर में झलक देखना

हमने ऐसा इसलिए किया है, ताकि उन्हें ऐप्लिकेशन प्रोजेक्ट में जोड़ा जा सके. इससे हमें असली डिवाइस या एम्युलेटर पर झलक देखने की सुविधा मिलती है! आइए, देखते हैं कि हमारे आइकॉन असल में कैसे दिखेंगे.

आपके पास डिफ़ॉल्ट रूप से एक एम्युलेटर सेटअप होना चाहिए. अगर ऐसा नहीं है, तो Android वर्चुअल डिवाइस बनाएं. हरे रंग के 'चलाएं' बटन पर क्लिक करें. इससे प्रोजेक्ट बन जाएगा और एम्युलेटर खुल जाएगा.

फ़ाइनल ऐसेट

बहुत बढ़िया! आपने एम्युलेटर का इस्तेमाल करके, यह देख लिया है कि आपका लॉन्चर आइकॉन किसी डिवाइस पर कैसा दिखेगा. साथ ही, आपने उन्हें ऐप्लिकेशन प्रोजेक्ट में जोड़ दिया है. ऐसा करने से, ये वीडियो फ़ाइनल प्रोडक्शन फ़ॉर्म में बदल गए हैं! लेकिन वे कहां हैं?

ऐसेट, Android ऐप्लिकेशन में संसाधनों के तौर पर मौजूद होती हैं. इन्हें संसाधन पैनल खोलकर देखा जा सकता है. यह पैनल आम तौर पर बाईं ओर होता है. ऐप्लिकेशन में जाकर, अपना Res फ़ोल्डर ढूंढें. मेन्यू खोलने के लिए राइट क्लिक करें और Finder में खोलें (Mac पर) को चुनें. इससे Finder विंडो खुल जाएगी. इसके अलावा, इसी प्रोसेस का इस्तेमाल करके अपने ऐप्लिकेशन की बाकी ऐसेट को बदलकर और उनकी जांच करके, डेवलपमेंट और क्वालिटी अश्योरेंस (QA) में लगने वाले समय को बचाया जा सकता है. अगर आपने अपने ऐप्लिकेशन की बाकी ऐसेट को बदल दिया है, तो इस फ़ोल्डर को डेवलपमेंट टीम के साथ शेयर किया जा सकता है.

7a22d780b86d9713.png

10. बधाई हो

बहुत बढ़िया! आपने Android ऐप्लिकेशन बनाने के लिए ज़रूरी Android सिस्टम आइकॉन के बारे में जान लिया है. साथ ही, आपने अपने आइकॉन डिज़ाइन किए हैं और आइकॉन टेंप्लेट रिसॉर्स के बारे में जाना है. इसके अलावा, आपने शायद Android Studio में जाकर, प्रोडक्शन के लिए ऐसेट की झलक देखी है और उन्हें बदला है!

अगर आपका कोई सवाल है, तो @MaterialDesign on Twitter का इस्तेमाल करके, हमसे कभी भी पूछें.

डिज़ाइन से जुड़े ज़्यादा कॉन्टेंट और ट्यूटोरियल के लिए, youtube.com/MaterialDesign पर बने रहें