12 Replies Latest reply on Sep 11, 2012 8:37 AM by Davizual

    Resizing PNG with Pixel values; Save as artboard name and pixel value

    Davizual Level 1

      Hello,

      first off, I have never written a Javascript before and I am attempting to.  I have been reading like mad to wrap my head around the Extendscript Toolkit (ESTK) in CS6.  I see the awesome potential but I am concerned my idea may not be completely possible.  That's why I thought I would ask the experts here.

       

      I have a client who needs cursors and icons for apps that are saved out in multiple, transparent PNG sizes and the output filename needs to reflect that name. So for example, I have 2 square artboards, one contains a red car, the other contains the same car but in green, and I want to save both of those as 96x96 pixels, 72 x72 pixels, 48x48, 36x36, and 24x24 (5 different sizes).  I would like the naming scheme to be taken from the artboard name (car_red, car_green) and the pixel value of each size, so the final name would be "car_red_0096x96.png", "car_red_0072x72.png", etc., etc.

       

      The first thing I noticed is that there seems to be no SaveforWeb object in the ESTK.  I discovered ExportOptionsPNG24 which is nice, but it seems to only give a sizing property based on percent (horizontalScale, or verticalScale).  I would like to use the script to make any size artboard the exact pixel dimensions I need, and the percentage scaling property will not allow this, so is there a way to enter in pixel values and not percentage scale values?

       

      This of course leads me to my next question: I was hoping to get the script to, at the press of a button, export the selected artboard to all 5 sizes, with a naming scheme that uses the artbaord name as a prefix and the pixel size as the suffix.  I was hoping to use the pixel value in the code to apply to the suffix

       

      Is any of this possible?

       

      Gratefully,

      Dave

        • 1. Re: Resizing PNG with Pixel values; Save as artboard name and pixel value
          Muppet Mark Level 5

          Yes script can do all the multi-saves or exports plus it can concat your name strings for you as it goes… AI only exports at 72dpi so you need to also script a little math to calculate the scale percentages H&V as you go…

          • 2. Re: Resizing PNG with Pixel values; Save as artboard name and pixel value
            Davizual Level 1

            Muppert Mark,

            Thanks for your support.  Encouraging to know it is possible!

             

            Is it possible to give me an example of what that calculation would look like? 

            I am trying to wrap my head around so much with this script, it would sure be helpful!

             

            Thanks,

            Dave.

            • 3. Re: Resizing PNG with Pixel values; Save as artboard name and pixel value
              Muppet Mark Level 5

              Sure we can help you with this… How are you intending this script to work… Are you wanting to open each file manually in the UI and just out put 5 files at a time… or are you wanting more of a workflow script where you select a bunch of files or folder and process all the *.ai files…? What you didn't say about the math part is… do you want the square artboard sized to these dimensions so any transparency is included or do you want the art within the artboard sized to fit?

              1 person found this helpful
              • 4. Re: Resizing PNG with Pixel values; Save as artboard name and pixel value
                Davizual Level 1

                Ahh, good questions, Muppet Mark.

                My file consists of multiple art boards each containing a design.  The intention was to select the art board from the open file and start the script to automatically render the 5 sizes of that design.

                 

                As for the art board size, I want to make sure the art board remains the preset size so it includes transparent edges, so no art board resizing.

                 

                Thanks!

                Dave

                • 5. Re: Resizing PNG with Pixel values; Save as artboard name and pixel value
                  Muppet Mark Level 5

                  As well as PNG24 there is PNG8 which would you prefer?

                  • 6. Re: Resizing PNG with Pixel values; Save as artboard name and pixel value
                    Davizual Level 1

                    The goal is to have all the output in PNG24.

                     

                    Thanks,

                    Dave.

                    • 7. Re: Resizing PNG with Pixel values; Save as artboard name and pixel value
                      Muppet Mark Level 5

                      I ran a basic test and this should be close enough for you to tweek… Square artboards are assumed by this snippet… A few comments Inc. to help you…

                       

                      #target illustrator
                      
                      artboardsToPNGs();
                      
                      function artboardsToPNGs() {
                      
                                if ( parseFloat( app.version ) < 15 ) { return; } // Its CS4 or above ( has artboards )
                      
                                if ( app.documents.length == 0 ) { return; } // No docs so end script
                      
                                app.userInteractionLevel = UserInteractionLevel.DONTDISPLAYALERTS;
                        
                                var i, j, sizes, png24Opts, doc, dF, artBds, abName, scale, pngFile; // Script variables
                        
                                sizes = Array( 96, 72, 48, 36, 24 );
                        
                                png24Opts = new ExportOptionsPNG24(); // Options object
                        
                                png24Opts.matte = false; // Set the properties
                                png24Opts.transparency = true;
                                png24Opts.antiAliasing = true;
                                png24Opts.artBoardClipping = true;
                                png24Opts.saveAsHTML = false;
                      
                                doc = app.activeDocument;
                      
                                dF = Folder( Folder.desktop + "/AI Artboard PNG's" ); // A folder to save in
                      
                                if ( !dF.exists ) dF.create(); // Make folder to save in
                      
                                artBds = doc.artboards;
                      
                                for ( i = 0; i < artBds.length; i++ ) { // Loop the artboards collection
                        
                                          doc.artboards.setActiveArtboardIndex( i ); // Make artboard active one
                      
                                          abName = artBds[i].name; // Get name
                        
                                          for ( j = 0; j < sizes.length; j++ ) { // Loop the sizes Array
                        
                                                    scale = ( sizes[j] / ( artBds[i].artboardRect[2] - artBds[i].artboardRect[0] ) ) * 100; // Use width assumed square
                      
                                                    pngFile = File( dF.fsName + '/' + abName + '_00' + sizes[j] + 'x' + sizes[j] + '.png' ); // Concat a name string
                        
                                                    png24Opts.horizontalScale = png24Opts.verticalScale = scale; // Set the scales
                        
                                                    doc.exportFile( pngFile, ExportType.PNG24 ,png24Opts );
                        
                                          };
                        
                                };
                      
                                app.userInteractionLevel = UserInteractionLevel.DISPLAYALERTS;
                        
                                alert( 'All done…' );
                      
                      };
                      
                      1 person found this helpful
                      • 8. Re: Resizing PNG with Pixel values; Save as artboard name and pixel value
                        Davizual Level 1

                        Mark,

                        My jaw hit the floor when I saw this.  I was blown away!

                        This would have taken me a week to achieve and you did it so amazingly fast.  I have been studying it for the last hour to understand it, and thanks so much for including comments so I can learn your structural techniques.  I am away from my desktop so I am unable to test the code until Sunday night.  I will give it a try and let you know how it goes, very exciting.

                         

                        Sincere thanks and gratitude (sorry to gush)!

                         

                        Dave.

                        • 9. Re: Resizing PNG with Pixel values; Save as artboard name and pixel value
                          Muppet Mark Level 5

                          A week…! well thats how it is when you start out… After a while you build up a library of snippets… In truth 5-10 minutes. I just used something I already had and added a couple of extra lines… If a script takes me a week then somebody will be paying for it hopefully… Less than 15 minutes of help you can have FOC… It will be close enough for you to tinker about with and get you head around the syntax… Any parts you don't understand ask… A lawn that needs mowing now script won't do that for me…

                          • 10. Re: Resizing PNG with Pixel values; Save as artboard name and pixel value
                            Davizual Level 1

                            Hi Mark,

                            I was playing with the script last night and it works really well, thanks!

                             

                            I was trying to make it that it would only do the selected artboard and not the whole file.  I was playing with the "//Loop the artboards collection" line (and other parts) and I was unable to get it to only do the selected artboard.

                             

                            The learning curve is steep.  Any suggestions?

                             

                            Dave.

                            • 11. Re: Resizing PNG with Pixel values; Save as artboard name and pixel value
                              Muppet Mark Level 5

                              At work so just hacked this with NO testing… Lost a loop and used get index instead of set index…

                               

                              #target illustrator
                              
                              artboardToPNGs();
                              
                              function artboardToPNGs() {
                              
                                  if ( parseFloat( app.version ) < 15 ) { return; }
                              
                                  if ( app.documents.length == 0 ) { return; }
                              
                                  app.userInteractionLevel = UserInteractionLevel.DONTDISPLAYALERTS;
                              
                                  var idx, j, sizes, png24Opts, doc, dF, artBds, abName, scale, pngFile;
                              
                                  sizes = Array( 96, 72, 48, 36, 24 );
                              
                                  png24Opts = new ExportOptionsPNG24();
                              
                                  png24Opts.matte = false;
                                  png24Opts.transparency = true;
                                  png24Opts.antiAliasing = true;
                                  png24Opts.artBoardClipping = true;
                                  png24Opts.saveAsHTML = false;
                              
                                  dF = Folder( Folder.desktop + "/AI Artboard PNG's" ); 
                              
                                  if ( !dF.exists ) dF.create();
                              
                                  doc = app.activeDocument;
                              
                                  artBds = doc.artboards;
                              
                                  idx = artBds.getActiveArtboardIndex();
                              
                                  abName = artBds[ idx ].name;
                              
                                  for ( j = 0; j < sizes.length; j++ ) {
                              
                                      scale = ( sizes[j] / ( artBds[ idx ].artboardRect[2] - artBds[ idx ].artboardRect[0] ) ) * 100; 
                              
                                      pngFile = File( dF.fsName + '/' + abName + '_00' + sizes[j] + 'x' + sizes[j] + '.png' );
                              
                                      png24Opts.horizontalScale = png24Opts.verticalScale = scale;
                              
                                      doc.exportFile( pngFile, ExportType.PNG24 ,png24Opts );
                              
                                  };
                              
                                  app.userInteractionLevel = UserInteractionLevel.DISPLAYALERTS;
                              
                                  alert( 'All done…' );
                              
                              };
                              
                              2 people found this helpful
                              • 12. Re: Resizing PNG with Pixel values; Save as artboard name and pixel value
                                Davizual Level 1

                                Flawless.  Worked like a charm!

                                 

                                Thanks for your time and all you taught me.

                                 

                                Dave.