Sometimes Zazzle designers want to use product images with their designs on it and use them for marketing purposes (and affiliates might want to too). They might want to take a picture of a mug with their design on and place it on the blog header they are creating or create a collage image of several products with their design on it. Those are just a few examples.
So they copy and paste the image into their image editing program. Or save it to their hard drive and open it with their image editing program. And then they start to remove/erase that white background with whatever method they use (eraser, color select, etc).
But there is a much quicker way. And it all involves the url address for the product image. In fact, the mug shown in the image here, I made the background transparent by changing some info in the url address for that image. Crazy, huh?
Getting the Product Image
If you are on a search results page for the image you want to use or in your store area, just right click on it and choose, "Copy Image Url" from the dialogue box that pops up.
However, if you are on the product page itself and try to right click on the image and right click on it...well you are going to get just a teeny tiny clear graphic. This is to try to protect the image from being stolen. So you need to go to where on the product page that it says, "Share" (it's under the "Add to Cart" button as of this writing) and click on that. Then click on "Link to This." There you will see an image of the product. Right click on that image and choose "Copy Image Url" or "Copy Image Location" (depending on what your browser says).
Now...Open a new tab in your browser and paste the url address in there. (This is where the "magic" begins.)
You will probably see something like this.
http://rlv.zcache.com/crazy_retro_cat_coffee_mug-rd884847c4b9f4a5d8fe14a1705c0c604_x7jgr_8byvr_325.jpg
Sometimes you might see a bunch of other things written after the .jpg part. Just delete those if you do see them.
See that number right before the .jpg? That refers to the size of the image in pixels. Just change that to the size you want. I usually like 500 (if you choose 700 or larger it will add product info to the bottom of the picture). Then hit enter on your keyboard. This should change the product image in your browser.
Changing the Background Color
The default background color behind Zazzle product images is white. Say you want to make it black for some reason. To do this add this ?bg=0x00000000 to the end of the url address.
So your url address will look something like this.
http://rlv.zcache.com/crazy_retro_cat_coffee_mug-rd884847c4b9f4a5d8fe14a1705c0c604_x7jgr_8byvr_500.jpg?bg=0x00000000
Now hit the Enter key on your keyboard and see what happens.
What if you want another color? After that little "x" there are eight numbers. The last six numbers represent the color you want. These are Hex Code Colors. These six numbers represent colors and are used in many applications such as html code for websites (your image editing program might use them too).
Find a hex color you want to change the background to and replace those last six numbers with it. In this example I will use a purple hex code "800080"
http://rlv.zcache.com/crazy_retro_cat_coffee_mug-rd884847c4b9f4a5d8fe14a1705c0c604_x7jgr_8byvr_500.jpg?bg=0x00800080
When I hit the Enter key on my keyboard I see the background has turned purple.
Making the Background Color Transparent or Semi-Transparent
Cool. But what if you want the background of the product image to be transparent? We can do this too. (Note: this doesn't work on all product images. The ones I know of are t-shirts and those round "button" keychains, but there might be more.)
Okay, .jpg images can't be transparent, but .png images can. So we are just going to tell Zazzle to go to a .png image instead. Just delete the .jpg part of the url and write .png instead and hit Enter.
So your url address will look something like this.
http://rlv.zcache.com/crazy_retro_cat_coffee_mug-rd884847c4b9f4a5d8fe14a1705c0c604_x7jgr_8byvr_500.png?bg=0x00000000
Now remember that there are eight numbers after that "x" and the last six represents the color? Well the first two numbers represent transparency, this is the Alpha Hex Value (or something like that). Having the first two numbers be zeros makes the image transparent.
If you wanted the background to be solid then you would change the first characters from zeros to two letter f's. So it would be like this "?bg=0xff000000".
If you are interested in making the background semi-transparent check out this chart to find out what digits to use. http://wizti.com/blog/convert-opacity-to-hex-value
Now that you have the image the size that you want and the background color and/or transparency you want you can right click on the image and save it to your computer. Or in some cases you might want to just copy the url address and paste that into what you are using (for example, an online image editor that lets you open an image from a url address such as Pixlr Editor).
Changing the url address to show a .png version of the image and using this little bit of "code" "?bg=0x00000000" in the url address makes so you can get a transparent background on your Zazzle image must faster and cleaner than you would if you did it with an image editing program.
In the past I've been able to copy and paste the image into the application I've wanted to use it in, but that doesn't seem to be working anymore...I just get a black background now.
