Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Avocode
Webdesign

Avocode परिचय - Photoshop के बिना कोड में PSD

by
Length:LongLanguages:
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Hindi (हिंदी) translation by Ashish Rampal (you can also view the original English article)

Photoshop साल के लिए वेब डिज़ाइन का एक हिस्सा रहा है, और यह बहुत समय तक जारी रखने की संभावना है। यदि आप Photoshop का उपयोग कर वेब के लिए डिज़ाइन करते हैं, या आप एक डेवलपर हैं जो कोडिंग को संभालता है PSDs, तो यह संभावना है कि आप नियमित आधार पर कुछ समस्याएं चलाते हैं।

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

स्रोत द्वारा निर्मित

स्रोत पर लोग 2012 से Photoshop के लिए एक्सटेंशन का उत्पादन कर रहे हैं। उनके प्लग-इन कोड डिजाइन करने के लिए डिज़ाइन में कुछ सबसे आम मुद्दों को कम करने के लिए डिज़ाइन किए गए हैं, जैसे कि CSS बनाना, जो सही रूप से किसी डिज़ाइन का प्रतिनिधित्व करता है, और इमेजेज को कुशलतापूर्वक एक्सपोर्ट करता है।

मैं अपने CSSHat प्लगइन का एक लम्बे समय से प्रशंसक रहा हूँ, जो कि Photoshop लेयर्स से CSS या प्रीप्रोसेसर कोड उत्पन्न करता है। मैं PNG, JPEG या बेस 64 में इमेजेज को एक्सपोर्ट करने के लिए लगभग हर बार अपने PNGHat प्लगइन का उपयोग भी करता हूं। आप इन दोनों प्लग इन दोनों चरणों में मेरे दो ट्यूटोरियल में देख सकते हैं:

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

यही स्रोत का नया डेस्कटॉप और वेब आधारित उपकरण, Avocode, सभी के बारे में है।

Avocode एक ऐसा कार्यक्रम है जो PSD (या स्केच) से कोड पर जाने की प्रक्रिया के लिए बनाया गया उद्देश्य है। यह स्वचालित रूप से आपके लिए साइट्स उत्पन्न नहीं करता, बल्कि यह आपको उपकरण का एक सेट प्रदान करता है जो आपको व्यक्तिगत रूप से पसंद किए जाने वाली साइटें बनाने में सक्षम बनाता है, लेकिन Photoshop या स्केच के अंदर सीधे काम करते समय अधिक कुशलता से। Avocode का लक्ष्य है वेब डिज़ाइन के डिजाइन और कोडिंग चरणों के बीच का अंतर।

कॉमिन 'अप

इस लेख में हम देखेंगे कि आप एवोकोड का उपयोग कैसे कर सकते हैं:

  • Photoshop के बिना कोडिंग के लिए और फ़ाइलों को ईमेल या अपलोड किए बिना PSD खोलें।
  • लेयर्स, समूहों का चयन करें और एक डिजाइन में चारों ओर स्थानांतरित करें।
  • अपने डिज़ाइन के तत्वों के लिए CSS या प्रीप्रोसेसर कोड उत्पन्न करें।
  • अपने लेआउट का निर्माण करने के लिए सटीक आयाम माप प्राप्त करें।
  • कोड में आसान प्लेसमेंट के लिए टेक्स्ट सामग्री कॉपी करें।
  • PSDs से color palettes और hexcodes निकालें।
  • टुकड़ा करने की क्रिया प्रक्रिया से निपटने के लिए, यहां तक कि कई लेयर्स से छवियां एक्सपोर्ट करें।

Photoshop के बिना PSDs को खोलना

Avocode के साथ, एक स्वचालित सिंकिंग प्रक्रिया के माध्यम से PSDs को डिजाइनरों और डेवलपर्स के बीच साझा किया जाता है। यदि आप एक डिजाइनर हैं, तो आप एक Photoshop प्लग इन स्थापित करेंगे और, जब आपका डिज़ाइन तैयार हो जाएगा, तो आप डेवलपर को अपने PSD को उपलब्ध कराने के लिए सिर्फ एक "Sync now" बटन दबाएंगे।

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

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

