« New and Innovative Library: Helsinki Central Library Oodi | Main | Grow with Google »

Tip: How to add background color to an image

Screen shot of database icons showing LINKcat, OverDrive, and Tutor.com with white backgrounds, but no white background on Ancestry.comA library director and I agreed the Ancestry.com logo would look better in a group of database links (pictured at right) if the background colors matched... but the Ancestry.com image didn't come with a white background. How can we add background color to an image that has none?

The Ancestry.com image in this example is in .png format, which can have transparent areas that allow the color of a web page to peek through (light gray, in the screen shot). To make the Ancestry.com image "match" the others, the transparent areas need to be filled in white.

For images that only need a white background, the trick is to open and re-save them in Microsoft Paint. Paint auto-fills transparent pixels with white when it saves an image.

Screen shot of saving ancestry-library.png to add a white background

For a different background color, Paint has a "Fill with color" (bucket) tool. In this image, a different color reveals some shadowed areas that look jagged, and it would take some effort to paint or fill in the jagged edges. More fully-featured graphic programs like Photoshop Elements, GIMP, or Paint.net provide layers and a "magic wand" tool to make that kind of cleanup easier.

Screen shot of jagged edges around the Ancestry.com image when a dark background is added.

Good thing we just wanted it to have a white background! Screen shot of the database icons all using matching white backgrounds

Comments

Feed You can follow this conversation by subscribing to the comment feed for this post.

Post a comment