निर्यात आईओएस आइकन एफिनिटी डिजाइनर में आकार


10

हालाँकि, Affinity Designer के पास अत्यंत उपयोगी @ 1x, @ 2x और @ 3x निर्यात है, फिर भी अगर आईओएस आइकन के लिए आवश्यक विभिन्न आकारों में निर्यात करने का कोई तरीका है तो मैं सोच रहा हूँ?

मुझे यहां आवश्यक आकारों का संक्षिप्त ग्रिड मिला , जिसे मैं सूची प्रारूप में पुन: पेश करूंगा:

  • 1024x1024
  • 180x180
  • 152x152
  • 120x120
  • 87x87
  • 80x80
  • 76x76
  • 58x58
  • 57x57
  • 40x40
  • 29x29

यह 11 अलग आइकन आकार है!

मैंने स्लाइस कॉन्फ़िगरेशन कॉन्सेप्ट के साथ पूरे एक्सपोर्ट पर्सन को उत्कृष्ट होने के लिए पाया, खासकर जब से आप स्लाइस को व्यक्तिगत परतों में लागू कर सकते हैं (जैसे, एक बटन के सामान्य और दबाए गए संस्करणों के लिए)। क्या इस उपकरण का उपयोग करने का कोई तरीका है, शायद, विशिष्ट आकार के निर्यात करने के लिए?

जवाबों:


8

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

iOS ऐप आइकन टेम्प्लेट पूर्वावलोकन



टेम्पलेट, महान काम का उपयोग करने के लिए यह बहुत अच्छा और आसान के लिए धन्यवाद!
स्काई

बहुत बढ़िया! धन्यवाद! क्या आपके पास Android के लिए भी है?
यूनीफॉनिक

4

यह एक विशाल, जटिल सूची की तरह दिखता है, लेकिन वास्तव में केवल 5 आकार हैं जिन्हें आपको बनाने की आवश्यकता है:

  • 29pt
  • 49pt
  • 60pt
  • 76pt
  • 1024px गुणा

पहले चार आकारों (अंक में सूचीबद्ध) को 1 ×, 2 × और 3 × संस्करणों की आवश्यकता होती है (यदि आप भविष्य के प्रमाण के साथ-साथ iPhone 6 प्लस को कवर कर रहे हैं)।

नेट पर और Apple की साइट पर आपके द्वारा देखे गए कुछ आकार iOS 6 और नीचे (57 × 57 आदि) के लिए हैं। यदि आपको iOS 7 और इसके बाद के संस्करण लक्षित कर रहे हैं, तो उनकी आवश्यकता नहीं है।

यहाँ फ़ोटोशॉप टेम्पलेट मैंने बनाया है:

iOS आइकन टेम्प्लेट

मेरे पास प्रत्येक आइकन को निर्यात करने के लिए स्लाइस है और आकार बदलने और पुन: निर्यात करने के लिए एक कार्रवाई है, इसलिए मैं इसके साथ समाप्त होता हूं:

  • आइकन-29.png
  • icon-29@2x.png
  • icon-29@3x.png
  • आइकन-40.png
  • icon-40@2x.png
  • icon-40@3x.png
  • आइकन-60.png
  • icon-60@2x.png
  • icon-60@3x.png
  • आइकन-76.png
  • icon-76@2x.png
  • icon-76@3x.png

उन सभी आकारों की अभी आवश्यकता नहीं है, लेकिन भविष्य में संभावना होगी। 4 बेस साइज़ से शुरू करना आइकन्स को बनाना बहुत आसान बनाता है।

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

एफिनिटी के स्लाइस फीचर का इस्तेमाल करके आप भी ऐसा ही कर सकते हैं?


अपडेट: मैंने एफिनिटी डिज़ाइनर, स्केच, फ़ोटोशॉप और इलस्ट्रेटर के लिए कुछ ओपन सोर्स ऐप आइकन टेम्प्लेट बनाए । वे विचार करने लायक हो सकते हैं।


वाह, बढ़िया जानकारी, धन्यवाद! हालांकि मुझे यकीन नहीं है कि मैं एफिनिटी में ऐसा कैसे करूंगा। क्या आप जानते हैं कि एफिनिटी में उस तरह का टेम्पलेट कैसे बनाया जाता है?
मैट मैक

मैं फ़ोटोशॉप में स्लाइस का उपयोग कर रहा हूँ और आवश्यक क्षेत्रों को काटने और निर्यात करने के लिए। मेरा मानना ​​है कि एफिनिटी में एक ही नाम की एक जैसी विशेषता है। (मैंने कुछ और जानकारी प्रदान करने के लिए अपना उत्तर संपादित किया है।)
मार्क एडवर्ड्स

हम्म, हाँ, इसमें स्लाइस की सुविधा है, जो महान है। क्या आपके फ़ोटोशॉप टेम्पलेट में कुछ है जो छवि को स्वचालित रूप से कॉपी और आकार देता है? जैसा कि, आप 76pt छवि का निर्माण करते हैं और बाकी स्वतः निर्मित हो जाते हैं? या आपको प्रत्येक संस्करण बनाना होगा, और फिर निर्यात करने के लिए स्लाइस का उपयोग करना होगा?
मैट मैक

