iPhone ऐप प्रतीक - सटीक त्रिज्या?


313

मैं अपने iPhone ऐप के लिए आइकन बनाने का प्रयास कर रहा हूं, लेकिन यह नहीं जानता कि iPhone के आइकन का उपयोग करने वाले सटीक त्रिज्या कैसे प्राप्त करें। मैंने एक ट्यूटोरियल या टेम्प्लेट की खोज की है और खोजा है, लेकिन एक नहीं मिल रहा है।

मुझे यकीन है कि मैं सिर्फ एक मोरन हूं, लेकिन आप इलस्ट्रेटर या फ़ोटोशॉप से ​​अपने आइकन के साथ गोल कोनों को बिल्कुल कैसे प्राप्त करते हैं?

संपादित करें:

रेटिना iPad के लिए त्रिज्या क्या है?


2
आपको विश्वास है कि आपको इसकी आवश्यकता क्यों है?
निक वेय्स

@NickVeys कितना भी पुराना क्यों न हो, एक अनुत्तरित प्रश्न मुझे परेशान करता है। यकीन नहीं होता कि यह पोस्टर का इरादा है, लेकिन यह जेलब्रेक ऐप या आईओएस के बाहर की कलाकृति के लिए हो सकता है।
tkbx

9
और फिर आईओएस 7 आया, "डिफ़ॉल्ट" आइकन त्रिज्या में वृद्धि की, और इस प्रश्न को तुरंत आउट-ऑफ-डेट किया।
मार्जापावर

1
प्रतीक किसी भी अधिक गोल नहीं होना चाहिए। Apple को अब बिना किसी कोने के चौकोर ग्राफिक्स की आवश्यकता है
मार्क व्हिटकर

1
आपको बस 1024 * 1024 वर्ग आइकन की आवश्यकता है, सभी आवश्यक आकार उत्पन्न करने के लिए कुछ ऐप जैसे कि Prepo का उपयोग करें। डिवाइस आपके लिए बाकी काम करेगा।
NSDeveloper

जवाबों:


340

आप अपने ऐप के लिए चार आइकन (आज के अनुसार) बना सकते हैं और वे सभी एक अलग दिख सकते हैं - जरूरी नहीं कि यह 512x512 छवि पर आधारित हो।

  • कोने की त्रिज्या 512x512 आइकन = 80 (iTunesArtwork)
  • 1024x1024 आइकन = 180 (iTunesArtwork रेटिना ) के लिए कोने का दायरा
  • 57x57 आइकन = 9 (iPhone / iPod Touch) के लिए कोने का दायरा
  • 114x114 आइकन के लिए कोने का दायरा = 18 (iPhone / iPod Touch Retina )
  • कोने का त्रिज्या 72x72 आइकन = 11 (iPad) के लिए
  • 144x144 आइकन के लिए कोने का दायरा = 23 (iPad रेटिना )

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

संपादित करें: @ devin-g-rhode से टिप्पणी देखें और आप देख सकते हैं कि भविष्य के किसी भी आकार के आइकन के आकार 1:6.4के कोने के अनुपात का अनुपात होना चाहिए । Https://stackoverflow.com/a/29550364/396005 से एक बहुत अच्छा जवाब है, जिसमें छवि मुखौटा फ़ाइलों का स्थान है जो एसडीके में राउंडिंग आइकन कोनों के लिए उपयोग किया जाता है

रेटिना-संगत फ़ाइल जोड़ने के लिए, उसी फ़ाइल नाम का उपयोग करें और '@ 2x' जोड़ें। इसलिए अगर मेरे पास icon.png नाम के मेरे 72x72 आइकन के लिए एक फ़ाइल है, तो मैं प्रोजेक्ट / लक्ष्य के लिए icon@2x.png नाम की 114x114 PNG फ़ाइल भी जोड़ूंगा और Xcode स्वचालित रूप से एक रेटिना डिस्प्ले पर आइकन के रूप में उपयोग करेगा। यदि आपने इसे सही किया है तो आप इसे एप्लिकेशन लक्ष्य के सारांश पृष्ठ पर देख सकते हैं। वही आपके लॉन्च छवियों के लिए काम करता है। 320x480 में लॉन्च का उपयोग करें और 640x960 पर लॉन्च करें।


