Zazzle…the machine that goes PING!

by

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.Sample transparency with PNG

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.

  1. Open up Photoshop and create a design as you normally would
  2. If your design has transparent areas make sure you turn off any background layers
  3. When done with the design, choose File->Save For Web… (or hit ALT-SHIFT-CTRL-S)Save For Web
  4. This opens a big save dialog. On the right, under preset, select PNG-24Save For Web dialog presets
  5. Make sure the Transparency checkbox is checked
  6. 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!

9 Responses to “Zazzle…the machine that goes PING!”

  1. ElToroDeTepito Says:

    Nice tips! Thanks!

  2. Clara Chandler Says:

    I always use PNG files. Are they different from PNG24 files? Just curious… I *LOVE* this techblog, BTW!

  3. Ed Caggiani Says:

    PNG24 files are PNG files. It’s just that they are 24-bit images, which means they support 16.8 million colors. An 8-bit PNG only supports 256 colors. Both PNG formats use the same file extension (.PNG). Most graphics software will either default to 24 bit, or give you the option when saving.

  4. Clara Chandler Says:

    Thanks, Ed. I just now got back to read this thread. Appreciate the info!

  5. Occitania Says:

    I have been re-uploading some of my artworks as indeed the PNG format is very kind to my kind of digital painting, respecting the color and crispness so much more! 100 % better. Great move!

  6. owlspook Says:

    I create all my images in PNG files (well some TIFF) and absolutely hated to have to convert dupes into JPG for uploading to Zazzle …

    however I’ve used Paint Shop Pro v7 and have been recently learning how to use GIMP in linux .. now going to have to figure out how to do it in these programs (smile)

    most appreciated of your sharing of this information …thanks so much!

    and thanks to ecaqqiani’s link to this article in the forum!

  7. Dena (aka LionEyes) Says:

    BUT…

    When you “save for web” it creates a low resolution file, suitable for…well…the web! NOT for printing purposes. So, I guess I need someone to explain to me how this is a win/win situation!

  8. blog Says:

    hi

    wonderful post

  9. Christian Hinton Says:

    t7fijr0lamfonwg7

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


Follow

Get every new post delivered to your Inbox.

Join 670 other followers

%d bloggers like this: