How to create one big PNG image from multiple PNG images?

[rickyzg]

I have 453 PNG images and every image is 580x580px.  I need to stack all of the images on 580x262740px.

Doing manually takes too much time, is there any way to do it automatically?

[Stephen Marsh]

Thanks JJMack, it was all fine this morning otherwise I wouldn't have posted... Anyway it is of course coming up with errors and different behaviour that was not there this morning!

I have updated the script code to a 1.1 version...

I still can't get the same result as you, it works fine for me. All input files have the same canvas/pixel width/height.

[JJMack]

There is still a problem in your new version.  I ran it with the png with the transparent boarders and the one I add  the top left bottom right pixels. Your script still lost the third png bottom transparent boarder.

[Stephen Marsh]

¯\_(ツ)_/¯

[JJMack]

Here one more test

[Stephen Marsh]

@rickyzg 

My script works fine on my system, using images of the same width and height with no transparency.

JJMack has unexpected results on his system with his test images. I can't comment on that, it works for me and nobody else has commented or tested to provide further positive or negative feedback...

So I'm obviously interested in how the script works for you?

[Kukurykus]

Wow, I didn't know there's stringIDToTypeID("reverse") in Photoshop working on selected layers!

[jazz-y]

This is the first time I see this menu item, although it has been there since at least CC2014 🤦 

[Kukurykus]

Of course I checked in no time where it is in menu, then launched CS6 and it was there too.

[r-bin]

CS2 (and maybe CS)

[rickyzg]

Thanks for the script!

[rickyzg]

Thanks!

[davescm]

Good idea @jazz-y 

@rickyzg I've got to ask, what will you be doing with such an image?  🙂

Dave

[JJMack]

Dave do you think a 1:453 aspect ratio image is a bit strange? What is strange about 2" by 73'

[Stephen Marsh]

Perhaps for use with a webpage and CSS? Rather than loading in 453 separate images, load in one big image and then use CSS to mask and navigate through 453 "windows/masks" revealing each "separate image".

[rickyzg]

Hey Dave, I am animating knob to be used for VST instruments or any programming needs. One has 110px and another 580px with 90 frames. Thanks for asking.

[davescm]

@rickyzg Thanks, I get it now,  I was intrigued as to why it all needed to be in one image 🙂

Dave

[JJMack]

All of the animated png and ico files I have seen have been laid out horizontally not vertically.  They would still be limited to 30,000 px wide they could have 517 frames they have 453.  I have handled the transparent boarder issue by eliminating them in the png file.   I would first run my 1% batch Action on  the Png files. That would add a 50% Gray pixel at 1% opacity  to  the top left and bottom right of the Png  canvas to eliminate all transparent  boarders in the png files.  The two pixels will not bet see by human eyes. Not all Browsers support animated png files  I add an extention to Chrome this site does not seem to upload them correctly this should animate

JJMackAni.png 

[JJMack]

Photoshop seem to have a issue these days knowing what limits it has. I seem to be able to create a document  with a 300,000 px width.    I can set 400,000px in the new document width field Photoshop will not complain or change the setting.  It will  just create a document 300,000  pixel wide.   Photoshop has issues. Adobe need to do better testing than they do.

[Stephen Marsh]

The scripts I create on the forum are often for other users, not my personal use. Stacking files in horizontal or vertical layout layers is something that I do quite often. I have combined my previously separate horizontal and vertical stacker scripts into a single script with an interface:

Note: It is assumed that the stacked files will create a canvas size below the common 30,000 or 300,000 px limits.  :]

/*
Files to Horizontally or Vertically Stacked Layers scriptUI GUI.jsx
v1.0, 15th September 2024
Based on:
https://community.adobe.com/t5/photoshop-ecosystem-discussions/how-to-create-one-big-png-image-from-multiple-png-images/td-p/12359415
https://community.adobe.com/t5/photoshop-ecosystem-discussions/how-to-combine-images-horizontally-via-batch/m-p/12716190#M619600
*/

#target photoshop

