आइकन डिज़ाइन के लिए सर्वश्रेष्ठ वर्कफ़्लो: बड़ा प्रारंभ करें, या छोटा प्रारंभ करें?

18

जब कई आकारों में वितरित किए जाने वाले आइकन डिजाइन करना हो, तो क्या आप छोटे आकार में शुरू करते हैं, फिर बड़े आकार तक स्केल करते हैं? या आप बड़े और बड़े पैमाने पर शुरू करते हैं?

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

ओएस एक्स के लिए, मानक ऐप आइकन आकार हैं:

16 × 16, 32 × 32, 128 × 128, 256 × 256, 512 × 512 और 1024 × 1024।

विंडोज 7 के लिए मानक ऐप आइकन आकार हैं:

16x16, 32x32, 48x48, 64x64 और 256x256।

IOS के लिए मानक ऐप आइकन आकार हैं:

29x29, 48x48, 57x57, 58x58, 72x72, 96x96, 114x114, 144x144, 512x512 और 1024x1024।

Android के लिए मानक ऐप आइकन आकार हैं:

36x36, 48x48, 72x72, 96x96 और 512x512।

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

विधि 1: नीचे स्केलिंग

वैक्टर और उत्पन्न प्रभाव का उपयोग करके सबसे बड़े आकार (अक्सर 1024 × 1024) पर आइकन डिज़ाइन करें, जैसे परत शैलियों।
छोटे आकार बनाने के लिए दस्तावेज़ को डुप्लिकेट करें और स्केल करें।
किसी भी आवश्यक मोड़ को बनाएं और अंतिम छवि को बचाएं।

यह बहुत अच्छा है, लेकिन कई आकारों के लिए काम करने वाले ग्रिड से संरेखित करने के लिए तत्वों के अवसरों को याद करता है। थोड़ा मदद करने के लिए लगता है कि तस्वीर के लिए एक मोटे ग्रिड का उपयोग करना। उदाहरण के लिए, 16 × ग्रिड के साथ 1024 × 1024 दस्तावेज़ का मतलब है स्नैपिंग पॉइंट्स आपको पिक्सेल के किनारों को 64 × 64 आकार के नीचे देगा। विचार विस्तार के साथ डिजाइन करना है, लेकिन छोटे आकार के ग्रिड पर स्नैप करना है, इसलिए आपने उन महत्वपूर्ण पदों को मारा।

विधि 2: स्केलिंग

वैक्टर और उत्पन्न प्रभाव, परत शैलियों की तरह का उपयोग करके सबसे छोटे आकार (या अक्सर 32 × 32 या 64 × 64) में से एक पर आइकन डिज़ाइन करें। आमतौर पर 16 × 16 में पर्याप्त विस्तार नहीं है, इसे एक प्रारंभिक बिंदु के रूप में उपयोग करने के लिए।
डुप्लिकेट और बड़े आकार, और छोटे आकार के लिए नीचे बनाने के लिए दस्तावेज़ को स्केल करें।
किसी भी आवश्यक मोड़ को बनाएं और अंतिम छवि को बचाएं।

यह बहुत विस्तार के साथ सरल आइकन पर ले जाता है, इसलिए मुझे इस तरह से काम करना पसंद नहीं है।

विधि 3: फिर नीचे स्केलिंग

वैक्टर और उत्पन्न प्रभाव, परत शैलियों की तरह का उपयोग करके छोटे आकार (अक्सर 32 × 32 या 64 × 64) पर एक मोटा डिजाइन बनाएं।
दस्तावेज़ को सबसे बड़े आकार तक बढ़ाएँ और विवरण जोड़ें। यह वह बिंदु है जहां आइकन को पॉलिश किया जाता है और अधिकांश विवरण जोड़े जाते हैं।
डुप्लिकेट और सभी छोटे आकारों के लिए दस्तावेज़ को नीचे स्केल करें।
किसी भी आवश्यक मोड़ को बनाएं और अंतिम छवि को बचाएं।

