Removing the Background of an Image
In this tutorial we'll be walking through how to remove a black background of an image so that it can be displayed nicely on a website.
For the purpose of this tutorial, I've taken the VoodooPad icon and inverted it so that the background is black.
The easiest way to incorporate this image into a website would be to simply add a nicer border, or round the corners, but we'll go a little bit more in depth.
After bringing our image into Acorn and selecting the magic wand tool.
We'll then click on the color that we would like to disappear, this will select it, and make diagonal lines through the part of the image that is going to be saved. It can sometimes be hard to see if this worked well, but thats why theres an undo button.
We'll now hit the Delete key. Right now my image looks a little like this:
What happened? The clipboard in the image has a little white glow coming from it, so the wand was selecting everything that was black, it saw the white glow and stopped selecting. This ends up making that little seemingly black halo around the image. What we need to do is to tell the Wand tool to select more colors, not just black, but dark greys as well.
We're going to change the value that says "wand tolerance"
This value tells the wand how many colors around the one we clicked on will be selected. The higher the number, the more colors it selects.
0 is the lowest and 255 is every color. I had mine set to 20, but it apparently wasn't enough. With a little experimentation, and using the Edit->Undo command a lot, I've decided that 90 is the right number for my job.
Still not perfect though, the edges are still sharp and jagged, so lets undo again. This time we're going to click on the black to select it, just like before, but before hitting Delete, we're going to to go to the Select Menu -> Feather. And we're going to enter in a value, in my case, 2.
This is going to smooth out the selection and make the edges nice and soft. Hit "OK" and then Delete.
Progress. There's still a funny black border due to the feathering, which can be removed by cropping, or with the eraser.
Now our image is ready to go on the web!
Choose File-> Save As or File-> Export to Web and save it out. Saving it as a JPG will automatically add a white background to it again, so it you want the background to be transparent, you'll need to save it as a PNG.
Back to Acorn -> Tips and Tricks