Changing the Background Color of Zazzle Product Images

There are some interesting and helpful tricks for Zazzle product images that maybe only a few know about. You can change the size and the background color on most (but not all) Zazzle products on Zazzle itself. All without using and image editing program.

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.

Changing the Size of the Product Image

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

What to Do Now?

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.

Free Vector Drawing Apps for Android

Free Vector Drawing Apps for Android

I knew there were some drawing apps for the Android smartphones and tablets. But it suddenly occurred to me that there might be some Android drawing apps that are vector based. So I did a search on the Android Market and sure enough there are some vector based drawing apps. Here are the ones I found. (Note: I have not personally tried all of these.)

Infinite Design – This app has both a free version and a paid version (I’ve linked to the free version). They have a demo video that you can watch that made it look like it is fun to use. The images you create can be saved in either .jpg or .png format. And it can also be saved in .svg format…which you then can then open this file up and use it in other vector programs like Illustrator and Inkscape (they said it has been tested with these two programs…not sure how it would work with other programs). The fact that I can use this with Inkscape is what I really like about this vector drawing app. I did play with this app some and found it kind of confusing. Thankfully there are also a few YouTube tutorials for the Infinite Design vector drawing app to help you figure the features out. I also found it froze up on me a few times, but I am pretty certain this is a problem with my phone (which is running low on internal memory) and not the app.
This app really does seem worthwhile. One review on the paid version of this app even said they thought this app was better than the vector app Ideas by Adobe…which is only available for Apple devices.

Here are a few others that I have only briefly tried or not yet tried myself, but seem promising.

Vector Artist - This looks promising compared to some others. But I found it confusing at times. I would draw some lines, then try editing the points or do something else, and then couldn't figure out how to start drawing more lines again until I fiddled with it for quite some time. And then there are options which I cannot figure out what they do. It's not very intuitive, in my opinion and there are not any tutorials that I know of.

Simplector - One thing I liked about this is that there are help files included to help you learn how to use this. 

SVG Notes - This app is not for creating great art (you will not be able to edit the nodes and such, like you can with some of the other apps I mentioned), but rather for sharing drawings and annotations with others. The product description says that among other things it can  "Sync between two devices, draw strokes in parallel." (I did not test this feature.) Unfortunately, since sharing annotations are one of its main purposes it was too bad that I could not get the text feature to work at all.

imaengine camera effects - This is not a drawing app, but rather takes pictures (either from the gallery on your camera or from your phones camera) and turns them into vectors (with lots of different effects to choose from) that you can save in SVG format and then edit with a vector program such as Inkscape or Illustrator. 
There may be other svg vector editor apps out there that I have not mentioned (as I did not care for them even with a quick glance) or others that I have not even run across. Sometimes I find hunting down certain kinds of apps not so easy. So if you know of any that should be tried, let me know.

Zazzle's Gift Wrap Paper Tutorial

Recently Zazzle.com released a new product for designers to put their designs on. Wrapping Paper! It's really cool. But kind of pricey. Some designers I know have questioned whether anyone would spend that much on wrapping paper.