9
ध्यान दें कि iPhone 4 पर आइकन 72x72 नहीं है, लेकिन 18 के त्रिज्या के साथ 114x114 है । ;)
पास्कल

1
@ पास्कल @stinkbutt: फिक्स्ड और +1।
BoltClock

98
512/80 == 114/18 == 72/11 == 57/9 == 6.4 आप अपने आइकन की वर्ग लंबाई ले सकते हैं, और इसे सेब के समान अनुपात प्राप्त करने के लिए 6.4 से विभाजित कर सकते हैं। तो एक 19x19 आइकन के लिए, 19/ 6.4 ~ 3px सीमा त्रिज्या
डेविन जी रोड

8
ITunesArtwork के लिए 80px त्रिज्या निश्चित रूप से गलत है। आप आइट्यून्स बंडल में iTunes में उपयोग की जाने वाली मुखौटा छवि पा सकते हैं। यह 90 पीएक्स है। क्या इसे हाल ही में बदला जा सकता था?
झप्पी

6
रेटिना आईपैड त्रिज्या (144x144 आइकन) 23 पिक्सल, FYI है। और 1024x1024 आइकन में 160 पिक्सेल का त्रिज्या होना चाहिए । हालांकि खुद को इनकी गणना करना बहुत आसान है।
एंड्रयू आर।

283

इस पोस्ट में कुछ उत्तरों की कोशिश करने के बाद, मैंने लूई मंटिया (पूर्व Apple, स्क्वायर और Iconfactory डिजाइनर) से परामर्श किया और इस पोस्ट पर अब तक के सभी उत्तर गलत हैं (या कम से कम अधूरे हैं)। Apple 57px आइकन से शुरू होता है और 10 का दायरा तब वहां से ऊपर या नीचे होता है। इस प्रकार आप किसी भी आइकन आकार के लिए त्रिज्या की गणना कर सकते हैं 10/57 x new size(उदाहरण के लिए 10/57 x 11420 देता है, जो 114px आइकन के लिए उचित त्रिज्या है)। यहां सबसे अधिक उपयोग किए जाने वाले आइकन, उचित नामकरण सम्मेलनों, पिक्सेल आयामों, और कोने रेडी की एक सूची है।

  1. Icon1024.png - 1024px - 179.649
  2. Icon512.png - 512px - 89.825
  3. Icon.png - 57px - 10
  4. Icon@2x.png - 114px - 20
  5. आइकन -72. पीएनजी - 72 पीएक्स - 12.632
  6. चिह्न-72@2x.png - 144px - 25.263
  7. चिह्न-लघु.पंज - 29px - 5.088
  8. Icon-Small@2x.png - 58px - 10.175

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

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

अतिरिक्त पढ़ने:

अतिरिक्त आइकन आकारों और अन्य डिजाइन विचारों पर नेवेन मृगन: आईओएस ऐप आइकन आकार

फोटोशॉप में राउंड करेक्ट बनाने के लिए अलग-अलग विकल्पों पर बजांगो के मार्क एडवर्ड्स और यह क्यों मायने रखता है: राउंड करेक्ट

आइकन के आकार और डिज़ाइन के विचारों पर Apple के आधिकारिक डॉक्स: प्रतीक और चित्र

अपडेट करें:

मैंने फ़ोटोशॉप CS6 में कुछ परीक्षण किए और ऐसा लगता है जैसे दशमलव बिंदु के बाद 3 अंक सटीक सटीक वेक्टर के साथ समाप्त होने के लिए पर्याप्त परिशुद्धता है (कम से कम जैसा कि फ़ोटोशॉप द्वारा 3200% ज़ूम में प्रदर्शित किया गया है)। राउंड रेक्ट टूल कभी-कभी इनपुट को निकटतम पूरे नंबर पर राउंड करता है, लेकिन आप 90 और 89.825 के बीच महत्वपूर्ण अंतर देख सकते हैं। और कई बार राउंड रेक्टेंगल टूल राउंड अप नहीं किया और वास्तव में दशमलव बिंदु के बाद कई अंक दिखाए। निश्चित नहीं है कि वहाँ क्या चल रहा है, लेकिन यह निश्चित रूप से अधिक सटीक संख्या का उपयोग और भंडारण कर रहा है जो दर्ज किया गया था।

