एंड्रॉइड डेवलपर्स के लिए ग्राफिक डिज़ाइन: आदर्श ऐप आइकन बनाना

इससे कोई फर्क नहीं पड़ता कि किसी ऐप को किस बाज़ार या सेवा के माध्यम से वितरित किया जाता है, उसका ऐप आइकन पहली चीज़ है जो एक संभावित उपयोगकर्ता नोटिस करेगा। नए उपयोगकर्ताओं को जोड़ने का प्रयास करते समय पहली छाप सबसे महत्वपूर्ण होती है, जिसका अर्थ है कि आइकन किसी भी एप्लिकेशन के प्रमुख घटक हैं। और, ऐप के इरादे की परवाह किए बिना, एक सुंदर एप्लिकेशन आइकन बनाना प्रत्येक ऐप के विकास चरण का एक महत्वपूर्ण हिस्सा होना चाहिए। यद्यपि तकनीकी अनुप्रयोगों के कई डेवलपर ग्राफिक्स को समझने के लिए समर्पित डिजाइनरों पर छोड़ देते हैं डिज़ाइन के बुनियादी सिद्धांत और उन्हें लागू करना कोई भी व्यक्ति कर सकता है, बशर्ते उसे प्रयोग करने की आदत हो विश्लेषण। ऐप आइकन कोई अपवाद नहीं हैं!

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

---

Android Oreo के साथ "अनुकूली आइकन" जारी होने के बाद, एक ऐप आइकन में तीन मूलभूत परतें शामिल हो सकती हैं: a अपारदर्शी पृष्ठभूमि परत, एक अग्रभूमि परत साथ पारदर्शिता समर्थन, और ए नकाब जो आइकन के आकार को परिभाषित करता है। ये सभी परतें 108 x 108 डीपी आकार की हैं, हालांकि केवल आंतरिक 72 x 72 डीपी ही उपयोगकर्ता को दिखाई दे सकती है; शीर्ष पर मास्क द्वारा काटा गया दूसरा क्षेत्र, आइकन को गतिशील दिखाने के लिए यूआई के भीतर विशेष प्रभावों के लिए उपयोग किया जाता है। अशिक्षितों के लिए, डी पी या प्रदर्शन-स्वतंत्र पिक्सेल एंड्रॉइड के सभी इंटरफ़ेस के लिए एक मापने वाली इकाई के रूप में खड़ा है, और इसे आकार के बराबर परिभाषित किया गया है 160 डॉट-प्रति-इंच डिस्प्ले पर एक पिक्सेल.)

गूगल के निक बुचर 66 डीपी सर्कल के बारे में बात करते हैं आइकन के केंद्र में जिसे कोई भी मुखौटा नहीं हटा सकता, उसे "सुरक्षित क्षेत्र" कहा जाता है। यह वह जगह है जहां हमारे आइकन डिज़ाइन के प्राथमिक तत्व बाद में बैठेंगे, जब हम वास्तविक डिज़ाइनिंग पर पहुंचेंगे। इस 33 डीपी त्रिज्या से परे कुछ भी आइकन में दिखाई नहीं दे सकता है जबकि उस पर एक आकार का मुखौटा लगा हुआ है।

चूंकि यूआई स्केलिंग के कारण आइकन का वेक्टर चित्र होना बेहतर है, इसलिए हमें अपना आइकन बनाने के लिए एक वेक्टर ग्राफिक्स संपादक की आवश्यकता होगी। इंकस्केप ओपन-सोर्स है और अधिक महंगे सॉफ़्टवेयर का एक बढ़िया विकल्प है, इसलिए इस ट्यूटोरियल के प्रयोजनों के लिए यह हमारी पसंद होगी। मैंने एक प्रोजेक्ट फ़ाइल भी डिज़ाइन की है यहां उपलब्ध है इसमें सुरक्षित क्षेत्र और Google की स्वयं की डिज़ाइन कीलाइन चिह्नित है, और एक निफ्टी लेयर मास्क है जो हमें आइकन के आकार का पूर्वावलोकन करने देता है।

Inkscape में प्रोजेक्ट फ़ाइल खुलने के साथ भरें और स्ट्रोक करें (Shift+Ctrl+F), पीएनजी छवि निर्यात करें (Shift+Ctrl+E), और परतें (Shift+Ctrl+L) पैनल खुले हैं, हम आरंभ करने के लिए तैयार हैं। लेयर्स पैनल वह जगह है जहां प्रोजेक्ट का मुख्य उद्देश्य रहता है अग्रभूमि और पृष्ठभूमि परतों का उद्देश्य उनके नाममात्र घटकों को रखना है, और दिशा-निर्देश और नकाब संदर्भ के लिए चालू और बंद टॉगल किया जाना है (उनके बगल में छोटे आंख आइकन पर क्लिक करके)।

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

