1

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!

  • A side note - when I measure pixels on my Mac screen, I press alt+shift+4 to get the screen capture tool. When dragging, the coordinates are previewed. Works in Photoshop and everywhere else :) – Henrik Ekblom Sep 1 '14 at 15:42
3

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.

enter image description 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.

enter image description here

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.
  • Please make sure that View > Show > Smart Guides (Tick that) for this to work. – Nevin Madhukar K Mar 5 '18 at 5:53
1

You don't need to use plugin, if I am getting this right all you need to do is :

-- Open Photoshop

-- Press f8 (info bar will show)

after that just use the marquee tool(press M, its shortcut) and draw the marquee between items, it will show you the distance in info palate.

It might show you the distance in px,inch,cm or any other format in that case press ctrl+k and go to units and ruler and then set units accordingly.

Screenshot

I hope this will help.

-1

You can use this plugin: Specking Photoshop Plugin

  • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. – Scott Sep 1 '14 at 7:07
  • @Scott - I understand your point, but this is a direct link to a product, it's not linking to a page explaining the solution or something. It's a Photoshop plugin, there is nothing more to add. – Shacks Sep 2 '14 at 21:19
  • 1
    You can add what the plug in does, a product description, etc. There is a great deal you can add. – Scott Sep 2 '14 at 21:26
  • Meta: As a reader of this answer, I don't need more info. Just the link. Specs of a plugin change as its being developed. I'd rather watch up-to-date tutorials and screenshots from their website. – Alph.Dev Apr 1 '15 at 12:22

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.