用于通用 Windows 平台资源的 Adobe Illustrator 脚本

Leisvan Cordero

0/5 (0投票)

2016年1月20日

CPOL

3分钟阅读

11327

120

用于通用 Windows 平台资源的 Adobe Illustrator 脚本

下载源代码 (UWP) - 631 B

引言

Windows 应用商店标准要求提供一组资源来展示应用程序，这些资源（包括图标和磁贴）将成为您的应用程序在所有 Windows 设备上的门面。Visual Studio 提供了一系列类别、尺寸和缩放比例，以简化此过程。

在每个 UWP 项目中，都有一个 Package.appxmanifest 文件。打开它并转到“视觉资源”选项卡。您将看到一些定义您的应用程序的视觉属性，例如短名称、背景颜色或显示名称类别。有关更多信息，请参阅磁贴和图标资源的指南。

对于应用磁贴尺寸，您需要选择一组应提供的资源（强烈建议提供尽可能多的磁贴尺寸），并遵循某些缩放比例以匹配不同设备和屏幕设置的 Windows DPI 缩放比例。

使用 Adobe Illustrator

在任何应用程序设计过程中，强烈建议使用 Illustrator（或任何其他矢量设计软件），因为它将在许多屏幕分辨率和 DPI 缩放比例下运行，您需要不同大小的徽标。
准备好徽标后，最佳方法是创建与资源尺寸匹配的不同画板，并按照这些指南放置您的徽标。下图显示了包含记笔记应用所有尺寸资源的画板。

现在是令人头疼的部分，您应该将每个画板保存为 5 种不同的缩放比例（100%、125%、150%、200%、400%）。转到“文件”->“为 Web 保存”（ALT+SHIFT+CTRL+S），并在“图像大小”部分中的“百分比”框中设置您的缩放比例。为每个画板保存五种不同的缩放比例，意味着您需要导出画板 35 次。

使用脚本

有一种更简单的方法来进行导出过程，您可以使用脚本。Adobe Illustrator 可以运行用 JavaScript 语言编写的脚本，这样您就可以编程执行任务，并简化像这样繁琐的过程。

下一个脚本枚举单个文档中的画板，并以所有缩放比例和正确的名称格式导出为 .png 文件。导出的文件名将使用画板名称，因此请不要忘记使用正确的格式命名每个画板。名称格式很容易推断，例如，150x150 像素方形徽标的名称是 Square150x150Logo。有关更多信息，请参阅创建磁贴。

要使用该脚本，您只需创建一个新的文本文件并将其命名为 .jsx 扩展名（例如：SaveAssetsForUWP.jsx），然后将以下代码粘贴到其中

/* SCRIPT FOR ILLUSTRATOR
 * Save all artboards to a selected folder in scales needed 
 * by the Universal Windows Platform Apps.
 * 
 * By: @LeisvanCordero
 * 
*/

var folder = Folder.selectDialog();
var document = app.activeDocument;

if (document && folder) {

    saveAllArtboardsToScale(100);
    saveAllArtboardsToScale(125);
    saveAllArtboardsToScale(150);
    saveAllArtboardsToScale(200);
    saveAllArtboardsToScale(400);
}

function saveAllArtboardsToScale(scale) {
    var i, artboard, file, options;
    
    for (i = document.artboards.length - 1; i >= 0; i--) {
        document.artboards.setActiveArtboardIndex(i);
        artboard = document.artboards[i];

        var fileName = artboard.name + ".scale-" + scale;
        file = new File(folder.fsName + "/" + fileName + ".png");
        
        options = new ExportOptionsPNG24();
        options.verticalScale = scale;
        options.horizontalScale = scale;
        options.artBoardClipping = true;
        options.antiAliasing = true;
        options.transparency = true;
        
        document.exportFile(file, ExportType.PNG24, options);
    }
}

也适用于 Windows 8.1

为了导出 Windows 8.1 或 Windows Phone 8.1 应用程序的资源，您可以修改脚本文件中的代码以满足所需的缩放比例。函数 saveAllArtboardsToScale(scale) 会将所有画板导出到所需的缩放比例，因此只需根据您的需要调整代码即可。

以下是 Windows 应用商店平台所需的缩放比例

Windows 10 (UWP) 100%, 125%, 150%, 200%, 400%
Windows 8.1 80%, 100%, 140%, 180%
Windows Phone 8.1100%, 140%, 240%.