Clipart ETC: An online service of Florida's Educational Technology Clearinghouse

 FL Maps > Help Menu > PNG Help

PNG Help

Why would I use a map in PNG format?

The primary reason to select the PNG version of one of our maps is that the PNG format allows for transparent backgrounds. All graphics files are rectangular in shape. If we want to have a graphic that is not rectangular, the only way to accomplish that is for parts of the rectangle to be transparent, so that the graphic appears to have a non-rectangular shape.

What are the advantages/disadvantages of various graphic file formats?

We use three different formats on this site. For most maps, there is one best format, so we choose that one. Sometime however, we offer two formats so you can choose depending on your needs. The following chart will help you decide which might be best for you:
Format: Advantages: Disadvantages: Best Use:
JPEG (also JPG) JPEG is great at reproducing images, such as photographs, that have gradations in color. JPEG does not have a transparency feature, so all images must be rectangular. It also does not work well for solid areas of flat color, because it often produces fuzzy artifacts where there should be sharp edges. Use when the image has a large range of colors or gradations and does not need a transparent background.
GIF GIF is great for reproducing graphics that have large areas of flat color. For these types of graphics, the GIF format allows for excellent compression resulting in a very small file size. Gif also allows for transparent backgrounds as well as animation. GIF is limited to 256 colors, so images with gradation will appear banded. Two hundred fifty-six colors may seem like a lot of colors, but most modern displays can now reproduce 16.7 million colors, so the GIF image is extremely limited in that respect. Use whenever you want a small file size for an image with flat areas of color.
PNG PNG is the only format of the three to allow for millions of colors and transparency. This is the necessary choice if you need a transparent background behind an image with a wide range of colors. Often, the size of a PNG file will be much larger than the corresponding GIF or JPEG. If you don't need both transparency and a wide range of colors, PNG is not the best choice. Use when the image has a large range of colors or gradations and you need a transparent background.

 

How do I use PNG formatted maps in a graphics program?

Most graphics programs can create layered images. Place the PNG in a layer over other layers so that the lower layer shows through the transparent parts of the PNG as in the following illustration using Photoshop:

Photoshop Layers

The background layer is a photo of a house at Yesteryear Village in Palm Beach County. The layer on top is a "fancy frame" PNG with a transparent center. The house shows through the transparent parts of the frame. Once you get the new combination graphic arranged the way you want it, you can save it as a JPEG and post it to your website or use it in a report.

How do I use PNG formatted maps in a presentation?

Presentation software works with layers just like a graphics program. Here's an example using PowerPoint. We first added an old photo of Tampa to the slide. Then we added a fancy frame map of Hillsborough County on top. The photo of Tampa stuck out a bit on the left, so we selected the photo and used the crop tool to cut off the part sticking out.

Powerpoint insertion

Often, you will be using a presentation theme (or template) that has a colored or textured background. In the following example using Keynote, we selected the "crayon line" theme with a rough paper background. We placed the round Florida map on top. The background shows through the transparent areas. For added dimension, we also chose to add shadow and reflection effects.

keynote insertion

Exploring Florida Maps Menu  |  Site Map  |  Search  |  License  |  Credits  |  Maps Help  |


Exploring Florida Maps is a part of both the Maps ETC and Exploring Florida websites.
Produced by the Florida Center for Instructional Technology © 2008
College of Education, University of South Florida.



Clipart ETC Educational Technology Clearinghouse