स्क्रीन फ़ीचर के लिए इलस्ट्रेटर सीसी 2015 निर्यात का उपयोग करें

यदि इलस्ट्रेटर के साथ काम करने का एक पहलू है कि मैं वास्तव में इसका आनंद नहीं लेता हूं तो यह लाइन कला को मोबाइल या वेब के लिए svg छवियों में परिवर्तित कर रहा है। निर्यात> मेनू के रूप में निर्यात करें और क्रूरता से ईमानदार होने के लिए, वेब के लिए सहेजें - निर्यात> वेब के लिए सहेजें - उपयोग करने में बिल्कुल आसान नहीं थे।

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

यह सब नई निर्यात फॉर स्क्रीन फीचर के साथ बदल गया है - निर्यात> स्क्रीन के लिए निर्यात - और संपत्ति निर्यात पैनल जिसे जून 2016 में इलस्ट्रेटर सीसी 2015 में पेश किया गया था। इस "कैसे करें" में मैं आपको दिखाऊंगा कि दोनों का उपयोग कैसे करें विशेषताएं। आएँ शुरू करें।

04 में से 01

एडोब इलस्ट्रेटर सीसी 2015 में स्क्रीन के लिए निर्यात कैसे करें

स्क्रीन के लिए निर्यात संवाद बॉक्स का उपयोग कर आउटपुट आर्टबोर्ड।

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

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

मोबाइल परियोजनाओं के लिए मोबाइल-प्रथम दृष्टिकोण और एसवीजी छवियों पर बढ़ती निर्भरता के आगमन के साथ, इलस्ट्रेटर एसवीजी के लिए मेरा "जाने" टूल था और यूआई डिज़ाइन वर्कफ़्लो में एक महत्वपूर्ण स्टॉप बन गया।

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

उपर्युक्त उदाहरण में, मेरे पास एक आईफोन के लिए दो स्क्रीनें हैं और वे "होम" और "प्लेस" नामक अलग आर्टबोर्ड पर हैं। उन्हें आउटपुट करने के लिए, मैंने स्क्रीन> निर्यात> स्क्रीन के लिए निर्यात का चयन किया। स्क्रीन के लिए निर्यात संवाद बॉक्स खुलता है।

04 में से 02

स्क्रीन संवाद बॉक्स के लिए निर्यात का उपयोग कैसे करें

स्क्रीन के लिए सहेजें संवाद बॉक्स में कुछ सरल विकल्प बनाकर आईओएस और एंड्रॉइड के लिए आउटपुट आर्टबोर्ड।

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

आपके पास चयन क्षेत्र में तीन विकल्प हैं:

क्षेत्र में निर्यात आपको आउटपुट के लिए गंतव्य फ़ोल्डर चुनने देता है। डिफ़ॉल्ट फ़ोल्डर इलस्ट्रेटर दस्तावेज़ का वर्तमान स्थान होगा।

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

एक बार जब आप आईओएस या एंड्रॉइड चुनते हैं तो सूची उस प्लेटफॉर्म पर उपलब्ध सभी प्रस्तावों को शामिल करने के लिए बदल जाएगी। आईओएस लिस्टिंग रेटिना डिस्प्ले के लिए स्केलिंग कारकों को दिखाएगी और एंड्रॉइड चयन में .75x से 4x तक के स्केल होंगे जो व्यावहारिक रूप से हर एंड्रॉइड डिवाइस को समायोजित करते हैं।

यदि कोई प्रारूप दिखा रहा है जिसे आप निकालना चाहते हैं, तो "x" पर क्लिक करें। यदि कोई ऐसा है जिसे आप जोड़ना चाहते हैं तो + स्केल बटन जोड़ें पर क्लिक करें।

समाप्त होने पर, निर्यात आर्टबोर्ड बटन पर क्लिक करें और प्रक्रिया समाप्त होने पर एक प्रगति बार आपको दिखाएगा।

03 का 04

एडोब इलस्ट्रेटर सीसी 2015 से स्क्रीन फ़ाइलों के लिए निर्यात का उपयोग करना।

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

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

यदि आप एक पल के लिए वापस कदम उठाते हैं और इसके बारे में सोचते हैं, तो वास्तव में यह वही है जो आपको चाहिए क्योंकि आप इस आउटपुट का उपयोग प्रोटोटाइप एप्लिकेशन जैसे Adobe Experience Design , Principleformac, Atomic.io , UXPin या अन्य प्रोटोटाइप एप्लिकेशन में कर सकते हैं

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

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

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

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

मैंने प्लेस पेज पर हॉटस्पॉट के साथ इस कदम को दोहराया। एकमात्र अंतर यह था कि संक्रमण को पुश राइट पर सेट किया गया था। जब मैंने प्ले बटन पर क्लिक किया तो मैंने अपने प्रोटोटाइप का परीक्षण किया।

04 का 04

एडोब इलस्ट्रेटर सीसी 2015 में निर्यात संपत्ति पैनल का उपयोग कैसे करें

एसेट निर्यात पैनल का उपयोग कर कस्टम आइकन एसवीजी फाइलों के रूप में निर्यात किया जा सकता है।

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

दर्द बिंदु प्रतीक था। इलस्ट्रेटर एक महान वेक्टर ड्राइंग एप्लिकेशन है लेकिन आउटपुट के लिए, आइए 10 आइकन कहें, जिसमें 40 या 50 के साथ एक पृष्ठ पर प्रत्येक को एक एसवीजी छवि के रूप में सहेजा जाता है। यह अनिवार्य रूप से एसवीजी पैनल के लिए लगातार यात्रा के लिए सामान्य से अधिक समय की आवश्यकता है। यह दर्द बिंदु अब अतीत की बात है।

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

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

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

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