Photoshop Design Tools – Gridulator

by hannah 434 views1

Using grids in web design is a must. The process of using a design grid helps to give a strong visual but also a solid structural balance to the design. The design grid is used for the initial Photoshop visuals and also used throughout front end development to ensure that elements are consistently aligned.

The process of using a design grid in Photoshop can be a long and drawn out task as you decide which column sizes and gutter widths are best for the design and Photoshop doesn’t aid this process. You can create bespoke grids in Photoshop but it is a manual task.

The good news, is that you can finally bin the calculator for working out your Photoshop column and gutter widths. Stuntbox have just unveiled a new app which will reduce your need for calculations and speed up the process.

Using Gridualtor png’s in Photoshop

Gridulator lets you choose your overall width which you are designing to in pixels and choose the amount of columns that you want to work to. It will then process these values and display a list of possible column and gutter widths. You can then preview and download the png file.

Step 1.

The current pixel width or maximum width for a website design in Photoshop is 960 pixels. This is the correct width to ensure that the design will fit a 1024 x 768 browser without any horizontal scrolling.

Open a new document 1200 x 1200 at 72dpi with a white background (This will enable you to design to the 960 pixel width but also allow you to include a design for the background which will be seen by people who visit the final website with monitors set to a higher resolution).

New document window
New document window

Step 2.

Next you will need to visit Gridulator and choose the width of the grid you want and the amount of columns. I am going to use 960 pixels and 5 columns for this example.

enter grid width and amount of columns
enter grid width and amount of columns

Step 3.

A new list will be displayed underneath the overall width and number of column boxes.This shows all the possible options which evenly divide into round numbers for column widths and gutter widths. Choose which one you want to use by clicking on the Make PNG button. I have decided to use a column width of 184 pixels and a gutter width of 10 pixels.

List displaying choice of grid
List displaying choice of grid

Step 4.

Choose to open the file with Photoshop

Open the grid in Photoshop
Open the grid in Photoshop

Step 5.

You should now have a file in photoshop which looks similar to below:

png grid in photoshop
png grid in photoshop

Use the Move tool and click on the canvas – click and drag this onto the 1200 x 1200 document that you made in step 1. To do this you will need to be working in standard screen mode, so that when you drag the layer over the file name of the other document that is open you will be able to move it across. To check this go to View > Screen Mode.

Step 6.

Drag the grid into the middle of the canvas

centre the grid on the canvas
centre the grid on the canvas

Step 7.

Press Ctrl +T or Apple +T to bring up the transform tools.

Use the transform tools
Use the transform tools

Step 8.

Use the top and bottom parts of the transform tool to stretch the height of the canvas.

Stretch the grid over the canvas
Stretch the grid over the canvas

Step 9.

This can now be kept on the upper most layer of your design at a low transparency and be toggled on and off as you need it.

Finished grid
Finished grid

Comments (1)

  1. Hannah , I love this … Your unconditional offering of information is very selfless , I truly see a gifted artist offering tools to those starting out , inspiring others to create … Thank you

    Geoffrey

    Austin Texas , USA

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>