Skip to main content
davidc88034496
davidc88034496
Known Participant
October 7, 2021
Answered

Setting Artboard Background to Transparent

  • October 7, 2021
  • 1 reply
  • 1402 views

Hi, im trying to use Photoshop Javascript to programmatically make the Artboards Background Transparent.  I know how to do it via the GUI. Please take a look at the screenshot below.  In this same manner i wish to set the background to Transparent instead of "White" or "Black".  I tried using ScriptListener Plugin, but im fairly new to it and it seemed that i would have to provide the coordinates of the Artboard Layer rather than the name of the Artboard Layer in order to try to change it to transparent.   Please take a look at the generated CLEAN-SL code below.  If someone could provide a clue.. i wish to simply select Artboard by its name (Since its easier) or another technique and then change it to transparent.

 

thanks

 

editArtboardEvent(6720, 64, 7220, 564, "", 255, 255, 255, 3, 8, 1);

function editArtboardEvent(top, left, bottom, right, artboardPresetName, red, Grn, blue, artboardBackgroundType, changeSizes, changeBackground) {
	var c2t = function (s) {
	return app.charIDToTypeID(s);
	};



	var s2t = function (s) {
	return app.stringIDToTypeID(s);
	};



	var descriptor = new ActionDescriptor();
	var descriptor2 = new ActionDescriptor();
	var descriptor3 = new ActionDescriptor();
	var descriptor4 = new ActionDescriptor();
	var list = new ActionList();
	var reference = new ActionReference();



	reference.putEnumerated( s2t( "layer" ), s2t( "ordinal" ), s2t( "targetEnum" ));
	descriptor.putReference( c2t( "null" ), reference );
	descriptor3.putDouble( s2t( "top" ), top );
	descriptor3.putDouble( s2t( "left" ), left );
	descriptor3.putDouble( s2t( "bottom" ), bottom );
	descriptor3.putDouble( s2t( "right" ), right );
	descriptor2.putObject( s2t( "artboardRect" ), s2t( "classFloatRect" ), descriptor3 );
	descriptor2.putList( s2t( "guideIDs" ), list );
	descriptor2.putString( s2t( "artboardPresetName" ), artboardPresetName );
	descriptor4.putDouble( s2t( "red" ), red );
	descriptor4.putDouble( c2t( "Grn " ), Grn );
	descriptor4.putDouble( s2t( "blue" ), blue );
	descriptor2.putObject( s2t( "color" ), s2t( "RGBColor" ), descriptor4 );
	descriptor2.putInteger( s2t( "artboardBackgroundType" ), artboardBackgroundType );
	descriptor.putObject( s2t( "artboard" ), s2t( "artboard" ), descriptor2 );
	descriptor.putInteger( s2t( "changeSizes" ), changeSizes );
	descriptor.putInteger( s2t( "changeBackground" ), changeBackground );
	executeAction( s2t( "editArtboardEvent" ), descriptor, DialogModes.NO );
}

 

This topic has been closed for replies.
Correct answer Stephen Marsh

Looking at the SL code when changing an existing arboard background property (snippet, not full working code):

 

var idartboardBackgroundType = stringIDToTypeID( "artboardBackgroundType" );
        desc472.putInteger( idartboardBackgroundType, 1 );

 

The integer 1 = White, 2 = Black, 3 = Transparent, 4 = Other

To select the layer by name (presuming that only 1 layer has this exact name):

 

app.activeDocument.activeLayer = app.activeDocument.layers['Artboard 1'];

 

 

Here is the raw SL code in a function with some fluff removed, while still offering the possibility to use an "other" colour:

 

abTrans();

function abTrans() {
    var ideditArtboardEvent = stringIDToTypeID("editArtboardEvent");
    var desc520 = new ActionDescriptor();
    var idnull = stringIDToTypeID("null");
    var ref129 = new ActionReference();
    var idlayer = stringIDToTypeID("layer");
    var idordinal = stringIDToTypeID("ordinal");
    var idtargetEnum = stringIDToTypeID("targetEnum");
    var desc521 = new ActionDescriptor();
    var idartboard = stringIDToTypeID("artboard");
    var idchangeBackground = stringIDToTypeID("changeBackground");
    ref129.putEnumerated(idlayer, idordinal, idtargetEnum);
    desc520.putReference(idnull, ref129);

    // Options for "other" idartboardBackgroundType, 4
    var idcolor = stringIDToTypeID("color");
    var desc523 = new ActionDescriptor();
    var idred = stringIDToTypeID("red");
    desc523.putDouble(idred, 128.000000);
    var idgrain = stringIDToTypeID("grain");
    desc523.putDouble(idgrain, 128.000000);
    var idblue = stringIDToTypeID("blue");
    desc523.putDouble(idblue, 128.000000);
    var idRGBColor = stringIDToTypeID("RGBColor");
    desc521.putObject(idcolor, idRGBColor, desc523);

    var idartboardBackgroundType = stringIDToTypeID("artboardBackgroundType");
    // putInteger 1 = White, 2 = Black, 3 = Transparent, 4 = Other
    desc521.putInteger(idartboardBackgroundType, 3);

    desc520.putObject(idartboard, idartboard, desc521);
    desc520.putInteger(idchangeBackground, 1);
    executeAction(ideditArtboardEvent, desc520, DialogModes.NO);
}

 

