adobe photoshop - How to measure the distances in PSD?

I already asked here a question about font types, which are used in PSD layout, but I have another problem: How to measure all distances between objects if in .psd these objects have .png format? I need to do this layout in HTML, So when I start to work, I encountered this kind of problem. Any help is appreciated, Thanks!

Answer

_Ripley's Believe it or not, this was supposed to be a comment at first...

---

Smart guides

In Photoshop CC 2014 you can use smart guides to measure distances.

You can take Move tool, select your layer and press Cmd (mac) or Ctrl (windows). Then you can just point at things and see the distance. The same thing is also shown if you move objects while pressing Cmd (mac) or Ctrl (windows) or if you duplicate by dragging and pressing Cmd+Alt+Shift (mac) or Ctrl+Alt+Shift (windows).

More info here.

You can change the unit at:

Preferences > Units & rules > Units > Rulers: [dropdown-list]

_{I think it's worth to mentioning that there's similar functionality in Sketch.}

---

Quick and dirty

In photoshop CC and newer ^{(maybe cs6 too?)} there is the Transformation values infobox, or what ever it is called.

You can use for example Rectangular Marguee tool to draw and area to quickly get a distance. I use this sometimes to get distances/dimensions if I don't need exact dimensions.

You can activate it here ^{(Should be on by default)}:

Preferences > Interface > Show transformation values: [dropdown-list].

You can change the unit at:

Preferences > Units & rules > Units > Rulers: [dropdown-list]

---

Gettings all layers dimensions

There's this question: Is there a way to export all the layers properties in a PSD file into an organised "legend map" PDF file for the developers?

---

These next two might miss the target a bit, but I feel they are also somewhat related to the question.

---

Extract single layer size

There's this question that's about getting layer size..

---

Exporting layer dimensions / styles to css

Since the question is about website dimensions, I feel that I should mention some options for actually getting dimensions straight to css. You can't get in between values with these methods.

• Native CSS copy method - (free) Photoshop CS6, CC and CC 2014 (Not 100% sure about CS6). You can right click a layer in the Layers panel and select Copy CSS. To copy css off of multiple layers, put them in a group and copy the css from the group.


• css3ps.com - (free) I'm not sure if this compares well with the native ps method. This existed long before the native method existed, so it could be that photoshop caught up, but I'm not sure.


• Css Hat 2 - (~$35) Photoshop CC 2014 only. The first version of this has also been around way before the native method. If you are content with the native method, maybe this is not for you. If you use Less or sass, it's well worth it. Exports to: CSS, Less (Lesshat), Sass (compass) and sass(scss) (bourbon).


• Css Hat 1 - (~$15) Photoshop CS5-CC ( I'm not 100% about cs5 ). Could not find a proper website for this anymore, but the features are pretty much the same as Css hat 2 features, minus everything that says (NEW) in here.