Alternative to Save for Web/Export as CSS Layers?

Participant ,
May 22, 2013

Copy link to clipboard

Copied

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.

Views

17.8K

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
May 22, 2013

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Participant ,
May 22, 2013

Copy link to clipboard

Copied

That's the answer I was afraid of.  I'm very disappointed.  I've had issues come up before when I've upgraded in the past but I've always found a way to work with it/around it/adapt to it.  But this case is nothing like that.  I've never had to go back to a lower version because of a change to the program.  Why they'd take something out of an upgrade is beyond me.  At least simplify the action or hide is somewhere else if you want to streamline things but just don't get rid of a major feature like that.

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
LEGEND ,
May 22, 2013

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
May 22, 2013

Copy link to clipboard

Copied

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 …

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
LEGEND ,
May 22, 2013

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Participant ,
May 22, 2013

Copy link to clipboard

Copied

Correct.  I don't need any code, just the layers as images.  That's what Export as CSS Layer produced.  I just can't find an alternative that's as simple and easy as that.  Surely I can't be the only one missing this feature.

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
LEGEND ,
May 22, 2013

Copy link to clipboard

Copied

Export to PSD as layers?

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Participant ,
May 22, 2013

Copy link to clipboard

Copied

I've tried the export to PSD as layers with maximum editablilty.  It works only some of the time.  The more layers (frames) I have in the animation and the more objects I have on each layer, the bigger the PSD file size, the more likely Photoshop will flatten layers without warning and the longer Photoshop takes to open the file, save the file, render each new frame or layer.  I can deal with the time waiting for things, but because I use a lot of transparency filters (multiply, screen, etc) the  more likely things will flatten.  Sometimes I have too many symbols and it flattens things.  It's very unpredictable and I'm unwilling and unable to change the way I create the artwork just so exporting works correctly.  And it's way too time consuming and labor intesive to break up an animation into parts to make the PSD files smaller only to reassemble them later.  Heaven forbid I need to tweak something because I'd have to start the whole process over again.

With Save for Web/Export CSS Layers it was BOOM BOOM BOOM done.  Needs a change?  Change BOOM BOOM BOOM done again.

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
May 22, 2013

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Participant ,
May 22, 2013

Copy link to clipboard

Copied

Well, here goes nothing, CarlosCanto:

Here's one script I found http://www.ericson.net/content/2011/06/export-illustrator-layers-andor-artboards-as-pngs-and-pdfs/

Here's another: http://www.arcticmill.com/2012/08/export-layers-as-png-files-from-illustrator-in-multiple-resolutio...

They're just not cutting it and I'm not familiar with scripting to poke around in there.  I literally just want the Export to CSS layers back.  How that works is all I need.  I don't need to export using the artboard.  I don't want to label each layer with a symbol.  I just need to export every single layer in my AI file to a transparent PNG.  Being able to increase the image size in a % would be nice but I won't be picky! 

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
May 22, 2013

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
May 22, 2013

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Participant ,
May 23, 2013

Copy link to clipboard

Copied

PNG24 if you can.  I've very curious to see what you are doing.

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
May 23, 2013

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Participant ,
May 24, 2013

Copy link to clipboard

Copied

Correct.  Transparency is checked and Clip to Artboard is unchecked.

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
May 24, 2013

Copy link to clipboard

Copied

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;

            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);

        }

    }

}

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Participant ,
May 24, 2013

Copy link to clipboard

Copied

Holy cow!  I can't wait to try this out.  I'm going to try and find some time today to see if it works for me.  Thank you so much for putting in the time to make this for a stranger!

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
LEGEND ,
May 24, 2013

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
May 24, 2013

Copy link to clipboard

Copied

hahaha, thanks Scott...

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

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
New Here ,
Aug 10, 2015

Copy link to clipboard

Copied

thank you Carlos, you saved me a lot of time.

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Participant ,
May 24, 2013

Copy link to clipboard

Copied

How does one give a high five over the internet?  Because you deserve one Carlos!  It works perfectly!

I wish I knew what does what in the code so I could tweak it on my own to eleminate even more steps to my process.  What in there dictates the order of the layers?  If I could flip the order it exports the layers it would be perfect.

As is, it's perfect too, does exactly what Save for Web used to. 

So,

http://totallyawesomename.files.wordpress.com/2011/06/high-5.jpg

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
May 24, 2013

Copy link to clipboard

Copied

thanks, glad you approve

I'll reverse the export order tonight after work.

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
May 24, 2013

Copy link to clipboard

Copied

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;

            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);

        }

    }

}

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Participant ,
May 27, 2013

Copy link to clipboard

Copied

Hi again,

I just tried out the new script you posted here.  I gave me 3,364 files when there should only be 57.  They're called name-of-file-0-01.png thru -0-57.png, then it's 1-01.png thru 1-57.png all the way up to 57-01.png thru 57-57.png.  Thanks for trying to flip the layers for me though!

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more