This slightly shorter version does not allow for an "other" colour:

 

abTrans();

function abTrans() {
    var ideditArtboardEvent = stringIDToTypeID("editArtboardEvent");
    var desc520 = new ActionDescriptor();
    var idnull = stringIDToTypeID("null");
    var ref129 = new ActionReference();
    var idlayer = stringIDToTypeID("layer");
    var idordinal = stringIDToTypeID("ordinal");
    var idtargetEnum = stringIDToTypeID("targetEnum");
    var desc521 = new ActionDescriptor();
    var idartboard = stringIDToTypeID("artboard");
    var idchangeBackground = stringIDToTypeID("changeBackground");
    ref129.putEnumerated(idlayer, idordinal, idtargetEnum);
    desc520.putReference(idnull, ref129);

    var idartboardBackgroundType = stringIDToTypeID("artboardBackgroundType");
    // putInteger 1 = White, 2 = Black, 3 = Transparent
    desc521.putInteger(idartboardBackgroundType, 3);

    desc520.putObject(idartboard, idartboard, desc521);
    desc520.putInteger(idchangeBackground, 1);
    executeAction(ideditArtboardEvent, desc520, DialogModes.NO);
}

 

1 reply

Stephen Marsh
Community Expert
Stephen MarshCommunity ExpertCorrect answer
Community Expert
October 8, 2021

Looking at the SL code when changing an existing arboard background property (snippet, not full working code):

 

var idartboardBackgroundType = stringIDToTypeID( "artboardBackgroundType" );
        desc472.putInteger( idartboardBackgroundType, 1 );

 

The integer 1 = White, 2 = Black, 3 = Transparent, 4 = Other

To select the layer by name (presuming that only 1 layer has this exact name):

 

app.activeDocument.activeLayer = app.activeDocument.layers['Artboard 1'];

 

 

Here is the raw SL code in a function with some fluff removed, while still offering the possibility to use an "other" colour:

 

abTrans();

function abTrans() {
    var ideditArtboardEvent = stringIDToTypeID("editArtboardEvent");
    var desc520 = new ActionDescriptor();
    var idnull = stringIDToTypeID("null");
    var ref129 = new ActionReference();
    var idlayer = stringIDToTypeID("layer");
    var idordinal = stringIDToTypeID("ordinal");
    var idtargetEnum = stringIDToTypeID("targetEnum");
    var desc521 = new ActionDescriptor();
    var idartboard = stringIDToTypeID("artboard");
    var idchangeBackground = stringIDToTypeID("changeBackground");
    ref129.putEnumerated(idlayer, idordinal, idtargetEnum);
    desc520.putReference(idnull, ref129);

    // Options for "other" idartboardBackgroundType, 4
    var idcolor = stringIDToTypeID("color");
    var desc523 = new ActionDescriptor();
    var idred = stringIDToTypeID("red");
    desc523.putDouble(idred, 128.000000);
    var idgrain = stringIDToTypeID("grain");
    desc523.putDouble(idgrain, 128.000000);
    var idblue = stringIDToTypeID("blue");
    desc523.putDouble(idblue, 128.000000);
    var idRGBColor = stringIDToTypeID("RGBColor");
    desc521.putObject(idcolor, idRGBColor, desc523);

    var idartboardBackgroundType = stringIDToTypeID("artboardBackgroundType");
    // putInteger 1 = White, 2 = Black, 3 = Transparent, 4 = Other
    desc521.putInteger(idartboardBackgroundType, 3);

    desc520.putObject(idartboard, idartboard, desc521);
    desc520.putInteger(idchangeBackground, 1);
    executeAction(ideditArtboardEvent, desc520, DialogModes.NO);
}

 

This slightly shorter version does not allow for an "other" colour:

 

abTrans();