function showGUI() {
    var dlg = new Window('dialog', 'Horizontal or Vertical File Stacker (v1.0)');
    dlg.preferredSize = [300, 250];
    dlg.orientation = 'column';
    dlg.alignChildren = 'center';

    // Stack Direction Dropdown
    var dropdown = dlg.add('dropdownlist', undefined, ['Horizontal Stack', 'Vertical Stack']);
    dropdown.selection = 0; // Default to Horizontal Stack

    // Horizontal Alignment Radio Buttons
    dlg.add('statictext', undefined, 'Horizontal Stack Alignment:');
    var hAlignmentGroup = dlg.add('group');
    hAlignmentGroup.orientation = 'row';
    var rbtnHCenter = hAlignmentGroup.add('radiobutton', undefined, 'Center Vertical');
    var rbtnHTopLeft = hAlignmentGroup.add('radiobutton', undefined, 'Top Left');
    rbtnHCenter.value = true; // Default to Center Vertical alignment

    // Vertical Alignment Radio Buttons
    dlg.add('statictext', undefined, 'Vertical Stack Alignment:');
    var vAlignmentGroup = dlg.add('group');
    vAlignmentGroup.orientation = 'row';
    var rbtnVCenter = vAlignmentGroup.add('radiobutton', undefined, 'Center Horizontal');
    var rbtnVTopLeft = vAlignmentGroup.add('radiobutton', undefined, 'Top Left');
    rbtnVCenter.value = true; // Default to Center Horizontal alignment

    // Reverse Layer Stack Checkbox
    var reverseCheckbox = dlg.add('checkbox', undefined, 'Reverse Layer Stack');
    reverseCheckbox.value = false; // Default to unchecked

    // OK and Cancel Button Group
    var buttonGroup = dlg.add('group');
    buttonGroup.orientation = 'row';
    buttonGroup.alignChildren = 'center';
    buttonGroup.margins = 5;

    // OK Button
    var btnOK = buttonGroup.add('button', undefined, 'OK');
    btnOK.onClick = function () {
        var inputFiles = selectMultipleFiles();
        if (inputFiles) {
            dlg.close();
            var stackDirection = dropdown.selection.text;
            var reverseLayers = reverseCheckbox.value;

            if (stackDirection === 'Horizontal Stack') {
                var hAlignment = rbtnHCenter.value ? 'center' : 'topLeft';
                hStacker(inputFiles, hAlignment, reverseLayers);
            } else {
                var vAlignment = rbtnVCenter.value ? 'center' : 'topLeft';
                vStacker(inputFiles, vAlignment, reverseLayers);
            }
        }
    };

    // Cancel Button
    var btnCancel = buttonGroup.add('button', undefined, 'Cancel', { name: 'cancel' });
    btnCancel.onClick = function () {
        dlg.close();
    };

    // Disable/Enable Alignment Options based on Stack Selection
    dropdown.onChange = function () {
        if (dropdown.selection.text === 'Horizontal Stack') {
            hAlignmentGroup.enabled = true;
            vAlignmentGroup.enabled = false;
        } else {
            hAlignmentGroup.enabled = false;
            vAlignmentGroup.enabled = true;
        }
    };

    // Initially disable vertical alignment radio buttons
    vAlignmentGroup.enabled = false;

    dlg.show();
}

function selectMultipleFiles() {
    var inputFiles = File.openDialog('Select image files', true);
    if (!inputFiles || inputFiles.length === 0) {
        alert('No files selected.');
        return null;
    }
    return inputFiles;
}

if (app.documents.length === 0) {
    showGUI();
} else {
    alert('Please close all open files before running this script...');
}

function hStacker(inputFiles, alignment, reverseLayers) {
    (function () {
        var savedDisplayDialogs = app.displayDialogs;
        app.displayDialogs = DialogModes.NO;
        var origUnits = app.preferences.rulerUnits;
        app.preferences.rulerUnits = Units.PIXELS;

        // Sort files alphabetically
        inputFiles.sort().reverse();

        // Process the first "base" file
        var firstFile = app.open(File(inputFiles[0]));
        var firstFileName = app.activeDocument.name;
        app.activeDocument.duplicate("Horizontal-Stacker", false);
        firstFile.close(SaveOptions.DONOTSAVECHANGES);
        var docStack = app.documents[0];
        app.activeDocument = docStack;
        docStack.activeLayer.name = firstFileName;
        var baseWidth = app.activeDocument.width.value;

        // Process the remaining file layers to the "base" file
        for (var i = 1; i < inputFiles.length; i++) {
            var remainingFiles = app.open(File(inputFiles[i]));
            var fileName = remainingFiles.name;
            remainingFiles.activeLayer.name = fileName;
            remainingFiles.layers[0].duplicate(docStack, ElementPlacement.PLACEATBEGINNING);
            remainingFiles.close(SaveOptions.DONOTSAVECHANGES);
            relativeCanvasSizeW(true, baseWidth);

            if (alignment === 'center') {
                align2SelectAll('AdCV'); // Center Vertical
            } else {
                align2SelectAll('AdTp'); // Align to Top
            }
            align2SelectAll('AdLf'); // Left
        }

        app.runMenuItem(stringIDToTypeID("selectAllLayers"));
        if (reverseLayers) {
            reverseLayerStack();
        }
        app.activeDocument.revealAll();
        app.beep();
        alert(inputFiles.length + ' files stacked horizontally!');
        app.displayDialogs = savedDisplayDialogs;
        app.preferences.rulerUnits = origUnits;

        function relativeCanvasSizeW(relative, width) {
            var s2t = function (s) {
                return app.stringIDToTypeID(s);
            };
            var descriptor = new ActionDescriptor();
            descriptor.putBoolean(s2t("relative"), relative);
            descriptor.putUnitDouble(s2t("width"), s2t("pixelsUnit"), width);
            descriptor.putEnumerated(s2t("horizontal"), s2t("horizontalLocation"), s2t("top"));
            executeAction(s2t("canvasSize"), descriptor, DialogModes.NO);
        }
    })();
}

