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.

  • If you aren't familiar with Illustrator, you should really go back to the designer and ask for delivery of items you can use.
    – Scott
    Oct 15, 2012 at 19:13
  • @Scott - she's extremely temperamental and feels unwilling to work with someone who needs PNGs instead of an Illustrator file. I'd rather hire someone else to extract the images for me than hire her again. Hopefully it really is as easy as she suggested and I can just do this myself quickly.
    – at.
    Oct 15, 2012 at 19:19
  • I don't use illustrator, so I don't know the best approach. But if I had to extract vector layers from it I would probably copy-paste them in a different program (fireworks, photoshop) and use "Save for web".
    – Yisela
    Oct 15, 2012 at 19:51
  • That's weird didn't your contract specify what format you want the assets in? Or at least specify the intended use. In which case it could be argued that its part of the contract in other cases not so simple. If you asked for print assets it not really surprising you dind't get PNG images.
    – joojaa
    Mar 20, 2014 at 12:11

5 Answers 5

  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"
  • 1
    Kind of a pain, I've got to know the exact resolution or crop the new file. But otherwise exactly what I'm looking for. How do I crop?
    – at.
    Oct 15, 2012 at 20:58
  • Actually, it doesn't seem easy. Is there no way to crop in Illustrator. Everything above is great except step 6, if I save the file, I get the whitespace (which is transparent at least) around the object I'm trying to save. I can't easily guess the pixels before creating a new file (is there an easy way?).
    – at.
    Oct 15, 2012 at 21:05
  • I found the width and height of a selection and can create a new file of that size. The pasted design is not centered exactly on that new canvas, but close enough for me to easily move I guess.
    – at.
    Oct 15, 2012 at 21:09
  • Edited the answer to explain how to do the cropping easily. Let me know if that solves it for you.
    – Ryan
    Oct 15, 2012 at 22:05
  • 2
    it's in the menu under Object > Artboard > Fit to Artwork Bounds
    – vahanpwns
    Aug 9, 2014 at 13:20

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.


  • 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');
        if (app.activeDocument.selection.length == 0)
            alert('Nothing selected', 'Error');
        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;
            alert('Could not create Artboard as step of export.', 'Failure');
        // determine destination
        var destFolder = docRef.path;
        if(destFolder == "")
            destFolder = Folder.selectDialog('Select the folder to export to:');
                exportFileToPNG(destFolder + "/" + docRef.name, docRef.artboards.length);
            catch(e) {}
        // delete temp-artboard
        docRef.artboards.remove(docRef.artboards.length - 1);

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


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.


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.


use this command Ctrl + Shift + Alt + S

  • Welcome to GD.SE! This would save the entire image, not just the selected parts, no?
    – Brendan
    Aug 9, 2013 at 12:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.