Looking for a tool to annotate the Web page mockups I am given with sizing info before I craft HTML/CSS for them

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


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.

Source : Link , Question Author : Behrang , Answer Author : skids89

Leave a Comment