Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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).

share|improve this question
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 May 11 '12 at 15:43
What is the source file you're receiving? PSD? – Lauren Ipsum May 11 '12 at 17:36
@DA01 Could you please elaborate? What is the modern and current approach? – Behrang May 12 '12 at 4:15
@LaurenIpsum PNG. – Behrang May 12 '12 at 4:16
For wireframes and numbers, I find pencil and paper much more useful – Yisela May 14 '12 at 1:03

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.

share|improve this answer

SpecKing plugin for photoshop will do the job

share|improve this answer
You should remark that the tool is commercial. Please give not only a link, explain how the problem could be solved with this tool. – Kurt Sep 5 '13 at 9:08

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

share|improve this answer

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!

share|improve this answer

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.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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