Share:

" /> Visio Guy » Pixel Unit Dimension Line Shape
Home » Shapes, Web Design, Wireframes & IA

Pixel Unit Dimension Line Shape

Submitted by on February 17, 2008 – 9:26 pm | | 32422 views 5 Comments

Read Full Article

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?

The two sources I found complained that Visio doesn’t support pixel-measurements:

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:

Pixel Unit Dimension Line - Shape Data Fields

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.

Pixel Unit Dimension Line - Example

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!

Pixel Unit Dimension Line for Visio (43.41 KB) - 606

5 Comments »

  • An excellent comprehensive writeup!

    Here is my comparatively simple fix to get Visio to display the rulers and measures in pixel-equivalents:
    http://complexdiagrams.com/2008/06/01/pixel-rulers-in-visio/

    Cheers, Noah

  • Visio Guy says:

    Thanks Noah,

    I’m not sure if your’s is more “comparatively simple” than mine, since I’ve provided ready-to-go shapes that don’t require messing with the scale.

    But I do like the way your rulers look because of the picas, which might be a huge advantage, depending on how people work.

    Since most screens are 96 dpi (aren’t they?) with my template, you don’t really have to think about pixels, you can draw “to scale” so to speak. But if designers typically makes something that is 100 pixels wide, instead of 96, then my template might be hard to work with.

    Another option, that users could follow with my shapes is to make a custom grid. You do this via: Tools > Ruler & Grid. For Grid Spacing, you choose “Fixed”, then enter 1/96 in for the Minimum Spacing. You will then have a grid that shows “one pixel” increments!

    Anyway, thanks for the discussion, your template link and the link to an interesting article!

    - Chris

  • No_Way says:

    Chris, this is an old post but I just downloaded your shape and it’s great and wanted to thank you for sharing this.

  • Visio Guy says:

    Thanks for the kudos, NW!

  • gilb says:

    Hi,

    I would also like to thank you for this tool – I’ve been searching for this option for a long time…

    Thanks a lot :)

Leave a comment!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.

*