आइकन की मोटाई और मोटाई। स्केच प्रो, रेंडरिंग फीचर्स और लाइन मोटाई वाला गेम

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

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




एक नियम के रूप में, आइकन पर विकृतियां निम्नलिखित मामलों में दिखाई देती हैं (और उनके संयोजन):

1. पतले (एकल-पिक्सेल) तत्व (या तो धुंधले हो जाते हैं, या लाइनें टूट जाती हैं, या एकल-पिक्सेल रेखा बहुत अधिक बोल्ड हो जाती है)।
2. भराव क्षेत्र उन क्षेत्रों को भरते हैं जो डिजाइन पर खाली होने वाले थे।
3. रेटिना डिस्प्ले पर आइकन अच्छा दिखता है, लेकिन बाहरी मॉनिटर कनेक्ट करते समय बेहद खराब -। यह स्पष्ट है कि गैर-रेटिना डिस्प्ले पर गुणवत्ता में गिरावट अपरिहार्य है, लेकिन कुछ मामलों में, "पिक्सेलेशन" स्पष्ट रूप से अच्छे और बुरे की सीमाओं से परे जाता है।

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

एक SVG फ़ाइल और ऑप्टिमाइज़र में कचरा

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

क्लासिक स्केच + ज़ेपलिन बंडल के साथ काम करते समय, एसवीजी फाइलों में "कचरा" की समस्या न केवल दूर हो जाती है, बल्कि खराब भी हो सकती है। मुद्दा यह है कि कैसे Zeplin बिल्ट-इन ऑप्टिमाइज़र के माध्यम से svg फ़ाइल कोड चलाता है। उस कोड को देखते हुए, जो संभवतः उत्पन्न करता है, SVGO का उपयोग किया जाता है।

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

इसके अलावा, ज़ेपलिन के ऑनलाइन संस्करण और इसके डेस्कटॉप एप्लिकेशन को उतारने पर अलग-अलग परिणाम मिलते हैं। अनुकूलन के दौरान, आइकन के स्रोत कोड के आधार पर, आइकन के महत्वपूर्ण टुकड़े खो सकते हैं। और अलग-अलग संस्करणों में अलग-अलग तरीकों से। यह infuriates।

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




और यहाँ यह जैसा दिखता है:

पहला आइकन सीधे स्केच से डाउनलोड किया गया है, दूसरा ज़ेपलिन के ऑनलाइन संस्करण से है, तीसरा यह है कि यह क्या होना चाहिए

त्रुटियों का प्रतिपादन

दुर्भाग्य से, न केवल डिजाइनर, ग्राफिक्स पैकेज, या ऑप्टिमाइज़र कुटिल प्रतीक के लिए दोषी हो सकता है। निर्भर करता है कि रेंडरिंग के लिए कौन सा सॉफ्टवेयर जिम्मेदार है, परिणाम बहुत अलग हो सकता है। उदाहरण के लिए, कष्टप्रद त्रुटियां भी हैं, उदाहरण के लिए, क्रोम ब्राउज़र को एकल-पिक्सेल लाइनों के एंटी-अलियासिंग प्रदान करने में - समस्या को कम से कम 2016 से जाना जाता है, लेकिन अभी भी कोई समाधान नहीं है (अक्टूबर 2018)। बहुत बुरा!

प्रतीक की शुद्धता के लिए संघर्ष में सीमाएं और जीवन हैक

तब हमने कई युक्तियां, प्रतिबंध और जीवन हैक एकत्र किए जो या तो पूरी तरह से समस्याओं को हल करने में मदद करते हैं, या कम से कम एक सभ्य परिणाम प्राप्त करते हैं।

1. आइकन तत्वों को रूपांतरित न करें

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


"समूह" आइकन के बजाय - कुछ पांचवें बिंदु जैसा दिखता है

2. वेक्टर से आउटलाइन में तत्वों और पाठ को रूपांतरित करें (कन्वर्ट में बदलें)
और सभी परतों को एक में तत्वों के साथ मिला दें (आकार मिलाएं)

यदि आप पाठ को पाठ और परतों के रूप में अलग-अलग छोड़ते हैं, तो अंक (पथ) का मुख्य अनुक्रम संभवतः कई में विभाजित किया जाएगा, जो कि निर्यात होने पर अपने स्वयं के दिमाग में होगा।

