Tell me more ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.
up vote 1 down vote favorite

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
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 K Dec 18 '11 at 16:57

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

4 Answers

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 K Dec 18 '11 at 16:58
up vote 3 down vote

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 K Dec 18 '11 at 16:57
up vote 1 down vote

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 K Dec 18 '11 at 16:59
up vote 0 down vote

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.