30 May, 2017

Alpha Channel in the Wedding Album Online Editor

Desktop-based professional wedding album design software often supports alpha channel functionality and most importantly, the ability to blend photos into each other as shown below:

Transparent vignette example 1
Wedding album design examples of photos blended into each other

Since our wedding album design software is web-based and therefore runs in any modern web browser, we were of the opinion that alpha channel functionality is not possible to implement. Until recently that is - it is true that no browser as of yet supports bit mask functionality that allows to selectively and dynamically modify the alpha channel value of individual pixels of JPG images, but this does not mean that alpha channel functionality can't be supported by our online album design software. This article demonstrates the "creative" solution to the problem we came up with.

Vignette - the functionality for which alpha channel matters.

The Vignette effect - this subtle shade around images that can give them a touch of "patina" or a magical enchanted look - is widely used in digital wedding album design. Even without alpha channel support it is still a very useful effect that can also be used to create a smooth transition between photos and the background, provided that the background is filled with a single solid color.

Transparent vignette example 2
Various examples of different usages of vignette effect

With the support for alpha the vignette becomes even more useful - it allows you to create smooth transitions between foreground- and background photos or between photos that are next to each other.

Transparent vignette example 3
Examples of vignette effects with alpha channel

How to implement WYSIWYG without browser support for alpha.

Any decent design software works according to the "What you see is what you get"-principal (WYSIWYG), but how can we provide transparent vignettes with our online software, which runs in contemporary web browsers that don't support the rendering of alpha bit mask effects. This is why we did not support this functionality initially, thinking it would be too confusing for the users of our Online Editor. However, given that our underlying Java-based rendering engine can easily support alpha bit mask operations, we came up with the following solution:

Transparent vignette example 4
Browser display of transparent vignette in blue

In a reference to the chroma key composition technique that is widely used for special effects in movies to remove backgrounds from the subjects, we have made it so that a bright blue vignette color (RGB value: R:0, G:0, B:255) will get translated to alpha by our rendering mechanism. The output of the example above would look like this:

Transparent vignette example 5
Result of transparent vignette example above

We believe this "work-around" is acceptable from a usability point of view, since this kind of bright blue would hardly ever serve as a suitable color in a reasonable wedding album design, where subtle colors are used predominantly. Sure enough this is not a pure WYSIWYG solution, but nevertheless, for a browser-based wedding album design solution it is very useful and workable.

You are welcome to give it a try yourself here. We are welcoming any feedback on contact@sweetmemoryalbums.com.

As seen on:


Customer support


We have the answers! Please contact us or refer to our FAQ.