Tip Tuesday: How To Correctly Space Out Elements in Photoshop Creative Cloud

Tip Tuesday: How To Correctly Space Out Elements in Photoshop Creative Cloud

If you’ve ever used Photoshop’s “Distribute Horizontal Center” feature to separate all the elements in your website mock-up’s navigation section, you know that you typically end up with wonky spacing like below:

This is because Photoshop merely adds the calculated average padding irrespective of how long the text is of the navigation item. Layers that are shorter, like “Home” and “Clients” above, get a larger amount of spacing than “Future Projects” and “Our Services.”

To remedy this quirk, install Trevor Morris’s “Distribute Horizontally” script (double-click on the script after downloading). Unlike the functionality native to Photoshop, this oldie-but-still-a-goodie—compatible all the way down to Photoshop CS3—accounts for the individual elements’ widths when determining how much spacing it should add to the layers.

This results in a more even menu:

There are other applications of this script, such as aligning items on a grid, but by far, using this with menu items is most practical.


Myron Mariano’s work in media and digital design spans almost a decade–from ad banner generation, website design and development, to video production–and he’s constantly looking forward to learning new things.

Myron Mariano

Web Designer / Developer

Emails you will look forward to.

Top