Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

I'm looking for a tool where I can quickly annotate my Photoshop/Illustrator designs with the distances in pixels between different elements and / or the edges, so I can then transform the layout into code without having to switch between programs and measure distances all day.

I've been searching Google for a while, without any results. Is there something like that?

share|improve this question

migrated from ux.stackexchange.com Dec 16 '11 at 20:47

This question came from our site for user experience researchers and experts.

1  
If you're having to measure pixels in photoshop, I feel for you. That's the wrong way to go about building web sites. –  DA01 Dec 16 '11 at 22:29
    
@DA01: I'm not building web sites but anyway, thanks four your constructive feedback. –  Philip Kamenarsky Dec 18 '11 at 16:57

4 Answers 4

up vote 3 down vote accepted

You don't mention how much you want to spend for this tool, but OmniGraffle can do this.

Here's an example using a portion of this page. I set the page ruler units to pixels, then created line objects with labels that contain dynamic text. I double-clicked the bottom label to show the text variable used to show the pixel dimensions.

OmniGraffle image annotation

I'm using OmniGraffle Pro, but I imagine regular OmniGraffle has this feature as well; I don't remember dynamic text being one of the Pro features.

OmniGraffle is available on the App Store for $99.99; Omnigraffle Pro for $199.99. I like the software a lot - I imagine you'd find many other uses for it as well.

share|improve this answer
    
Exactly what I'm looking for! Just waiting too see if there's a way to do this natively in AI, if not I'm accepting this. –  Philip Kamenarsky Dec 18 '11 at 16:58

None, use an additional layer in Photoshop/Illustrator to contain all of you annotations. This way you can easily turn it on/off when you need to and it is all contained within the same document.

If for some reason you are not the creator of these files and you do not have access to Photoshop of Illustrator, try out Skim.

share|improve this answer
    
Yes but the problem is that I'd have to measure all the distances manually, then create labels containing the measured distances etc. Is there a way to let AI do this automatically? –  Philip Kamenarsky Dec 18 '11 at 16:57

I know only screen annotation apps like Skitch, Voila or Little Snapper. Apps not support photoshop or illustrator formats.

Or some desktop sketching apps like Desktastic or FlySketch.

share|improve this answer
    
I checked out Skitch and Voila, but they don't seem to support automatic distance measurement in annotations :/ –  Philip Kamenarsky Dec 18 '11 at 16:59

RasterEdge provides annotation capabilities for users if they want to annotate, redact information on images and documents, it is worth trying.

share|improve this answer

Your Answer

 
discard

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.