Thursday, 4 August 2016

How to create multiple size app icons on single click in photoshop

How to automate exporting multiple PNGs with different sizes from Photoshop

Step 1 > Create .jsx file (as below given or use same code and save as filename.jsf)


Code:-


var inFolder = Folder.selectDialog("Please select folder to process");

if(inFolder !== null) {
  var fileList = inFolder.getFiles(/\.(jpg|tif|psd|png)$/i);
  var outfolderName = prompt('Folder name', 'MultipleIcons');
  var outfolder = new Folder(decodeURI(inFolder) + "/" + outfolderName);

  if (!outfolder.exists) outfolder.create();

  for(var a = 0; a < fileList.length; a++) {
    if(fileList[a] instanceof File) {
      var doc = open(fileList[a]);
      var docname = fileList[a].name.replace(/\.[^\.]+$/, '');
      micons();
      doc.close(SaveOptions.DONOTSAVECHANGES);
    }
  }
}

function micons() {
  var savedRuler = app.preferences.rulerUnits;
  var w = app.activeDocument.width;
  var h = app.activeDocument.height;
  var quality = 50;

  app.preferences.rulerUnits = Units.PIXELS;
  if(w > h) app.activeDocument.resizeCanvas (w, w, AnchorPosition.MIDDLECENTER);
  if(w < h) app.activeDocument.resizeCanvas (h, h, AnchorPosition.MIDDLECENTER);
  app.activeDocument.resizeImage('2560px', undefined, undefined, ResampleMethod.BICUBICSHARPER);
  app.preferences.rulerUnits = savedRuler;

  for(var i = 4; i >= 0; i--) {
    var outfolder = new Folder(decodeURI(inFolder) + "/" + outfolderName + "/" + docname + "/TileGroup0");
    if (outfolder.exists === false) outfolder.create();
    var saveFile = new File(decodeURI(outfolder) + "/" + i + "micons.png");
    SavePNG(saveFile, quality);
    app.activeDocument.resizeImage('50%','50%', undefined, ResampleMethod.BICUBICSHARPER);
    quality = quality + 10;
  }
}

function SavePNG(saveFile, quality) {
  var exportOptionsSaveForWeb = new ExportOptionsSaveForWeb();
  exportOptionsSaveForWeb.format = SaveDocumentType.PNG;
  exportOptionsSaveForWeb.includeProfile = false;
  exportOptionsSaveForWeb.interlaced = true;
  exportOptionsSaveForWeb.optimized = true;
  exportOptionsSaveForWeb.quality = quality;

  activeDocument.exportDocument(saveFile, ExportType.SAVEFORWEB,exportOptionsSaveForWeb);
}

Step 2 > Place the file in  (C:\Program Files\Adobe\Adobe Photoshop CC 2015\Presets\Scripts)
for windows OS.

Step 3 >  Open Photoshop you will get this Popup Window


Step 4 > Select the Image folder where you place all images which you want to convert in multiple size images.


Step 5 > After select your Image folder, you will get another Popup window where you can give the name of the new created folder.


Step 6 > After click OK automatically it converts your kept All images in folder in different size with their name in folder.



OUTPUT 








No comments:

Post a Comment