Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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.

share|improve this question
    
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 '12 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 '12 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 '12 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 at 12:11

4 Answers 4

up vote 10 down vote accepted
  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"
share|improve this answer
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 '12 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 '12 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 '12 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 '12 at 22:05
    
Perfect! Thanks –  at. Oct 15 '12 at 22:19

use this command Ctrl + Shift + Alt + S

share|improve this answer
    
Welcome to GD.SE! This would save the entire image, not just the selected parts, no? –  Brendan Aug 9 '13 at 12:53

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.

share|improve this answer
    
Woah! Works perfect. –  Dennis G Jan 14 at 12:20
    
Made a gist of the code for easier downloading: gist.github.com/koiyu/b53e3a186fb1158eb9b7 (NB changed PNG8 to PNG24) –  koiyu Apr 30 at 6:52

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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