Submit Hint Search The Forums LinksStatsPollsHeadlinesRSS
14,000 hints and counting!

Measuring screen elements in pixels Apps
Measuring elements on the screen quickly and easily can be really important for all sorts of tasks. I often use the excellent Free Ruler app for this but don't always want to waste time opening it up.

For super-quick measurements just use the built-in screen capture command (Cmd-Shift-4) to drag and measure the element you're interested in instead. Click and drag to measure and to avoid taking a screenshot simply press the Escape key before releasing the mouse button.

I'd not really thought of this as a hint until a fellow designer was astounded when then they saw me doing this, so I thought I would share!

[crarko adds: Free Ruler has been mentioned before but this is a nice quick alternative.]
    •    
  • Currently 3.53 / 5
  You rated: 5 / 5 (34 votes cast)
 
[47,146 views]  

Measuring screen elements in pixels | 17 comments | Create New Account
Click here to return to the 'Measuring screen elements in pixels' hint
The following comments are owned by whoever posted them. This site is not responsible for what they say.
Measuring screen elements in pixels
Authored by: schutt on Jul 20, '10 07:49:16AM

Why didn't I think of that?

A much better option than Free Ruler is PixelStick. It isn't in the way as much as Free Ruler, and it lets you measure angles and distances along an angle too.

Edited on Jul 20, '10 07:51:51AM by schutt


[ Reply to This | # ]
Measuring screen elements in pixels
Authored by: disinfor on Jul 20, '10 07:55:14AM

Yeah, I've been doing this for a while now. It's so fast and easy for web design. I also didn't think it was a hint, but it can save tons of time. I'm glad others will know about this now.



[ Reply to This | # ]
Measuring screen elements in pixels
Authored by: 3mors on Jul 20, '10 08:02:26AM
Rulers does it too. CMD+K = Auto measure
---
3mors


[ Reply to This | # ]
Measuring screen elements in pixels
Authored by: robleach on Jul 20, '10 10:07:38AM
I use apple's own Art Directors Toolkit which has a ruler, but I like the screen cap method.

[ Reply to This | # ]
Measuring screen elements in pixels
Authored by: DougAdams on Jul 20, '10 12:40:28PM

A+

---
Doug's AppleScripts for iTunes
dougscripts.com



[ Reply to This | # ]
Measuring screen elements in pixels
Authored by: kyngchaos on Jul 20, '10 01:17:05PM

ditto for using it for years and not thinking it was hint-worthy.

Note: the hint requires at least Leopard. The coordinates aren't shown in Tiger.



[ Reply to This | # ]
Measuring screen elements in pixels
Authored by: Stormchild on Jul 21, '10 07:09:37AM

Bonus tip: hold down the spacebar after you start dragging, and you can move your entire selection around without starting over. Makes it easy to get the positioning exactly right.

I formed this habit in Illustrator, and at some point I must have tried it as an automatic reflex when taking a screenshot. Was surprised and delighted that it worked. I believe this feature was added in Snow Leopard.



[ Reply to This | # ]
Measuring screen elements in pixels
Authored by: robleach on Jul 21, '10 08:46:21AM

Hey that's really cool. That seems tip-worthy to me in and of itself.

Rob



[ Reply to This | # ]
Measuring screen elements in pixels
Authored by: osxpounder on Jul 21, '10 01:50:05PM

I agree. It's a great tip, and some great tips here in the comments.

I love the part about holding down the spacebar after you start dragging.

I just tried PixelStick and I'm grateful to have learned of it here, in these comments.

Thanks!



[ Reply to This | # ]
Measuring screen elements in pixels
Authored by: petersconsult on Jul 22, '10 03:08:57PM

PixelStick is my favorite measuring tool, but, honestly, i never thought to use the screen capture..
I think that's a really good tip, thank you!



[ Reply to This | # ]
Measuring screen elements in pixels
Authored by: adipoos on Jul 23, '10 05:52:19AM

I love the spacebar trick - very neat! And also really pleased to have found out about PixelStick - I won't use it for everything but I think I'll certainly use it enough that I've already given it a space on my Dock!



[ Reply to This | # ]
Measuring screen elements in pixels
Authored by: _Gekko_ on Jul 23, '10 11:13:03AM

I never thought of using modifier keys for screen capture, but hey, it actually works:
shift: horizontal or vertical selection only, depending on the movement you were making
option: use a centered starting point
option-shift: like shift with centered starting point
space: move it around

so cooool ... thanks .....



[ Reply to This | # ]
Measuring screen elements in pixels
Authored by: RandyInLA on Jul 26, '10 12:28:23PM
For quick screen measurement, I use the G-Ruler widget. Shows pixels, picas, inches & cm in both a width and height mode. Bring in widgets, move the ruler, move the mouse cross hair along the ruler and bingo, it tells you the value.

I've hacked mine so the ruler is wider (1250, soon to be 1920) and made the graphic for the 'ticks' much sharper. Also added individual pixel marks up to the first 100. I'll probably submit my update to the creator when I'm done... but other things always get in the way. It'd be nice if the ruler width was draggable! Then I could make it whatever width/height I wanted...even measure across multiple screens.

For added accuracy, after the ruler is visible, zoom the screen (CMD + OPT + + .... I don't like CMD + mouse), turn off blur CMD+OPT+\ and you can get very anal with your pixels.

I love PixelStick too! Great tip there.

[ Reply to This | # ]
Measuring screen elements in pixels
Authored by: grueni on Jul 27, '10 09:05:29AM

cool !

I use the screen zoom feature for handicapped people and have set it so holding down "ctrl-alt-cmd" and using the scroll-wheel zooms the screen. Maybe good to zoom in first to measure more precisely.
I use screenshots a lot and was blown away by the modifier keys working !!



[ Reply to This | # ]
Measuring screen elements in pixels
Authored by: PixFit on Aug 04, '11 08:16:37AM

Hi guys,

I've recently created a small app that is just amazing when it comes to measuring items on screen. It's workflow is a lot better than a standard ruler. Check it out at http://pixf.it

It automatically finds the edges of the item you want to measure offering you a choice of copying the dimensions to the clipboard in a couple of different formats. Hope you enjoy it.

Cheers!



[ Reply to This | # ]
Measuring screen elements in pixels
Authored by: mityaha on Mar 20, '12 03:30:17PM

Along with a few tools that you have to buy, you can still measure pixels on the Mac with its stock application. There is a Grab utility, you can capture screen selection, it will create window with an image of selected area (not saved to the disc yet), then you can go to Edit -> Inspector and it will show dimensions of selected area (it will also show dimensions as a tooltip during selection process). Good thing is that captured image isn't saved to the disc, you can just dismiss it. Not great, but does the job. It also supports delayed capture which is good for capturing popup menus and such.



[ Reply to This | # ]
Measuring screen elements in pixels
Authored by: David Hein on May 02, '13 02:24:52PM

I second the recommendation of PixelStick. Its an awesome, light and handy little app for anyone measuring (in any app or in maps) and working with colors.
http://plumamazing.com/mac/pixelstick



[ Reply to This | # ]