एडोब अनुभव डिझाईन सीसीमध्ये मटेरियल डिझाईन कार्ड कसे तयार करावे

Google वरून साहित्य डिझाईन तपशील मूलतः प्लॅटफॉर्मवर डिझाइनची सुसंगतता सूचित करण्याचा मार्ग म्हणून Android प्लॅटफॉर्मवर उद्देशित होता.

06 पैकी 01

एडोब अनुभव डिझाईन सीसीमध्ये मटेरियल डिझाईन कार्ड कसे तयार करावे

डिझायनर एकदा त्यातून बाहेर पडून आणि त्याच्या मागे विचार समजून झाल्यावर, साहित्य डिझाइन शांतपणे वेब आणि मोबाइल डिझाइनमधील सर्वात प्रभावशाली व्हिज्युअल तत्त्वज्ञानांपैकी एक बनले आहे. आपल्याला जे काही हवे आहे ते पाहण्यासाठी आपल्याला फक्त Pinterest वर साहित्य डिझाईन शोध करणे आवश्यक आहे आणि आपण साधने, टॅबलेट्स आणि अगदी वेबसाइटवर शेकडो उदाहरणे आणि प्रयोग पाहू शकता.

सामग्री डिझाइनचे उत्कृष्ट पैलू असे आहे की अॅप्स कसे दिसतात आणि मोबाइल उपकरणांवर कार्य कसे करावे त्याबद्दल Google चा विचार आहे परंतु कोणत्याही व्यासपीठावर कोणत्याही आकाराच्या कोणत्याही स्क्रीनवर संकल्पना लागू केली जात आहेत. Google च्या स्पष्टीकरणाचे पहिल्या परिच्छेदामध्ये म्हणते की, "आम्ही आमच्या वापरकर्त्यांसाठी एक दृश्यमान भाषा तयार करण्यासाठी स्वतःला आव्हान दिले आहे जे नवाचार आणि तंत्रज्ञानाची आणि विज्ञानविषयक शक्यतांसह चांगले डिझाइनचे क्लासिक तत्त्वे संकलित करते. हे भौतिक रचना आहे. हे तपशीला एक जिवंत दस्तऐवज आहे ज्याचे अद्ययावत केले जाईल कारण आम्ही सामग्री डिझाइनचे सिद्धांत आणि तपशील विकसित करणे सुरू ठेवतो. "

साहित्य साधारणपणे, कागदावर बोलले आहे आणि साहित्य डिझाईनची एक ओळखपत्र हे कार्ड आहे. एका पृष्ठभागावरील निर्देशांक कार्डाचा विचार करा आणि आपण योग्य मार्गावर आहात कार्ड म्हणजे एक घटक आहे फोटो, व्हिडिओ, मजकूर लिंक्स, इत्यादी. परंतु बहुतेक परस्परसंवादी डिझाईन्सपासून ते वेगळ्या असतात तर ते एकाच विषयावर केंद्रित करण्यासाठी असतात. कार्डे गोलाकार कोपर्यामध्ये असतात, ते अस्पष्ट छाया आहेत ज्या दर्शवितात की ते पृष्ठभागाच्या वर आहेत आणि जर ते सर्व एकाच प्लेनमध्ये असतील तर ते "संग्रह" म्हणून ओळखले जातात.

यामध्ये "कसा करायचा" आम्ही विशिष्ट वर आधारित कार्ड तयार करणार आहोत. विविध इमेजिंग आणि रेखांकन साधनांसह कार्ड तयार करण्याऐवजी, आपण त्यास वेगळ्या दिशेने पुढे जाणार आहोत. आम्ही Adobe च्या अनुभव डिझाइनमधील साधनांचा वापर करणार आहोत जे सध्या केवळ एका Macintosh-only सार्वजनिक पूर्वावलोकनात आहे आणि ते विनामूल्य आहे आपण येथे डाउनलोड करू शकता

चला सुरू करुया.

06 पैकी 02

Adobe Experience Design CC मध्ये प्रोटोटाइप आर्टबोर्ड तयार करणे

अनुभव डिझाईन सीसी (XD) मध्ये प्रारंभ स्क्रीनवरून अँड्रॉइड स्क्रीन तयार करण्याचा कोणताही स्पष्ट मार्ग नाही. जीडीएस उघडताना आम्ही काय करावे हे आयफोन 6 चा पर्याय निवडणे आणि जेव्हा इंटरफेस उघडेल, तेव्हा आपण टूलबारच्या तळाशी असलेल्या आर्टबोर्ड उपकरण निवडतो आणि प्रॉपर्टीज पॅनेलच्या उजव्या बाजूस असलेल्या निवडीमधून अँड्रॉइड मोबाइलची निवड करतो. मग आम्ही निवड साधनावर स्विच केल्यावर, आयफोन कलाबोर्डच्या नावावर एकदा क्लिक करा आणि आर्टबोर्ड हटवा. आणखी नाही

