Quick Tip: Viewing Gradients and Transparencies in OS X Preview

May 1, 2009 Joe Moore

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.

Grey Backgrounds

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.

Show Image Backround

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.

Window Background

Hope that helps!

About the Author


Pondering a low grade slump (4)
Pondering a low grade slump (4)

The concept of flow holds a mystical, holy place in the lore of software development. Nearly any programme...

First Tracker Users Group meeting a success
First Tracker Users Group meeting a success

On Wednesday night we hosted our first San Francisco Tracker Users Group (SF.TUG) It was a great opportuni...


Subscribe to our Newsletter

Thank you!
Error - something went wrong!