मान लीजिए कि हमारे पास मोबाइल उपकरणों के लिए एप्लिकेशन के डेवलपर्स की एक टीम है। ऐसी टीम में निश्चित रूप से एक डिजाइनर है और निश्चित रूप से एक प्रोग्रामर है। सबसे पहले, वे अपने स्वयं के प्रत्येक कार्य को करते हैं - प्रोग्रामर एक प्रोटोटाइप, यांत्रिकी विकसित करता है, डिजाइनर चाबियाँ, पृष्ठभूमि की ड्राफ्ट बनाता है। लेकिन वह क्षण आता है जब डिजाइनर को पहले से ही आवेदन में इसे देखने के लिए अपने काम को स्थानांतरित करना होगा। और यहां मुश्किलें खड़ी हो सकती हैं।
एकल मेनू स्क्रीन के उदाहरण के साथ इस पर विचार करें। इसमें 30-40 ग्राफिक तत्व हो सकते हैं। ये चाबियाँ (स्थिर, दबाए गए), 10 वस्तुओं का एक एनिमेटेड लोगो, एक पॉप-अप मेनू, पृष्ठभूमि पर एनीमेशन हैं। ज्यादातर, डिजाइनर प्रत्येक फ़ाइल को अलग से जारी करता है, और फिर प्रोग्रामर इसे एक नए तरीके से जोड़ता है। इस तरह, एक डिजाइनर बाहर आता है जो कई बार सिलवटों और सामने आता है। फिर डिजाइन बदल सकता है और सब कुछ नए तरीके से करना होगा।
इस प्रक्रिया को अधिक से अधिक स्वचालित कैसे करें
यहां कुछ चरण दिए गए हैं जो मैं यह सुनिश्चित करने के लिए उपयोग करता हूं कि फ़ाइलों का सबसे सुविधाजनक सेट एक डिजाइनर से एक प्रोग्रामर तक गुणवत्ता खोए बिना आता है।
अधिकतम रिज़ॉल्यूशन
में AI में
स्रोत फ़ाइल (2048 * 1536px मेरे मामले में) डिज़ाइन के ड्राफ्ट संस्करण के साथ।
- परतों में सभी वस्तुओं को विघटित और समूहित करना
- उन्हें सही ढंग से नाम दें (बटन - बीटीएन, आइकन - आइकन, सबस्ट्रेट्स - अंडरले ...)
- सभी तत्वों को चौड़ाई और ऊंचाई में 2px का गुणक बनाएं
- 2px के गुणकों में XY द्वारा सभी तत्वों को व्यवस्थित करें
- शीट पर प्रत्येक परत, उसके नाम और स्थिति के XY- निर्देशांक निर्यात करें। चूंकि इलस्ट्रेटर को पता नहीं है कि टेक्स्ट फ़ाइल को कैसे निर्यात किया जाए, डेटा को ऑब्जेक्ट * टेक्स्ट * में सबसे ऊपरी परत में रखा जाएगा।
XY परत स्क्रिप्ट का समन्वय करती हैif (app.documents.length > 0) { var doc = app.activeDocument; var x, y, t; app.coordinateSystem = CoordinateSystem.ARTBOARDCOORDINATESYSTEM; var count = doc.layers.length; var out_txt=""; for ( var i = 0; i < count; ++i) { doc.activeLayer = doc.layers[i]; doc.layers[i].hasSelectedArtwork = true; } for ( var i = 0; i < count; ++i) { x = doc.selection[i].position[0]; y = doc.selection[i].position[1]*(-1);
- प्रत्येक परत को अलग PNG24 फ़ाइल में एक डबल आकार में निर्यात करें।
ArcticmillPNG फ़ाइलों के रूप में निर्यात परतें - Zwoptex या Texture Packer का उपयोग करके इन फ़ाइलों से 4096 * 4096 आकार (या छोटे, लेकिन जरूरी वर्ग) का एटलस बनाएं। 8px छवियों को इंडेंट करना सुनिश्चित करें
यदि आप वेक्टर फ़ाइल में 2px की बहुलता की उपेक्षा करते हैं, तो पारदर्शिता की समस्याओं से बचें। सौभाग्य से फ़ोटोशॉप
अल्फ़ाज़िटी के लिए एक कार्रवाई है
- एटलस को 2 गुना कम करें
- PNG8 में किसी फ़ाइल को ओवरटेक करें
इस प्रकार, प्रोग्रामर को चित्रों के नाम, उनके निर्देशांक, शीट पर स्थिति, निर्देशांक और घुमाव के साथ PLIST या XML, इष्टतम गुणवत्ता में चित्रों का एक एटलस और एक पूर्वावलोकन के साथ एक टेक्स्ट फ़ाइल प्राप्त होगी। ऐसा हुआ कि न तो डिजाइनर और न ही प्रोग्रामर इस दिनचर्या में शामिल होना चाहते हैं, लेकिन बहुत आवश्यक प्रक्रिया है।
कार्यों की इस तरह की एक एल्गोरिथ्म केवल पहली बार मुश्किल और लंबी होगी, लेकिन फिर यह परियोजना में सभी प्रतिभागियों के जीवन को बहुत सरल करेगा।
स्क्रिप्ट और एक्शन से लिंक। GitHub