Save layer groups as images cropped to different sizes

[nathanj36402025]

My goal is to create an action that saves each "Product" group as 3 different images:

- The"Background" Group saves by itself, at full size (that's easy...) -- Saves a JPG file

- The Desktop Group gets cropped to 900 pixels wide from the center (full height of document) -- Saves a PNG with transparent bkg

- The Mobile Group gets cropped to 260 pixels wide from the center (full height of document) -- Saves a PNG with transparent bkg

Once those 3 images are created, I'd like to move on to the next "Product" group and continue saving in this fashion until the end of the layers.

Sample layer groups if this helps:

I am very familiar with Photoshop and actions. I've just never attempted anything quite this sophisticated before.

Can someone point me in the right direction?

thx!

[Theresa J]

What version of Ps are you using? This would be a perfect project for artboards instead of Layer groups.

[Chuck Uebele · Accepted solution]

Try this script:

#target photoshop
app.displayDialogs = DialogModes.NO; 
app.preferences.rulerUnits = Units.PIXELS;
var doc = activeDocument;
var jpgOptions = new JPEGSaveOptions();
jpgOptions.quality = 8
var pngOptions = new PNGSaveOptions();
var curFolder = doc.path
mkSnp ();
for(var i=0;i<doc.layers.length;i++){
    var gp = doc.layers;
    if(gp.typename == 'LayerSet'){
        gp.visible= true;
        doc.activeLayer = gp.layers.getByName('Background')
        doc.activeLayer.visible = true;
        visLayers ();
        doc.saveAs (new File(curFolder +'/' + gp.name + '_Background.jpg'), jpgOptions);
        //---------
        selSnp ();
        doc.activeLayer = gp.layers.getByName('Mobile');
        doc.activeLayer.visible = true;
        visLayers ();
        var side = (parseInt(doc.width) - 260)/2
        cropImg (0, side, doc.height, side + 260);
        doc.saveAs (new File(curFolder +'/' + gp.name + '_Mobile.png'), pngOptions);
        selSnp ();
        //---------
        doc.activeLayer = gp.layers.getByName('Desktop');
        doc.activeLayer.visible = true;
        visLayers ();
        var side = (parseInt(doc.width) - 900)/2
        cropImg (0, side, doc.height, side + 900);
        doc.saveAs (new File(curFolder +'/' + gp.name + '_Desktop.png'), pngOptions);        
        selSnp ();
        }
    }
function visLayers(){
       var idShw = charIDToTypeID( "Shw " );
        var desc2 = new ActionDescriptor();
        var idnull = charIDToTypeID( "null" );
            var list1 = new ActionList();
                var ref1 = new ActionReference();
                var idLyr = charIDToTypeID( "Lyr " );
                var idOrdn = charIDToTypeID( "Ordn" );
                var idTrgt = charIDToTypeID( "Trgt" );
                ref1.putEnumerated( idLyr, idOrdn, idTrgt );
            list1.putReference( ref1 );
        desc2.putList( idnull, list1 );
        var idTglO = charIDToTypeID( "TglO" );
        desc2.putBoolean( idTglO, true );
    executeAction( idShw, desc2, DialogModes.NO ); 
    }
function mkJpg(){
    }
function selSnp(){
    var idslct = charIDToTypeID( "slct" );
        var desc11 = new ActionDescriptor();
        var idnull = charIDToTypeID( "null" );
            var ref8 = new ActionReference();
            var idSnpS = charIDToTypeID( "SnpS" );
            ref8.putName( idSnpS, "base" );
        desc11.putReference( idnull, ref8 );
    executeAction( idslct, desc11, DialogModes.NO );
    }
function mkSnp(){
    // =======================================================
    var idMk = charIDToTypeID( "Mk  " );
        var desc30 = new ActionDescriptor();
        var idnull = charIDToTypeID( "null" );
            var ref11 = new ActionReference();
            var idSnpS = charIDToTypeID( "SnpS" );
            ref11.putClass( idSnpS );
        desc30.putReference( idnull, ref11 );
        var idFrom = charIDToTypeID( "From" );
            var ref12 = new ActionReference();
            var idHstS = charIDToTypeID( "HstS" );
            var idCrnH = charIDToTypeID( "CrnH" );
            ref12.putProperty( idHstS, idCrnH );
        desc30.putReference( idFrom, ref12 );
    executeAction( idMk, desc30, DialogModes.NO );
    // =======================================================
    var lastSt = null
 for(var k=0;k<doc.historyStates.length;k++){
     if(doc.historyStates.snapshot){lastSt = doc.historyStates}
     else{
        var idslct = charIDToTypeID( "slct" );
            var desc31 = new ActionDescriptor();
            var idnull = charIDToTypeID( "null" );
                var ref13 = new ActionReference();
                var idSnpS = charIDToTypeID( "SnpS" );
                ref13.putName( idSnpS, lastSt.name );
            desc31.putReference( idnull, ref13 );
        executeAction( idslct, desc31, DialogModes.NO );        
         }
     }
        // =======================================================
    var idsetd = charIDToTypeID( "setd" );
        var desc32 = new ActionDescriptor();
        var idnull = charIDToTypeID( "null" );
            var ref14 = new ActionReference();
            var idHstS = charIDToTypeID( "HstS" );
            var idCrnH = charIDToTypeID( "CrnH" );
            ref14.putProperty( idHstS, idCrnH );
        desc32.putReference( idnull, ref14 );
        var idT = charIDToTypeID( "T   " );
            var desc33 = new ActionDescriptor();
            var idNm = charIDToTypeID( "Nm  " );
            desc33.putString( idNm, """base""" );
        var idSnpS = charIDToTypeID( "SnpS" );
        desc32.putObject( idT, idSnpS, desc33 );
    executeAction( idsetd, desc32, DialogModes.NO );
    }
function delSnp(){
   var idDlt = charIDToTypeID( "Dlt " );
        var desc14 = new ActionDescriptor();
        var idnull = charIDToTypeID( "null" );
            var ref9 = new ActionReference();
            var idHstS = charIDToTypeID( "HstS" );
            var idCrnH = charIDToTypeID( "CrnH" );
            ref9.putProperty( idHstS, idCrnH );
        desc14.putReference( idnull, ref9 );
    executeAction( idDlt, desc14, DialogModes.NO ); 
    }
function cropImg(top,left,bottom,right){
    var idCrop = charIDToTypeID( "Crop" );
        var desc26 = new ActionDescriptor();
        var idT = charIDToTypeID( "T   " );
            var desc27 = new ActionDescriptor();
            var idTop = charIDToTypeID( "Top " );
            var idPxl = charIDToTypeID( "#Pxl" );
            desc27.putUnitDouble( idTop, idPxl, top );
            var idLeft = charIDToTypeID( "Left" );
            var idPxl = charIDToTypeID( "#Pxl" );
            desc27.putUnitDouble( idLeft, idPxl, left );
            var idBtom = charIDToTypeID( "Btom" );
            var idPxl = charIDToTypeID( "#Pxl" );
            desc27.putUnitDouble( idBtom, idPxl, bottom );
            var idRght = charIDToTypeID( "Rght" );
            var idPxl = charIDToTypeID( "#Pxl" );
            desc27.putUnitDouble( idRght, idPxl, right );
        var idRctn = charIDToTypeID( "Rctn" );
        desc26.putObject( idT, idRctn, desc27 );
        var idAngl = charIDToTypeID( "Angl" );
        var idAng = charIDToTypeID( "#Ang" );
        desc26.putUnitDouble( idAngl, idAng, 0.000000 );
        var idDlt = charIDToTypeID( "Dlt " );
        desc26.putBoolean( idDlt, false );
        var idcropAspectRatioModeKey = stringIDToTypeID( "cropAspectRatioModeKey" );
        var idcropAspectRatioModeClass = stringIDToTypeID( "cropAspectRatioModeClass" );
        var idpureAspectRatio = stringIDToTypeID( "pureAspectRatio" );
        desc26.putEnumerated( idcropAspectRatioModeKey, idcropAspectRatioModeClass, idpureAspectRatio );
        var idCnsP = charIDToTypeID( "CnsP" );
        desc26.putBoolean( idCnsP, false );
    executeAction( idCrop, desc26, DialogModes.NO );    
    }

[nathanj36402025]

Wow, Chuck. You are amazing.

I popped code this into Apple's Script Editor

and when I try to save it as AppleScript it gives me this: "Expected end of line, etc. but found unknown token."

Saving it as JavaScript I get: "Error on line 1: SyntaxError: Invalid character: '#'"

Thanks in advance for the help!

Nathan

[Chuck Uebele]

Save it in a plain text editor with the extension .jsx.