पृष्ठभूमि

आइए पृष्ठभूमि स्थापित करने से शुरुआत करें, जिसमें एक नीला आकाश और केंद्र में एक पीला सूरज होगा। मोड़ नकाब अदृश्य, मैं चयन करता हूं और दृश्यमान बनाता हूं पृष्ठभूमि परत, पूरे कैनवास को भरें आयत और वर्ग बनाएँ टूल (F4), और आयत का भरण रंग सेट करें भरें और स्ट्रोक करें 64B5F6FF (एक हल्का नीला) के अनुसार सामग्री रंग पैलेट. फिर मैं चयन करता हूं वृत्त, दीर्घवृत्त और चाप बनाएँ (F5) टूल, और Shift और Ctrl दबाए रखते हुए, कीलाइन के केंद्र से दूसरे सबसे बड़े सर्कल तक एक सर्कल बनाएं, और उसका रंग FFEE58FF पर सेट करें, जो हमें एक गर्म छोटी धूप देता है। किसी भी प्रकार की डिज़ाइनिंग में बुनियादी ज्यामिति का पालन करना हमेशा अच्छा होता है, और एंड्रॉइड की डिज़ाइन भाषा विशेष रूप से सरलता को प्रोत्साहित करती है। भौतिक दिशानिर्देशों का अनुपालन करने के लिए, मैं सूर्य को एक सूक्ष्म बूंद छाया भी देता हूं फिल्टर → छाया और चमक → ड्रॉप शैडो.

अग्रभूमि

करने के लिए आ रहा है अग्रभूमि, मैं अन्य वृत्तों की परिधियों से वृत्त खींचकर सूर्य के चारों ओर बादलों का एक समूह बनाता हूँ, और उन सभी को EEEEEEFF का रंग देता हूँ। फिर मैं एकाधिक ऑब्जेक्ट पर राइट-क्लिक करके और चयन करके मंडलियों को उचित रूप से समूहित करता हूं समूह, और अंत में मुझे प्राप्त दो अंतिम आकृतियों पर ड्रॉप शैडो जनरेटर चलाएँ। मोड़ दिशा-निर्देश अदृश्य और टॉगलिंग अग्रभूमि और पृष्ठभूमि वैकल्पिक रूप से, हमारे मौसम ऐप के आइकन की घटक परतें देखी जा सकती हैं। यदि ऐप के आइकन को कभी भी होम स्क्रीन पर खींचा जाता है, तो बादल स्थिर सूर्य पर झरना शुरू कर देंगे!

परिणाम

नकाब अब इसे दृश्यमान बनाया जा सकता है और इसमें बदलाव किया जा सकता है नोड्स द्वारा पथ संपादित करें (F2) विभिन्न आकार के मुखौटों को आज़माने और उनका अनुकरण करने के लिए। इसके अलावा, दोनों परतों को अलग-अलग उपयोग करके निर्यात किया जा सकता है पीएनजी छवि निर्यात करें उपयोग के लिए पैनल एंड्रॉइड स्टूडियो में, और एक साथ एक के लिए गूगल प्ले आइकन.

उत्पाद आइकन बनाते समय, किसी एप्लिकेशन के उद्देश्य को लेने का प्रयास करना, उसे उसके सबसे अमूर्त दृश्य रूप में वितरित करना और सरल ज्यामिति का उपयोग करके उसका प्रतिनिधित्व करना हमेशा अच्छा अभ्यास होता है। डिज़ाइन में कोई भी घटक जितना सरल होता है, वह आमतौर पर उतना ही बेहतर और अधिक विश्वसनीय रूप से काम करता है, और यह ग्राफिक डिज़ाइन में भी सच होता है। अधिकांश उद्देश्यों के लिए, अग्रभूमि में एक वस्तु का आकार और पृष्ठभूमि में एक ठोस रंग या एक पैटर्न (या इसके विपरीत) ठीक काम करता है, लेकिन हमारे उदाहरण के मामले की तरह, महसूस होने पर वस्तुओं की एक और परत का उपयोग किया जा सकता है ज़रूरी; बहुत अधिक स्टैकिंग या ड्रॉप शैडो का उपयोग केवल आइकन के डिज़ाइन को जटिल बना देगा।

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