Beginners Guide to Image Transparency (Part 1): Posting Screenshots on the Web

WinSnap handles image transparency very well. All screenshots created with WinSnap can be saved as PNG or TIFF images with transparency. A transparent background is used to fill the area between windows, menus and other objects, while shadows and reflections are semi-transparent.

Picasa - Screenshot with Transparency

What is image transparency? Simply put, transparency is when you can see through parts of an image. Transparency can be full or partial. Fully transparent parts of an image are 100% see-through – that is, you can see the background lying behind them. It is like a clear glass in the real world – you can’t see it, but you can see what is behind it.

Semi-transparent parts mix the background with the image creating a translucency effect. It is like a color glass – you still can see through it, but the glass itself is also visible.

Paint .NET - Screenshot with Transparency

(click here for a larger screenshot)

The above screenshot shows a sample image with transparency. In image editors, transparent and semi-transparent areas of an image are usually represented by the white and gray checkerboard pattern. In this particular case this is Picasa, but transparent screenshots look the same in Adobe Photoshop, Paint.NET and other image editors.

What’s the real advantage of transparency? It allows you to place the same image onto different backgrounds, and it still will look great on any of them. Here are a few real-life examples.

Screenshots with Transparency on the Web

Below is a sample PNG image saved without transparency and placed on two different backgrounds. These background colors are standard for phpBB and other popular forums.

Minesweeper Screenshot without Transparency
Light Forum Background
Minesweeper Screenshot without Transparency
Dark Forum Background

To compare, here is the same PNG image saved with transparency.

Minesweeper Screenshot with Transparency
Light Forum Background
Minesweeper Screenshot with Transparency
Dark Forum Background

As you can see, the image with transparency looks perfect on any background. This is very useful for multi-color web pages – when using a dynamic CMS, or publishing step-by-step instructions on a forum. Your screenshots will always look great with WinSnap!


Next: Part 2 - Putting Screenshots into PowerPoint


Quick Links


HomeTutorialsBeginners Guide to Image Transparency (Part 1): Posting Screenshots on the Web