Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

I have a huge grid of icons that need to be positioned so that I can write sprites out of them after I'm done.

Right now, I have so many layers, it'd take me forever to click on each one individually and specify the coordinates exactly.

Is there an easy way or a script that allows me to specify in pixels how far apart each icon should be from one another both horizontally and vertically (thereby creating a nice little grid for me with solid values without decimals) ?

share|improve this question
    
FWIW, I usually just use grid lines evenly spaced. So if my largest icon is 20px x 20px I make a grid spaced 20px apart. Then it becomes very easy to write the CSS for it. –  DA01 Jan 8 at 1:18

1 Answer 1

This is a PS script to make Sprite Sheets out of layers. https://gist.github.com/jessefreeman/870172

// Put this file in Program Files\Adobe\Photoshop\Presets\Scripts\
// In PhotoShop menu File > Automate > Scripts: layersToSprite.js

// Arrange layers into a sprite sheet. 

if (documents.length > 0) 
{

    // --------------------------
    docRef = activeDocument;    
    var activeLayer = docRef.activeLayer;

    numLayers = docRef.artLayers.length;    
    var cols = docRef.width;

    var spriteX = docRef.width;

    // put things in order
    app.preferences.rulerUnits = Units.PIXELS;

    // resize the canvas
    newX = numLayers * spriteX;

    docRef.resizeCanvas( newX, docRef.height, AnchorPosition.TOPLEFT );

    // move the layers around
    for (i=0; i < numLayers; i++)
    {   
        docRef.artLayers[i].visible = 1;

        var movX = spriteX*i;

        docRef.artLayers[i].translate(movX, 0);

    }
}

You may also export all the layers as png images first then zip them and upload to http://spritegen.website-performance.org/ or any other sprite generator. That will automatically create the sprites for you.

share|improve this answer
    
This is also a nice sprite generator spritepad.wearekiss.com but auto alignment option is available for premium users. Will require a paid subscription for that feature. –  Fahad Nov 28 '13 at 19:22
    
for some reason, i hit an error when i try to run the script :-( - The command “Transform” is not currently available. Line: 117 -> elem.translate(newX, newY) –  yeahumok Nov 28 '13 at 23:30

Your Answer

 
discard

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.