साइट लेआउट के लिए एवोकोड का उपयोग करना। शुरुआती के लिए समीक्षा करें। बोनस - 30-दिवसीय परीक्षण अवधि पंजीकृत करें

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



Avocode वेबसाइट पर जाकर, हमें तुरंत 14-दिन की अवधि जारी करने की पेशकश की जाती है, लेकिन आपका समय लगेगा, मैं आपको दिखाऊंगा कि 30-दिवसीय कूल टैरिफ प्लान कैसे पंजीकृत किया जाए। पहले चीजें पहले।



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

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

30 दिनों के लिए परीक्षण अवधि का पंजीकरण।

तो, साइट पर वापस जाएं। नीचे स्क्रॉल करें और Avocode बनाम लिंक की तलाश करें Zeplin और उस पर क्लिक करें। ज़ेपलिन एवोकोड का एक विकल्प है।



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



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

हम पत्र में लिंक पर क्लिक करके और आवेदन करने के लिए हमारे ईमेल की पुष्टि करते हैं। तुरंत मेनू पर जाएं और अपने उपनाम पर क्लिक करें, फिर बिलिंग टैब में, हम देखते हैं कि हमारे पास 30 गेंद के दिन हैं, और यहां तक ​​कि शांत, महंगी कंपनी की योजना है, इस तरह से $ 100 / महीने का खर्च आता है। हम आनन्दित होते हैं। इस टैरिफ की मुख्य विशेषता यह है कि इसे 5 लोगों के लिए डिज़ाइन किया गया है, अर्थात आप अपनी टीम में चार और लोफर्स को आमंत्रित कर सकते हैं। आप इसे सदस्यों के टैब में कर सकते हैं। कार्यक्रम वेबसाइट पर टैरिफ के बारे में और पढ़ें।



वैसे, यदि आप कार्यक्रम के लिए भुगतान करने का निर्णय लेते हैं, तो एक सरल पर टैरिफ योजना को बदलना न भूलें। हम बिलिंग - परिवर्तन योजना में जाते हैं और यहाँ सबसे सस्ता काफी उपयुक्त है। उसके बाद, आपको एक क्रेडिट कार्ड जोड़ने और एक वर्ष में 168 साग को रोल करने की आवश्यकता है। लेकिन फिर से, जल्दी मत करो, 30-दिन की अवधि के बाद, एवोकोड आमतौर पर एक ही ईमेल द्वारा $ 1 के लिए परिचितता प्रदान करता है। कम से कम आज यह काम करता है।



तो इस पैसे के लिए हमें क्या मिलेगा? और एवोकोड इतना ठंडा क्यों है। यह देखने का समय है कि वह क्या जानता है।

कार्यक्रम के साथ काम करें

चलो हमारे परीक्षण परियोजना बनाते हैं। New Project पर क्लिक करें।



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

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



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



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

कार्यक्रम इंटरफ़ेस

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



हाथ - हमें सही माउस बटन दबाकर लेआउट को स्थानांतरित करने की अनुमति देता है। लेकिन लाइन स्पेस बार क्लैंप के साथ भी ऐसा कर सकती है।

एरो (चयन का चयन) - आपको कई परतों का चयन करने की अनुमति देता है। लेकिन रेखा बिल्कुल ऐसा ही कर सकती है।

चाकू (टुकड़ा) - तस्वीर के बाद के निर्यात के साथ एक मनमाना क्षेत्र का चयन कर सकता है, लेकिन किसी भी तरह मैंने इसे कभी भी इस्तेमाल नहीं किया।

आईड्रॉपर की कभी-कभी आवश्यकता होती है - यह चयनित क्षेत्र के रंग कोड को कॉपी करता है।

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

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



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

फोंट आमतौर पर लेआउट के साथ-साथ डिजाइनर द्वारा प्रदान किए जाते हैं, लेकिन यह हमेशा ऐसा नहीं होता है, इसलिए यह सूची हमें उन फोंट को खोजने में मदद करेगी जो हमें अपने दम पर चाहिए।

इसके अलावा, अधिक उन्नत उपयोगकर्ताओं के लिए, अपने लिए विभिन्न चर को कॉन्फ़िगर करना संभव है।



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



अंतिम बिंदु गाइड है। यहां आप डिजाइनर गाइड को सक्षम कर सकते हैं या अपना खुद का जोड़ सकते हैं। उनके बीच, आप भी, दूरी को माप सकते हैं।



तो, पूरे लेआउट के लिए पैनल को अलग रखा गया था, अब देखते हैं कि एक अलग ऑब्जेक्ट के लिए पैनल हमें क्या ऑफर करेगा। उदाहरण के लिए, चित्र पर क्लिक करें। दाईं ओर हम चित्र के निर्यात के लिए चयनित वस्तु, उसके आकार और एक बटन को देखते हैं।



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



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



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

लेआउट डिजाइनर के लिए एवोकोड की रिलीज के आधार पर । YouTube चैनल " फ्रीलांसर फॉर लाइफ " पर, " प्रोग्राम एंड वेबसाइट लेआउट के लिए टूल्स " श्रृंखला से, 30 दिनों के लिए फ्री में एवोकोड का उपयोग कैसे करें ।