Using Mac Screenshot to Your Advantage
So I’ve been using this method since I’ve realized that I don’t always remember everything; and what I’m talking about is using the Mac Screenshot to measure pixels. If you’re like me and use ‘px’ as your measurement rather than ‘em’ then this may be a technique that you can use as well. So lets jump right in…
When I built out a website I write all the code and export all the images by hand so I have an idea of the width and height of different div’s and images are… but I don’t always remember the exact pixels. For example if I’m trying to position a div tag in a certain spot and I have it set to ‘absolute’ positioning and its off by so many pixels, I just hit Shift + Apple + 4 to activate the screenshot cursor and draw a box the size that I need to move the div tag.
When I do that it shows me the width and height of the box I drew so I have a better idea of how far I need to move the div from the top, right, bottom, or left. Then to avoid taking a snapshot just click ‘Esc’ before letting go of your mouse. So in my preparation if I remember that I was planning on moving the div 25 pixels and my screenshot box is showing 24 pixels, it helps to kick-start my memory so I can just edit the CSS. So rather than playing the guessing game in the CSS to try and position the div tag where I want it; or reopening my Photoshop or Fireworks file to draw a slice and measure it out, it’s a quick way to do a measurement on the fly.
It’s not a perfect method or always an exact method but if you’re like me and try and remember different width and height measurement’s it may be a handy technique.
Have a Thought? Leave Your Comment Here
Toronto condominiums
21 Nov, 2008
Nice tip. I use it all of the time to get a good measurement without having to open files up in Photoshop or Fireworks.
Tamagotchi Town
18 Dec, 2008
Great info, thanks
Pennsylvania Website Design
9 Jan, 2009
Great time saver. thanks for the post. much better than opening photoshop.
greeuniter
28 Sep, 2009
this is actually handy technique, not perfect but it works nice for what i need. much appreciated ..
Furniture Stores Jacksonville
26 Oct, 2009
Ah i didn’t even know you could do this. thanks man.
Nick - Graphic Designer Sydney
12 Nov, 2009
I actually have a little air app at work that just does measurements (I think it is called RULER or something), same sort of thing as you are doing, but this might just be a quicker system if I am just needing to check one distance.
Mike Smull
10 Nov, 2008
Actually, I’ve been doing this myself lately. I don’t know when they measurements starting being shown when doing a screen snapshot, maybe they were always there. But, I use it all of the time to get a good measurement without having to open files up in Photoshop or Fireworks.
Great tip.