Alternative to 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.

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

Similar Messages

  • Save for Web Export

    I am trying to use the save for web export option to save out a file of type JPEG.
    I have gotten the code working fine if it saved out with the default file type of .gif, but I cannot get it to work with .jpg.
    set theExportOptions to {class:save for web export options, interlaced:true, quality:30}
    tell current document
    export in (theLocation as text) as save for web with options theExportOptions
    end tell
    These are the pertinent lines from my code, so if anybody can tell me how to save the file as type JPEG so that it is a scripted version of Photoshop's save for web feature, that would great.
    I am also using Photoshop CS2 v9.02 if that helps.

    You would have to code that seperate eg:
    FitImage(1000,500);
    function FitImage( inWidth, inHeight ) {
       if ( inWidth == undefined || inHeight == undefined ) {
          alert( "FitImage requires both Width & Height!");
          return 100;
       var desc = new ActionDescriptor();
       var unitPixels = charIDToTypeID( '#Pxl' );
       desc.putUnitDouble( charIDToTypeID( 'Wdth' ), unitPixels, inWidth );
       desc.putUnitDouble( charIDToTypeID( 'Hght' ), unitPixels, inHeight );
       var runtimeEventID = stringIDToTypeID( "3caa3434-cb67-11d1-bc43-0060b0a13dc4" ); 
       executeAction( runtimeEventID, desc, DialogModes.NO );

  • Save for web export crashing photoshop

    HI
    In was wondering if anyone could help me.  I have written a code that edits images but i am having trouble with the save for web export everytime it gets to saving it photoshop just crashes. I have tried a few different ways of coding it but all of them end of crashing PS and i am at a loss as to what is wrong.
    Here is the code that i am using:
                                            set webFolder to (choose folder with prompt "Select the folder to link to")
                                            set webOpt to {class:save for web export options, web format:JPEG, quality:89}
                                            set theDoc to current document
      export theDoc in webFolder as save for web with options webOpt
    any help would be great. I have tried it on CS6 and CC, both of which crash.

    You need to pass a full file path to the export command… Probably need to change the extension too.
    set myFullFilePath to (path to desktop as text) & docName
    export in file myFullFilePath as save for web with options myOptions

  • "Save for Web" exporting very slowly

    I appologize if this question has been answered somewhere already, I didn't find a solution for my problem, so here goes.
    When saving images for web, photoshop (or is it still considered image ready?) can take as long as 10-15 seconds per slice while saving. I found several people had an issue where the save for web GUI was taking a long time to load up... I do not have that issue. My GUI loads nice and quick, and the interface is as responsive as it should be. Only after telling the program to save the files does it start to chug.
    I'm using a brand new Dell machine with Windows 7 fully updated. Have 4 gigs of ram, 2.4Gh Xeon, and 170gb of free HD space. Also, I'm using CS4 64bit Photoshop.

    Time to resurrect this thread...
    I've been having the same slow-saving problem as before, now both 32 and 64 bit versions are saving slowly. I have noticed that once every blue moon it will export a file quickly, but seems there next attempt is slow again. Same issue whether reading and/or writing on a local or network drive. Also, as stated above, it doesn't seem to be relative the size of the source file, destination file, or number of slices. Big and little, dozens of images or a single image, they're all slow and they all seem to take roughly the same ammount of time.
    I also have CS4 installed on my computer at home (which is pretty similar, hardware-wise, to my work PC) and I don't have this problem.
    Scowering google I was unable to find any threads that directly relate to this problem. The closest thing I found was a post ( found here http://typography.com/documents/a_photoshop_slowness_fix.php) that says to delete "/Library/Preferences/com.adobe.Photoshop.plist" and "/Library/Preferences/com.adobe.mediabrowser.plist", then let photoshop recreate those files. The only problem is I can't find either of those files in CS4.
    Anyhow... just looking for any suggestions. I'll try anything at this point. I'm probably losing close to an hour some days just sitting and waiting for my machine to export slices.

  • Poor quality save for web exports

    It doesn't matter whether i'm exporting from Ai or Ps or whether it's CS6 or CC. I have changed the raster settings in Ai and i've also tried all optimization options with all different export file types (jpg, png, gif) at all different quality settings. It doesn't matter if I start with an ai, eps, pdf, png... the export result is always poor quality.
    I have tried exporting at 300ppi and that does fix the quality issue and bloats the file size, but this way (the export route) is so time consuming since you have to resize your artwork each time as well as the artboard so that it doesn't cut off pixels. Save for web never used to have these quality issues and it also never used to cut off pixels around the edges. These workarounds prove very time consuming and produce file sizes that are not ideal.
    When i first noticed this issue I was using Mavericks with CS6 and since am using Yosemite and Creative Cloud.
    Steps to reproduce:
    1. Create any bitmap or vector graphic in Ai or Ps, It doesn't matter whether you convert text to outlines or not
    2. Save for web
    3. View image in any application or browser to see poor quality and pixel trimming. Others running the same version and system are not having this issue, but I have checked many forums and found many others that do have this same issue but can't seem to find a solution.
    Results:stair stepping, degradation, pixel trimming, general poor image quality
    Expected results: Previously the save for web feature allowed for a decent quality image

    Not an Illustrator expert at all, but did you align your art work with the pixel grid?  If you didn't, there can be results as you describe them.  As I said, I am not an expert, but online searching for the subject may help.

  • Save for Web isn't using the correct size of artboard

    I've been using CS5 for about 5 days now and have just run into this problem.
    My artboard is 800x600 px.  I have 6 layers of an animation I need to export as pngs so I can manipulate them in Imageready (yes, I still use it.)
    I Save for Web, export as CSS layers, original size is 800x600 px, new size is 800x600 px (I don't touch those settings), art optimized and clip to artboard is checked.
    But when I Save and check my files, not only are they 550x90 (the size of the art on the artboard) but they're cut off on the right side.  It's like Illustrator is saving them as actual size, registared to 0,0 (top right corner) of my artboard.
    I need to save my layers using save for web so I can drag them into other animated files in Imageready.  I need them at 800x600 px because that's the size of my final art and it's easy to center a lot of layers if they're all the same size.
    I can post image files if my question doesn't make sense.

    UPDATE:
    I've been experimenting.  My artboard is 800x600 px.  I have 2 layers.  My artwork is 900x700 on both layers.
    I Save For Web with Clip to Artboard checked.
    I save a jpeg and my file is 800x600.
    I save a png and my file is 800x600. 
    I save as png and check Export As CSS Layers and my 2 layers are 900x700.  This ONLY seems to happen with the Export as CSS Layers checked.
    Also, I use File->Export->PNG and check Use Artboards and my file is 800x600.
    I use File->Export->JPEG and check Use Artboards and my file is 800x600.
    I use File->Export->BMP but I can't check Use Artboards, it's greyed out and uncheckable.  Huh?  I need to export my image as a BMP at 800x600.
    I don't understand what I'm missing here.

  • Save for Web Image Is Offset

    I have AI CS4 on Windows Vista and have created an artboard that is 220 px wide and 88 px high. I then added a rectangle of the same dimensions as a background to cover the entire artboard. When I export it to Save for Web and Devices, the resulting image show a white boarder on the left. If I shift my background 1 px to the left on the artboard so that it shows white space on the right and overlaps on the left, it looks fine on the Save for Web export. Is there some set up that I'm missing to get a WYSIWYG conversion?
    Thanks,
    Curt

    If you are trying to save as a jpeg, gif or png then you are rasterizing the vector graphic, which is likely the case of the 'white' space.
    To get around this, try creating bleed of 2 pixels all the way around the artboard and then use the crop tool to crop the image to 220x88.
    An alternative to this would be to open the file saved for the web in Photoshop or Fireworks and fill in the white/blank space.

  • Retaining original filenames in Save For Web droplet

    Automation from LR to PS is going groovy, but,
    The output files are all being renamed by the 'save for web' dialogue box to the filename saved inside the action that the droplet points to..
    So file #1 is saved ok,
    File #2 renamed as file #1 and replaces/overwrites original file #1..
    I have added a sequence 4 digit number to the file name in the droplet creation dialogue box but the final file rename happens after this in the final process of 'Save for Web' export..
    This is what I want to do.. Ideally..
    LR Raw file edited to taste,
    Export as watermarked TIF to PS
    Action a high pass filter,
    Export through Save for Web @ 1200px long - 75% quality
    Close TIF without saving.
    Es possible?

    Hi JJ,
    Nope, I didn't change any names.. or do you mean I automatically/inadvertantly change the name when recording the 'save for web' step?
    In your image above, mine looks similar but the filename is that of the file I need to have open in need to record an action..
    In my case, using your example, all my exported files would be renamed 'webnamed.jpg'
    and overwrite each export one by one...
    What is it I'm not getting??? !!
    How can you record an action without an open file, that the 'action record process' records THAT filename and makes it sticky in the action..
    Sorry to come across as really blonde here but I'm just not getting it..
    Here's what mine says..

  • VERY slow performance with CS4 + Save for web

    Note: I have done a search for similar issues but can find nothing regarding CS4 and this particular issue. I'm using a MacBook Pro 2.4Ghz w/4GB of RAM and resources are aplenty when the issue occurs.
    Issue
    My problem is that under certain circumstances the 'save as web' function can take upto 3 minutes before the diaglog box appears. I've had this for some time but only in the last couple of days did I notice something that might be relevant:
    Works
    1. Open 3 large TIFF files @ 120mb approx (mine are 3 processed RAW files from Capture One / 4200x5600@300dpi)
    2. Create a new adjustment layer for each image
    3. Resize each image to 72dpi @ 800x600
    4. Run a SmartSharpen & flatten layers
    5. In each tab (for each image) do 'save as web'
    6. 'Save as web' dialog appears in expected time
    VERY slow
    1. Open 3 large TIFF files @ 120mb approx (mine are 3 processed RAW files from Capture One / 4200x5600@300dpi)
    2. Create a new adjustment layer for each image
    3. Resize each image to 72dpi @ 800x600
    4. Run a SmartSharpen & flatten layers for each image
    5. In first tab do 'save as web'
    6. 'Save as web' dialog appears in expected time
    7. Close this document (tab)
    8. Go to the next image (tab) and do 'save as web'
    9. Dialog box can take anything from 20secs to 3mins to appear.
    10. Close this document (tab)
    11. Go to the last image (tab) and do 'save as web'
    12. Dialog box can take anything from 20secs to 3mins to appear.
    As I can easily go through this process for 50-60 images you can imagine that it can waste over an hour of my time waiting for Photoshop to get it's act together. I assume it's something todo with memory allocation, or that it's processing previews for all three tabs on the first 'save as web', but in any respect it's very annoying. There seems nothing obviously wrong resource-wise at the time of doing these.
    Would be interested if anyone else has this issue!
    Thanks!

    I had the same problem when I setup a new computer this week. Here's what I had installed:
    Photoshop CS5
    Suitcase Fusion 3
    The problem was that when I was in Photoshop and used the "Save for Web" export screen, the dropdown menu for the different export types (JPG, PNG, GIF, etc) would take an extremely long time to update the preview of the graphic.
    After a few days of research , I found that Suitcase was conflicting with Photoshop. Here's how you fix the problem (or at least here's what I did with my situation):
    Open Suitcase
    Go to "Tools", click "Manage Plugins"
    Deactivate the Photoshop plugin
    This fixed the problem immediately and now my Photoshop" Save For Web" feature is working really fast. Hope this helps anyone else in the same boat.

  • CS6 Save for Web image size limit (Retina)

    I have been designing for a lot of mobile sites these days, in particular: iphone retina display (640w).  Most of the time these designs can be long in the tooth with the height of these documents - exceeding 8000 pixels at times.  I noticed that 8000 pixels is the threshold limit for the "save for web" export.  Anything greater than 8000 pixels will be downgraded in quality on retina devices by scaling the image.  The jpg will still be the correct height and width, but when viewed on an iphone, you can easily see the degradation.   Images and text are blurry.  This is no bueno when trying to show a client what their site will look like on an iphone.
    So my question is, is there a work around?  A preference to be changed?  Am I missing something to get the full quality of my design comp in order to preserve retina display quality?

    Justin, what about your screenshot that I'm posting here:
    You posted that as an example of SFW downsizing to 78% to make its output be no taller than 8192 px, resulting in a width of 500 px. The iPhone will scale a 500 px wide image to make it fit the screen's 640 px width.
    And my CS6 SFW set to progressive JPEG (or anything else) refuses to allow a dimension to be greater than 8192 px. Here's the message when I try to make it larger:
    Likewise, the scale percentage cannot be made greater than the value which produces a dimension of 8192 px.
    Anyway, I'm glad you found a solution.

  • Save for Web & Devices to Current Directory

    Hey everybody,
    I have hundreds of images in a series of folders that I need to Save for Web with a automated batch.  The problem is, that Save for Web exports the images to a new directory, and not the image's current directory.  With hundreds of images in a bunch of subfolders, this isn't very time effective.
    Is there a way (either in Photopshop or with another program), to run the automated batch so that the finalized image is saved in its original folder?
    Thanks!
    MrDashen

    Using Image Processor doesn't help.  The "web-ready" images are still saved to a seperate location and copies of the original images are saved under a new /jpeg folder.
    Imagine I currently have this structure before batching:
    Folder 1
    Image 1
    Image 2
    Image 3
    Folder 2
    Image 4
    Image 5
    Image 6
    Using Image Processor gives me this:
    Folder 1
    JPEG Folder
    Image 1
    Image 2
    Image 3
    Image 1
    Image 2
    Image 3
    Folder 2
    JPEG Folder
    Image 4
    Image 5
    Image 6
    Image 4
    Image 5
    Image 6
    Export Location Folder
    Image 1 Web
    Image 2 Web
    Image 3 Web
    Image 4 Web
    Image 5 Web
    Image 6 Web
    What I want is the end result to be:
    Folder 1
    Image 1 Web
    Image 2 Web
    Image 3 Web
    Folder 2
    Image 4 Web
    Image 5 Web
    Image 6 Web
    Does that make sense?

  • Export Layers to Files w/ Save-for-Web Option

    Back in CS2, ImageReady provided support for exporting layers to files, but in a save-for-web style compression.  Since ImageReady has been discontinued, the only option available has been to use the current script in photoshop.
    We've done several quality tests on exported images from both programs, and since all of our work is done for web, keeping file sizes to a minimum and utilizing the SFW compression is a must.
    Can anyone instruct me how to add this functionality to the current export layers to files script?

    That line should not be a problem, I wonder if you are trying to run the script from ExtendScript Toolkit?
    If so you need to set the target as Photoshop (Top Left dropdownlist)
    If not, that line is not really required and can be commented out.
    An alternative to this script is my Layer Saver Script that might be of use...
    http://www.scriptsrus.talktalk.net/Layer%20Saver.htm

  • Exporting to PNG vs "Save for Web" in Illustrator CC

    I am creating small logos for a website in Illustrator CC (one is 135px x 50px), and the quality of the output has been a bit sketchy: not blurry or pixelated, but the text is messy and uneven while previewing in Acrobat as part of a larger PDF, and when previewing the logo by itself (I also previewed it in a browser with HTML to get the same unclear image).
    The images have been exported to PNG and JPG at 72 PPI.
    When I experimented with the "save for web" option (File>Save for Web), voila! It fixed the issue! I noticed in the dialogue box for "Save for Web" that it saved as a PNG-24, an option not available to export (you can only export to PNG)
    My question is: is there a difference between "save for web" and exporting that I should know about before I continue to save ALL my images via the "Save for web" option? It seems strange that the best way to save an image (PNG-24) wouldn't be an option under Export (you can only export to PNG). Why can't I export to PNG-24 in Illustrator?
    Thanks for any advice.

    You can save with different color depth, export, it chooses automatically the higher depth when you choose transparent, and the lower depth when you choose a background color.

  • [CS5][Save for Web][Anti-aliasing] Fine lines in exported PSD with adjustment layers

    Hello,
    You can reproduce the bug this way:
    - link a PSD with a adjustment (Levels, Brightness/Contrast) layer in your AI file
    - Save for Web, with AA for Art (not text) selected
    In the exported image there will be artefacts, white lines usually.
    Flattening the PSD or deleting the adjustment layers will solve the problem and anti-aliasing will be applied correctly.
    I used CMYK/RGB settings, FOGRA39/Adobe RGB 1998 for all the files involved.

    Hi,
    I am experiencing this same problem of pixelated gifs when I use the "save for web" dialog from Illustrator, but this solution has not worked for me. I have tried the trick of using type-optimized anti-aliasing, but it doesn't change the output at all. I've done this from within the "Image size" tab as well as through Effect>Rasterize>Options)Anti-aliasing: Type Optimized. My image is a logo made entirely from text, although for some of it I used "outline path", so I'm not sure if it still qualifies as text...I'm a newbie at this stuff, so the technical details are still quite opaque to me.
    Does anyone know of a solution to this that does not require me to add Photoshop to my workflow?
    I'm using Illustrator in CS5, version 15.0.2.
    Thanks in advance
    Jonathan

  • Export PDF as JPEG fails with Adobe Save for Web AI Error

    Hello,
    We have an Illustrator Javascript program to convert a PDF file to a JPEG.  It does some adjustments along the way, but I have boiled the script down so it just opens the PDF file, then uses the export method to export it to a JPEG file.  The problem is the JPEG conversion is failing.  When I run with user interaction layer set to DONTDISPLAYALERTS, as I normally do, it silently fails and continues; I do not get an exception, and the export method does not have another way to return an error.  When I do display alerts, I get a dialog box saying:
    Adobe Save for Web AI Error
    Could not complete this operation. An unknown error has occurred.
    It looks like this:
    What's weird is if I open the same PDF file in Illustrator and select File / Export it works fine.  I do get this error though if I select File / Save for Web & Devices.  I'm not sure why the export method would do a Save for Web though.
    The code looks basically like this:
    // Set filename, docName, destFolder
    file = new File(filename);
    sourceDoc = app.open(file);
    var fileSpec = new File( destFolder + "/" + docName +"_LARGE");
    var exportOptions = new ExportOptionsJPEG();
    var type = ExportType.JPEG;
    app.activeDocument.exportFile( fileSpec, type );
    For testing purposes, I have shortened the code so it is that, with the variable setting code above.
    Any help is very much appreciated.
    Thanks!
    ------Scott.

    I have not tested exporting without passing any options. You have however created a variable to an empty options object but not passed it.
    did you also try…
    app.activeDocument.exportFile( fileSpec, type, exportOptions );

Maybe you are looking for

  • Need help with Photo Shop CS4

    Hi, I still have not received an answer so I attached a docutment if that helps.  I am suppose to draw the diagram in paths and not each shape on a different layer. My issue is that I can't fill the path with black for some reason. am doing an assign

  • GR blocked to Quality inspection

    Dear Experts i have made goods reciept by 103 into GR blocked stock. now i want to make goods reciept to quality inspection . which movement type should i use.

  • Solaris 10 - patch for new DST 2007 changes

    I am trying to track down the one patch I need for the new standard for daylight savings time date changes that took effect in 2007. Each time I get one patch and read the readme file, it tells me I need another patch for the U.S. Energy Policy Act f

  • Installed FF4.0, now Roboform only shows 1 identity. Why? How do I fix?

    Installed FF4.0, now my Roboform will only show 1 identity. It will let me switch between them, but only 1 can be on the toolbar at a time

  • Display Entity attribute values on summary screen

    Hi, I have a rule base which allows the members of a household to apply for some benefits. A few documents are also required to be submitted in order to complete the application process. The documents may or may not be required for all the members of