The Portable Network Graphics format (PNG) is a relatively new beast on the web. It’s been around since 1995, but has only recently been gaining popularity amongst web designers now that the major browsers all support it to some degree.
One thing the PNG format is good at is full alpha transparency. Sure, the tried and true GIF image format can set one of its colors to be transparent, but with PNG, you get virtually unlimited levels of transparency! That means you can design an image that fades to whatever background happens to be behind it.
The sample image to the left shows what is possible when saving an image using PNG24 (The 24 refers to 24-bit images. That’s 16.8 million colors! GIF, on the other hand, only supports 256 colors). Notice the peace sign is semi-transparent and shows the alien underneath it at various levels of transparency. Let’s see GIF try to do THAT!
(NOTE: The image sample above is NOT an actual PNG, but rather a JPG. Microsoft Internet Explorer versions 6 and under do not properly handle PNG transparency, and for the purpose of this demonstration, a JPG image was simply more practical. Don’t worry, Internet Explorer version 7 has fixed PNG transparency, so we recommend upgrading. Firefox and Safari users need not worry.)
So how does this help me on Zazzle?
Ok, so this is all well and good, but how can you, as a designer of products for the Zazzle marketplace, take advantage of this? Simple! Always upload PNG24 images! When Zazzle receives an image file for printing, it actually converts the file for display in browsers, but uses the full truecolor, transparent 24-bit PNG file for printing. So if your image fades out, it will fade to the color of the material behind it (red t-shirt, white mug, another image…)
How do I make PNG24 files?
The steps below are for users of Adobe Photoshop. Other image editing programs may differ.
- Open up Photoshop and create a design as you normally would
- If your design has transparent areas make sure you turn off any background layers
- When done with the design, choose File->Save For Web… (or hit ALT-SHIFT-CTRL-S)
- This opens a big save dialog. On the right, under preset, select PNG-24
- Make sure the Transparency checkbox is checked
- Click the Save button, enter a filename, then click Save
Tada! You now have a truecolor transparent PNG! Now upload it to Zazzle and create, create, create!