Using Image Backgrounds: Transparent and White

Using transparent images on your web pages can often create a more interesting layout allowing the background to ‘shine’ through.

Graphics programs such as Photo Shop  or Paint Shop Pro  allow you to create transparent images that can be saved as either GIF or PNG files. Never as JPEGs.

Creating  a Transparency

Transparency in an image is created when you select an area to be non-viewable.   This can either be the background or a part of an object.

If you are starting with a complete picture, graphic or scan, you will need to select the area you want to keep and the area you want to make transparent. If the area you are keeping is a collection of objects, i.e., building, people and cars, you can capture the images using the graphics program’s tool designed to perform this task.   In Paint Shop Pro this tool is the ‘Magic Wand’.  In addition, most graphics programs also have ‘optimizers’ that allow you to make portions of an image transparent.   For our purposes of discussion, we’re going to base our post on having captured an image.

Once you have the image captured, you can paste it as a new image giving it a transparent background and then saving it as a PNG file.   (Saving it as a GIF file will make the background  white.)  Once you’ve saved your file, you can use it as a transparency or layer it with other images.

If creating your own transparent graphics from the start, you may want to use a non-common color for the background. Once you’ve completed the image, you will need to designate that color as being transparent before saving the file. This works like the ‘green screens’ used on TV.

Note the difference in the backgrounds behind our two blue ball images.  The gray-checkered background in the PNG image above will not be visible; the green background below will display if you do not designate the color to be transparent.  In both samples, we’ve used white for the background, however, the ball would display as a transparent image  on any background.

Tip: When creating graphics with many different components, i.e., multiple images, text, various effects, colored or transparent background, etc. , it is best to use the ‘layer’  feature of your graphics program for ease in making any changes or additions later.   Also, we recommend keeping  two copies of these image files: the original layered image  and the finished PNG, GIF or JPG file.

Implied Transparency

An easier way to achieve a ‘simulated’ or implied transparency can be accomplished by assigning the same background color to the graphic as on the page where it will display.

This only works well if you are using a solid color for the background. Any texture, shading or gradient to the background on the page makes it difficult to have the image blend in and look like it is part of the background.

White background

While you could simply use the ‘implied’ background method for getting a white background – like commonly seen in product catalogs – there is a program that allows you to accomplish this – ArcSoft Photo Studio.

To use this program you outline the portion of the image you want to retain (we’ve only outlined the left portion of the left ball to show the difference), then follow the program prompts. When you finish, you will have an image of the object on a white background you can save as a PNG or GIF.

Note: In this case the background will be white – not transparent even if saved as a PNG, although it could be used as a transparency on a page with a white background. (Some details and clarity have been lost due to sizing.)

ArcSoft Photo Studio  is very useful in not only does it have this ‘magic cut’  function but also it comes with a 3D Factory for inserting 3-dimensional text that you can position, rotate and/or animate (12 different animations). This feature is very helpful in grabbing the viewer’s attention.

Comments are closed.