2

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

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

5 Answers 5

Reset to default
1

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.

Improve this answer
1

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!

Improve this answer
1

SpecKing plugin for photoshop will do the job

Improve this answer
1
  • 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
    Sep 5, 2013 at 9:08
0

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

Improve this answer
0

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.

Improve this answer

Your Answer

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

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