किसी भी तरह, मैंने ऊपर की सूची को दशमलव बिंदु के बाद सिर्फ 3 अंकों को शामिल करने के लिए अद्यतन किया है (इससे पहले कि 13 थे!)। ज्यादातर स्थितियों में यह संभव है कि 90px की त्रिज्या पर नकाबपोश पारदर्शी 512px आइकन और 89.825 पर नकाबपोश के बीच का अंतर बताना मुश्किल होगा, लेकिन गोल कोने के एंटीलियासिंग निश्चित रूप से थोड़ा अलग होंगे और कुछ परिस्थितियों में विशेष रूप से दिखाई देंगे। यदि दूसरा, अधिक सटीक मुखौटा Apple द्वारा, कोड में, या अन्यथा लागू किया जाता है।


बहुत बढ़िया जवाब। मैं व्यक्तिगत रूप से हमेशा 90px 90x त्रिज्या के साथ स्टार्ट पॉइंट के रूप में इस्तेमाल करता था और फिर आवश्यकतानुसार स्केल करता था। सही काम करता है।
अलेक्जेंडर वैक्सीक

1
अलेक्जेंडर, हालांकि यह अधिकांश परिस्थितियों में ठीक लग सकता है, 90 के साथ शुरू करना सभी परिस्थितियों में सही काम नहीं करेगा । ऊपर मेरा अपडेट देखें।
शराबी

2
बहुत विस्तार के साथ महान पोस्ट। बहुत खुशी है कि आपने लूई को सटीक जवाब दिया। मेरा सभी 57px के आधार पर किया गया है, फिर बढ़ाया गया, लेकिन यह एक अस्थायी था। इस बात की पुष्टि होने पर कि Apple क्या करता है।
मार्क एडवर्ड्स

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

कृपया इस उत्तर को वोट दिया क्योंकि शीर्ष 1 उत्तर अब सटीक नहीं है। मैंने पाया है कि 160 त्रिज्या वाला मेरा 1024px आइकन फिट नहीं है। तो फिर से पढ़ने के बाद, यह पोस्ट अधिक सटीक है, 1024px आइकन के लिए त्रिज्या 180 होनी चाहिए।
क्वान गुयेन

34

मुझे बहुत सी "पीएक्स" चर्चा दिखाई देती है लेकिन कोई भी प्रतिशत बात नहीं कर रहा है जो कि निर्धारित संख्या है जिसे आप गणना करना चाहते हैं।

22.37% यहां प्रमुख प्रतिशत है। उपरोक्त किसी भी छवि आकार को 0.2237 से गुणा करें और आपको उस आकार के लिए सही पिक्सेल त्रिज्या मिल जाएगी।

IOS 8 से पहले, Apple ने 15.625% का उपयोग करते हुए कम गोलाई का उपयोग किया।

संपादित करें : iOS 8/9/10 की त्रिज्या प्रतिशत के साथ टिप्पणी करने के लिए धन्यवाद @ क्रिस प्रिंस: 22.37%


1024x1024 आइकन (मैं कुछ प्रेस किट ग्राफिक्स बना रहा हूं) के लिए, यह 160 के एक कोने के त्रिज्या देता है, जो मेरी आंख के अनुसार बहुत छोटा है।
क्रिस प्रिंस

3
मेरी आंख के लिए, फिर से, प्रेस किट ग्राफिक्स के लिए, किसी भी आधिकारिक Apple सबमिशन के लिए नहीं, 22.37% iOS8 गोलाई के लिए अधिक सुंदर लग रहा है। उदाहरण के लिए, 1024x1024 के लिए फ़ोटोशॉप में 229 px त्रिज्या।
क्रिस प्रिंस

@ क्रिस इस जवाब को निश्चित रूप से iOS8 के लिए अपडेट करने की आवश्यकता है, इनपुट के लिए धन्यवाद
बिटविट

दरअसल, प्रतिशत 22.5% है।
सागरजहा

28

महत्वपूर्ण: iOS 7 आइकन समीकरण

IOS 7 की आगामी रिलीज के साथ आप देखेंगे कि "मानक" आइकन त्रिज्या बढ़ा दिया गया है। तो इस जवाब के साथ Apple और मैंने क्या करने की कोशिश की।

