This project is read-only.

(Windows Store app) Tile Generation script

A Photoshop script that generates all 30 scalled Windows store app Tiles from a single 558x558 square PSD file.
When the Tile size ratio changes compared to the original PSD it tries to scale the background layer to maintain a solid background color.

Just copy the output to the 'Assets' folder afterwards.

How to import the script in Photoshop

Just copy paste the jsx file in somehting like: C:\Program Files\Adobe\Adobe Photoshop\Presets\Scripts
Then the script is accessible in Photoshop at File->Scripts

The Script:

(its only for Windows store app tiles for now, surely WP and other device images will follow)
// Photoshop Script to create Windows store app Tile images
//
// by Toine de Boer | Enbyin / Aviva Solutions (http://www.avivasolutions.nl)
// 
try
{
    var artwork = File.openDialog("Select a sqaure PSD file that is 558x558 to get the best result.", "*.psd", false);

    if (artwork !== null)
    {
        var doc = open(artwork);

        if (doc == null)
        {
            throw "Something is wrong with the file";
        }

        var startState = doc.activeHistoryState; // save for undo
        var initialPrefs = app.preferences.rulerUnits; // will restore at end
        app.preferences.rulerUnits = Units.PIXELS; // use pixels

        var destFolder = Folder.selectDialog("Choose an output folder");

        if (destFolder == null)
        {
            // user canceled
            throw "";
        }

        // Save icons in PNG using 'Save for Web'
        var sfw = new ExportOptionsSaveForWeb();
        sfw.format = SaveDocumentType.PNG;
        sfw.PNG8 = false; // use PNG-24
        sfw.transparency = true; // transpart for the edges
        doc.info = null; // delete metadata

		var icons = [
		  { "w": 558, "h": 0, "name": "Square310x310Logo.scale-180" }, // when (h == 0 or null) the width size will be taken 
		  { "w": 434, "name": "Square310x310Logo.scale-140" },
		  { "w": 310, "name": "Square310x310Logo.scale-100" },
		  { "w": 248, "name": "Square310x310Logo.scale-80" },
		  { "w": 126, "name": "Square70x70Logo.scale-180" },
		  { "w": 98, "name": "Square70x70Logo.scale-140" },
		  { "w": 70, "name": "Square70x70Logo.scale-100" },
		  { "w": 56, "name": "Square70x70Logo.scale-80" },
		  { "w": 270, "name": "Logo.scale-180" },
		  { "w": 210, "name": "Logo.scale-140" },
		  { "w": 150, "name": "Logo.scale-100" },
		  { "w": 120, "name": "Logo.scale-80" },
		  { "w": 54, "name": "SmallLogo.scale-180" },
		  { "w": 42, "name": "SmallLogo.scale-140" },
		  { "w": 30, "name": "SmallLogo.scale-100" },
		  { "w": 24, "name": "SmallLogo.scale-80" },
		  { "w": 256, "name": "SmallLogo.targetsize-256" },
		  { "w": 48, "name": "SmallLogo.targetsize-48" },
		  { "w": 32, "name": "SmallLogo.targetsize-32" },
		  { "w": 16, "name": "SmallLogo.targetsize-16" },
		  { "w": 90, "name": "StoreLogo.scale-180" },
		  { "w": 70, "name": "StoreLogo.scale-140" },
		  { "w": 50, "name": "StoreLogo.scale-100" },
		  { "w": 558, "h": 270, "name": "Wide310x150Logo.scale-180" },
		  { "w": 434, "h": 210, "name": "Wide310x150Logo.scale-140" },
		  { "w": 310, "h": 150, "name": "Wide310x150Logo.scale-100" },
		  { "w": 248, "h": 120, "name": "Wide310x150Logo.scale-80" },
		  { "w": 1116, "h": 540, "name": "SplashScreen.scale-180" },
		  { "w": 868, "h": 420, "name": "SplashScreen.scale-140" },
		  { "w": 620, "h": 300, "name": "SplashScreen.scale-100" }
		];

        var icon;
        var filename = doc.name.substr(0, doc.name.lastIndexOf('.'));

        for (i = 0; i < icons.length; i++)
        {
            icon = icons[i];

            var destFileName = "";

            if ((icon.h == null || icon.h == 0))
            {
                destFileName = filename + icon.w + ".png";
                icon.h = icon.w;
            }
            else
            {
                destFileName = filename + icon.w + "x" + icon.h + ".png";
            }

            if (icon.name != null && icon.name != "")
            {
                destFileName = icon.name + ".png";
            }

            if (icon.h != icon.w)
            {
                // get smallest value
                var smallestSize = icon.h;
                if (icon.w < icon.h)
                {
                    smallestSize = icon.w;
                }

                doc.resizeImage(smallestSize, smallestSize, // width, height
                    null, ResampleMethod.BICUBICSHARPER);

                doc.resizeCanvas(icon.w, icon.h);

                // highest layer must be the background....
                var bgLayer = doc.layers[doc.layers.length - 1];
                bgLayer.resize((doc.width.value / (bgLayer.bounds[2] - bgLayer.bounds[0])) * 100, (doc.height.value / (bgLayer.bounds[3] - bgLayer.bounds[1])) * 100, AnchorPosition.MIDDLECENTER);
            }
            else
            {
                doc.resizeImage(icon.w, icon.h, // width, height
                    null, ResampleMethod.BICUBICSHARPER);
            }
            
            doc.exportDocument(new File(destFolder + "/" + destFileName), ExportType.SAVEFORWEB, sfw);
            doc.activeHistoryState = startState; // undo resize
        }

        alert("Images created and ready to copy and paste.");
        alert("Now go and drink some coffee to spend the time you just saved with this script. ");

    }
}
catch (exception)
{
    if ((exception != null) && (exception != ""))
        alert(exception);
}
finally
{
    if (doc != null)
        doc.close(SaveOptions.DONOTSAVECHANGES);

    app.preferences.rulerUnits = initialPrefs;
}




Last edited Apr 8, 2014 at 1:18 PM by Toinedb, version 17