Pixelmatrix Design

I often work in vector when I design in Photoshop, and those of you who also work in vector know what I mean when I say it can be an absolute pain to make shapes line up exactly on a pixel. A friend of mine recently showed me a great tip that I have been using pretty consistently that has really saved me a lot of time with this!

No need to install any extra software, this feature is built right into Photoshop:

To get started you want to open your Photoshop preferences (Cmd-K on Mac).

Next, go to the “Guides, Grid, Slices & Count” area.

Then, where it says “Grid” set the following preferences:

• Color - Custom (choose a medium gray color)
• Gridline every - 32 pixels
• Style - Lines
• Subdivisions - 32

What this does is set up a grid line on every pixel, so you can see the individual pixels a lot easier. But wait—there’s more!

Now you’re going to want to turn on your grid to actually see what we’ve just created. Do that by going to View → Show → Grid (Cmd - ‘ on Mac). You’ll also want to make sure that View → Snap to → Grid is on as well.

To use this feature with Photoshop’s powerful vector tools you may have to modify your workflow a little bit. If you’re drawing a shape it should snap to the grid automatically, but if you’re resizing a shape you can’t just resize and expect it to work. Here are a couple of methods to use:

Resize Proportionally

Resize using the Selection tool (holding Shift as you normally would), but as you are about to release from dragging the shape to the desired size make sure the edge of the selection is near a grid line and release shift before releasing the mouse. This will allow the shape to snap to the grid.

Editing Nodes

This may not make sense to some people, but i’ll do my best to explain it. If you are resizing a shape by selecting nodes and dragging them, then the grid is not going to help. When you have selected more than one node point in a shape and start to drag, Photoshop moves the nodes, but it will not snap to the grid. You must drag the nodes individually to points on the grid for this to be of any use to you.

Using the Brush/Eraser

Do NOT, I repeat do NOT use the grid while you are working with small brushes. For whatever reason, it seems that when you try to draw a pixel it will automatically draw in the grid space nearest to the mouse. This means, if you do not have your mouse perfectly centered in the box it will not go where you want. The fix is simple, just turn off the grid when you are actually going to draw.

I find it best to turn on the grid only when I need to line up pixels and quickly turn it off again when i’m finished. That way you can still see your work without a bunch of lines through it. I hope this will help other fellow designers struggling with this issue! Let me know if it helps for you in the comments!