ऐसा प्रतीत होता है कि 120px आइकन के लिए जो फॉर्मूला iOS 7 पर सबसे अच्छी तरह से अपने आकार का प्रतिनिधित्व करता है, वह निम्नलिखित सुपरलिप्स है:

|x/120|^5 + |y/120|^5 = 1

स्पष्ट रूप से आप 120संबंधित फ़ंक्शन को प्राप्त करने के लिए वांछित आइकन आकार के साथ संख्या बदल सकते हैं ।

मूल

आपको एक ऐसी छवि प्रदान करनी चाहिए जिसमें 90 ° कोने हों (यह आपके आइकन के कोनों को काट देने से बचने के लिए महत्वपूर्ण है - iOS आपके लिए यह तब करता है जब वह कोने में घूमने वाला मास्क लागू करता है) ( Apple प्रलेखन )

सबसे अच्छा तरीका अपने आइकनों के कोनों को बिल्कुल भी गोल नहीं करना है। यदि आप अपने आइकन को एक वर्ग आइकन के रूप में सेट करते हैं, तो iOS स्वचालित रूप से पूर्वनिर्धारित मास्क के साथ आइकन को ओवरले करेगा जो उचित गोल कोनों को सेट करेगा।

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

यह दृष्टिकोण प्रत्येक आइकन आकार (iPhone / iPod / iPad / रेटिना), और iTunes कलाकृति के लिए भी मान्य है। मैंने एक-दो बार इस दृष्टिकोण का पालन किया, और यदि आप चाहें तो मैं आपको एक एप्लिकेशन के लिए एक लिंक पोस्ट कर सकता हूं जो देशी स्क्वायर आइकन का उपयोग करता है।

संपादित करें

इस उत्तर को बेहतर ढंग से समझने के लिए, कृपया iOS आइकन के बारे में आधिकारिक Apple दस्तावेज़ देखें । इस पृष्ठ में यह स्पष्ट रूप से कहा गया है कि एक आईओएस डिवाइस पर प्रदर्शित होने पर एक वर्ग आइकन स्वचालित रूप से इन चीजों को प्राप्त करेगा:

  1. कोने पर गोलाकार आकृति
  2. परछाई डालना
  3. चिंतनशील चमक (जब तक आप चमक प्रभाव को नहीं रोकते)

इसलिए, आप जो भी प्रभाव चाहते हैं उसे प्राप्त कर सकते हैं बस एक सादा वर्ग आइकन खींचना और उसमें सामग्री भरना। अंतिम कोना त्रिज्या कुछ वैसा ही होगा जैसा कि अन्य उत्तर यहाँ कह रहे हैं, लेकिन इसकी कभी गारंटी नहीं होगी, क्योंकि वे संख्याएँ iOS पर आधिकारिक Apple प्रलेखन का हिस्सा नहीं हैं। वे आपको वर्ग चिह्न बनाने के लिए कहते हैं, तो ... क्यों नहीं?


हां, सही है। ठीक यही निष्कर्ष मैं आया हूँ; जब तक किसी के पास एक डिज़ाइनर का भुगतान करने का समय नहीं है और प्रत्येक डिवाइस के लिए प्रत्येक आइकन का व्यक्तिगत रूप से परीक्षण करें।
डॉगवेदर

आपके आइकन खराब होने पर बहुत खराब दिखेंगे ।
रैयस्ट

वे नीचे नहीं हैं। आपको प्रत्येक डिवाइस के लिए सही आइकन आकार सेट करना होगा, लेकिन कोनों को खींचने के बजाय, आप आइकन को एक सादे वर्ग प्रारूप में छोड़ देते हैं। बाकी के काम आपके लिए Apple ही करेगा। स्केलिंग की जरूरत नहीं। बस कोशिश करो और मुझे पता है!
मार्जापावर

Marzapower, जब तक आप Apple के प्रकाश प्रभाव से खुश हैं, तब तक आप सही हैं। जब तक आप पूर्व-रेंडर नहीं करते हैं, तब तक आप एक के बिना एक नहीं हो सकते
गॉर्डन डोव

