I found some blog posts about pixel rulers for Visio. It seems that folks wanted to dimension their Visio shapes in pixels, which Visio doesn’t technically support by default.
But for folks who use Visio to do web-layout wireframes, information architecture and storyboarding, pixel-dimensioning is a useful thing to be able to do!
An earlier article on Visio Guy served up the Rack Unit Dimension Line, which can actually be configured to measure shapes in terms of pixels. But to save time, I’ve modified that shape and offered it here, for your pixel-dimensioning enjoyment.
Pixel Rulers in Visio?
This is technically correct. While Visio supports units such as millimeters, inches, miles, didots, points, and even time-based units, it doesn’t have pixels built-in. This is probably because Visio is vector-based, and utilizes the full resolution of the device to which it is rendering, be it a 96 dpi monitor, or a 1200 dpi printer.
But if you make a layout in Visio, using the default unit of inches (for users in the U.S.A!), then you can easily assume that 1 inch on the page = 96 pixels on a monitor.
This is a standard assumption, that will start to erode as we see more high-resolution monitors, and move to the next versions of Windows, where Avalon, XAML and WPF (Windows Presentation Foundation) start to offer rendering that is resolution-independent, even on the monitor. Yes, it seems that in the not-so-distant future, we will be able to use much more vector-based artwork in our web-pages and on our Windows forms. But that’s a whole different story…
Modify the Rack Unit Dimension Line…or Not
If you download that Rack Unit Dimension Line shape, mentioned earlier, you need only change a few fields to convert it to a pixel-measuring Visio dimension line.
Since pixels are small and integral, we won’t need any decimals, so we can set Precision = 0. Then we need to define and name the units by specifying: Unit Label = “px” and Unit Size = 1in / 96, if we are assuming 96 dpi in our Visio drawing.
You edit these fields in the Shape Data window. Depending on the version of Visio you are running, the data fields can be displayed via View > Shape Data Window or View > Custom Properties Window. Or just right-click the shape and choose Properties…
The modified properties should look something like this:
But the RackDimension Line is optimized for scaled drawings, and is very black — two qualities that wireframe layouts don’t really need.
Get the Pixel Unit Dimension Line Shape
Today’s download offers you a custom-built Pixel-unit dimension line Visio shape, without a scaled page, and with more tasteful formatting which is appropriate for web-page layout design.
As the example below shows, I’ve given the dimension lines a nice shade of gray, and made the dimension font Arial Narrow, so that it is more subtle on the drawing.
You’ll see there’s also a nifty Image shape, with the “x” ready to go. The Image shape also has pixel dimensions configured, so you can display the dimensions right on the shape. Or you can simply overwrite the text with your own labels. This will erase the dimensioning smarts, but hey, you can always whip out a pixel dimension line shape to show the size!
You can also append the built-in dimension text by double-clicking the shape, or by hitting F2. This gets you into text-edit mode, so that you don’t overwrite the smart fields that display the shape’s dimensions.
If you pull the text off of the image rectangle, a built-in callout points back to the shape. Kind of a neat feature, and an excuse to do a little Visio development using the ShapeShee interface, and keep the ol’ skills sharp.
Hopefully this will help a few of you get your layouts drawn more quickly and informatively!