pixDIF

I’ve created an AIR application to help developers and designers measure pixel distances on their screens. You can tell if you need pixDIF if you answer yes to any of these questions:

1. Do you ever find that you need to measure the pixel distance/size of something when you’re not in Photoshop? Or, put another way: do you wish you could take the guides in Photoshop with you to the computer desktop?
2. Do you ever want to know what a graphical asset will look like in the context of a website or application. For instance, do you wish you could take an image and move it around over your website to see what it would like like in various places before you start writing the code to place it there?
3. Do you ever have a website or application design that you need to break up into pieces and build into a working site/app? And then as you write the code you need to see how close to the design you are?

If you answered yes to any of these then I’d suggest taking a quick gander at the video overview below. It doesn’t do a lot but it is very handy for what it does.

Total downloads to date: 3628
pixDIF is available and FREE to download from these fine outlets

When you launch it you’ll see an empty window just waiting for you to drag-and-drop some images into it – .png, .jpg, or .gif.

You can drag in one or more images and they will tile the window here.

When you click on any thumbnail it will open in it’s own chromeless window.

You can change the alpha/opacity of the image.

You can create and drag guides around. pixDIF also displays the pixel distance between the last two selected guides – vertical and/or horizontal. That makes it very easy to determine how much you need to move elements in your app around to match the design.

Here’s how pixDIF works:

1. You install it to your desktop ( Adobe AIR application, see install badge at the top of this post. )
2. Launch it
3. Drag-and-drop your design comp images into the app
4. Select one and it will launch in it’s own chromeless window
5. You can now move that window over your functional app and look for the differences

Features:

• alpha fading of the image
• turn the image visibility off
• create horizontal or vertical guides
• drag the guides around
• use the guides to measure pixel distances very precisely
• use the arrow keys to move the guides – if it’s selected/red
• or use the arrow keys to move the image/window around on your desktop
• hold down the shift key to move 10 pixels at a time

Default Blank Images
pixDIF comes with a variety of default images that you can select from.

Monitor Sizes

• 640×480
• 1024×768
• 1280×1024
• 1680×1050

Banner Ads

• 728×90
• 468×60
• 392×72
• 234×60

Skyscraper Ads

• 160×600
• 120×600
• 120×240

Button Ads

• 125×125
• 120×90
• 120×60

Rectangle Ads

• 336×280
• 180×150

Min/Max toggle

As you can see in the image to the right I’ve added a min/max toggle button to the options toolbar. Now when you’re using very narrow images the toolbar won’t stick way out to the right. But you can always open the toolbar back up and make adjustments if you need to.

Known Bugs

• When dragging a vertical guide to the far left: if the mouse moves beyond the application border the guide pops into view at the far right. I traced some mouseX values and sure enough, it’s reporting the far right pixel value of the screen. It might be an AIR bug. I could probably code around it. But then maybe you could just not try and drag a guide off the window to the left. ;-)

Features on my 2Do list to add to pixDIF

• Full screen mode
• Ability to annotate screen (draw circles or things over areas i need to fix)
• Ability to print what is on the screen (annotations, etc)
• Save annotated screen as PNG/JPG
• Zoom
• Toggle to lock a window into a specific place. So once you have it placed perfect, the title bar doesn’t move the image
• Save a session: the images, window locations and any rules

Please comment below if you can think of any other features you would like for me to add.