Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

For a project, I will need to design several 8x8 tiles and assemble them in a 256*224 frame.

My problem is that once I have all the 8px x 8px tiles, I can't figure how to easily access/assemble them without involving a LOT of file opening, copying, pasting, closing, etc.

Is there a more convenient way to do this? Ideally, I would have a panel with all my tiles, and would just have to move them on my canvas. And even more ideally, it would work with Photoshop (but I'm open to using another software too, if necessary).

share|improve this question
up vote 3 down vote accepted

A quick search brings up this page: ( ) which gives the instructions about a way to do this. In order to bring in the useful info to this page, I will summarize:

) load your tiles into a single document as layers using photoshop "file>scripts>load files to stack"

) use a script (javascript) to resize the document and then iterate through the layers, translating the position of the layer item(s)

That page has a script sample, which I have modified. I tested it on a 16columnx10row sprite sheet. It is slow.

Code follows (javascript. Save code as a text file, rename with js or jsx file extension if needed, then run from the "file>scripts menu item in photoshop). The first 5 lines are configurable variable where you specify the tile size and new document size.

I cannot give technical support on this, but you might look at adobe's help site for scripting reference information.

var newDocWidth = 16*8;
var newDocHeight = 10*8;
var tileWidth = 8;
var tileHeight = 8;
var bottomLayerFirst = false;

var appPrefRulerUnits = app.preferences.rulerUnits;

var rows = newDocHeight / tileHeight;
var cols = newDocWidth / tileWidth;

if (documents.length > 0) 
    var docRef = activeDocument;    

    var numLayers = docRef.artLayers.length;    

    if ( numLayers === (rows*cols) )
        var spriteX = docRef.width;
        var spriteY = docRef.height;    

        app.preferences.rulerUnits = Units.PIXELS;
        docRef.resizeCanvas( tileWidth * cols, tileHeight * rows, AnchorPosition.TOPLEFT );

        if ( bottomLayerFirst)
            var currentLayer = numLayers-1;
            var layerIndexIncrement = -1
            var currentLayer = 0;
            var layerIndexIncrement = 1
        for (r=1;r <= rows ;r++) 
            for ( c=1; c<= cols;c++)
                docRef.artLayers[currentLayer].visible = true;

                var movX = (c-1)*tileWidth;
                var movY = (r-1)*tileHeight;

            docRef.artLayers[currentLayer].translate(movX, movY);
            currentLayer = currentLayer + layerIndexIncrement;

        alert("Number of layers ("+ numLayers +") does not match desired canvas size.\nEnsure tilesizes in script match and you have the proper number of layers in document (should be " + (cols * rows)+ ")");
    alert("Sorry must have more than 1 image open in photoshop to work");

app.preferences.rulerUnits =  appPrefRulerUnits;
share|improve this answer
Wow, didn't even know you could use javascript in photoshop, a whole new world of possibilities. Thanks, that's exactly what I needed – Cristol.GdM Mar 21 '12 at 23:39
note that closing the layers palette and reducing the history levels before running the script may enhance the speed. – horatio Mar 22 '12 at 14:05
that's brilliant – Billy Mathews Jan 14 '14 at 23:43

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.