3. गर्भनिरोधक नियम: प्रत्येक आइकन को नाम दें - अद्वितीय

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

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

4. सीधे स्केच में एसवीजीओ कंप्रेसर स्थापित करें

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

5. मैन्युअल रूप से निर्यात करते समय आइकन का चयन करें और उन्हें निर्यात करने योग्य संपत्ति सेट करें।

अन्यथा, निर्यात के दौरान आइकन का एक टुकड़ा फिर से खो सकता है।

6. पृष्ठभूमि में "निर्यात में शामिल करें" विकल्प को अनचेक करें

अन्यथा, आइकन को सफेद पृष्ठभूमि के साथ निर्यात किया जाता है।

7. यदि बाकी सब विफल रहता है: प्रत्येक आकार के लिए - अपना स्वयं का आइकन

यह जंगली खेल है। विभिन्न आकारों के लिए एक का उपयोग करने के लिए वेक्टर आइकन का आविष्कार किया गया था। दुर्भाग्य से, ऐसे हालात होते हैं जब परिणाम को स्केल करने के बाद एक vyrviglazny परिणाम होता है। एक नियम के रूप में, साबुन के किनारों को जहां स्पष्ट रेखाओं की आवश्यकता होती है। यह मुख्य रूप से इस तथ्य के कारण है कि जब स्केलिंग कुछ रेखाएं आंशिक पिक्सेल मानों पर गिरती हैं। उदाहरण के लिए, यदि बेस आइकन 16 × 16 था, और व्युत्पन्न 24 × 24 था (दो की शक्तियों के साथ, लगभग हमेशा सब कुछ ठीक है, लेकिन केंद्रीय ऊर्ध्वाधर लाइनों के साथ अपवाद हैं)। ऐसी स्थितियों में, आप या तो शर्तों पर आ सकते हैं, या दुर्भाग्य से, आपको उपयोग किए गए प्रत्येक आकार के लिए अपने हाथों से आइकन लाने होंगे।

यदि आप इन 7 नियमों के अनुसार एक आइकन बनाते हैं, तो ज़ेपलिन प्लग-इन के माध्यम से भी निर्यात सफल होगा। लेकिन भले ही आपको आइकन का एक सुंदर svg-source मिलता है, और आइकन अलग नहीं होता है और ब्राउज़र में प्रदर्शित होने पर ख़राब नहीं होता है, यह गारंटी नहीं देता है कि विभिन्न घनत्व वाले स्क्रीन पर सब कुछ ठीक होगा।

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

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

कैसे करें:




कैसे नहीं:




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



अलग-अलग, हम ध्यान दें कि यह न केवल समोच्च रेंडर की जाँच करने के लायक है, बल्कि भरण क्षेत्र भी है। खासकर अगर आइकन "भरे हुए आइकन + रूपरेखा" जोड़ी में उपयोग किए जाते हैं (उदाहरण के लिए, होवर पर)।

निर्यात प्रतीक (Affinity, Illustrator, आदि)

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

सब कुछ बहुत आसान है:

1. पिक्सेल ग्रिड पर रेंडर एफिनिटी आइकन! सभी के लिए समान: ताकि ग्रिड में चूक के कारण सीमाओं का कोई धुंधलापन न हो।
2. एफिनिटी में आइकन चुनें और स्केच पर कॉपी करें।
3. एक मौका है कि स्केच में आकार पिक्सेल के एक जोड़े के भीतर अलग-अलग होगा - फिर आपको वांछित आकार के लिए स्केल टूल का उपयोग करना चाहिए, यह जांच कर कि लाइनों का आकार और मोटाई पूर्णांक बनी हुई है।
4. तत्वों और फोंट को रूपरेखा में बदलें। आकार और स्थिति को फिर से जांचें।
5. परतों को मिलाएं।
6. निर्यात करने योग्य संपत्ति सेट करें और आर्टबोर्ड पर आइकन का चयन करें।
7. निर्यात - वॉयला, आपके पास एक एकल पथ के साथ एकदम सही svg फ़ाइल है जो बहुत ही अनुमानित रूप से व्यवहार करती है।

निष्कर्ष

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

अ छा!