Well, I think, that if it is unique enough, something that a customer is unlikely to get anywhere else, that they might. And if that wrapping paper can be customized to have the message of their choice on it (such as "Happy Birthday, (Name they choose)" or even a photo of their choice (such as a baby picture of the person celebrating a birthday)...well it doesn't get any more unique than that and some people will be willing to pay for something that personalized.

Shown here is a cool, customizable, text based product that a Zazzle user called "logotees" designed. If you search Zazzle for things such as "custom" or "personalized"  wrapping paper you will find even more examples.

With most of the Zazzle products there is one way you can tile images. You do this by clicking on the icon that looks like a Gear and choose, "Tile this image."

But by default the Zazzle wrapping paper has an additional tile option. There is a place in the tools area, when making wrapping paper, that says "Design Area: Tile." When you use the option then everything you put into that area becomes part of a "tile" that is repeated. (It helps to click on the "Show Art View" icon, that looks like a water drop, in order to see this better.)
The advantage to using the "Design Area: Tile" on the wrapping paper (instead of the Gear Icon "tile") is that everything you put in the the "Design Area: Tile" also tiles...including text that the customer can customize.

If you don't want to use the "Design Area: Tile" option you need to click on where it says that and choose "Design Area: Horizontal" instead.

For the best results when using the "Design Area: Tile" option use a square image. Using an image that you have made to tile seamlessly will work best too. (Use a search engine, such as Google, to look for tutorials on how to make seamless tiles for your image editing program of choice.)

To show you the possibilities of what can be done with the wrapping paper I am going to try to explain how I made this one, shown here. (Click on the image to open it up in Zazzle and see how customers can customize it with their own words and picture.)

Sorry that I do not have pics of the steps. I do have a picture at the end of the tutorial with a diagram of many of the Zazzle options used in the tutorial though.

First, I made an image with a "frame" by cutting the center out and making the center transparent. It has to be a square image to work (since that is the work space size of the "Design Area: Tile").

I added the image to the product, but it made the image too small (leaving white space all around it), so I clicked on the "resize to fit available space" button. I think this needs to be done in most cases, especially if you are using a seamless tile.

Then I added the picture of the baby, and rearranged the order of the images to put it underneath the frame (do this by clicking on the image in the "list" of images and text area, beneath the tools, and "dragging and dropping" the image so it is in the order you want it).

Then I clicked on the Gear Icon and chose the "make this a template object" option to make so the image of the baby can easily be replaced by the customer to an image of their own.

Then I added the text and positioned it and made the text template objects too.

You could leave it at that. But in this case I did a few more things. I thought it looked a little boring so I selected the text and rotated it 30 degrees (to do this hold down the ctrl key and click on the "rotate" button and enter in the degree you want to rotate it to). Then I added another image that was made specifically to tile well to make the bows that repeat.

Below is a picture to help you identify some of the buttons/icons mentioned in this tutorial.

Creating Outlined Text (or Objects) Using Inkscape

A little, basic tutorial showing how I go about creating a simple text design in Inkscape and add a texture/pattern to the text design using GIMP. Although I am using text here this basically can apply to objects you create in Inkscape as well.

 There are three methods that I know of for creating an outline around text in Inkscape.

One is to simply use the stroke option and set the stroke to whatever number thickness you want. However, the stroke fills both the inside and outside of your text, so if you use a large thickness it can end up looking as shown in the first example shown below.

The second optiom is to create a copy of the text and use the Outset option to create an "outline" behind the text.

The third is to create a copy of the text and use the Dynamic Offset tool to create an "outline" behind the text. This third method creates a rounded appearance.

Update: You can use any of these options as a background for your text to create an outline. Just create your text, duplicate it, create your stroke or outline, change the color to what you want your outline to be, then move it back behind your main text.

So how do you create these three different looks?

1. Open Inkscape.
2. Type in your text. (If you plan to add a pattern to the lettering, as the original idea for this tutorial was going to include, I suggest a thick/fat font).

Adding a Stroke to Text:

There are a few different ways to add a Stroke to text or objects in Inkscape. Here is how I usually do it.

Hold the Shift key down and click on the color you want the stroke to be from the color palette at the bottom of the screen. Once you've done that a number appears next to the Stroke area. Right click on that to get a pop up menu of different numbers to choose from. Click on one of those numbers.


Methods for Adding a Background Outline to Text:

Select the text and press CTRL+D on the keyboard to duplicate the text (or select Edit > Duplicate). Select the fill color to be what you want the outline to be. Lower selection to the Bottom (there are a few ways of doing this...one simple way is to select the item and press the Page Down key on your keyboard).

Then choose one of the following:


Method One (Outset):

Select Path > Outset, or use the shortcut keys of ctrl + 0 (that's a zero...Inkscape shows this shortcut as ")ctrl + )" but I find that confusing, it makes me think I need to hold down the shift key to use the parenthesis symbol, but I have never needed to). Repeat until you have the desired thickness for the letters outline.

Method Two (Dynamic Offset): 

Select Path > Dynamic Offset, or use the shortcut keys of ctrl+J. When you do that a little tiny diamond shaped node will appear. Use your mouse to click on the node and drag the node out to increase the size of the object (you can also go in if you want to decrease its size).

GIMP Grunge Tutorial

This is a grunge method using GIMP that I used for working on a large image where I didn't want to use grunge brushes, except maybe for touching up smaller areas.

1. Open a photo of something with a lot of texture in GIMP. (I used an image of a photo I took of part of some metal that was rusty, had peeling paint, gouges, etc. in it. You can also find pictures like this online that are free for commercial use. You can try searching for things like "free textures" or "free textures for photoshop", etc and find some. Here is one source. http://mayang.com/textures)

2. Click on Colors in the menu bar. Chose "Threshold." This turns the layer into a black and white image (you can mess with the options to get the balance of white and black that you want). Click on Okay when you are done. If you like you can also then click on Colors from the menu and then Invert to switch the black and white colors.

This is the result I got.

  

 

3. Add the image you want to "grunge up" as a new layer. (You can do this by clicking on Files and then Open as Layers.)

4. Use the color select tool to either select the white or black part of the texture (choose whichever one you think will give you the results you want).

 

5. Hide the grunge layer by clicking on the "eye" icon (this is actually optional, but I think it makes it easier to see what you are doing) and click on the layer that has the image you want to grunge up and press "Delete" or ctrl+X. Press shift+ctrl+A (or choose Select from the menu bar and then None) to unselect the "grunge" texture.

Here are my results.

As you can tell, a lot of the tail area on this eagle got removed. You can use some grunge brushes to erase some additional areas and fill in some areas where too much areas had been removed.
(There are many grunge brushes that are free to use on the Internet...just search for GIMP or Photoshop grunge brushes. If you are using a GIMP 2.4 and above you should be able to use Photoshop brushes. Just make sure the creator of the brushes allows for commercial use of them if you intend to use your design on print on demand sites or other commercial purposes.)

Or copy and paste bits of the image to fill in areas. Experiment to find what works for you.

You could use this info to create your own GIMP brushes too if you wanted. Here's some links about making GIMP brushes if you are interested.
http://www.gimp.org/tutorials/Custom_Brushes/
http://www.gimptalk.com/index.php?/topic/445-lets-create-some-brushes/

How to Move Your Zazzle Products Into a New Category

For many reasons you may need or want to create a new category in your Zazzle store and move products into it. So here's a step by step guide explaining how to do just that.

(You can click on on any of the images to make them larger for easier viewing.)

1. Go into your Account at Zazzle and click on the Products tab. Scroll down and click on the "All Categories" link in the navigation menu on the left side of the screen. This will open a new page.

2. One this new page click on the "Add new category" link towards the top of the screen.

3. Fill in the Category Name and Description. Then click on Change to change the Thumbnail image for the category

4. Select the image you want for your thumbnail and click on the orange OK button.
You'll be taken back to the previous window (as seen in Step 3). Click on the orange Done button.

5. Click on the Products tab again. Check mark the products you want to move to the new category you created.

6. Click on "Actions" and then on "Set store category."

7. Select the store category you want to move the products to. Then click the orange Done button.


You probably will not see any immediate changes. But don't worry. It can take up to 24 hours (and on rare occasions even longer) for the changes to take effect. Just wait until the next day to see if the products have been moved.

How to Add a Tracking Code to your Zazzle Referral Link

Once you have created an affiliate link with your referral ID you can add a tracking code to it too. The tracking code will make it so if something you refer sells you can know where that sale came from.

You can make the tracking code be anything that you want, so you have your own unique identifier. For example, if you want to see if posting referrals on facebook works for you (what works well for one person may not for another), then you could just use the letters "fb" to mean facebook.

All you need to do is add &tc= to the url with your affilate ID plus whatever you want your tracking code to be after that equal sign. Like so:

http://www.zazzle.com/cupcake_love_keychain-146881358322495734?rf=238018347362090796&tc=fb

And as mentioned I could make the tracking code be anything. So here's another example:

http://www.zazzle.com/cupcake_love_keychain-146881358322495734?rf=238018347362090796&tc=twitterlove

If you make up several tracking ID's you might want to write them down so you can remember them all, what they mean (if you use abbreviations such as "fb" for facebook or if you make up a special "code" that only you would know what it means).

So if something you referred does sell, where do you find out that info? Well go into your account and click on the Referral History link. Underneath the Name of the product that sold and the numbers underneath that it will say "TC:" and then the code you made up. If the referral came from a link that did not have a tracking code then nothing will be underneath the numbers. (Thanks to A_Plus_Products for the screenshot.)