I usually get Web page designs that I have to craft HTML/CSS for.

At the moment I use tools such as OS X's own Preview to size up various parts of the designs I get in order to extract widths and heights that I can use in my CSS rules.

Is there a tool that can come handy for doing this? For example, when I draw a rectangle around a specific component in the page, I want it to also permanently show the width/height of that rectangle.

Looking forward for your suggestions.

EDIT: I found a few "ruler" apps on App Store that are very helpful but are not exactly what I am looking for (e.g. they do not annotate the image itself, but rather are on-screen tools).

  • Measuring pixels is a painful way to build web sites. It's a rather antiquated model. But if this is your your group does things, I'd pass the buck...have those making the mockups be responsible for annotating the dimensions.
    – DA01
    Commented May 11, 2012 at 15:43
  • What is the source file you're receiving? PSD? Commented May 11, 2012 at 17:36
  • @DA01 Could you please elaborate? What is the modern and current approach? Commented May 12, 2012 at 4:15
  • @LaurenIpsum PNG. Commented May 12, 2012 at 4:16
  • 1
    For wireframes and numbers, I find pencil and paper much more useful
    – Yisela
    Commented May 14, 2012 at 1:03

5 Answers 5


The info pane in photoshop can do this easily. However nothing I have seen puts this information on the image automatically. you could just add it yourself with the text tool of photoshop.


If you're just looking to place callouts and measurements on the comp page(s), and you are on a Mac, just open the file(s) in Preview and then use the Annotation tools; lines, ovals, comments, etc... This is what I normally use for Image and PDF comps with clients. Cheers!


SpecKing plugin for photoshop will do the job

  • You should remark that the tool is commercial. Please give not only a link, explain how the problem could be solved with this tool.
    – Mensch
    Commented Sep 5, 2013 at 9:08

for annotation and sharing - i love using SKITCH PLUS for this. its free too


If you are using Adobe products, you should be able to get dimensions for any element in your design by selecting it and viewing stats in the Info Panel. I do not know of any tool that will permanently label your designs with dimensional labels.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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