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

Google से सामग्री डिज़ाइन विनिर्देश मूल रूप से प्लेटफ़ॉर्म पर डिज़ाइन की स्थिरता का सुझाव देने के लिए एंड्रॉइड प्लेटफॉर्म पर लक्षित था।

06 में से 01

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

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

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

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

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

आएँ शुरू करें।

06 में से 02

एडोब एक्सपीरियंस डिजाइन सीसी में प्रोटोटाइप आर्टबोर्ड बनाना

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

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

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

06 का 03

एक एडोब एक्सडी सीसी आर्टबोर्ड में एक सामग्री डिजाइन कार्ड जोड़ना

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

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

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

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

06 में से 04

एडोब एक्सपीरियंस डिजाइन सीसी में एक सामग्री डिजाइन तत्व कैसे संपादित करें

जब एक्सडी में कार्ड क्लिपबोर्ड से आता है तो इसके साथ काम करना शुरू नहीं होता है। आपको सबसे पहले जो करना है वह कार्ड को गठबंधन करना है क्योंकि आपको कार्ड को लिखने वाले बिट और टुकड़ों तक पहुंच की आवश्यकता है। ऐसा करने के लिए, कार्ड का चयन करें और ऑब्जेक्ट> Ungroup का चयन करें या Shift-Command-G दबाएं।

आपका कार्ड अब तीन टुकड़ों से बना है:

• छवि के लिए हल्के भूरे रंग के बॉक्स।
• पाठ के लिए मध्यम ग्रे बॉक्स
• बैक बॉक्स पृष्ठभूमि के रूप में इस्तेमाल किया जाता है।

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

पाठ के साथ बॉक्स वास्तव में 50% अस्पष्टता के साथ एक गहरा भूरा है। इस बॉक्स को टेक्स्ट पृष्ठभूमि के रूप में उपयोग किया जा सकता है और आप रंग और बॉक्स की अस्पष्टता को बदल सकते हैं।

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

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

06 में से 05

एडोब एक्सडी सीसी में सामग्री डिजाइन कार्ड में एक छवि कैसे जोड़ें

कार्ड को जानना 344 पिक्सल चौड़ा है और छवि क्षेत्र 150 पिक्सेल ऊंचा है ( हल्के भूरे रंग के बॉक्स की आधा ऊंचाई ) हमने फ़ोटोशॉप में छवि खोली है, इसे आकार में फसल कर दिया है और इसे फ़ोटोशॉप के निर्यात के रूप में @ 2x विकल्प का उपयोग करके सहेजा है डिब्बा। छवि एडोब एक्सडी में आयात की गई थी।

फिर हमने पेस्टबोर्ड पर छवि पर हल्के भूरे रंग के बॉक्स को खींच लिया और ऑब्जेक्ट> आकार के साथ मास्क का चयन किया। नतीजा यह था कि छवि आकार के गोलाकार कोनों को उठा रही थी। फिर हमने छवि को अपनी अंतिम स्थिति में ले जाया।

छवि के साथ, हमने मध्यम ग्रे बॉक्स के पृष्ठभूमि रंग को बदल दिया, टेक्स्ट और लिंक टेक्स्ट का रंग बदल दिया।

06 में से 06

एडोब एक्सडी सीसी ग्रिड फ़ीचर का उपयोग करना

कार्ड को पूरा करने के साथ अब इसे सामग्री डिजाइन spec के अनुसार सही ढंग से रखा जाना चाहिए। इसका मतलब है कि कार्ड के दोनों तरफ 8 पिक्सल हैं और कार्ड को ऐप बार के नीचे 8 पिक्सल होने की जरूरत है। ऐसा करने के लिए, आर्टबोर्ड नाम पर एक बार क्लिक करें और, गुण पैनल में, ग्रिड का चयन करें। ग्रिड आर्टबोर्ड पर दिखाई देता है।

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

ग्रिड दृश्यमान के साथ, कार्ड पर क्लिक करें और इसे अपनी अंतिम स्थिति में ले जाएं।

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