XD च्या वर्तमान आवृत्तीमध्ये, iPhone 6 च्या बाजूला एक लहान बाण आहे, जे जेव्हा क्लिक केले जाते तेव्हा ड्रॉप-डाउन मेनू उघडते तिथून आपण अँड्रॉइड मोबाइल आवृत्ती निवडा आणि अँड्रॉइड मोबाइल आर्टबोर्ड निवडला इंटरफेसमध्ये उघडला.

कार्डसाठी आमच्याकडे योग्य स्क्रीन जागा खुली आहे हे सुनिश्चित करण्यासाठी, आम्ही सहसा स्केच 3 वर आहोत आणि आर्टबोर्डमध्ये मटेरियल डिझाईन टेम्पलेटमधील स्टेटस बार, नॅवि बार आणि अॅप बार कॉपी आणि पेस्ट करा. स्केच 3.2 मध्ये एक मटेरियल डिझाईन टेम्प्लेट ( फाइल> टेम्पलेट > नवीन डिझाइनवरून नवीन ) आणि दुसरे खरोखर चांगले एक आहे काइल लेडबेटरकडून आहे जे आपण येथे प्राप्त करू शकता. आपल्याकडे स्केच नसल्यास, आपण फाईल> ओपन UI किट> Google साहित्य मध्ये आढळलेल्या XD स्टिकर्समधून कॉपी आणि पेस्ट करू शकता. आपण त्यांना फोटोशॉप, इलस्ट्रेटर, इफेक्ट्स आणि स्केच नंतर वापरासाठी Google वरून डाउनलोड देखील करू शकता.

06 पैकी 03

अॅडड XD सीसी आर्टबोर्डवर मटेरियल डिझाइन कार्ड जोडणे

XD ची सर्वात उपयुक्त वैशिष्ट्ये म्हणजे ऍपल आयओएस, Google साहित्य आणि मायक्रोसॉफ्ट विंडोज साठी UI किटचा समावेश आहे. बर्याच बाबतींत ते "रॅपिड" शब्द "रेपिड प्रोटोटाइपिंग" मध्ये जोडतात.त्याप्रमाणे ते सामान्य UI घटकांमध्ये डिझायनरचे काम सोपे करतात ते डिझाइन ऍप्लिकेशन्समध्ये जसे की फोटोशॉप, इलस्ट्रेटर किंवा सतत स्केच

आम्हाला आवश्यक असलेली UI घटक म्हणजे एक कार्ड. त्यावर जाण्यासाठी आम्ही फाइल> ओपन UI किट> Google सामग्री आणि नवीन कागदजत्र म्हणून उघडलेल्या किटची निवड केली. आम्हाला आवश्यक असलेला घटक कार्ड श्रेणीमध्ये आढळला.

काय याबद्दल आम्ही जे प्रेम करतो ते सामग्री ब्लॉक विशिष्ट गोष्टींचे पालन करतात जसे की सामग्री ब्लॉक चष्मा तसेच पाठ स्वरूपन आणि टाईपोग्राफीच्या विशिष्ट स्पेसेसच्या स्पेसेस.

आम्हाला पाहिजे असलेली कार्डची शैली खाली डाव्या बाजूला असलेली एक होती. आम्ही ते फक्त आमच्या माऊसच्या साहाय्याने चिकटवून क्लिपबोर्डवर कॉपी केले. दुर्दैवाने, XD मध्ये उघडलेल्या दस्तऐवजांसाठी एक टॅब केलेले इंटरफेस समाविष्ट नाही. आपण जे काम करत आहोत ते उघडण्यासाठी खुले डॉक्युमेंट विंडो खाली खाली हलवा, त्यावर क्लिक करा आणि पेस्ट करा. खुल्या XD दस्तऐवजांमधील द्रुतगतीने स्विच करण्याचा दुसरा मार्ग म्हणजे कमांड- '

04 पैकी 06

अडोब एक्सपिरिअन्स डिझाइन सीसी मध्ये मटेरियल डिज़ाइन एलिमेंट कसे संपादित केले

जेव्हा XD मध्ये कार्ड क्लिपबोर्डवरून दिसेल तेव्हा त्याच्याशी कल्पितपणे काम करणे सुरू नसते. आपल्याला सर्वात प्रथम गोष्ट म्हणजे कार्डची देवाणघेवाण करणे आवश्यक आहे कारण आपल्याला कार्डची रचना करणे आणि कार्ड तयार करणे आवश्यक आहे. हे करण्यासाठी, कार्ड निवडा आणि ऑब्जेक्ट> गट निवडा किंवा Shift-Command-G दाबा.

आपले कार्ड आता तीन तुकडे झाले आहे:

• प्रतिमेसाठी हलका राखाडी बॉक्स.
• मजकूरासाठी मध्यम ग्रे बॉक्स
• पार्श्वभूमी म्हणून वापरलेला बॅक बॉक्स.

पहिले पाऊल म्हणजे हलका करडा बॉक्स. याचाच एकमात्र उद्देश म्हणजे आपण निवडलेल्या इमेजसाठी प्लेसहोल्डर म्हणून कार्य करणे हा पर्यायी पर्याय आहे.

मजकूरासह बॉक्स 50% अपारदर्शकता सह गडद राखाडी आहे. हा बॉक्स मजकूर पार्श्वभूमी म्हणून वापरला जाऊ शकतो आणि आपण रंग आणि बॉक्सची अस्पष्टता बदलू शकता.

तो लगेच स्पष्ट नसला तरीही, हलका राखाडी बॉक्स भौतिक डिझाइन स्पेकचे अनुसरण करते ज्याच्या शीर्ष कोपऱ्यास 2 पिक्सेलने गोल असते. आपण प्रतिमा जोडत असाल तर हे लक्षात ठेवा. त्यास गोलाकार कोप्याची आवश्यकता आहे ज्यास इमेजिंग ऍप्लिकेशनमध्ये किंवा XD मध्ये जोडता येईल.

हे कार्डची विश्रांतीची स्थिती कशी आहे हे पाहणे तसेच तिला सावलीची आवश्यकता आहे. स्पेक्साडने हे स्पष्ट केले आहे की 2 पिक्सेलच्या कार्डे आराम करण्यासारखे आहेत हे जोडण्यासाठी, गुणधर्म पॅनेलमध्ये काळा बॅकग्राउंड आकार निवडा आणि Y आणि B (अंधुक) मूल्ये 2 वर सेट करा.

06 ते 05

अॅडोब एक्सडी सीसीमध्ये मटेरियल डिझाइन कार्डला एक प्रतिमा कशी जोडावी

कार्ड जाणून घेणे 344 पिक्सेल रूंद आहे आणि प्रतिमा क्षेत्र 150 पिक्सेल उंच आहे ( प्रकाश ग्रे बॉक्सची उंची अर्धा ) आम्ही फोटोशॉपमधील प्रतिमा उघडली, ती आकारात क्रॉप केली आणि फोटोशॉपच्या एक्सपोर्ट एक्सपर्ट मध्ये संवाद म्हणून @ 2x पर्याय वापरुन सेव्ह केला. बॉक्स. प्रतिमा Adobe XD मध्ये आयात केली होती

आम्ही नंतर पेस्टबोर्डवर इमेजच्या प्रती हलक्या राखाडी बॉक्स ड्रॅग करून ऑब्जेक्ट> मास्कसह आकार निवडा . परिणामी आकाराच्या गोलाकार कोपांची निवड केली जात होती. आम्ही नंतर प्रतिमा त्याच्या अंतिम स्थितीत हलविले.

ठिकाणी असलेल्या प्रतिमेसह, आम्ही नंतर मध्यम ग्रे बॉक्सचा पार्श्वभूमी रंग बदलला, मजकूर आणि दुवा मजकूराचा रंग बदलला

06 06 पैकी

Adobe XD सीसी ग्रीड वैशिष्ट्य वापरणे

कार्ड पूर्ण झाल्यानंतर आता ते मटेरियल डिझाइन स्पेसनुसार योग्यरित्या ठेवण्याची आवश्यकता आहे. याचा अर्थ कार्डच्या दोन्ही बाजूंमध्ये 8 पिक्सेल्स आहेत आणि अॅप बार खाली 8 पिक्सेल असण्याची आवश्यकता आहे. असे करण्यासाठी, आर्टबोर्ड नावावर एकदा क्लिक करा आणि, गुणधर्म पॅनेलमध्ये, ग्रिड निवडा. ग्रिड आर्टबोर्ड वर दिसते

डीफॉल्ट ग्रीडचा आकार 8 पिक्सेल आहे जे भौतिक डिझाईनसाठी समान ग्रिड आकार असला पाहिजे. आपल्याला वेगळ्या आकाराची आवश्यकता असल्यास, ग्रिड क्षेत्रातील मूल्य बदला. आपण ग्रिडचा रंग बदलू इच्छित असल्यास, रंग चिप क्लिक करा आणि परिणामी रंग निवडीशी रंग निवडा.

दृश्यमान ग्रिडसह, कार्डावर क्लिक करा आणि त्यास आपल्या अंतिम स्थानी हलवा.

समाप्त करण्यासाठी, आम्ही कार्ड निवडले, पुनरावृत्ती ग्रीड बटण क्लिक केले आणि कार्डांमधील अंतर 8 पिक्सेल्समध्ये बदलले