यह अन्य विधियों के पेशेवरों और विपक्षों के साथ सबसे अच्छी विधि लगती है। थोड़े संबंधित बिंदु के रूप में, इसका मतलब यह भी है कि मैं आमतौर पर 912 × 912 में iOS आइकन डिज़ाइन करता हूं, क्योंकि यह iPhone के गैर-रेटिना आइकन का आकार 57 × 57 के ठीक 16 गुना है।

क्या प्रतीक को डिजाइन करने के लिए एक बेहतर तरीका है जिसे कई आकारों में वितरित करने की आवश्यकता है?

लक्ष्य कम से कम प्रयास के साथ सर्वोत्तम संभव परिणाम प्राप्त करना है।

icon workflow

— मार्क एडवर्ड्स
स्रोत

6

आपकी धारणाओं में थोड़ा सुधार: जबकि विंडोज और मैक 16 के गुणकों का उपयोग करते हैं, वे समान दर पर स्केल नहीं करते हैं। विस्टा / 7 मानक आकार 16 ² , 32 ² , 48 ² , 256 ^{2 हैं} । OS X 16 ² , 32 ² , 128 ² , 512 ² (+ HiDPI संस्करण) है। चीजों को और अधिक जटिल करने के लिए, विंडोज विस्टा / 7 डिफॉल्ट जूम का स्तर 16 ² , 48 ² , 96 ² , 256 ^{2 लगता है} और यह खुशी के साथ वेतन वृद्धि को 2px तक छोटा कर देगा। इससे आपके वर्कफ़्लो पर बहुत अधिक फर्क नहीं पड़ना चाहिए, सिवाय इसके कि यह सभी ज़ूम स्तरों पर विशिष्ट पिक्सेल ग्रिड से संबंधित होने की आवश्यकता को कम करता है।

मेरा वर्कफ़्लो आपसे अलग है जिसमें मैं बहुत अधिक आकार नहीं देता। प्रत्येक आकार के स्तर के लिए एक नई छवि बनाई जाती है और मैं ठीक उसी लेआउट को रीसायकल करने का प्रयास नहीं करता।

जिस आकार से मैं शुरू करता हूं वह मंच द्वारा निर्धारित किया जाता है। यदि विंडोज के लिए डिजाइनिंग, मैं 48x48 से शुरू करता हूं। (इसके लिए मेरे पास कोई वैज्ञानिक आधार नहीं है, लेकिन डिफ़ॉल्ट विंडोज 7 जूम स्तर "मध्यम" है जो 48x48 है। विस्टा, ओएस एक्स, आईफोन, आईपैड, और एंड्रॉइड आइकॉन्स भी इस आकार के करीब आते हैं ताकि यह सुविधाजनक हो और आरामदायक।)

पूरी तरह से समाप्त आइकन इस आकार में हो जाता है और परिवार में अन्य आइकन के लिए संदर्भ है। यदि कोई डेस्कटॉप ऐप कर रहा है, तो मैं विंडोज के डिफ़ॉल्ट स्तरों (जब तक यह मैक के लिए स्वाभाविक रूप से नहीं होता) से मिलान करने के लिए 16x, 96x और 256x पर अन्य संस्करण बनाऊंगा। 96x आमतौर पर 48x के समान है।

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

16x संस्करण भी एक नई रचना है। बहुत कम विस्तार। बड़े संस्करणों के समान रंग पैलेट के साथ लोगो या बहुत सरल आइकनोग्राफी की पहचान करना। इस आकार में मैं कुछ भी सुंदर बनाने की कोशिश नहीं करता - बस तुरन्त पहचानने योग्य।

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

— Farray
स्रोत

+1 यह मृत है। स्केलिंग केवल इतनी दूर तक जाती है, और यह वास्तव में बहुत दूर नहीं है। यहां तक कि प्रिंट के लिए, के विभिन्न संस्करणों, कहते हैं, विभिन्न आकार के अनुप्रयोगों के लिए अक्सर एक लोगो की आवश्यकता होती है, और यह स्क्रीन के लिए और भी महत्वपूर्ण है।

