0

I am creating a web page base on adobe photoshop file. There are tons of images that vary in dimensions and spacing. Is there a way to view the dimensions of each element in px or em? Is there a way to view the spacing between elements in px or em?

Here is an example from Google Sketchup, but of course I want do this in Photoshop. I'm assuming that it must have this feature and that I'm just missing something.

Google Sketchup Dimensions Example

  • Being a raster app in nature... I don't think I've ever seen a dimensioning tool for Photoshop. Would be interesting though. – Scott Jul 22 '14 at 16:05
  • What version of Photoshop are you using? – gburning Jul 22 '14 at 16:10
  • I am using Photoshop version CS5. – user300272 Jul 22 '14 at 20:38
0

A while back I found this plugin for dimensioning in Photoshop. wuwacorp.com/specking/

  • Wow this is exactly what I was looking to find. – user300272 Jul 22 '14 at 20:44
0

Yes, you can do both of those things. There are a number of ways:

1. Use Smart Guides and the Ruler tool.

  1. Bring out the Rulers via View > Rulers. Then right click either one of them to select which unit to display your measurements in.

  2. Bring out the Info panel via Window > Info.

  3. Make sure you have Smart Guides enabled (View > Show > Smart Guides) and that your cursor snaps to them (View > Snap To > Guides).

  4. Make new guides at the start and end of the distance you want to measure (easily done by dragging from the rulers at the top and left of your screen).

  5. Bring out the Ruler Tool (it's in the same place of the toolbar as the Eyedropper Tool so you can either right click that or cycle through those tools with Shift+I).

  6. Using the Ruler Tool, click and drag between the two guide lines. Use shift while dragging to keep the line perfectly straight/diagonal. This will measure the distance between the guides and show it in the options bar at the top of your screen – as well as in the Info panel.

  7. Obviously, if you don't need such precise measurements you don't need to use Smart Guides. They are only there to make the snapping easier.

2. Select layer area through thumbnail (only measures layer)

  1. Bring out the Rulers via View > Rulers. Then right click either one of them to select which unit to display your measurements in.

  2. Bring out the Info panel via Window > Info.

  3. Simply Ctrl+Left Click (Cmd for Mac) on the desired layer thumbnail in your layers panel. This will select all the contents of that layer. Now you can see the size of the layer in the Info panel (of course, this does not take into account any space between the elements in the layer).

3. CC 2014 only: Select layer and hover (only measures distance between layers).

  1. With the CC 2014 version of Photoshop comes a very handy new feature that will show you the distance between layers. To use it you simply have to select the layer you want to measure from and hover over the content you want to measure the distance to with Cmd(Mac)/Ctrl(Windows).

  • These steps only seem to give me the information for one element at a time in the "info panel". I want to show all dimensions at once. – user300272 Jul 22 '14 at 20:37
  • Oh, ok. I'm sure it might be possible in some way, possibly through saving the results to the measurement log and creating a script that prints that info to your document instead of having to do it manually. But that honestly sounds pretty complicated for such a simple thing. Photoshop wasn't really made to do this. You might try Fireworks as that works easily with Ps files. Other than that I'm afraid I simply don't know how to help. – gburning Jul 22 '14 at 22:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.