I am attempting to convert this Star Wars image file to Sprite so that I can use several of the individual drawings. However, it seems that I can only use Sprite if the background is not completely white, but rather a checkered white-grey pattern (not sure why this is?). Is there a way to convert the file into a Sprite image? I attempted ZeroSprites.com, but it still gave me the white background; I'd like to be able to render each of the drawings without the white background so that the characters' outlines blend in smoothly into my main background.
Thanks!
It's best if you have the images as vector and export it as .png
Removing white background is possible but it won't be as good as the original.
You can follow this video tutorial: https://www.youtube.com/watch?v=SV38L4c4JKY
Here's the same image as png:
http://cubeupload.com/im/cSEdTC.png
Related
i am creating a Rock Paper Scissors game for The Odin Project.What i want to do is: instead of click buttons to do the choice, i want to put circular pictures of Rock/Paper/Scissors and click these to make the choice.
I found some pictures online, so i was trying to find a way to crop them in a circular way, and the background to be transparent.
I found online that a tool to do this, is GIMP. I did everything correctly there, the picture has this gray-grid background, but still when i put the picture on the html, still is shown as a square with white background.
This is what i see in GIMP:
and this is what i get on HTML:
.
I am doing everything correctly on GIMP and also i am exporting the picture to .png .
Any help would be highly appreciated
in GIMP, i added an Alpha channel, i did the crop, the background was transparent there, i exported the file as a .png (clicked "Do not save background colour), and still the picture doesn't appear transparent
My client would like me to animate in a header for a HTML5 banner letter by letter. The font for the header is not a web font, it is Museo Slab, so I have included it as a PNG over the background image. The background image is not a solid color, it is a picture of a person. I thought of having a piece of the background image cover the title and slowly animate it out to give the same effect, but it did not work as well as if you were implementing this idea with a solid color background image.
I am wondering if there is a way to animate in the PNG header image using TweenLite that will give the impression that this PNG appearing letter by letter. Any ideas? The only thing I can think of is saving out a separate PNG for each letter and animating those in one by one, but that will take forever to implement and will increase the overall size of the advertisement. Is there a better way?
Thanks for your help!
You can use sprite image for the letters and change the position of letters using tweenlite.
I am loading some images and I want to go from PNG to JPG to have a smaller file size. However as JPG there is no transparency information so the background of the image shows up as white.
How can I make this white background be transparent once I load my images?
Thanks in advance
I am assuming that you want to change the white pixels to transparent pixels at runtime. First I'll just say that the BEST answer , is to just use the PNG format. My opinion is that doing something like this at runtime is not a good solution. If you have that many images that the file size matters, then the runtime processing brings along it's own negative of a long pause while processing the images.
I personally would explore what I could do to decrease the size of the PNG files, and would likely NEVER use a solution like this.
However, if you choose to go this route, what you need to do is this :
Convert the image to a BitmapData with an alpha channel.
Loop through the BitmapData and make those pixels transparent.
or
Use the threshold() method of BitmapData.
As someone mentioned in the comments for your question, using white as the background color is not a good idea as ALL white pixels will be made transparent, not just the background ones.
So choosing a color that is not in the palette of any of these images is what you want to use as a background color
As a commenter noted, the threshold() method of BitmapData would probably work best.
JPG (Technically, JPEG File Interchange Format) files, as understood by common browsers and graphics applications, do not support storing an alpha channel with the image like PNG does. Depending on your application, you might want to store a separate black-and-white "image" file which is the transparency mask for the JPG, and use the pair. There are extensions to the format that can be used in custom software, but they won't be understood elsewhere.
But first, make sure that JPG is really what you want to use. JPG is only appropriate for "photographic" images, which don't typically have transparency masks (though there are certainly exceptions). If the image is more Icon/Drawing-like, then it is likely that JPG won't be much smaller than the PNG anyway, and have ugly aliasing artifacts, so just optimizing the PNG will give you better results.
You may want to consider embedding the png's in a Flash library, then export as swf. You can then use Flash to compress your png using the lossy JPEG algorithm, but it will still keep the alpha channel. This could result in much smaller file sizes but with the benefit of keeping the 8-bit alpha channel (each pixel has 256 transparency levels).
By masking out a specific color, you'll only get a 1-bit alpha mask (a pixel is either fully visible or completely hidden.) You can also run into problems like when the color in the image corresponds with the matte color, which deletes pixels from the actual image you want to display.
The other problem with using a matte color in a JPEG image is that the JPEG compression will leave artifacts, especially around the edges of the object and the matte color. This makes it hard to properly mask out a specific color.
i have images and i want to remove 2 angles of each image.
The removed part should be transparent, and this is the part i couldn't fix.
Here are 2 images the shows what i want to do:
This is an empty image. The white color is the part i want to show. The Blue part is showing the document background gradient color.
This is what should i get at the end. The blue part again, is transparent from document gradient color.
Anyone has idea?
In webkit browsers you can use mask-box-image. Put your image in a div with the image-mask class and then use mask-box-image with a transparent png
.image-mask {
-webkit-mask-box-image: url(your_mask.png);
}
There is an excellent article on the always brillient CSS Tricks website - http://css-tricks.com/webkit-image-wipes/
It's webkit only though I'm afraid.
Some may not like my non-code answer, but you could do it in the image itself? Please don't hate me for suggesting this, but sometimes code doesn't solve all.
Save the image as a PNG.
Make sure the layer you are working on is not the "background" layer, if you are in Photoshop.
Erase/use the marquis tool to delete the part of the image you want to be transparent. You can blur the edges of the marquis tool to make it "fade."
Depending on your settings in Photoshop or other editing program, the "transparent" section should be a checkered grey and white.
Save the image as a PNG and use it instead of the coded mask.
Granted, this doesn't work if you are dynamically loading images or have some other reason you are relying on code to mask your image, but it should work. Early versions of IE have some issues with PNGs, but I've not encountered it with IE9, IE8 or IE7 in my current project.
I noticed that many of the sprites on the internet has a solid color background and not transparent i am sure there is a reason behind that but what is it ?
like this one :
http://www.spriters-resource.com/gameboy_advance/gs2/sheet/47045
I can remove the bg using photoshop but if this was the purpose why people didn't save it as transparent png in the first place.
what is the easier way to use this sprites in flash it doesn't make sense to me to cut each one and put it in a separate frame i am sure there is an easier way.
Sprite sheets are not meant to be sliced up into different images before compilation. Rather, they are mainly used for a technique called blitting which involves copying the pixels from the spritesheet onto the display at runtime (traditionally done for a performance gain over the standard Flash display list rendering).
You can read up on blitting here: http://www.8bitrocket.com/2008/7/2/Tutorial-AS3-The-basics-of-tile-sheet-animation-or-blitting/
And on how to actually remove the background when blitting: http://active.tutsplus.com/tutorials/animation/blitting-with-as3-removing-a-bitmaps-background-color/