How to extract PNGs from Adobe Illustrator file

Question

My graphic/web designer left me with an Adobe Illustrator file of my website. She said it would be easy to extract the images out as PNGs so I can use them in my HTML. But I can't figure this out too easily.

The images seem to be many vector drawings. I can separate them from the surrounding art and select all the pieces. But then how do I save that selection as a PNG file?

Btw.: I am using Adobe Illustrator CS6.

Answer 1

1. Select what you want
2. Ctrl + G (Group Selection)
3. Ctrl + C (Copy)
4. Ctrl + N (New file)
5. Ctrl + V (Paste)
6. File > Save for Web & Devices then on the right switch .JPG to .PNG, then you also want to uncheck at the very bottom under the .PNG options where it says "Clip to Artboard"

Answer 2

You could do this faster with scripting. I just created this js-script for Illustrator CS4. I hope, CS6 can execute it too.

1. Copy code below into a new file with extension ".jsx", save it.
2. Now in AI, select what shall be exported (only one element at once; group multiple if needed)
3. Execute the script (via drag-and-drop or File/scripts/Other Script...)
4. Done - Exported pictures was saved into the folder where the ai-file is located.

NOTE:

• position of exported object will be rounded! So be careful when saving

• works also for png24... just replace PNG8 by PNG24

  function exportFileToPNG(dest, artBoardIndex)
  {
      var exportOptions = new ExportOptionsPNG8(); // or ExportOptionsPNG24
      var type = ExportType.PNG8; // or ExportType.PNG24
      var file = new File(dest + ".png");
  
      exportOptions.artBoardClipping = true;
      exportOptions.antiAliasing = true;
      exportOptions.transparency = true;
      exportOptions.qualitySetting = 72;
      exportOptions.saveMultipleArtboards = false;
      exportOptions.artboardRange = "" + artBoardIndex;
      app.activeDocument.exportFile( file, type, exportOptions );
  }
  
  function execute()
  {
      if (app.documents.length == 0)
      {
          alert('No document open', 'Error');
          return;
      }
  
      if (app.activeDocument.selection.length == 0)
      {
          alert('Nothing selected', 'Error');
          return;
      }
  
      var selectedStuff = app.activeDocument.selection[0];
  
      // snap position to pixels
      selectedStuff.position = [ Math.round(selectedStuff.position[0]), Math.round(selectedStuff.position[1]) ];
  
      // create temporary artboad for exporting
      var docRef = app.activeDocument;
      var rect = selectedStuff.visibleBounds;
  
      try
      {
          docRef.artboards.add(rect);
      }
      catch(e)
      {
          alert('Could not create Artboard as step of export.', 'Failure');
          return;
      }
  
      // determine destination
      var destFolder = docRef.path;
      if(destFolder == "")
          destFolder = Folder.selectDialog('Select the folder to export to:');
  
      if(destFolder)
      {
          try
          {
              exportFileToPNG(destFolder + "/" + docRef.name, docRef.artboards.length);
          }
          catch(e) {}
      }
  
      // delete temp-artboard
      docRef.artboards.remove(docRef.artboards.length - 1);
  }
  
  execute();
  

Works fine for me and I had no (more) errors so far. But backing things up can't hurt.

Answer 3

Use the Slice Tool.

Create slices using the tool, then use the File->Save for Web... dialog box (Ctrl-Shift-Alt S, Command-Shift-Alt S) to export the slices. In the dialog box double-click on the slices you've created, giving them a reasonable filename.

Make sure that Export->User Slices is selected and click Save. Choose a directory (I like to use a 'scratch' folder for whatever export output.) Illustrator will create a directory called 'images' in that folder and in there will be the slices you've defined in the format you chose on the Save For Web screen.

Answer 4

Save for web and make sure the "Clip to Artboard" is not selected. That will do the trick for Adobe CC, I'm not sure if CS6 has this function.

Answer 5

use this command Ctrl + Shift + Alt + S