एप्पल के प्रकाश प्रभाव का गोल कोनों से कोई लेना-देना नहीं है। वैसे आप अपने आइकन में चौकोर आइकन का उपयोग करके ओवरले प्रभाव को बदल सकते हैं, और सब कुछ ठीक चलेगा।
15

20

कोने के दायरे के बारे में बहस करने वाले लोग थोड़े बढ़े हुए हैं लेकिन वास्तव में ऐसा नहीं है।

से इस ब्लॉग :

Apple के भौतिक उत्पादों का एक 'रहस्य' यह है कि वे स्पर्शरेखा से बचते हैं (जहां एक त्रिज्या एक बिंदु पर एक पंक्ति से मिलती है) और अपनी सतहों को वक्रता निरंतरता कहा जाता है ।

यहां छवि विवरण दर्ज करें

आप की जरूरत नहीं है iOS के लिए माउस को कोने की त्रिज्या लागू करने के लिए। बस वर्गाकार चिह्न प्रदान करें। लेकिन अगर आप अभी भी जानना चाहते हैं कि वास्तविक आकार को स्क्विर्कल कहा जाता है और नीचे सूत्र है:

यहां छवि विवरण दर्ज करें


2
आईओएस 7 के बाद से आईफोन आइकन गोल कोनों के साथ वर्ग नहीं हैं। यह स्वीकृत उत्तर होना चाहिए (भले ही सूत्र घुमावदार कोनों के आकार का स्पष्ट उत्तर न हो)
मैड्रेम्स

1
@Crazyrems धन्यवाद लेकिन bec देने के लिए कोई त्रिज्या आकार नहीं है। कोनों को एक विशिष्ट "सूत्र" के साथ वर्ग के आकार के अनुसार घुमावदार (गोल नहीं) किया जाता है।
ओनुर येल्ड्रिम्म

16

डार्बर्ड के उत्तर में सही त्रिज्या की गणना करने का सूत्र है, लेकिन जब से आप टेम्प्लेट की तलाश कर रहे थे, सभी मास्क और ओवरले इस निर्देशिका में पाए जा सकते हैं:

/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator5.1.sdk/System/Library/PrivateFrameworks/MobileIcons.framework

(पथ XCode के हाल के संस्करणों के लिए है। पुराने संस्करण के लिए यह शायद अंदर / डेवलपर /) होगा।

जैसा कि दूसरों ने उल्लेख किया है, आपको उन्हें स्वयं मास्क नहीं करना चाहिए, लेकिन आप इनका उपयोग यह जांचने के लिए कर सकते हैं कि आपके आइकन एक बार मुखौटे में कैसे दिखेंगे।

(इस खोज का श्रेय नेवेन मृगन IIRC को जाता है)


1
यह पथ एसडीके के हर संस्करण के साथ बदलता है। आप इस आदेश के साथ वर्तमान पथ का पता लगा सकते हैंfind /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs -name 'MobileIcons.framework'
ब्रूनो ब्रोंस्की

8

57 x 57 पिक्सेल आइकन के कोने का त्रिज्या 9 पिक्सेल है।


2
Willc2, आप सही हैं - लेकिन अगर फ्रैंक iPhone आइकन को ठीक से डिजाइन कर रहा है तो वह 512x512 छवि के साथ काम कर रहा होगा और उस स्तर पर सीमा त्रिज्या 80 पिक्सेल है जो 9 गुना तक बंद हो जाता है जब आप इसे 57x57 से कम कर देते हैं।
जेसडेक

6

जैसा कि दूसरों ने कहा है, आप अपने कोनों को गोल नहीं करना चाहते हैं। आप फ्लैट (कोई परत या अल्फा) वर्ग ग्राफिक्स जहाज करना चाहते हैं। Apple ने अपने मास्क को iOS7 में और फिर iOS8 में राउंड करने के लिए उपयोग किए जाने वाले मास्क को बदल दिया। आप इन मास्क को अपने Xcode एप्लीकेशन बंडल के अंदर पा सकते हैं। पथ हर नए एसडीके संस्करण के साथ बदलता है जो वे जारी करते हैं। तो, मैं आपको दिखाता हूँ कि आप इसे हमेशा कैसे पा सकते हैं।

find /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs -name 'MobileIcons.framework'

