As web developers in the Web 2.0 world, we work with transparencies and gradients all the time. Sometimes we get a bunch of assets from a designer and can’t easily see how the visual assets are constructed: what parts are transparent? Is the background grey or transparent? How drastically does a gradient fade? Get some answers quickly by tweaking OS X Preview.

Tip #1: Show Image Background

These four images from OS X have a lot of grey in them, making it hard to see the transparencies and gradients.

Tell Preview to show the image’s background in View => Show Image Background so you can at least see the dimensions and transparencies. But, this leaves a lot to be desired since it’s still pretty hard to see the grey pieces.

Tip #2: Change Background Color

I like this one even better: change Preview’s window background color to something something that definitely will now show up in your images by going to Preview => Preferences => Window Background. Here I’ve chosen “Tangerine” and you can very easily see the dotted lines in ftvpnode.png and might be surprised to find out that the bottom part of user_14.png is not actually a transparent gradient, but a grey gradient.

Hope that helps!