हां, मैं आकार बदलने के लिए कुछ क्रियाओं और लिपियों का उपयोग करता हूं। मेरा पूरा वर्कफ़्लो यहां प्रलेखित है: bjango.com/articles/appdesignworkflow टेम्पलेट मैंने जो स्क्रीनशॉट पोस्ट किया है वह यहां उपलब्ध है: bjango.com/articles/actions
Marc Edwards

3

आप इसे एफिनिटी डिज़ाइनर में कर सकते हैं, स्लाइस उनके आउटपुट को स्केल कर सकते हैं, प्रत्ययों का उपयोग करके, यहाँ 'w' प्रत्यय का उपयोग करके आईओएस आइकन एक्सपोर्ट होता है:

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


2

मुझे सिर्फ एफिनिटी डिज़ाइनर में ऐसा करने का एक अच्छा तरीका मिला। हालांकि यह पूरी तरह से स्वचालित नहीं है। मैं समझाता हूँ कि iPhone के लिए वर्तमान में आवश्यक तीन आइकन आकार कैसे प्राप्त करें (29pt, 40pt, 60pt), प्रत्येक 2x और 3x रिज़ॉल्यूशन के साथ:

  1. एक नया दस्तावेज़ बनाएं, "पॉइंट्स" पर यूनिट सेट करें, पृष्ठ का आकार 29x29 और डायल में "क्रिएट आर्टबोर्ड" बनाएं
  2. पेस्ट करें और अपनी कलाकृति को आर्टबोर्ड में रखें
  3. परत पैनल (वैकल्पिक) में "29" के लिए आर्टबोर्ड का नाम बदलें
  4. आर्टबोर्ड पर राइट-क्लिक करें और "डुप्लिकेट" चुनें
  5. नए आर्टबोर्ड को खींचें (ताकि आप दोनों तरफ से देख सकें) और फिर इसे "40pt" पर फिर से नाम दें (फिर से, यह वैकल्पिक है)
  6. ट्रांसफॉर्म पैनल का उपयोग करके 40x40pt पर नई परत का आकार बदलें - आपकी कलाकृति स्वचालित रूप से बढ़ जाएगी
  7. एक 60pt आर्टबोर्ड बनाने के लिए 4-6 चरणों को दोहराएं (यदि आवश्यक हो तो iPad के लिए प्लस 76pt और 83.5pt)
  8. निर्यात व्यक्ति पर जाएं, स्लाइस पैनल पर जाएं और 2x और 3x रिज़ॉल्यूशन (आईपैड के लिए प्लस 1x) का चयन करें
  9. सूची में सभी आर्टबोर्ड-लेयर्स ("29pt", "40pt" आदि) का चयन करें और पैनल के निचले भाग में "Export Export" पर क्लिक करें।

आत्मीयता प्रत्येक चयनित रिज़ॉल्यूशन में सभी आइकन आकार बनाएगी, जिससे आपको वास्तव में ज़रूरत से ज़्यादा आइकन मिल सकते हैं। लेकिन उन्हें बड़े करीने से "29pt@2x.png" आदि नाम दिए गए हैं, इसलिए उन्हें अपने एक्सकोड एसेट कैटलॉग में असाइन करना वास्तव में आसान है।

एक चेतावनी: जब आप एक्सपोर्ट पर्सन में जाते हैं, तो एफिनिटी स्वचालित रूप से प्रत्येक आर्टबोर्ड के लिए एक निर्यात स्लाइस बनाता है (यह उस पर आकार लेबल के साथ नीला फ्रेम है)। मैंने पाया कि कभी-कभी इन स्लाइस का आकार कुछ पिक्सल्स से दूर होता है। AD में एक बग जैसा लगता है। आप इसे आसानी से स्लाइस के कोनों को खींचकर ठीक कर सकते हैं।


1

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

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

यहां नुकसान यह है कि प्रत्येक परत को आपकी आइकन फ़ाइल बनाने और इंगित करने की आवश्यकता है, ताकि ऐसा लगे कि यह थकाऊ होगा। एक बार यह जगह में था, हालांकि, आपके आधार फ़ाइल के किसी भी संपादन के बाद आप आसानी से सब कुछ फिर से निर्यात कर सकते थे।


1
मैंने कोई परीक्षण नहीं किया है, लेकिन सावधान रहें यह विधि बड़े आकार से बिटमैप स्केल की गई संपत्तियों के साथ समाप्त नहीं होती है। यदि ऐसा होता है, तो वे वैक्टर / परत प्रभाव के रूप में स्केलिंग की तुलना में खराब गुणवत्ता वाले होंगे। आप सिर्फ एफिनिटी डिज़ाइनर में स्लाइस का उपयोग नहीं कर सकते? यदि मुझे समय मिलता है, तो मैं इसे परीक्षण करने के लिए सेट करूँगा।
मार्क एडवर्ड्स

1
@MarcEdwards यह सच है, मैंने यह देखने के लिए निरीक्षण नहीं किया है कि क्या परिणाम वेक्टर या बिटमैप के रूप में हैं। एफ़िनिटी डिज़ाइनर में स्लाइस निर्यात के लिए एक निश्चित क्षेत्र को परिभाषित करते हैं; वे अपने उत्पादन को उस पैमाने से नहीं बढ़ा सकते जो मैं बता सकता हूं। यदि आप निरीक्षण करना चाहते हैं, तो मैंने स्थान छवि विधि का एक परीक्षण किया: pixelapse.com/s/RGCQYVQR7DHTYC6KC
मैट मैक
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.