1 Super Easy Way to Splitting Sprite Sheets and getting rid of those awful white backgrounds!
micma
Member Posts: 66
Hello fellow game designers! Have you ever been tired of cropping out images, one by one, from a sprite sheet? I know I have. How many of you all have been stuck with that terrifying white background behind your image and don't know how to get rid of it? Well, today I am going to show you how to quickly split images and clear those white backgrounds using two free to use websites. Here is how:
1) Create your spritesheet. I use iDraw. I think it is about $25 on the mac app store. You can use what ever you like though, from GIMP to Photoshop. This can consist of buttons for levels, animations, or whatever. Make sure it is in grid form so it has rows and columns. Then take a screenshot of your sprite sheet and crop it out. (Making it so that you dont see your computer background just your spritesheet you (or someone else >:) ) have made.
2) Go to http://www131.lunapic.com/editor/ . (don't put the period there :P ) Upload the image using the little browse button. When the image is done loading, click on the edit tab and down at the very bottom of that menu you will see another button that says transparent. Click on that and then click the color you want to make transparent (normally white but maybe you have different colored backgrounds, which is perfectly fine ) *Note the color you want to make transparent, will transparentize every speck of that color, so if you want a little white in your actual image, then put a little bit of gray in there so it isn't white* When you are done, drag the picture straight out of lunapic and drag it onto your desktop, it should look like this: blahblahblahblah.gif the blahblahblahblah will be a bunch of numbers.
3) When you get rid of the white (or green or blue or whatever color) background, you then need to go to a website called http://imagesplitter.net/ .(Once again without that period there) They also have a google Chrome app too but for me, the chrome store is down right now so i can't get it. You want to grab the picture from your desktop and put it into the little upload thing and click upload. When it is uploaded, it take you to a page where it asks you if you want to convert or resize your image. I normally don't do this so that my images don't get fuzzy by stretching them out to far. Once you get done with resizing (if you chose to) then click on split image at the top. When you get to this page, enter in the number of rows and columns you have in your image and it will make an automatic grid using the size of the image (really helpful). MAKE SURE THAT THE GRID IS NOT OVERLAPPING ANY OF YOUR IMAGES. If it is, go back to the program you created the spritesheet with, and spread them out. Now, once you are done with that, make sure you click on the little drop down menu and select .gif from the box and NOT .jpeg. The reason why is because the image was imported as a .gif and so in order to keep the transparency of the background, we have to use .gif . Once you hit the split image button, it will automagically send a zip file to your computer and when you unzip it, it will have a folder with all of your images, transparentized and split. *Note: It has a separate file for each image which is really handy.*
I have been spending months trying to find ways to do this and I hope it helps you out a lot. If you have any questions or comments, feel free to put them in the messages below.
Thanks so much,
Micma
1) Create your spritesheet. I use iDraw. I think it is about $25 on the mac app store. You can use what ever you like though, from GIMP to Photoshop. This can consist of buttons for levels, animations, or whatever. Make sure it is in grid form so it has rows and columns. Then take a screenshot of your sprite sheet and crop it out. (Making it so that you dont see your computer background just your spritesheet you (or someone else >:) ) have made.
2) Go to http://www131.lunapic.com/editor/ . (don't put the period there :P ) Upload the image using the little browse button. When the image is done loading, click on the edit tab and down at the very bottom of that menu you will see another button that says transparent. Click on that and then click the color you want to make transparent (normally white but maybe you have different colored backgrounds, which is perfectly fine ) *Note the color you want to make transparent, will transparentize every speck of that color, so if you want a little white in your actual image, then put a little bit of gray in there so it isn't white* When you are done, drag the picture straight out of lunapic and drag it onto your desktop, it should look like this: blahblahblahblah.gif the blahblahblahblah will be a bunch of numbers.
3) When you get rid of the white (or green or blue or whatever color) background, you then need to go to a website called http://imagesplitter.net/ .(Once again without that period there) They also have a google Chrome app too but for me, the chrome store is down right now so i can't get it. You want to grab the picture from your desktop and put it into the little upload thing and click upload. When it is uploaded, it take you to a page where it asks you if you want to convert or resize your image. I normally don't do this so that my images don't get fuzzy by stretching them out to far. Once you get done with resizing (if you chose to) then click on split image at the top. When you get to this page, enter in the number of rows and columns you have in your image and it will make an automatic grid using the size of the image (really helpful). MAKE SURE THAT THE GRID IS NOT OVERLAPPING ANY OF YOUR IMAGES. If it is, go back to the program you created the spritesheet with, and spread them out. Now, once you are done with that, make sure you click on the little drop down menu and select .gif from the box and NOT .jpeg. The reason why is because the image was imported as a .gif and so in order to keep the transparency of the background, we have to use .gif . Once you hit the split image button, it will automagically send a zip file to your computer and when you unzip it, it will have a folder with all of your images, transparentized and split. *Note: It has a separate file for each image which is really handy.*
I have been spending months trying to find ways to do this and I hope it helps you out a lot. If you have any questions or comments, feel free to put them in the messages below.
Thanks so much,
Micma
Comments
If you want a transparent background, make your background transparent rather than white.
I'd also question taking a screen shot of your images at anything other that 1:1, why not simply reduce the image to the required size within your application ?
I hate to be frank here, but this really isn't how you should be working.