प्रत्येक डिज़ाइन के साथ-साथ एक अंतर्निहित संस्करण प्रबंधन सिस्टम आता है। एक PSD के प्रगतिशील पुनरावृत्तियों को आसानी से डिजाइनर और डेवलपर के बीच सिंक्रनाइज़ किया जा सकता है, फिर से Photoshop प्लगइन को Sync now बटन पर क्लिक करके, प्रत्येक ब्राउजिंग पैनल के माध्यम से सुलभ प्रत्येक संस्करण के साथ। Avocode डिजाइन में इमेजेज के पिछले एक्सपोर्ट सेटिंग्स को याद करता है, जिसका मतलब है कि नए अपडेट किए गए इमेजेज को एक्सपोर्ट करना स्वचालित हो सकता है।

चयन और नेविगेटिंग

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

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

स्तरीय या लेयर्स पैनल में सीधे क्लिक करने पर मल्टी चयन कार्य करता है।

डिज़ाइन के चारों ओर पैन करने के लिए Hand Tool का चयन करें, फिर स्थानांतरित करने के लिए क्लिक करें और खींचें।

CSS और प्रीप्रोसेसर कोड उत्पन्न करें

चयनित किसी भी लेयर के साथ और Inspection Panel खोलें, आपको पैनल की Code subsection में उस मद के आउटपुट के लिए CSS दिखाई देगा, जो आपकी वरीयता के आधार पर raw या प्रीप्रोसेसर फॉर्म में होगा। यह CSSHat प्लगइन के समान CSS पीढ़ी के तर्क का उपयोग करता है, जो अभी भी सबसे नेत्रहीन सटीक CSS जनरेटर है जो मैंने वर्तमान में उपलब्ध विकल्पों में देखा है।

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

  • LESS + LESSHat
  • Sass + Compass
  • SCSS + Compass
  • Sass + Bourbon
  • SCSS + Bourbon
  • Stylus + Nib

सटीक लेआउट मापन प्राप्त करें

मुझे यकीन है कि मैं अकेला नहीं हूं जब मैं कहता हूं कि Photoshop के अंदर लेआउट आयाम खोजने में थोड़ा कठिन हो सकता है। Avocode की इस समस्या का दृष्टिकोण बहुत सीधे आगे है। एक वस्तु की ऊंचाई और चौड़ाई प्राप्त करने के लिए:

1. Select Tool चुनें और कोई आइटम, या एकाधिक आइटम चुनें।

2. नीले रंग का चयन हाइलाइट बॉक्स के निचले बाएं कोने में मान पढ़ें।

3. या, Inspection Panel के शीर्ष पर पूर्वावलोकन अंगूठे के दाईं ओर स्थित मान पढ़ें।

किसी भी दो वस्तुओं के बीच क्षैतिज और ऊर्ध्वाधर दूरी पिक्सल में ढूंढने के लिए:

1. Measure Tool चुनें और किसी आइटम को चुनें।

2. किसी भी अन्य आइटम पर होवर करें और हॉरिजॉन्टल और वर्टीकल लाल रेखाओं के आगे स्थित मान पढ़ें।

टेक्स्ट कंटेंट को कॉपी करें

अगर आपके पास एक टेक्स्ट लेयर है, तो आप Inspection Panel में सामग्री का एक काटा हुआ पूर्वावलोकन देखेंगे, साथ ही इसकी चौड़ाई और ऊंचाई, और एक त्वरित Copy text बटन को आप अपने कोड में चिपकाने के लिए उस टेक्स्ट को प्राप्त करने के लिए उपयोग कर सकते हैं।

एक कलर पैलेट जेनरेट करें

1. Color Picker Tool चुनें और मंच के चारों ओर अपने माउस को स्थानांतरित करें, जब तक आप रंग चाहते हैं तब तक रंग पूर्वावलोकन नहीं देख सकते।

2. उस स्थान पर क्लिक करें और प्रत्येक के लिए प्रदर्शित hexcodes के साथ, आपके रंग को Inspection Panel में Colors उप-अनुभाग में जोड़ा जाएगा।

इमेज एक्सपोर्ट करें

1. Select Tool चुनें और कोई आइटम, या एकाधिक आइटम चुनें।

2. पैनल के Export उपधारा के तहत Inspection Panel में एक संपत्ति के रूप में अपने चयन को सेट करने के लिए उस पर नीले प्लस चिह्न के साथ छोटे फ़ाइल आइकन पर क्लिक करें।

3. आपकी संपत्ति का नाम लेयर नाम से खींचा जाएगा। PNG, JPEG या SVG एक्सपोर्ट चुनें, फिर "Export now" पर क्लिक करें। यदि यह परियोजना की पहली परिसंपत्ति निर्यात है, तो आप एक गंतव्य फ़ोल्डर चुन सकेंगे, अन्यथा फ़ाइल सीधे निर्यात की जाएगी।

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

आप पैनल के शीर्ष पर स्थित "कोड प्राप्त करें" बटन, या अपने संपत्ति के नाम के दाईं ओर <> आइकन, HTML, CSS या कम उत्पन्न करने के लिए भी क्लिक कर सकते हैं।

Photoshop के लिए PNGHat प्लगइन में सटीक JPG और PNG एक्सपोर्ट सेटिंग्स के साथ-साथ स्केलिंग विकल्पों पर भी नियंत्रण होता है, इसलिए मुझे लगता है कि हम इन्हें जल्द ही अवोकोड में रखे गए ये नियंत्रण देख लेंगे।

Avocode के इमेज निर्यात करने की प्रक्रियाओं में क्या अनुमान लगाया जा सकता है यह जानने के लिए यहां PNGHat के बारे में अधिक पढ़ें: How to Export Photoshop Assets For the Web With PNGHat

विकास में अतिरिक्त सुविधाएं

अभी Avocode निजी बीटा में है, इसलिए निकट भविष्य में आने के कारण अभी भी बहुत ही दिलचस्प लग रही सुविधाएँ हैं। एप इस गर्मी में किसी बिंदु पर सार्वजनिक बीटा में जाने के लिए निर्धारित है, इसके बाद हम आधिकारिक लॉन्च देखेंगे।

जैसा कि विकास चलता रहता है, यहां कुछ चीजें हैं जो हम आशा कर सकते हैं:

पूर्ण मल्टी-प्लेटफार्म और वेब आधारित समर्थन

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

स्केच आधारित डिजाइन के साथ प्रयोग करें

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

Atom Code Editor Inside Avocode

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

कलर वेरिएबल्स

साथ ही आपके पैलेट में रंगों के लिए हेक्सकोड्स को पकड़ने में सक्षम होने के साथ-साथ, आप अपने प्रीप्रोसेसर कोड में उपयोग के लिए प्रत्येक रंग को वैरिएबल नाम भी दे सकते हैं।

बिल्ट FTP और CDN अपलोड में

Avocode के रास्ते में अन्य कई कार्यों के साथ, CDN पर सीधे अपलोड करने की क्षमता स्रोत के प्लगइन्स, PNGHat में पहले से मौजूद है, इसलिए हम अनुमान लगा सकते हैं कि कार्यक्षमता बहुत अधिक होगी। इमेजेज को स्थानीय रूप से Avocode के माध्यम से एक्सपोर्ट किया जा सकता है, या वैकल्पिक रूप से आप उन्हें सीधे CDN में धकेल सकते हैं और आपके पास CSS आउटपुट में फ़ाइल स्थान जोड़ा गया है। आपके पास एक्सपोर्ट पर सीधे अपने सर्वर पर इमेजेज को FTP करने का विकल्प होगा।

TypeKit और Google फोंट के साथ कनेक्ट करें

Avocode के लिए परिचयात्मक वीडियो का उल्लेख है, अपने फ़ॉन्ट सेटिंग कोड को तैयार करते समय TypeKit और Google Fonts के साथ एकीकृत करने का विकल्प होगा। यह अभी तक बंद बीटा या स्रोत के किसी भी प्लगइन्स में नहीं है, इसलिए मुझे यकीन नहीं है कि यह कैसे काम करेगा, लेकिन मैं व्यक्तिगत रूप से यह उम्मीद कर रहा हूं कि यह उपयुक्त URL और कोड को जोड़ने की प्रक्रिया को सुव्यवस्थित करेगी जिसके साथ कॉल करने के लिए विभिन्न फोंट्स।

