Clearing background around sprites


#1

When students upload a picture for their sprite, is there an easy way to delete everything around the sprite. We have tried using the paint bucket but it does not seem to delete right up to the sprite.


#2

The shape selection tool (magic wand icon) will select all of a single color and then you can click the delete key and it will delete all of that selection, but if you have a complicated background (not all one color), you would probably have to use the lasso selection, rectangle selection or eraser tools. A tip I give my students when they search for images to use for sprites is to search for .png files (ie. search terms: pumpkin png). Many (not all) png files already have transparent backgrounds and that transparency is preserved when they upload.


#3

Also, if your students are using a Mac. Have them open the image in Preview and click on the Toolbox icon:

Then Click on the Magic Wand tool:

Click and drag the tool on the background of the image until the background is sufficiently removed:

Let go of the mouse and you’ll see dashed lines to represent what the tool had grabbed.

Hit the “delete” key and Viola!


#4

Yes. Good tip! You can also do that using Photoshop or other image editors as well, but you have to make sure and save it as a .png because a .jpg and other file formats don’t maintain transparency when you save them.


#5

Thanks for the info! Unfortunately we have Windows 7 and Chromebooks. No macs in my school. I was hoping there was a way to do it in code.org rather than using a photo editing tool.


#6

They do have the lasso and the magic wand and the eraser on code.org, so there are some rudimentary tools, in fact the image above would be easy to do on code.org by using the magic wand (shape selection) tool and the delete key. It’s when you get complicated images (images with detailed backgrounds) that image editing software can make the job easier.