डिजाइनर से प्रोग्रामर के लिए फ़ाइल स्थानांतरण। स्क्रिप्ट

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

एकल मेनू स्क्रीन के उदाहरण के साथ इस पर विचार करें। इसमें 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); // Layer name, X, Y, layer number out_txt += doc.layers[i].name + ";;;;x=" + x.toFixed(0) + ";;;;y=" + y.toFixed(0) + ";;;;" + i +"\n"; } //Create text frame in first layer on position 0,0 t = doc.layers[0].textFrames.add(); t.contents = out_txt; } 


- प्रत्येक परत को अलग PNG24 फ़ाइल में एक डबल आकार में निर्यात करें। Arcticmill
PNG फ़ाइलों के रूप में निर्यात परतें
 // *** Export Layers as PNG files (in multiple resolutions) *** // This script will export all layers that have a name starting with "#", or "%" into a subfolder of the current .ai document. // These options can be configured below: // *** Config options *** var subFolderName = "Export"; var saveInMultipleResolutions = true; // ... // Note: only use one character! var exportLayersStartingWith = "#"; var exportLayersWithArtboardClippingStartingWith = "%"; // ... var lowResolutionFileAppend = "@Low"; var normalResolutionFileAppend = "-ipad"; var highResolutionFileAppend = "-ipadhd"; // ... var lowResolutionScale = 50; var normalResolutionScale = 100; var highResolutionScale = 200; // *** Start of script *** var doc = app.activeDocument; // Make sure we have saved the document if (doc.path != "") { // Check if we need to create the export directory or we will get errors up ahead var exportDirectoryPath = doc.path + "/" + subFolderName; var exportDirectory = new Folder(exportDirectoryPath); if (!exportDirectory.exists) { // We must create the export directory it seems var newFolder = new Folder(exportDirectoryPath); newFolder.create(); } var layerData = new Array(); // Finds all layers that should be saved and saves these to the export layers array collectLayerData(doc, null); var layersToExportCount = 0; for (var i = 0; i < layerData.length; i++) { if ((layerData[i].tag == "include") || (layerData[i].tag == "include_and_clip")) { // Hide all layers first hideAllLayers(); var clipToArtboard = false; if (layerData[i].tag == "include_and_clip") { clipToArtboard = true; } // Now show all layers needed to actually display the current layer on screen layerData[i].showIncludingParentAndChildLayers(); //showIncludingParents(); // Now we can export the layer as one or multiple PNG files! var savePath = doc.path; // Save to same folder as document but in a sub directory if (saveInMultipleResolutions) { // iPhone 3GS (50%) savePath.changePath(subFolderName + "/" + layerData[i].layer.name.substring(1, layerData[i].layer.name.length) + fixFileAppend(lowResolutionFileAppend)); savePNG(savePath, lowResolutionScale, clipToArtboard); savePath = doc.path; // iPhone 4 (100%) savePath.changePath(subFolderName + "/" + layerData[i].layer.name.substring(1, layerData[i].layer.name.length) + fixFileAppend(normalResolutionFileAppend)); savePNG(savePath, normalResolutionScale, clipToArtboard); savePath = doc.path; // iPad Retina (200%) savePath.changePath(subFolderName + "/" + layerData[i].layer.name.substring(1, layerData[i].layer.name.length) + fixFileAppend(highResolutionFileAppend)); savePNG(savePath, highResolutionScale, clipToArtboard); } else { // Save normally (100%) savePath.changePath(subFolderName + "/" + layerData[i].layer.name.substring(1, layerData[i].layer.name.length)); savePNG(savePath, normalResolutionScale, clipToArtboard); } layersToExportCount++; } } // Restore everything like it was before! restoreAllLayers(); // Was there anything exported? If not make a warning! if (layersToExportCount == 0) { alert("Ooops, Found no layers to export!\n\nRemember that you must add a \"" + exportLayersStartingWith + "\" (when exporting the layer cropped to it's bound) or \"" + exportLayersWithArtboardClippingStartingWith + "\" (when layer should be clipped to artboard) to the beginning of the layer name. Also make sure that they layers you want to export are not locked or hidden."); } else { // Show a completed message alert(layersToExportCount + " layer(s) was successfully exported to: \n" + exportDirectoryPath); } } else { // Document not saved yet! alert("Sorry, but you must save your document before you can use the export layers script! This is because exported images are saved in a subfolder to your original file."); } function fixFileAppend(fileAppend) { if (fileAppend == "") { return ""; } else { return fileAppend + ".png"; } } function hideAllLayers() { for (var i = 0; i < layerData.length; i++) { layerData[i].hide(); } } function restoreAllLayers() { for (var i = 0; i < layerData.length; i++) { layerData[i].restoreVisibility(); } } // Collects information about the various layers function collectLayerData(rootLayer, extendedRootLayer) { for (var i = 0; i < rootLayer.layers.length; i++) { // We never even process locked or hidden layers if ((!rootLayer.layers[i].locked) && (rootLayer.layers[i].visible)) { var extendedLayer = new ExtendedLayer(rootLayer.layers[i]); // Set up parent extendedLayer.parentLayer = extendedRootLayer; // Also add this layer to the parents child collection if (extendedRootLayer != null) { extendedRootLayer.childLayers.push(extendedLayer); } layerData.push(extendedLayer); // Tag these layers so that we later can find out if we should export these layers or not if (rootLayer.layers[i].name.substring(0, 1) == exportLayersStartingWith) { extendedLayer.tag = "include"; } else if (rootLayer.layers[i].name.substring(0, 1) == exportLayersWithArtboardClippingStartingWith) { extendedLayer.tag = "include_and_clip"; } else { extendedLayer.tag = "skip"; } // We should not export this layer but we continue looking for sub layers that might need to be exported collectLayerData(rootLayer.layers[i], extendedLayer); } } } // Holds info and additional methods for layers function ExtendedLayer(layer) { this.originalVisibility = layer.visible; this.layer = layer; this.tag = ""; this.hide = hide; this.show = show; this.showIncludingParentAndChildLayers = showIncludingParentAndChildLayers; this.restoreVisibility = restoreVisibility; this.restoreVisibilityIncludingChildLayers = restoreVisibilityIncludingChildLayers; this.layerName = layer.name; // Set after creating this.childLayers = new Array(); this.parentLayer = null; function hide() { layer.visible = false; } function show() { layer.visible = true; } // Shows this layer including it's parent layers (up to the root) and it's child layers function showIncludingParentAndChildLayers() { var parentlayerName = ""; if (this.parentLayer != null) { parentlayerName = this.parentLayer.layerName; } // Show all parents first var aParentLayer = this.parentLayer; while (aParentLayer != null) { aParentLayer.restoreVisibility(); // Keep looking aParentLayer = aParentLayer.parentLayer; } // Show our own layer finally this.restoreVisibilityIncludingChildLayers(); } function restoreVisibility() { layer.visible = this.originalVisibility; } function restoreVisibilityIncludingChildLayers() { this.restoreVisibility(); // Call recursively for each child layer for (var i = 0; i < this.childLayers.length; i++) { this.childLayers[i].restoreVisibilityIncludingChildLayers(); } } } // Save PNG file function savePNG(file, scale, artBoardClipping) { var exp = new ExportOptionsPNG24(); exp.transparency = true; exp.horizontalScale = scale exp.verticalScale = scale; exp.artBoardClipping = artBoardClipping; doc.exportFile(file, ExportType.PNG24, exp); } 


- Zwoptex या Texture Packer का उपयोग करके इन फ़ाइलों से 4096 * 4096 आकार (या छोटे, लेकिन जरूरी वर्ग) का एटलस बनाएं। 8px छवियों को इंडेंट करना सुनिश्चित करें
यदि आप वेक्टर फ़ाइल में 2px की बहुलता की उपेक्षा करते हैं, तो पारदर्शिता की समस्याओं से बचें। सौभाग्य से फ़ोटोशॉप अल्फ़ाज़िटी के लिए एक कार्रवाई है
छवि
- एटलस को 2 गुना कम करें
- PNG8 में किसी फ़ाइल को ओवरटेक करें

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

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

स्क्रिप्ट और एक्शन से लिंक। GitHub

Source: https://habr.com/ru/post/In158131/


All Articles