Top  
Newsletter 9/20/2022 Back to Contents

Yet Another Another Cool Tool From Microsoft PowerToys.
Introducing the Mighty Useful (if you are a web designer) Screen Ruler

I am involved in a web project with a long term client and friend.  This project is as much as labor of love as it a learning experience for the principle involved.  What the project entails is displaying a page of thumbnails that when clicked open to a full screen page of just the single image.  Ideally, the page with the full image would display the entire image without any scrolling needing to be done.  So sizing of the image takes on critical importance.  The problem with exact sizing of a digital image is that image does not physically exist within dimensions measured in inches, or millimeters, or any other usual method of measuring things.  A screen image on a web page is measured in pixels, usually expressed width by height.

Up until now, at least for me, finding the right dimensions for a web image, has been a guessing game.  And Trial and Error does get tedious, especially when doing your first web project.  But now the Microsoft PowerToys Screen Ruler takes out some of the guess work and tedium out digital image presentations.

Now if y'all ain't yet hip to the groove that is the MS PowerToys, then click on over to my Introduction to PowerToys, complete with installations instructions.
 

Now what if I wanted to add an element that was the exact same dimensions as the menu on the left ?  I would need to know the dimensions width x height of that region of the page.  Before PowerToys Screen Ruler, I would basically create an image based on my best guess of the region's dimensions.  Place it on the page and then do endless tweaking to get it right.  But now I can measure that space exactly.

When you type the KB shortcut of Windows Key + Shift + m activates the Screen Ruler.  You can measure width or height separately.  I chose to use the control labeled Rounds here.  Click the square icon for Rounds and then scroll to outline the region you want to measure. As you scroll, a red line will outline the region you highlighted and the dimensions in width x height will appear.  Below is an amazing recreation of the techniques.  Print screen only dumped the dimensions.

The PowerToys Screen Ruler is a must have tool for anyone who works with the digital display of graphic images.  When you take the guesswork out of the technical side, then you can spend more time and energy creating your masterpiece.

 

Measure Twice Cut Once
Second Frutes, John Florio, (1591)

Gerald Reiff
Back to Top previous post next post TBA