📒 🤾🏽 🕒 सुविधाजनक सीएसएस स्प्राइट जनरेटर 〰️ 👁️ 👩🏿‍⚕️

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

अधिकांश भाग के लिए, स्प्राइट्स के साथ मेरा काम निम्नलिखित में उबला हुआ है:

तो, चलो शुरू से ही शुरू करते हैं।

संक्षिप्त इतिहास

अतीत

एक बार मैंने साइट्स बनाईं। अधिकारियों ने पृष्ठों को लोड करने में तेजी लाने की मांग की और इसलिए मैंने छवियों को स्प्राइट में संयोजित करना शुरू कर दिया।

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

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

मैं मानता हूं, इस दृष्टिकोण में एक खामी थी। PHP द्वारा उत्पादित छवियों की गुणवत्ता, इसे हल्के ढंग से रखने के लिए, "बहुत नहीं"। इसलिए, मैंने स्क्रिप्ट को सेट किया ताकि फ़ाइल एक्सटेंशन शैलियाँ jpg, png, gif और चित्र BMP प्रारूप में उत्पन्न हों। और फिर मैं मैन्युअल रूप से फ़ोटोशॉप का उपयोग करके वांछित प्रारूप में परिवर्तित हो गया।

वर्तमान में

कई वर्षों के बाद, मुझे फिर से स्प्राइट्स का उपयोग करके लेआउट बनाना पड़ा। और फिर यह मेरे लिए दिलचस्प हो गया। इस प्रक्रिया को सरल बनाने के लिए इस समय के दौरान क्या दिखाई दिया है?

फोटोशॉप ने फिर मुझे खुश नहीं किया। लेकिन स्प्राइट जनरेटर आतिशबाजी CS6 में दिखाई दिया। लेकिन कई वीडियो और लेख देखने के बाद, मुझे एहसास हुआ कि यह मुझे शोभा नहीं देता, क्योंकि यह मेरी सभी आवश्यकताओं को पूरा नहीं करता है।

कई अलग-अलग जनरेटर भी दिखाई दिए। हब पर एक छोटी समीक्षा पहले से ही थी , जनरेटर के लिंक भी हैं। लेकिन जनरेटर में से एक ने उन सभी कार्यों को पूरा नहीं किया जो मैंने स्प्राइट जनरेटर के लिए आगे रखा था।

मुझे स्प्राइट जनरेटर कैसे दिखाई देता है

संक्षेप में, स्प्राइट जनरेटर चाहिए:

मूल चित्रों को भागों में काटने में सक्षम हो
स्प्राइट्स में कट भागों को जोड़ने में सक्षम हो
समान समय में शैलियाँ उत्पन्न करें
मुख्य बात यह है कि एक सुविधाजनक चित्रमय इंटरफ़ेस है

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

लेकिन चूंकि आपके पास एक ग्राफिकल इंटरफ़ेस है, तो फ़ोटोशॉप की विशेष रूप से आवश्यकता नहीं है। क्षेत्रों का चयन करना और चित्र को काटना जावास्क्रिप्ट और एचटीएमएल 5 के लिए एक तुच्छ कार्य है।

ये सभी चार बिंदु स्पष्ट रूप से एक एकल संपादक में विलय करना चाहते हैं।

और संपादक के लिए इस परियोजना को रखने के लिए बहुत महत्वपूर्ण है यदि आपको बाद में कुछ ठीक करने की आवश्यकता है।

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

अब हम ग्राफिकल इंटरफ़ेस पर ध्यान केन्द्रित करते हैं। यह निम्नलिखित होना चाहिए:

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

मुख्य बात यह है कि परियोजना में चित्रों को जोड़ते समय, उपयोगकर्ता को अनावश्यक कॉन्फ़िगरेशन चरणों से बचाने के लिए कुछ मानक नियम बनाए जाने चाहिए। उदाहरण के लिए, हमने "firefox.png" आइकन जोड़ा। कार्यक्रम को स्वचालित रूप से एक "फ़ायरफ़ॉक्स" क्षेत्र (पूर्ण चौड़ाई और ऊंचाई) और शैली बनाना चाहिए:

.firefox{ width:16px; height:16px; background: url('data:image/png;base64,.....==') 0px 0px no-repeat; }

