pixDIF – utility for showing you the difference between your design and website/application
I've created an AIR application to help developers and designers measure pixel distances on their screens. You tell if you need pixDIF if you answer yes to any of these questions:
- 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?
- 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?
- 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: 1864 |
| pixDIF is available and FREE to download from these fine outlets |
 |
 |
 |
 |
Watch a short video overview of pixDIF.
3 1/2 minutes
Note: the audio sounds weird because Camtasia can't see chromeless AIR apps. So I had to use Jing to record a screen-cast. Then play that back and use Camtasia to record the recording. The things we go through... |
| 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:
- You install it to your desktop ( Adobe AIR application, see install badge at the top of this post. )
- Launch it
- Drag-and-drop your design comp images into the app
- Select one and it will launch in it's own chromeless window
- 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
- 640x480
- 1024x768
- 1280x1024
- 1680x1050
Banner Ads
- 728x90
- 468x60
- 392x72
- 234x60
Skyscraper Ads
Button Ads
Rectangle Ads
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.
If something here has proved valuable to you then feel free to drop a couple of bucks in the tip-jar.
30 Comments »
30 Responses to “pixDIF – utility for showing you the difference between your design and website/application”
pix dif is a life saver. i have a couple feature requests.
- button to lock pix dif into a specific place. so once i get it placed perfect, the title bar doesn’t move the image
- if possible a way to show pixdif only on top of flex
- possibly a way to save a session. that is the image, the location and any rules
[...] Dan Florio, aka PolyGeek, dropped by my post on the Ten Website Design Tools I Can’t Live Without and dropped a good bomb on me in my comments. He recommended I try pixDif. pixDif is a tool he created to aid in rapid protyping of website designs. It’s super cool! I highly recommend you download and try it out. [...]
Hey Dan, cool app! I love air apps – being on a Mac and all, I think they are great. I’m trying to find some spare time to learn how to create them as well. Tell ya what, if you ever feel like doing some tutorials to that effect I’d be very interested! I’m sure I’m not the only one. So I’m going to download and try out this little baby ;-)
Question: polygeek and ‘mi coda, su coda’… are you a bilingual coder? Is Italian or Spanish your other language (obviously I’m not so talented!). That’s way cool anyway if you are.
[...] pixDIF 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? [...]
[...] Dan Florio, aka PolyGeek, dropped by my post on the Ten Website Design Tools I Can’t Live Without and dropped a good bomb on me in my comments. He recommended I try pixDif. pixDif is a tool he created to aid in rapid prototyping of website designs. It’s super cool! I highly recommend you download and try it out. [...]
[...] pixDIF – Allows you to measure pixel differences easily between comps and design implementations. [...]
[...] PixDIF Te permite medir diferencias de pixeles en forma sencilla entre componentes e implementaciones de diseño. [...]
[...] pixDIF – Allows you to measure pixel differences easily between comps and design implementations. [...]
[...] pixDIF è un’applicazione in Adobe AIR che permette di ottimizzare il nostro layout grafico direttamente sul nostro monitor in modo semplice e intuitivo [...]
[...] pixDIF – Allows you to measure pixel differences easily between comps and design implementations. [...]
[...] pixDIF pixDIF AIR application helps developers and designers measure pixel distances on their screens. With it you can measure the pixel distance/size of something when you’re not in Photoshop, compare how close mockup is to working design. [...]
Hey Dan,
Just wanted to say I use pixDif every day… good job… I wish it did one other thing… i wish it told me what the html or hex color i was that i was over… i use a super simple tool called "pixie" right now and it works phenominally, its free, and super tiny, but it would be nice to combine the two…
example:
say i turn the alpha down on the window that using pixDif on, it would be awesome to see in the top left corner of the title bar the hex code of the color you were over…
thanks
Axel
[...] pixDIF – Allows you to measure pixel differences easily between comps and design implementations. [...]
[...] further to measuring pixels, PixDif additionally lets we magnitude disproportion in between dual pattern elements as well as tweak a [...]
[...] de medir pixeles, PixDif también permite medir la diferencia entre dos elementos de diseño y manipular la opacidad alpha [...]
[...] de medir pixeles, PixDif también permite medir la diferencia entre dos elementos de diseño y manipular la opacidad alpha [...]
[...] pixDIF – Allows you to measure pixel differences easily between comps and design implementations. [...]
[...] addition to measuring pixels, PixDif also lets you measure difference between two design elements and tweak the alpha/opacity of the [...]
Fast, free, and lightweight. Still have some update request in the future: "Color picker in hex on mouse over."
Thanks for sharing this tool.
James
http://www.traffictravis.com/
Very Nice Application. This will help me especially that I really often want to change colors and design to my site. Hope you can still add more features on it. Looking forward for your next features. I want a very good site for my First Edition Books.
Thank you, I worked really work;)
Tokat
[...] addition to measuring pixels, PixDif also lets you measure difference between two design elements and tweak the alpha/opacity of the [...]
judah