function vStacker(inputFiles, alignment, reverseLayers) {
    (function () {
        var savedDisplayDialogs = app.displayDialogs;
        app.displayDialogs = DialogModes.NO;
        var origUnits = app.preferences.rulerUnits;
        app.preferences.rulerUnits = Units.PIXELS;

        // Sort files alphabetically
        inputFiles.sort().reverse();

        // Process the first "base" file
        var firstFile = app.open(File(inputFiles[0]));
        var firstFileName = app.activeDocument.name;
        app.activeDocument.duplicate("Vertical-Stacker", false);
        firstFile.close(SaveOptions.DONOTSAVECHANGES);
        var docStack = app.documents[0];
        app.activeDocument = docStack;
        docStack.activeLayer.name = firstFileName;

        // Process the remaining file layers to the "base" file
        for (var i = 1; i < inputFiles.length; i++) {
            var remainingFiles = app.open(File(inputFiles[i]));
            var fileName = remainingFiles.name;
            var baseHeight = activeDocument.height.value;
            remainingFiles.activeLayer.name = fileName;
            remainingFiles.layers[0].duplicate(docStack, ElementPlacement.PLACEATBEGINNING);
            remainingFiles.close(SaveOptions.DONOTSAVECHANGES);
            relativeCanvasSizeH(true, baseHeight);

            if (alignment === 'center') {
                align2SelectAll('AdCH'); // Center Horizontal
            } else {
                align2SelectAll('AdLf'); // Align to Left
            }
            align2SelectAll('AdBt'); // Bottom
        }

        app.runMenuItem(stringIDToTypeID("selectAllLayers"));
        if (reverseLayers) {
            reverseLayerStack();
        }
        app.activeDocument.revealAll();
        app.beep();
        alert(inputFiles.length + ' files stacked vertically!');
        app.displayDialogs = savedDisplayDialogs;
        app.preferences.rulerUnits = origUnits;

        function relativeCanvasSizeH(relative, height) {
            var s2t = function (s) {
                return app.stringIDToTypeID(s);
            };
            var descriptor = new ActionDescriptor();
            descriptor.putBoolean(s2t("relative"), relative);
            descriptor.putUnitDouble(s2t("height"), s2t("pixelsUnit"), height);
            descriptor.putEnumerated(s2t("vertical"), s2t("verticalLocation"), s2t("top"));
            executeAction(s2t("canvasSize"), descriptor, DialogModes.NO);
        }
    })();
}

// Common Helper functions
function reverseLayerStack() {
    var idreverse = stringIDToTypeID("reverse");
    var desc = new ActionDescriptor();
    var ref = new ActionReference();
    ref.putEnumerated(stringIDToTypeID("layer"), stringIDToTypeID("ordinal"), stringIDToTypeID("targetEnum"));
    desc.putReference(stringIDToTypeID("null"), ref);
    executeAction(idreverse, desc, DialogModes.NO);
}

function align2SelectAll(method) {
    app.activeDocument.selection.selectAll();
    var desc = new ActionDescriptor();
    var ref = new ActionReference();
    ref.putEnumerated(charIDToTypeID("Lyr "), charIDToTypeID("Ordn"), charIDToTypeID("Trgt"));
    desc.putReference(charIDToTypeID("null"), ref);
    desc.putEnumerated(charIDToTypeID("Usng"), charIDToTypeID("ADSt"), charIDToTypeID(method));
    try {
        executeAction(charIDToTypeID("Algn"), desc, DialogModes.NO);
    } catch (e) {}
    app.activeDocument.selection.deselect();
}

https://prepression.blogspot.com/2017/11/downloading-and-installing-adobe-scripts.html