और फिर हम क्षेत्र को एक और स्प्राइट में स्थानांतरित कर सकते हैं या शैलियों की पीढ़ी को संपादित कर सकते हैं।

समाधान अवलोकन

अब संक्षेप में, मौजूदा समाधान मुझे फिट क्यों नहीं हुए।

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

मैंने इन उपकरणों की तुलना पांच साल से अधिक समय पहले की थी जब मैंने नियमों को php स्क्रिप्ट में लिखा था और इससे स्प्राइट उत्पन्न हुए थे। लेकिन अब मैं सिर्फ दृश्य संपादक चाहता था।

स्प्राइटमाइ - लिंक को बुकमार्कलेट में खींचें और फिर आप उस साइट पर स्प्राइट को संपादित कर सकते हैं जिसे आप देख रहे हैं। लेकिन मुझे मौजूदा साइट पर स्प्राइट को संपादित करने की आवश्यकता नहीं है। जब स्टेज अभी भी लेआउट में है तो मुझे स्टेज पर एक संपादक की आवश्यकता है।

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

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

अधिक ऑनलाइन सेवाएं:

css-sprit.es,
csssprites.com,
spritegen.website-performance.org,
css.spritegen.com

उन में, प्रक्रिया इस प्रकार है:

चित्र अपलोड करें
मापदंडों की स्थापना
पीढ़ी

लेकिन फिर भी, वे मुझे सहज और व्यावहारिक नहीं लग रहे थे। सामान्य तौर पर, उपरोक्त प्रत्येक एप्लिकेशन ने मुझे इस तथ्य के कारण असुविधा का एहसास कराया कि वांछित विकल्प नहीं मिला था या एक असहज इंटरफ़ेस था।

मैं इस मामले को राज्य के साथ नहीं रखना चाहता था और अपने जनरेटर को ढेर कर रहा था।

परिचय देने के लिए खुशी है

Simpreal द्वारा सीएसएस स्प्राइट जेनरेटर

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

"उदाहरण" अनुभाग में मुख्य पृष्ठ पर कई नमूना परियोजनाएं हैं। मुझे उम्मीद है कि वे कार्यक्रम की क्षमताओं को समझने में मदद करेंगे।

स्प्राइट जनरेटर ऑनलाइन काम करता है। बूटस्ट्रैप, नॉकआउटज और जेक्वेरी से खुद को इकट्ठा किया।

मुख्य बात यह है कि परियोजना के विकास के दौरान बहुत अनुभव प्राप्त किया गया था, खासकर नॉकआउट्स पर। इस अनुभव के परिणामस्वरूप Habr पर दो लेख आए:

जावास्क्रिप्ट पर GIF GIF करने के लिए
गतिशील रूप से टेम्प्लेट जोड़ने और हटाने के दौरान नॉकआउटज अनुकूलन

अगर किसी के पास अभी भी सवाल है कि स्प्राइट जनरेटर क्या कर सकता है, तो इसे लागू करने से संबंधित जवाब देने में मुझे खुशी होगी।

विंडोज के लिए एक ऑफ़लाइन संस्करण भी है। यह एक एवसोमियम शेल है जिसमें वेब फाइलें बस डाली जाती हैं। लेकिन वास्तव में, मुझे यह सुनिश्चित करने के लिए काम करना था कि सभी कार्य इस शेल में काम करते हैं। इसलिए मैं इस अनुभव को साझा कर सकता हूं।

आगे क्या है

स्मार्टप्रोग्रेस पर विकास प्रक्रिया की निगरानी की जा सकती है

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

दुर्भाग्य से, आधे साल के लिए, लगभग किसी ने कार्यक्रम का उपयोग करना शुरू नहीं किया। इसलिए, मैं इस उत्पाद की उपयोगिता के बारे में आपकी राय जानने के लिए कार्यक्रम को हॉबर-समुदाय को प्रदर्शित करता हूं।

मैं सिर्फ यह मानता हूं कि बहुत कम लोग सिद्धांत रूप में स्प्राइट का उपयोग करते हैं। उदाहरण के लिए, पिछले 5 वर्षों में मैंने केवल एक साइट को जाना है। असली ग्राहक अब इस पर ध्यान नहीं दे रहे हैं।

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

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

सुविधाजनक सीएसएस स्प्राइट जनरेटर