Friday, October 17, 2014

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.

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.

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"

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.

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.

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.

Tuesday, May 27, 2014

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.