— एलन गिल्बर्टसन

"प्रत्येक आकार के स्तर के लिए एक नई छवि बनाई जाती है" - आपके द्वारा पहले से किए गए काम के लिए बहुत अधिक प्रतिकृति की तरह लगता है। जाहिर है कि कई ट्वीक की जरूरत होगी, लेकिन मुझे आश्चर्य है कि आप शुरू करते हैं।

— मार्क एडवर्ड्स

बहुत अधिक प्रतिकृति की तरह लगता है, क्योंकि कुछ विस्तृत आइकन दसियों या सैकड़ों परतों के साथ निर्मित होते हैं। मुझे लगता है कि अतिरिक्त विस्तार आम तौर पर 64x64 से ऊपर के आकारों के लिए उपयोगी है। (पीएस: मैंने मतदान किया क्योंकि यह एक बढ़िया उत्तर है जो अच्छी जानकारी से भरा है, लेकिन टिक नहीं पाया, क्योंकि मुझे नहीं लगता कि यह वह तरीका है जो मैं जाना चाहता हूं।)

— मार्क एडवर्ड्स

1

@Marc पूरी तरह से समझा - यह तरीका दिल के बेहोश होने के लिए नहीं है। ;-) लेकिन मुझे लगता है कि यह सबसे अच्छा परिणाम पैदा करता है - और यदि आप तदनुसार बिल कर सकते हैं , तो यह इसके लायक है।

— फेरे

1

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

— jsdevel
स्रोत

1

खैर, मैं सबसे छोटे घनत्व के लिए सब कुछ बनाना पसंद करता हूं और इसे बढ़ाता हूं। यदि आप किसी ऐप के लिए पूरे लेआउट को डिज़ाइन कर रहे हैं, तो ग्रिड के साथ काम बहुत आसान है और यह आपको बहुत सारे सिरदर्द से बचाता है, क्योंकि आप वस्तुओं को एक छोटे ग्रिड में स्थानांतरित कर रहे हैं।

तो मेरे वर्कफ़्लो की तरह दिखता है: 1. मैं फ़ोटोशॉप में एक छोटे से डीपीआई स्केल में एक लेआउट बनाता हूं और इलस्ट्रेटर में आइकन बना रहा हूं, क्योंकि वेक्टर छवियों को स्केल करने में कोई समस्या नहीं है। 2. जब मैं प्रत्येक आइकन / ऑब्जेक्ट आदि बना रहा हूं, तो मैं एक ही समय में सभी स्केल किए गए संस्करण बनाता हूं (जब मैं तय करता हूं कि यह पाठ्यक्रम के लेआउट में अच्छा लग रहा है) और प्रोग्रामर को अंतिम pngs सौंप दें।

मुझे ध्यान देना है कि मैंने सबसे पहले iOS से शुरुआत की थी।

— रैप्टर स्वियर
स्रोत

मैं इसका समर्थन करता हूं। डिजाइन के लिए मोबाइल पहले, आइकनों के लिए छोटा पहला। छोटा आइकन आवश्यक विवरण को पकड़ता है; आप हमेशा इसे और अधिक सजावट जोड़ सकते हैं। अपवाद तब होगा जब छोटे संस्करण विरासत प्रणालियों के लिए अभिप्रेत हों। बोले, यदि आप लो-रेस आईफ़ोन (प्री-आईफ़ोन 4) के लिए एक अलग आइकन संस्करण तैयार कर रहे हैं, तो आप एक नई, मुख्य धारा के साथ शुरुआत करना चाहते हैं। इसके अलावा, मैंने एक्शन में कुछ अलग वर्कफ़्लोज़ देखे हैं। जब हम Microsoft Office के लिए आइकॉन को फिर से डिज़ाइन कर रहे हैं, तो हमने छोटे आइकनों को छोटा और बड़े आइकनों को छोटा करके देखा है।

— इवान ब्रौन