इस क्षण, उस कमांड द्वारा पाया गया मार्ग है, /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator.sdk/System/Library/PrivateFrameworks/MobileIcons.frameworkलेकिन उस पर भरोसा मत करो। इसे स्वयं खोजने के लिए कमांड का उपयोग करें।

वह पथ इन फ़ाइलों के साथ एक निर्देशिका को इंगित करता है (फिर से, इस पोस्ट के समय)

./AppFolderBadgeIconMask-128_1only_.png
./AppFolderBadgeIconMask-16_1only_.png
./AppFolderBadgeIconMask-256_1only_.png
./AppFolderBadgeIconMask-32_1only_.png
./AppFolderBadgeIconMask-512_1only_.png
./AppFolderBadgeIconOverlay-128_1only_.png
./AppFolderBadgeIconOverlay-16_1only_.png
./AppFolderBadgeIconOverlay-256_1only_.png
./AppFolderBadgeIconOverlay-32_1only_.png
./AppFolderBadgeIconOverlay-512_1only_.png
./AppFolderBadgeIconShadow-128_1only_.png
./AppFolderBadgeIconShadow-16_1only_.png
./AppFolderBadgeIconShadow-256_1only_.png
./AppFolderBadgeIconShadow-32_1only_.png
./AppFolderBadgeIconShadow-512_1only_.png
./AppIconMask@2x~ipad.png
./AppIconMask@2x~iphone.png
./AppIconMask@3x~iphone.png
./AppIconMask~ipad.png
./AppIconMask~iphone.png
./CarAppIconMask.png
./CarNotificationAppIconMask.png
./DefaultIcon-20.png
./DefaultIcon-20@2x.png
./DefaultIcon-20@3x.png
./DefaultIcon-29.png
./DefaultIcon-29@2x.png
./DefaultIcon-29@3x.png
./DefaultIcon-40.png
./DefaultIcon-40@2x.png
./DefaultIcon-40@3x.png
./DefaultIcon-60@2x~iphone.png
./DefaultIcon-60@3x~iphone.png
./DefaultIcon-76@2x~ipad.png
./DefaultIcon-76~ipad.png
./DocumentBadgeMask-145.png
./DocumentBadgeMask-145@2x.png
./DocumentBadgeMask-20.png
./DocumentBadgeMask-20@2x.png
./DocumentBadgeMask-20@3x.png
./DocumentBase-320@2x~ipad.png
./DocumentBase-320~ipad.png
./DocumentBase-48.png
./DocumentBase-48@2x.png
./DocumentBase-48@3x.png
./DocumentMask-320@2x~ipad.png
./DocumentMask-320~ipad.png
./DocumentMask-48.png
./DocumentMask-48@2x.png
./DocumentMask-48@3x.png
./NanoDefaultIcon-24.0@2x.png
./NanoDefaultIcon-27.5@2x.png
./NanoDefaultIcon-40.0@2x.png
./NanoDefaultIcon-44.0@2x.png
./NanoDefaultIcon-86.0@2x.png
./NanoDefaultIcon-98.0@2x.png
./NanoIconMaskChiclet-24.0@2x.png
./NanoIconMaskChiclet-27.5@2x.png
./NanoIconMaskChiclet-40.0@2x.png
./NanoIconMaskChiclet-44.0@2x.png
./NanoIconMaskChiclet-86.0@2x.png
./NanoIconMaskChiclet-98.0@2x.png
./NewsstandDefaultMagazine_1only_.png
./NewsstandDefaultNewspaper_1only_.png
./NewsstandMagazineGradientLeft@2x~ipad.png
./NewsstandMagazineGradientLeft@2x~iphone.png
./NewsstandMagazineGradientLeft~ipad.png
./NewsstandMagazineGradientLeft~iphone.png
./NewsstandMagazineGradientRight@2x~ipad.png
./NewsstandMagazineGradientRight@2x~iphone.png
./NewsstandMagazineGradientRight~ipad.png
./NewsstandMagazineGradientRight~iphone.png
./NewsstandMagazineSwitcherGradientLeft.png
./NewsstandMagazineSwitcherGradientLeft@2x.png
./NewsstandNewspaperGradientBottom@2x~ipad.png
./NewsstandNewspaperGradientBottom@2x~iphone.png
./NewsstandNewspaperGradientBottom~ipad.png
./NewsstandNewspaperGradientBottom~iphone.png
./NewsstandNewspaperGradientLeft@2x~ipad.png
./NewsstandNewspaperGradientLeft@2x~iphone.png
./NewsstandNewspaperGradientLeft~ipad.png
./NewsstandNewspaperGradientLeft~iphone.png
./NewsstandNewspaperGradientRight@2x~ipad.png
./NewsstandNewspaperGradientRight@2x~iphone.png
./NewsstandNewspaperGradientRight~ipad.png
./NewsstandNewspaperGradientRight~iphone.png
./NewsstandNewspaperSwitcherGradientBottom.png
./NewsstandNewspaperSwitcherGradientBottom@2x.png
./NewsstandNewspaperSwitcherGradientLeft.png
./NewsstandNewspaperSwitcherGradientLeft@2x.png
./NewsstandNewspaperSwitcherGradientRight.png
./NewsstandNewspaperSwitcherGradientRight@2x.png
./NewsstandThumbnailShadow@2x~ipad.png
./NewsstandThumbnailShadow@2x~iphone.png
./NewsstandThumbnailShadow~ipad.png
./NewsstandThumbnailShadow~iphone.png
./NotificationAppIconMask.png
./NotificationAppIconMask@2x.png
./NotificationAppIconMask@3x.png
./SpotlightAppIconMask.png
./SpotlightAppIconMask@2x.png
./SpotlightAppIconMask@3x.png
./TableIconMask.png
./TableIconMask@2x.png
./TableIconMask@3x.png
./TableIconOutline.png
./TableIconOutline@2x.png
./TableIconOutline@3x.png

