Skip navigation
Currently Being Moderated

Alternative to Save for Web/Export as CSS Layers?

May 22, 2013 10:41 AM

Tags: #cs5 #png #cs6 #save_for_web #export_as_css_layers

I'm am SO DEVASTATED that CS6 got rid of the option to save as CSS layers in Save for Web.  I just updated from 5 to 6 and now I'm looking for an alternative but am having no luck.  I've tried some scripts I've found online but none of them work the way I need, or at all. 

 

I do animation in AI where each layer is a frame on the animation.  In CS5 I could Save for Web and check the Export as CSS Layers box.  This would export all the layers in my AI file to pngs, where each layer is it's own png file, in one folder.  I could then import them as an image sequence in Photoshop and turn layers on and off with each frame to create my animation.

 

I tried exporting my AI file to a PSD file with maximum editability but the more complicated the animation (meaning the more layers and the more objects on each layer) it would start flattening layers without warning.  Not to mention the rendering time just opening the file in Photoshop and then trying to save it there once I had created all my frames.  Photoshop froze on me 6 times this morning while I was trying things out.

 

I'm desperate for a simple way to do the CSS layer trick.  If I can't find one, I'm going to have to go back to CS5 permanently, or until I can find a solution.

 
Replies
  • Currently Being Moderated
    May 22, 2013 1:00 PM   in reply to luchababe

    I'd recommend to just use AI CS5 or lower in order to get what you want.

     

    Probably that's not the answer you were looking for. It's just a pragmatic suggestion.

     
    |
    Mark as:
  • Currently Being Moderated
    May 22, 2013 1:36 PM   in reply to luchababe

    They took it out becuase it generated horrible code.  If you see the new CC features, they've added things back in a better, more modern, way. If course, you have to buy intot eh Creative Cloud to get it and new features won't be released until the 17th of June.

     
    |
    Mark as:
  • Currently Being Moderated
    May 22, 2013 1:49 PM   in reply to [scott w]

    I don't think that's the main point here, Scott.

     

    Luchababe is just looking for a way to export images only (no code). The Export as CSS layers (probably not the most appropriate term) did just that.

     

    On the other hand, similar things happened in the past.

     

    Do you remember the sophisticated Pen an Ink > Hatch effects filter? Discarded in AI CS1.

     

    Just as the the classy Photo Crosshatch filter …

     
    |
    Mark as:
  • Currently Being Moderated
    May 22, 2013 1:57 PM   in reply to Kurt Gold

    Ooops... hello mouth, meet foot.

     

    You're right I didn't read carefully.

     

    And yes, it's not the first time something has been killed off when it was valuable (cough * Dimensions*). This is one factor which makes the "Creative Cloud" an unsettling experience to me.

     
    |
    Mark as:
  • Currently Being Moderated
    May 22, 2013 1:57 PM   in reply to luchababe

    Export to PSD as layers?

     
    |
    Mark as:
  • Currently Being Moderated
    May 22, 2013 2:04 PM   in reply to luchababe

    post the script that does most of what you need, describe what you want it to do differently and I'll see if I can tweak it to your needs.

     
    |
    Mark as:
  • Currently Being Moderated
    May 22, 2013 2:28 PM   in reply to luchababe
     
    |
    Mark as:
  • Currently Being Moderated
    May 22, 2013 4:27 PM   in reply to luchababe

    Well, here goes nothing, CarlosCanto:

     

    They're just not cutting it and I'm not familiar with scripting to poke around in there.

    well, I am familiar with scripting, do you want PNG24 or PNG8?

     
    |
    Mark as:
  • Currently Being Moderated
    May 23, 2013 2:05 PM   in reply to luchababe

    I'm halfway, just to clarify, when you do it manually you check the Transparency option and uncheck Clip to Artboard, right? are there any other options you need?

     
    |
    Mark as:
  • Currently Being Moderated
    May 24, 2013 12:42 AM   in reply to luchababe

    here you go, let me know if it cuts it.

     

    #target Illustrator
     
    //  script.name = exportLayersAsCSS_PNGs.jsx;
    //  script.description = mimics the Save for Web, export images as CSS Layers (images only);
    //  script.requirements = an open document; tested with CS5 on Windows. 
    //  script.parent = carlos canto // 05/24/13; All rights reseved
    //  script.elegant = false;
     
     
    /**
    * export layers as PNG
    * @author Niels Bosma
    */
    // Adapted to export images as CSS Layers by CarlosCanto
     
     
    if (app.documents.length>0) {
        main();
    }
    else alert('Cancelled by user');
     
     
    function main() {
        var document = app.activeDocument;
        var afile = document.fullName;
        var filename = afile.name.split('.')[0];
     
     
        var folder = afile.parent.selectDlg("Export as CSS Layers (images only)...");
     
     
        if(folder != null)
        { 
            var activeABidx = document.artboards.getActiveArtboardIndex();
            var activeAB = document.artboards[activeABidx]; // get active AB        
            var abBounds = activeAB.artboardRect;// left, top, right, bottom
     
     
            showAllLayers();
            var docBounds = document.visibleBounds;
            activeAB.artboardRect = docBounds;
     
     
            var options = new ExportOptionsPNG24();
            options.antiAliasing = true;
            options.transparency = true;
            options.artBoardClipping = true;
     
            var n = document.layers.length;
            hideAllLayers ();
            for(var i=0; i<n; ++i)
            {
                //hideAllLayers();
                var layer = document.layers[i];
                layer.visible = true;
     
     
                var file = new File(folder.fsName + '/' +filename+ '-' + i+".png");
     
                document.exportFile(file,ExportType.PNG24,options);
                layer.visible = false;
            }
     
            showAllLayers();
            activeAB.artboardRect = abBounds;
        }
     
     
        function hideAllLayers()
        {
            forEach(document.layers, function(layer) {
                layer.visible = false;
            });
        }
     
     
        function showAllLayers()
        {
            forEach(document.layers, function(layer) {
                layer.visible = true;
            }); 
        }
     
     
        function forEach(collection, fn)
        {
            var n = collection.length;
            for(var i=0; i<n; ++i)
            {
                fn(collection[i]);
            }
        }
    }
    
     
    |
    Mark as:
  • Currently Being Moderated
    May 24, 2013 7:54 AM   in reply to luchababe

    Carlos must have been a mob boss in a previous life and now needs to rack up karma points as much as possible.

     

    I tried this with v16.0.4 / Mac and it seems to work flawlessly here.

     

    Excellent work as always, Carlos!

     
    |
    Mark as:
  • Currently Being Moderated
    May 24, 2013 8:04 AM   in reply to [scott w]

    hahaha, thanks Scott...

     

    MY-name-IS-earl-my-name-is-earl-2008169-420-257.gif-

     
    |
    Mark as:
  • Currently Being Moderated
    May 24, 2013 4:04 PM   in reply to luchababe

    thanks, glad you approve

     

    I'll reverse the export order tonight after work.

     
    |
    Mark as:
  • Currently Being Moderated
    May 24, 2013 11:07 PM   in reply to CarlosCanto

    reversed order

     

    #target Illustrator
     
    //  script.name = exportLayersAsCSS_PNGs.jsx;
    //  script.description = mimics the Save for Web, export images as CSS Layers (images only);
    //  script.requirements = an open document; tested with CS5 on Windows. 
    //  script.parent = carlos canto // 05/24/13; All rights reseved
    //  script.elegant = false;
     
     
    /**
    * export layers as PNG
    * @author Niels Bosma
    */
    // Adapted to export images as CSS Layers by CarlosCanto
     
     
    if (app.documents.length>0) {
        main();
    }
    else alert('Cancelled by user');
     
     
    function main() {
        var document = app.activeDocument;
        var afile = document.fullName;
        var filename = afile.name.split('.')[0];
     
     
        var folder = afile.parent.selectDlg("Export as CSS Layers (images only)...");
     
     
        if(folder != null)
        { 
            var activeABidx = document.artboards.getActiveArtboardIndex();
            var activeAB = document.artboards[activeABidx]; // get active AB        
            var abBounds = activeAB.artboardRect;// left, top, right, bottom
     
     
            showAllLayers();
            var docBounds = document.visibleBounds;
            activeAB.artboardRect = docBounds;
     
     
            var options = new ExportOptionsPNG24();
            options.antiAliasing = true;
            options.transparency = true;
            options.artBoardClipping = true;
     
            var n = document.layers.length;
            hideAllLayers ();
            for(var i=n-1, k=0; i>=0; i--, k++)
            {
                //hideAllLayers();
                var layer = document.layers[i];
                layer.visible = true;
     
     
                var file = new File(folder.fsName + '/' +filename+ '-' + k +".png");
     
                document.exportFile(file,ExportType.PNG24,options);
                layer.visible = false;
            }
     
            showAllLayers();
            activeAB.artboardRect = abBounds;
        }
     
     
        function hideAllLayers()
        {
            forEach(document.layers, function(layer) {
                layer.visible = false;
            });
        }
     
     
        function showAllLayers()
        {
            forEach(document.layers, function(layer) {
                layer.visible = true;
            }); 
        }
     
     
        function forEach(collection, fn)
        {
            var n = collection.length;
            for(var i=0; i<n; ++i)
            {
                fn(collection[i]);
            }
        }
    }
    
     
    |
    Mark as:
  • Currently Being Moderated
    May 27, 2013 10:37 AM   in reply to luchababe

    I don't understand the question, does the second script not work as expected?

     
    |
    Mark as:
  • Currently Being Moderated
    May 27, 2013 11:31 AM   in reply to luchababe

    A pretty generous script. You want 60 images? Nah, get at least 3000.

     
    |
    Mark as:
  • Currently Being Moderated
    May 27, 2013 5:31 PM   in reply to luchababe

    I wonder why, it works fine here, can you try with another file with a couple of layers only? or can you share the files with 57 layers to try to find out why you're getting 3000 pngs?

     
    |
    Mark as:
  • Currently Being Moderated
    May 28, 2013 10:57 AM   in reply to luchababe

    you're welcome

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points