{Carrer web log}


Blog about web design & development

Make Photoshop Guides Grid with JavaScript

Thursday, November 03, 2011 { 4 Comments }

Last week I published "Draw Shapes in Photoshop with JavaScript" and I had lot of fun scripting in Photoshop. If you ever made Grid of Guides in Photoshop you know how painful and time costuming it is. I made two scripts that can help you speed up the process of making Guides Grid in Photoshop.


The first script makes Unit Grid with vertical and horizontal units, you can also set the gutter. Example if you want to set 80px grid system with 20px gutter size. You can do MakeGuidesGrid(80,20,80,20); this will set the vertical and horizontal gutters, naturally you can set just vertical guides MakeGuidesGrid(80,20,0,0);


The Script on GitHub
Direct Download of this script

The second script doesn't use units but number of guides. So you can set number of vertical and horizontal guides and the gutter. Lets say you need 12 vertical guides and 10 horizontal guides with gutter of 15px. The function is MakeGuidesGrid(12,15,10,15);


The Script on GitHub
Direct Download of this script

How to use this script.

Download and copy the scripts GuidesUnitGrid.js and NumberGuidesGrid.js inside Photoshop > Presets > Scripts [Folder]

Then you need to go to open Photoshop and than File > Scripts > Browse find the script (where you previously copied it) and click Open.

Dialog box will popup asking the info about the unit size or number of guides or gutter size you need to put just the your numbers inside. And that is it.

Works only in Photoshop CS5 and later. Make sure that the guides are checked View > Show > Guides. To delete the Guides you do View > Clear Guides .

If you have any questions let me know in the comments.



4 Responses to “Make Photoshop Guides Grid with JavaScript”

  1. // Anonymous m2 // 11/07/2011

    You may use modulargrid.js too, there is a grid and guides there  

  2. // Blogger Vladimir // 11/08/2011

    @m2: Thanks for the link.  

  3. // Anonymous Anonymous // 2/11/2013

    Hello Vladi,
    thank you for the scripts, very easy. But I think you should change the prompt in the MakesGuidesGrid, for the horizontal gutter instead of Vertical gutter(that is already asked for, in the first question)  

  4. // Blogger Lex Wills // 1/20/2016

    Thanks for the script, very useful. Made a slight tweak because I justed wanted to say 'gimme a 10x10 grid please' instead of pixel coordinates, and have attached modified version below incase it's useful to anyone.



    // Prompt user for grid dimensions
    var dimension = GetDimension();

    // Verify input is correct (a number and between 2 and 100)
    while(isNaN(dimension) || dimension < 2 || dimension > 100)
    {
    if(dimension == null) break; // If user entered nothing then just stop looping and let them exit

    alert("Please enter a number in the range of 2 to 100"); // Show error message
    dimension = GetDimension(); // Re-prompt user for grid dimensions until they enter correct dimensions, or null (nothing)
    }

    // If received valid input, create grid now
    if(dimension != null) MakeGrid(dimension);



    // Get grid dimension from user
    function GetDimension()
    {
    return prompt("How many spaces should the grid have?", 10, "Guide Grid "+activeDocument.name);
    }

    // Function to create both x and y guides
    function MakeGrid(dimension)
    {
    MakeGuides(dimension, app.activeDocument.width, Direction.HORIZONTAL);
    MakeGuides(dimension, app.activeDocument.height, Direction.VERTICAL);
    }

    // Function to actually create guids
    function MakeGuides(total, area, direction)
    {
    spacing = area / total;
    for (var i = 1; i < total; i++)
    {
    app.activeDocument.guides.add(direction, i * spacing);
    }
    }  

Post a Comment

<< Home

RSS IconTwitter icon Twitter icon Twitter icon

About Me <<<

Name: Vladimir Carrer
vladocar [at] gmail.com
Location: Verona, Italy
I'm a web designer, developer, teacher, speaker, generally web addicted ...

My projects <<<

§§Previous Posts <<<

Hand Drawn Icons
Photoshop Wireframing Kit Ad

 

Other Profiles <<<

View Vladimir Carrer's profile on LinkedIn

Content is licensed under a Creative Commons Public Domain License