जैसा कि आप देख सकते हैं, बहुत सारे मुखौटे हैं, लेकिन उन्हें बहुत स्पष्ट रूप से नामित किया गया है। यहाँ AppIconMask@3x~iphone.pngछवि है:

AppIconMask@3x~iphone.png

आप अपने आइकन का परीक्षण करने के लिए इसका उपयोग कर सकते हैं कि यह देखने के बाद कि यह ठीक है या नहीं। लेकिन, अपने कोनों को गोल न करें । यदि आप करते हैं, जब एप्पल उन मास्क को फिर से बदलता है, तो आपके पास कलाकृतियां होंगी।


6

इस प्रश्न के पिछले सभी उत्तर अब पुराने हो चुके हैं। कम से कम मई 2015 के बाद से, Apple को आपको बिना किसी गोलाई के चौकोर चिह्न प्रदान करने की आवश्यकता है:

आइकन कोनों को चौकोर रखें। सिस्टम एक मुखौटा लागू करता है जो आइकन कोनों को स्वचालित रूप से गोल करता है।

https://developer.apple.com/ios/human-interface-guidelines/graphics/app-icon/


1
लिंक को इस उत्तर में अद्यतन किया जाना चाहिए: developer.apple.com/ios/human-interface-guidelines/graphics/…
जेरेमी वाइब

5

यदि स्ट्रोक पर विचार नहीं किया जाता है, तो 57x57 आइकन के लिए सटीक त्रिज्या वास्तव में 10px है।

मुझे यह जानकारी iconreference से प्राप्त होती है


1
मैं इससे सहमत हु। यदि आप सेटिंग ऐप की तरह एक प्रभाव पाने के लिए अंदर स्ट्रोक के साथ अपने ऐप आइकन को तैयार कर रहे हैं तो 9px त्रिज्या का उपयोग करना सही नहीं लगता है। 57x57px आइकन के लिए 10px और @ 2x आइकन के लिए 20px मेरे लिए बहुत बेहतर है।
एलेक्स रॉबिन्सन

4

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

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


देखें @ जवाब, उस फ़ोल्डर में पीएनजी-मास्क का उपयोग करें जिसका वह उल्लेख करता है।
गुस्ताव

3

IPhone आपके लिए कोनों को गोल करता है, आपको बस एक वर्ग 57x57 png आइकन चाहिए और यू अच्छा होना चाहिए