function abTrans() {
    var ideditArtboardEvent = stringIDToTypeID("editArtboardEvent");
    var desc520 = new ActionDescriptor();
    var idnull = stringIDToTypeID("null");
    var ref129 = new ActionReference();
    var idlayer = stringIDToTypeID("layer");
    var idordinal = stringIDToTypeID("ordinal");
    var idtargetEnum = stringIDToTypeID("targetEnum");
    var desc521 = new ActionDescriptor();
    var idartboard = stringIDToTypeID("artboard");
    var idchangeBackground = stringIDToTypeID("changeBackground");
    ref129.putEnumerated(idlayer, idordinal, idtargetEnum);
    desc520.putReference(idnull, ref129);

    var idartboardBackgroundType = stringIDToTypeID("artboardBackgroundType");
    // putInteger 1 = White, 2 = Black, 3 = Transparent
    desc521.putInteger(idartboardBackgroundType, 3);

    desc520.putObject(idartboard, idartboard, desc521);
    desc520.putInteger(idchangeBackground, 1);
    executeAction(ideditArtboardEvent, desc520, DialogModes.NO);
}

 

    davidc88034496
    davidc88034496Author
    Known Participant
    October 8, 2021

    Thanks so much im going to start experimenting with the code you gave me. 

     

    I just hand a question. Im still fairly new...

     

    So if i ran this code below:

    app.activeDocument.activeLayer = app.activeDocument.layers['Artboard 1'];

    It would set make that layer active and selected right?

    and once thats selected...

    and i would run the shorter version function....

    abTrans();

     It would then run that whole editartbaordcommand and set artboardBackgroundType to 3. 

     

    That would be the flow..

    make the layer active by using the .activeLayer method and passing in the unique name of the layer. and then that function..

     

    i know it sounds simple but i just wanted to make sure if thats how the flow should be.

     

    thanks again so much. that code looks promising..

     

    Stephen Marsh
    Community Expert
    Stephen MarshCommunity Expert
    Community Expert
    October 12, 2021

    Thank you so much for clarifying that.

     

    So you're saying the first function that i sent would have worked?

    if that its true then wouldnt the parameters such as top, left, bottom, right etc targeted that one specific artboard in that particular location. 

     

    I would want the function to work on the currently selected/active layer rathan then by the location.. so in essense my first code WOULD NOT have worked correct?  or would it have.. i think the code you sent would have been the winner since its not based off location.  Do let me know.. as of right now, i will now start experiementing with your code.  Thanks a whole lot for your help.  You're a life saver!

     

    ditArtboardEvent(6720, 64, 7220, 564, "", 255, 255, 255, 3, 8, 1);

function editArtboardEvent(top, left, bottom, right, artboardPresetName, red, Grn, blue, artboardBackgroundType, changeSizes, changeBackground) {
....
}

     

     

    Thanks your short code worked like a charm.

    i dont think i would ever need the "Colour" version.. not sure when or why i would use it but its great you mentioned it for me just in case it kicks inside my mind.  Im guessin the colour version is so you can change the background color to another color besides the pre-selected white and black options from the drop down menu?  Is that correct?  Either way thank you!

     

    I have a question though.

    Where can i learn to shorten the code in the manner that you have done above? 

    The whole bit of code seemed very confusing to me to trim down.  Was there a setting within the ScriptingListener plugin that helped with that process?  Or is just experience?  Either way, it would be great to know how to get those generic codes that are not reliant on position but rather what layer is selected.  I get confused with the generated code.

    thanks so much!


    I didn't use Clean SL in this case, I manually created the funcion and edited it manually. It is a mixture of my (limited) experience and experimentation, otherwise known as trial and error... Comment out each line one by one and test if something breaks!

     

    Some of this is "sort-of-obvious", which comes from experience, which is backed up by this:

    Adobe UXP: Things you need to know! #6 BatchPlay (part 1): the ActionManager roots

     

    However one could do a lot better than that if you wish to work with AM code:

    Photoshop Scripting

     

     

     

    Thank you so much for clarifying that.

     

    So you're saying the first function that i sent would have worked?

    if that its true then wouldnt the parameters such as top, left, bottom, right etc targeted that one specific artboard in that particular location.


    By davidc88034496

     

    I am not sure if your original code would have worked or not, Clean SL is great, however it can sometimes break the raw AM code recorded by the SL plugin. If this happens I simply use the raw code if that works, potentially wrapping it into a function manually, perhaps manually creating my own variables to feed into the function as parameters etc.

     

    I prefer not to be biased by using code from others unless I have to, so the first thing I did was create a new file and I then cleared the SL code recording so that I had a clean slate. I then added an artboard with a white background. I copied this code. Next I cleared the SL code so that I had a clean slate again. I then did only one thing - changed the artboard background to transparent. I then compared the differences between the two blocks of code. Next I created a new artboard which was smaller than the original artboard, with a different name and different background colour. Finally I applied the code from the first artboard to the smaller artboard. The artboard name didn't chage = goood! The artboard size didn't change = good! Finally the artboard background did change when I adjusted the parameter integer (1, 2, 3 or 4).

     

    My conclusion was that it didn't really matter what "fluff" was in the code, if the only concern was the background colour change, then the full code would do the job. Being me, I couldn't simply just leave it there – I decided to start trimming the fluff...

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices