UI- ऐ: एडोब इलस्ट्रेटर में एक इंटरफ़ेस ड्रा करें

समारा में Adobe CS6 की प्रस्तुति में, मैंने एक बात बताई कि कैसे हम Parcsis में वेब और मोबाइल इंटरफेस बनाने के लिए Adobe Illustrator का उपयोग करते हैं। मैं इस रिपोर्ट को टिप्पणियों के साथ स्लाइड के रूप में आपके साथ साझा करना चाहता हूं।



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




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

तब और भी शक्तिशाली फ़ोटोशॉप संस्करण आया, जहां सेव फॉर वेब दिखाई दिया - वेब डिज़ाइन के लिए एक बहुत ही महत्वपूर्ण बात ...


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


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


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


एक वेक्टर संपादक में वेबसाइट और इंटरफेस क्यों बनाएं? इसके लिए हमें क्या मिलेगा?


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

इस रिज़ॉल्यूशन के साथ, पिक्सेल स्क्रीन ग्राफिक्स के लिए बहुत महत्वपूर्ण नहीं हैं, वे बस दिखाई नहीं देते हैं।


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

केवल एक ही रास्ता है - इंटरफेस में आपको वेक्टर पर स्विच करने और केवल फोटो के लिए पिक्सेल छोड़ने की आवश्यकता है।


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


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


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

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


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


पहले, फ़ोटोशॉप में एक विचारधारा थी: "एक फ़ाइल - एक पृष्ठ।" लेकिन आधुनिक इंटरफेस और वेबसाइटें बहुत कम ही सिंगल स्क्रीन से मिलकर बनती हैं।


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


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


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


यहाँ एक इंटरफेस है जिसे हम विकसित कर रहे हैं। एक फ़ाइल में वेब इंटरफ़ेस के सभी स्क्रीन। इसके अलावा, यह फ़ाइल अधिक स्थान नहीं लेती है - इसे बाद में डेवलपर्स को स्थानांतरित करना सुविधाजनक है।


IPhone के लिए ऐप। ख़ासियत यह है कि स्क्रीन छोटे हैं, लेकिन उनमें से बहुत सारे हैं। अब कल्पना करें कि यह एक PSD फ़ाइल होगी और आपको कुछ प्रकार के बटन को ठीक करने की आवश्यकता होगी जो कई स्क्रीन पर दिखाई देते हैं। मुझे कई फाइलें खोलनी होंगी और संस्करणों पर नजर रखनी होगी।


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

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


ग्रिड किसी भी लेआउट के लिए महत्वपूर्ण है। इलस्ट्रेटर की अपनी ख़ासियतें हैं।


हम मार्गदर्शक का उपयोग नहीं करते हैं जो मार्गदर्शक हैं, लेकिन ग्रिड पर सीधे आकर्षित होते हैं, जो ग्रिड है। हम मुख्य रूप से 10 पिक्सल के एक कदम के आकार के साथ एक ग्रिड का उपयोग करते हैं। मोबाइल एप्लिकेशन के लिए, हम एक छोटा ग्रिड लेते हैं - 8x8। हम वस्तुओं को रखते हैं ताकि वे सभी ग्रिड पर खड़े हों।


सेटिंग्स में, बस 100 पिक्सेल का एक ब्लॉक आकार चुनें और 10 डिवीजनों को चालू करें। नतीजतन, हमें 10x10 वर्ग मिलते हैं। 8x8 ग्रिड के लिए, हम 64 और 8 ब्लॉक डिवीजनों के मापदंडों का उपयोग करते हैं।


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


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


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

सबसे निचली परत एक छाया है, जो एक छाया नहीं है, बल्कि एक हाइलाइट है। ऊपर एक ब्लू ग्रेडिएंट फिल है। जिस पर "इनर शैडो" का प्रभाव लागू किया जाता है, ताकि यह स्पष्ट हो कि वस्तु को दबाया गया है। अगला 5% पारदर्शिता के साथ एक काली धारीदार पैटर्न है।


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

किसी अन्य ऑब्जेक्ट से एक बटन बनाने के लिए, आपको बस इस विनियोग को उस पर खींचना होगा या आईड्रॉपर टूल के साथ बटन को पोक करना होगा।


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


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


इलस्ट्रेटर न केवल भौतिक मीटर, सेंटीमीटर और इंच जानता है, बल्कि पिक्सेल भी है। स्क्रीन ग्राफिक्स के साथ काम करने से पहले, उन सेटिंग्स में निर्दिष्ट करें जिन्हें आप पिक्सेल के साथ काम करना चाहते हैं।


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


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


इलस्ट्रेटर में भी कमजोरियां हैं। आप पूरी तरह से रेखापुंज संपादक को नहीं छोड़ सकते।


उदाहरण के लिए, आप फ़ोटो (आश्चर्य-आश्चर्य) फ़ोटो के साथ काम करने के लिए फ़ोटोशॉप के बिना नहीं कर सकते हैं! यदि लेआउट में तस्वीरें हैं, तो उन्हें इलस्ट्रेटर में नहीं काटने की सलाह दी जाती है, लेकिन तुरंत "आकार से आकार" डालने के लिए।


और यहाँ एक अप्रत्याशित मोड़ है। लेकिन शुरू में वेक्टर आइकनों को पहले से व्यवस्थित करना उचित है, और फिर उन्हें इस रूप में फ़ोटोशॉप में डालें।


इलस्ट्रेटर की ताकत के बारे में कुछ शब्द, जो मैं उपयोग नहीं करता हूं, लेकिन शायद शुरू करें।


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

यह अभी भी मेरे सिर में फिट नहीं है। HTML कोडर्स एक वेक्टर संपादक का उपयोग करते हैं।


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

सुविधाजनक। लेकिन जब मैं इसका इस्तेमाल करता हूं तो ऐसा अक्सर नहीं होता। चूँकि वास्तव में समान तत्व इतनी बार नहीं पाए जाते हैं। शायद जल्द ही वे कुछ लेकर आएंगे।


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


सिम rskla के लिए ... पढ़ने के लिए धन्यवाद। यदि आपके पास प्रश्न हैं या आप अलग तरह से आकर्षित करते हैं - टिप्पणियों में लिखें।