4
आधिकारिक ऐप्स के लिए, यह सच है (ठीक है, 57x57 का प्रकार निश्चित रूप से एकमात्र आकार नहीं है, जिसकी आपको और अधिक आवश्यकता है)। लेकिन, जेलब्रेक ऐप्स के लिए, यह राउंडिंग आपके लिए नहीं की गई है। आपको PNG ग्राफ़िक्स में राउंडिंग स्वयं करने की आवश्यकता है। इसलिए, यह बहुत अच्छी बात हो सकती है।
नैट

3

कर रहे हैं दो पूरी तरह से परस्पर विरोधी जवाब वोट एक 160px है की बड़ी संख्या के साथ उपर 1024 अन्य 180px @ 1024 है। तो एक चुड़ैल?

मैंने कुछ प्रयोग किए और मुझे लगता है कि यह 180px @ 1024 है इसलिए ड्रोनबर्ड सही है।

मैंने आईट्यून्स यू आइकन को ऐप स्टोर से डाउनलोड किया है यह 175x175px है। मैंने इसे फ़ोटोशॉप में 1024px तक बढ़ा दिया और इस पर दो आकृतियाँ लगाईं, एक 160px त्रिज्या वाली और 180px वाली।

जैसा कि आप 160px (1 एक) के साथ आकार (पतली ग्रे लाइन) के नीचे देख सकते हैं, जबकि 180px के साथ एक बहुत अच्छा लग रहा है।

160px त्रिज्या के साथ आकारयहां छवि विवरण दर्ज करें

यह वही है जो अब मैं फोटोशॉप में करता हूं:

  1. मैं एक कैनवास का आकार 1026x1026px मुख्य डिजाइन स्मार्ट ऑब्जेक्ट के लिए 180px मास्क के साथ बनाता हूं
  2. मैं 5 बार मुख्य स्मार्ट ऑब्जेक्ट की नकल करता हूं और उन्हें 1024px, 144px, 114px, 72px और 57px का आकार देता हूं।
  3. मैंने प्रत्येक स्मार्ट ऑब्जेक्ट्स पर "नई स्तरित आधारित स्लाइस" डाली और मैंने उनके आकार (जैसे आइकन -72 पीएक्स) के अनुसार स्लाइस का नाम बदला।
  4. जब मैं कलाकृति को सहेजता हूं तो मैं "ऑल यूजर स्लाइस" चुनता हूं और बैंग! मेरे पास मेरे ऐप के लिए आवश्यक सभी आइकन हैं।

क्या होगा यदि आप छवि का आकार बदलते हैं, लेकिन पतली ग्रे लाइन को समान रखते हैं? उत्तर: यह अंततः ग्रे लाइन से मेल खाएगा। इसलिए इसकी सीमा त्रिज्या गलत नहीं है, लेकिन उस सीमा त्रिज्या के लिए आइकन का आकार ...
MoralCode

2

मैं 1024x1024 के लिए 228px त्रिज्या की कोशिश की और यह काम किया :)


y हमें रेडियों को लागू करना चाहिए?, बिना रेडियो स्क्वायर आइकन पूरी तरह से काम करेगा।
विनायक

2

एप्लिकेशन आइकन आवश्यकताओं के लिए अपडेट (जनवरी 2018 के अनुसार):


https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/app-icon/

आइकन कोनों को चौकोर रखें । सिस्टम एक मुखौटा लागू करता है जो आइकन कोनों को स्वचालित रूप से गोल करता है।

पृष्ठभूमि को सरल रखें और पारदर्शिता से बचें । सुनिश्चित करें कि आपका आइकन अपारदर्शी है, और पृष्ठभूमि को अव्यवस्थित न करें। इसे एक साधारण पृष्ठभूमि दें ताकि यह आस-पास के अन्य ऐप आइकन पर हावी न हो। आपको संपूर्ण आइकन को सामग्री से भरने की आवश्यकता नहीं है।


हां, मैंने गोल कोनों के बिना एक स्क्वायर आइकन बनाया और "आइकन सेट क्रिएट" (ऐप स्टोर में), सभी आइकन स्वचालित रूप से उत्पन्न हुए।
जे। फ़ेडज़

1

आपको अपने ऐप आइकन पर कोने त्रिज्या को लागू करने की आवश्यकता नहीं है, आप बस स्क्वायर आइकन लागू कर सकते हैं। डिवाइस स्वचालित रूप से कोने के त्रिज्या को लागू कर रहा है।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.