कैसे ui किट का उपयोग करने के लिए Adobe xd

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

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

गाइडिंग टेक पर भी

कैसे एडोब ब्रिज के साथ तस्वीरें कन्वर्ट करने के लिए बैच

एडोब एक्सडी में यूआई किट कैसे डाउनलोड करें

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

चरण 1: सॉफ्टवेयर के ऊपरी बाएँ कोने में हैमबर्गर मेनू बटन पर क्लिक करें।

चरण 2: मेनू में, नीचे दिए गए UI किट विकल्प पर स्क्रॉल करें और फिर उपलब्ध विकल्पों में से तीन पर क्लिक करें।

इस लेख के लिए, मैं Google सामग्री UI किट चुनूंगा। हालाँकि, आपके प्रोजेक्ट के आधार पर आप Apple iOS या Microsoft Windows किट का चयन कर सकते हैं। यह एक आधिकारिक वेब पेज खोलेगा जिसमें से आप मुफ्त में यूआई किट डाउनलोड कर सकते हैं।

चरण 3: निम्नलिखित वेब पेज में एडोब एक्सडी यूआई किट का पता लगाएँ, और इसे अपने सिस्टम पर डाउनलोड करें।

चरण 4: अब एडोब एक्सडी में डाउनलोड की गई फ़ाइल को खोलें और आपको संबंधित प्लेटफॉर्म के लिए यूआई संसाधनों वाले आर्टबोर्ड का एक समूह के साथ स्वागत किया जाएगा।

आप सभी व्यक्तिगत आर्टबोर्ड को देखने के लिए Ctrl बटन को दबाए रख सकते हैं और ज़ूम इन / आउट करने के लिए स्क्रॉल व्हील को स्थानांतरित कर सकते हैं।

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

आप Get UI Kits मेनू में More UI किट विकल्प पर क्लिक करके Adobe की वेबसाइट पर अतिरिक्त UI किट देख सकते हैं।

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

अब जब आप UI किट डाउनलोड करना जानते हैं, तो आइए एक नज़र डालते हैं कि आप अपनी परियोजनाओं में इनका उपयोग कैसे कर सकते हैं।

एडोब एक्सडी में यूआई किट का उपयोग कैसे करें

अपने प्रोजेक्ट में UI किट का उपयोग करने के लिए, बस इन सरल चरणों का पालन करें:

चरण 1: उस UI तत्व पर ज़ूम करें जिसे आप अपनी परियोजना में उपयोग करना चाहते हैं और इसे चुनने के लिए इसके शीर्षक पर क्लिक करें।

चरण 2: अब Ctrl + C शॉर्टकट का उपयोग करके तत्व को कॉपी करें।

चरण 3: फिर मेनू से एक नया Adobe XD प्रोजेक्ट खोलें।

चरण 4: यहां, Ctrl + V शॉर्टकट का उपयोग करके UI तत्व पेस्ट करें।

इस लेख के लिए, मैं Google सामग्री UI किट से मोबाइल डार्क तत्व का उपयोग करूंगा। तत्व में आपको अधिक परतें रखने में मदद करने के लिए गाइड शामिल हैं, लेकिन यदि आप उनका उपयोग नहीं करना चाहते हैं तो आप अगले चरण का पालन करके उन्हें आसानी से निकाल सकते हैं।

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

चरण 6: अब इस पृष्ठ पर जोड़ने के लिए एक अन्य तत्व का चयन करने के लिए UI किट पर वापस जाएं। एक बार फिर, तत्व के शीर्षक पर क्लिक करें और इसे Ctrl + C शॉर्टकट का उपयोग करके कॉपी करें।

मैं इस लेख के लिए एक मूल टोस्ट बना रहा हूँ जिसके लिए मैं एक संवाद का उपयोग करूँगा।

चरण 7: पिछले तत्व पर नए तत्व को चिपकाएं और फिर इसे गाइड के अनुसार संरेखित करें।

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

इसके बाद, टेक्स्ट बॉक्स पर डबल-क्लिक करके और जो भी आप जोड़ना चाहते हैं उसमें टाइप करके शरीर की सामग्री को बदलें।

आप एक ही तरीके से बटनों के पाठ को भी बदल सकते हैं। एक बार जब आप पाठ का संपादन कर लेते हैं, तो आप पाठ के रंग और अस्पष्टता को बदल सकते हैं। अपारदर्शिता को बदलने के लिए, टूलबार में Opacity विकल्प के नीचे स्लाइडर को दाईं ओर ले जाएं।

पाठ का रंग बदलने के लिए, भरें विकल्प के बगल में आयत पर क्लिक करें और फिर रंग बीनने वाले से एक नया रंग चुनें।

और यह केवल पाठ नहीं है जिसे आप इस तरीके से संपादित कर सकते हैं। आप संवाद बॉक्स में लगभग सभी वस्तुओं के रंग और अस्पष्टता को भी बदल सकते हैं, जो कि यदि आप एक अद्वितीय रंग योजना के लिए जा रहे हैं तो बहुत अच्छा है।

एक बार जब आप परिणाम से संतुष्ट हो जाते हैं, तो बस आगे बढ़ें और मेनू में Save As विकल्प पर क्लिक करके या Shift + Ctrl + S शॉर्टकट का उपयोग करके अपनी फ़ाइल को सहेजें।

गाइडिंग टेक पर भी

#ग्राफ़िक डिज़ाइन

हमारे ग्राफिक डिजाइन लेख पृष्ठ देखने के लिए यहां क्लिक करें

यूआई किट का उपयोग कर अपने डिजाइन सही

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

अगला: Adobe XD पर एक प्रोजेक्ट पूरा किया और यह नहीं पता कि इसे HTML में कैसे निर्यात किया जाए? एक सरल चरण-दर-चरण ट्यूटोरियल के लिए अगला लेख देखें।