10 Replies Latest reply on Jun 7, 2012 12:27 PM by hhhhhhhhhhhhhh5

    How to "one-click" export an image to a set of .png files with different resolutions?

    hhhhhhhhhhhhhh5 Level 1

      Hi,

       

      Is there away to "one-click" export an image to a set of .png files with different resolutions? (I need this for a set of iOS app icons).

       

      For example: Export a file MyAppIcon.psd into the following:

      MyAppIcon_29x29.png

      MyAppIcon_57x57.png

      MyAppIcon_114x114.png

      MyAppIcon_512x512.png

      MyAppIcon_48x48.png

      MyAppIcon_72x72.png

       

      I almost succeeded in doing this with Photoshop Actions, but can't figure out how to make the file names include the original image file name. In other words, file NewApp.psd should export to NewApp_29x29.png, not MyAppIcon_29x29.png.

       

      Thank you!

        • 1. Re: How to "one-click" export an image to a set of .png files with different resolutions?
          Paul Riggott Level 6

          This should do it..

           

           

          #target photoshop
          app.bringToFront();
          main();
          function main(){
          if(!documents.length) return;
          var Name = app.activeDocument.name.replace(/\.[^\.]+$/, ''); 
          try{
             var Path = activeDocument.path; 
              }catch(e){
                  alert("Please save this file then re-run the script!");
                  return;
                  }
          var strtRulerUnits = app.preferences.rulerUnits;
          var strtTypeUnits = app.preferences.typeUnits;
          app.preferences.rulerUnits = Units.PIXELS;
          var saveFile = File(Path + "/" + Name + "_512x512.png");
          activeDocument.resizeImage(512, 512, undefined, ResampleMethod.BICUBICSHARPER);
          SavePNG(saveFile);
          var saveFile = File(Path + "/" + Name + "_114x114.png");
          activeDocument.resizeImage(114, 114, undefined, ResampleMethod.BICUBICSHARPER);
          SavePNG(saveFile);
          var saveFile = File(Path + "/" + Name + "_72x72.png");
          activeDocument.resizeImage(72, 72, undefined, ResampleMethod.BICUBICSHARPER);
          SavePNG(saveFile);
          var saveFile = File(Path + "/" + Name + "_57x57.png");
          activeDocument.resizeImage(57, 57, undefined, ResampleMethod.BICUBICSHARPER);
          SavePNG(saveFile);
          var saveFile = File(Path + "/" + Name + "_48x48.png");
          activeDocument.resizeImage(48, 48, undefined, ResampleMethod.BICUBICSHARPER);
          SavePNG(saveFile);
          var saveFile = File(Path + "/" + Name + "_29x29.png");
          activeDocument.resizeImage(29,29, undefined, ResampleMethod.BICUBICSHARPER);
          SavePNG(saveFile);
          app.preferences.rulerUnits = strtRulerUnits;
          app.activeDocument.close(SaveOptions.DONOTSAVECHANGES); 
          }
          function SavePNG(saveFile){
          var pngOpts = new ExportOptionsSaveForWeb; 
          pngOpts.format = SaveDocumentType.PNG;
          pngOpts.PNG8 = false; 
          pngOpts.transparency = true; 
          pngOpts.interlaced = false; 
          pngOpts.quality = 100;
          activeDocument.exportDocument(new File(saveFile),ExportType.SAVEFORWEB,pngOpts); 
          }
          
          
          
          • 2. Re: How to "one-click" export an image to a set of .png files with different resolutions?
            hhhhhhhhhhhhhh5 Level 1

            Paul,

             

            Thank you so much!!! This is amazing! It seems to work nicely. The only problem that I noticed is that the quality of each consecutive image gets worse. For example, the 29x29 image is the result of multiple resizing operations. I'm new to Photoshop scripting, but perhaps it's possible to either "cache" the original image or "undo" after each resize?

            • 3. Re: How to "one-click" export an image to a set of .png files with different resolutions?
              Paul Riggott Level 6

              No problem, please try  this...

               

               

              #target photoshop
              app.bringToFront();
              main();
              function main(){
              if(!documents.length) return;
              var Name = app.activeDocument.name.replace(/\.[^\.]+$/, ''); 
              try{
                 var Path = activeDocument.path; 
                  }catch(e){
                      alert("Please save this file then re-run the script!");
                      return;
                      }
              var strtRulerUnits = app.preferences.rulerUnits;
              var strtTypeUnits = app.preferences.typeUnits;
              app.preferences.rulerUnits = Units.PIXELS;
              snapShot();
              var saveFile = File(Path + "/" + Name + "_512x512.png");
              activeDocument.resizeImage(512, 512, undefined, ResampleMethod.BICUBICSHARPER);
              SavePNG(saveFile);
              revertToLastSnapshot();
              var saveFile = File(Path + "/" + Name + "_114x114.png");
              activeDocument.resizeImage(114, 114, undefined, ResampleMethod.BICUBICSHARPER);
              SavePNG(saveFile);
              revertToLastSnapshot();
              var saveFile = File(Path + "/" + Name + "_72x72.png");
              activeDocument.resizeImage(72, 72, undefined, ResampleMethod.BICUBICSHARPER);
              SavePNG(saveFile);
              revertToLastSnapshot();
              var saveFile = File(Path + "/" + Name + "_57x57.png");
              activeDocument.resizeImage(57, 57, undefined, ResampleMethod.BICUBICSHARPER);
              SavePNG(saveFile);
              revertToLastSnapshot();
              var saveFile = File(Path + "/" + Name + "_48x48.png");
              activeDocument.resizeImage(48, 48, undefined, ResampleMethod.BICUBICSHARPER);
              SavePNG(saveFile);
              revertToLastSnapshot();
              var saveFile = File(Path + "/" + Name + "_29x29.png");
              activeDocument.resizeImage(29,29, undefined, ResampleMethod.BICUBICSHARPER);
              SavePNG(saveFile);
              app.preferences.rulerUnits = strtRulerUnits;
              app.activeDocument.close(SaveOptions.DONOTSAVECHANGES); 
              }
              function SavePNG(saveFile){
              var pngOpts = new ExportOptionsSaveForWeb; 
              pngOpts.format = SaveDocumentType.PNG;
              pngOpts.PNG8 = false; 
              pngOpts.transparency = true; 
              pngOpts.interlaced = false; 
              pngOpts.quality = 100;
              activeDocument.exportDocument(new File(saveFile),ExportType.SAVEFORWEB,pngOpts); 
              }
              function snapShot() {
                  var desc9 = new ActionDescriptor();
                      var ref5 = new ActionReference();
                      ref5.putClass( charIDToTypeID('SnpS') );
                  desc9.putReference( charIDToTypeID('null'), ref5 );
                      var ref6 = new ActionReference();
                      ref6.putProperty( charIDToTypeID('HstS'), charIDToTypeID('CrnH') );
                  desc9.putReference( charIDToTypeID('From'), ref6 );
                  desc9.putEnumerated( charIDToTypeID('Usng'), charIDToTypeID('HstS'), charIDToTypeID('FllD') );
                  executeAction( charIDToTypeID('Mk  '), desc9, DialogModes.NO );
              };
              function revertToLastSnapshot() { 
                 var doc = app.activeDocument; 
                 var hsObj = doc.historyStates; 
                 var hsLength = hsObj.length; 
                 for (var i=hsLength - 1;i>-1;i--) { 
                   if (hsObj[i].snapshot) { 
                     doc.activeHistoryState = doc.historyStates.getByName('Snapshot ' + i); 
                     break; 
                   } 
                 } 
              };
              
              
               
              • 4. Re: How to "one-click" export an image to a set of .png files with different resolutions?
                Muppet Mark Level 5

                Paul, is there a benefit to your usage of a snapshot in history here?

                • 5. Re: How to "one-click" export an image to a set of .png files with different resolutions?
                  Paul Riggott Level 6

                  Hi Mark, the revertToLastSnapshot function is one of X's functions that I have used since CS2, so I keep on using it

                  • 6. Re: How to "one-click" export an image to a set of .png files with different resolutions?
                    Muppet Mark Level 5

                    Ah… I would have just stored doc.activeHistoryState to a variable then set back L8R… Im sure X will have his reasons but they may be overkill for my usage… Thanks anyway…

                    • 7. Re: How to "one-click" export an image to a set of .png files with different resolutions?
                      Paul Riggott Level 6

                      I think (haven't tested it) that using that method if you go over the number of history states you will have a failure, but X's should still work.

                      • 8. Re: How to "one-click" export an image to a set of .png files with different resolutions?
                        hhhhhhhhhhhhhh5 Level 1

                        Paul,

                         

                        Thank you again, but this didn't fix the problem. Could it be that "SavePNG" is at fault? I'm including the images here.

                         

                         

                        test_512x512.png

                         

                        test_29x29.png

                        • 9. Re: How to "one-click" export an image to a set of .png files with different resolutions?
                          Muppet Mark Level 5

                          That looks to me like you have a stroke layer effect? Try adding…

                           

                          app.activeDocument.flatten();

                           

                          before line…

                           

                          snapShot();

                          1 person found this helpful