बेस 64 और स्प्राइट शीट एक्सपोर्ट

Avocode के वर्तमान बंद बीटा संस्करण में इमेज एक्सपोर्ट का पहला चरण JPEG, PNG और SVG के लिए है। हालांकि स्रोत पहले से ही Photoshop के लिए अपने PNGHat प्लगइन के जरिए बेस 64 पीढ़ी के लिए स्थापित की गई प्रक्रिया है, इसलिए मुझे उम्मीद है कि हम उन्हें उस कोड बेस से लेकर Avocode में लाने के लिए देखेंगे। वे आवश्यक CSS के साथ प्रेत पत्रक के उत्पादन का समर्थन करने का भी इरादा रखते हैं।

iOS के लिए एक्सपोर्ट कोड

Avocode का फोकस वेब तक पूरा हो जाएगा, जब तक कि यह पूरी परिपक्वता तक नहीं पहुंच पाता है, हालांकि इसमें iOS विकास के भाग के रूप में उपयोग करने के लिए काम करने की योजनाएं भी हैं।

स्रोत पहले से ही iOSHat नामक एक प्लगइन है जो iOS विकास में उपयोग के लिए Photoshop लेयर्स से ऑब्जेक्टिव सी या स्विफ्ट कोड जेनरेट करने के लिए फ़ोटोशॉप में काम करता है। यह संभावना है कि ऐवोकोड में iOS कोड एक्सपोर्ट के लिए समर्थन उसी तरह से काम करेगा।

कस्टम एक्सटेंशन के लिए पैकेज

Avocode में एक दिलचस्प मेनू आइटम है; एक जो भविष्य के विस्तार की बातों को संकेत देता है, कुछ शुरुआती संकुल पहले से मौजूद हैं:

स्रोत कहते हैं कि वे एटम के रिहाई से प्रेरित थे, ताकि कस्टम "पैकेज" बनाने और समुदाय में साझा किए जाने की अनुमति देने के समान तरीके अपनाए। हम इस मार्ग को देखने के लिए आगे देख सकते हैं जैसे कि विकास की गति बढ़ जाती है।

एक 70% डिस्काउंट में लॉक करने के लिए प्रीऑर्डर

फिलहाल स्रोत लगातार बढ़ रहे हैं और बीटा उपयोगकर्ता प्रतिक्रिया में काम कर रहे हैं क्योंकि वे साथ में जाते हैं। जब सॉफ्टवेयर को सार्वजनिक तौर पर जारी किया जाता है तो यह प्रति वर्ष $240 के लिए सदस्यता मॉडल के माध्यम से उपलब्ध होगा।

हालांकि, यदि आप प्रीऑर्डर शुरुआत में प्राप्त करते हैं, तो आप 70% सतत छूट के साथ एक मौके पर लॉक करेंगे, इसके बदले इसे प्रति वर्ष $69 प्रति वर्ष करना होगा। आपको निजी बीटा तक पहुंच भी प्राप्त होगी, और इस अवधि के दौरान आप नि: शुल्क सॉफ्टवेयर का उपयोग करने में सक्षम होंगे। आपकी वास्तविक सदस्यता केवल तब शुरू होती है जब अवॉक्वेन सार्वजनिक लॉन्च में जाती है।

प्रीऑर्डर स्पॉट सीमित हैं, और इस पल के रूप में 230 जगहों से कम उपलब्ध हैं। प्रीऑर्डर: http://avocode.com/preorder.html

उपयोगी कड़ियाँ

अतिरिक्त जानकारी के लिए देखें:

निष्कर्ष

मैं आपके ऊपर पूरी तरह से निष्कर्ष निकालना छोड़ दूँगा! आप क्या सोचते हैं, क्या आप स्रोतों की घोषणा की किसी भी सुविधा से हैरान हैं? क्या आपके भविष्य के वर्कफ़्लो का हिस्सा होगा? हमें टिप्पणियों में बताएं!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.