Transparency in computer graphics is possible in a number of file formats. The term "transparency" is used in various ways by different people, but at its simplest there is "full transparency" i.e. something that is completely invisible. Only part of a graphic should be fully transparent, or there would be nothing to see. More complex is "partial transparency" or "translucency"[citation needed] where the effect is achieved that a graphic is partially transparent in the same way as colored glass. Since ultimately a printed page or computer or television screen can only be one color at a point, partial transparency is always simulated at some level by mixing colors. There are many different ways to mix colors, so in some cases transparency is ambiguous.
Most vector formats implicitly support transparency because they simply avoid putting any objects at a given point. This includes EPS and WMF. For vector graphics this may not strictly be seen as transparency, but it requires much of the same careful programming as transparency in raster formats.
More complex vector formats may allow transparency combinations between the elements within the graphic, as well as that above. This includes SVG and PDF.
A suitable raster graphics editor shows transparency by a special pattern, e.g. a checkerboard pattern.
Transparent pixels
This image has binary transparency (some pixels fully transparent, other pixels fully opaque). It can be transparent against any background because it is monochrome.
One color entry in a single GIF or PNG image's palette can be defined as "transparent" rather than an actual color. This means that when the decoder encounters a pixel with this value, it is rendered in the background color of the part of the screen where the image is placed, also if this varies pixel-by-pixel as in the case of a background image.
Applications include:
an image that is not rectangular can be filled to the required rectangle using transparent surroundings; the image can even have holes (e.g. be ring-shaped)
in a run of text, a special symbol for which an image is used because it is not available in the character set, can be given a transparent background, resulting in a matching background.
The transparent color should be chosen carefully, to avoid items that just happen to be the same color vanishing.
Even this limited form of transparency has patchy implementation, though most popular web browsers are capable of displaying transparent GIF images. This support often does not extend to printing, especially to printing devices (such as PostScript) which do not include support for transparency in the device or driver. Outside the world of web browsers, support is fairly hit-or-miss for transparent GIF files.
Edge limitations of transparent pixels
This image has binary transparency. However, it is grayscale, with anti-aliasing, so it looks good only against a white background. Set against a different background, a "ghosting" effect from the shades of gray would result.
The edges of characters and other images with transparent background should not have shades of gray: these are normally used for intermediate colors between the color of the letter/image and that of the background, typically shades of gray being intermediate between a black letter and a white background. However, with, for example, a red background the intermediate colors would be dark red. Gray edge pixels would give an ugly and unclear result. For a variable background color there are no suitable fixed intermediate colors.
Partial transparency by alpha channels
This image has partial transparency (254 possible levels of transparency between fully transparent and fully opaque). It can be transparent against any background despite being anti-aliased.
Some image formats, such as PNG and TIFF, also allow partial transparency through an alpha channel, which solves the edge limitation problem. Instead of each pixel either being transparent or not transparent, it can be set to 254 levels of partially transparent, allowing some of the background image to show through the foreground image.
A major use of partial transparency is to produce "soft edges" in graphics so that they blend into their background.[1] See also monochrome or with shades of gray and anti-aliasing. Partial transparency can also be used to make an image less prominent, such as a watermark or other logo; or to render something see-through, such as a ghostly apparition in a video game. Animating the alpha channel in an image-editing program can allow smooth transitions between different images.
The process of combining a partially transparent color with its background ("compositing") is often ill-defined and the results may not be exactly the same in all cases. For example, where color correction is in use, should the colors be composited before or after color correction?
This image shows the results of overlaying each of the above transparent PNG images on a background color of #6080A0. Note the gray fringes on the letters of the middle image.This shows how the above images would look when, for example, editing them. The grey and white check pattern would be converted into transparency.
Transparency by clipping path
An alternative approach to full transparency is to use a clipping path. A clipping path is simply a shape or outline, that is used in conjunction with the other graphics. Everything inside the path is visible, and everything outside the path is invisible. The path is inherently vector, but can potentially be used to mask both vector and bitmap data. The main usage of clipping paths is in PostScript files.
Compositing calculations
While some transparency specifications are vague, others may give mathematical details of how two colors are to be composited. This gives a fairly simple example of how compositing calculations can work, can produce the expected results, and can also produce surprises.
In this example, two grayscale colors are to be composited. Grayscale values are considered to be numbers between 0.0 (white) and 1.0 (black). To emphasize: this is only one possible rule for transparency. If working with transparency, check the rules in use for your situation.
The color at a point, where color G1 and G2 are to be combined, is ( G1 + G2 ) / 2. Some consequences of this are:
Where the colors are equal, the result is the same color because ( G1 + G1 ) /2 = G1.
Where one color (G1) is white (0.0), the result is G2 / 2. This will always be less than any nonzero value of G2, so the result is whiter than G2. (This is easily reversed for the case where G2 is white).
Where one color (G1) is black (1.0), the result is ( G2 + 1 ) / 2. This will always be more than G2, so the result is blacker than G2.
The formula is commutative since ( G1 + G2 ) / 2 = ( G2 + G1 ) / 2. This means it does not matter which order two graphics are mixed i.e. which of the two is on the top and which is on the bottom.
This is important as it means that when combining three or more objects with this rule for transparency, the final color depends very much on the order of doing the calculations.
Although the formula is simple, it may not be ideal. Human perception of brightness is not linear - we do not necessarily consider that a gray value of 0.5 is halfway between black and white. Such details may not matter when transparency is used only to soften edges, but in more complex designs this may be significant. Most people working seriously with transparency will need to see the results and may fiddle with the colors or (where possible) the algorithm to arrive at the results they need.
This formula can easily be generalized to RGB color or CMYK color by applying the formula to each channel separately. For example, final red = ( R1 + R2 ) / 2. But it cannot be applied to all color models. For example, Lab color would produce results that were surprising.
An alternative model is that at every point in each element to be combined for transparency there is an associated color and opacity between 0 and 1. For each color channel, you might work with this model: if a channel with intensity G2 and opacity T2 overlays a channel with intensity G1 and opacity T1 the result will be a channel with intensity equal to (1 - T2) * G1 + G2, and opacity 1 - (1 - T2) * (1 - T1). Each channel must be multiplied by corresponding alpha value before composition (so called premultiplied alpha). The SVG file specification uses this type of blending, and this is one of the models that can be used in PDF.
Alpha channels may be implemented in this way, where the alpha channel provides an opacity level to be applied equally to all other channels. To work with the above formula, the opacity needs to be scaled to the range 0 to 1, whatever its external representation (often 0 to 255 if using 8 bit samples such as "RGBA").
Transparency in PDF
Starting with version 1.4 of the PDF standard (Adobe Acrobat version 5), transparency (including translucency) is supported. Transparency in PDF files allows creators to achieve various effects, including adding shadows to objects, making objects semi-transparent and having objects blend into each other or into text. PDF supports many different blend modes, not just the most common averaging method, and the rules for compositing many overlapping objects allow choices (such as whether a group of objects are blended before being blended with the background, or whether each object in turn is blended into the background).
PDF transparency is a very complex model, its original specification by Adobe being over 100 pages long. A key source of complication is that blending objects with different color spaces can be tricky and error-prone as well as cause compatibility issues. Transparency in PDF was designed not to cause errors in PDF viewers that did not understand it – they would simply display all elements as fully opaque. However, this was a two-edged sword as users with older viewers, PDF printers, etc. could see or print something completely different from the original design.
The fact that the PDF transparency model is so complicated means that it is not well supported. This means that RIPs and printers often have problems printing PDFs with transparency. The solution to this is either to rasterize the image or to apply vector transparency flattening to the PDF. However vector transparency flattening is extremely complex and only supported by a few specialist packages.
Transparency in PostScript
The PostScript language has limited support for full (not partial) transparency, depending on the PostScript level. Partial transparency is available with the pdfmark extension,[2] available on many PostScript implementations.
Level 1
Level 1 PostScript offers transparency via two methods:
A one-bit (monochrome) image can be treated as a mask. In this case the 1-bits can be painted any single color, while the 0-bits are not painted at all. This technique cannot be generalised to more than one color, or to vector shapes.
Clipping paths can be defined. These restrict what part of all subsequent graphics can be seen. This can be used for any kind of graphic, however in level 1, the maximum number of nodes in a path was often limited to 1500, so complex paths (e.g. cutting around the hair in a photograph of a person's head) often failed.
Level 2
Level 2 PostScript adds no specific transparency features. However, by the use of patterns, arbitrary graphics can be painted through masks defined by any vector or text operations. This is, however, complex to implement. In addition, this too often reached implementation limits, and few if any application programs ever offered this technique.
Level 3
Level 3 PostScript adds further transparency option for any raster image. A transparent color, or range of colors, can be applied; or a separate 1-bit mask can be used to provide an alpha channel.
Encapsulated PostScript
EPS files contain PostScript, which may be level 1, 2 or 3 and make use of the features above. A more subtle issue arises with the previews for EPS files that are typically used to show the view of the EPS file on screen. There are viable techniques for setting transparency in the preview. For example, a TIFF preview might use a TIFF alpha channel. However, many applications do not use this transparency information and will therefore show the preview as a rectangle. A semi-proprietary technique pioneered in Photoshop and adopted by a number of pre-press applications is to store a clipping path in a standard location of the EPS, and use that for display.
In addition, few of the programs that generate EPS previews will generate transparency information in the preview.
Some programs have sought to get around this by treating all white in the preview as transparent, but this too is problematic in the cases where some whites are not transparent.
More recently, applications have been appearing that ignore the preview altogether; they therefore get information on which parts of the preview to paint by interpreting the PostScript.
In computer graphics, alpha compositing or alpha blending is the process of combining one image with a background to create the appearance of partial or full transparency. It is often useful to render picture elements (pixels) in separate passes or layers and then combine the resulting 2D images into a single, final image called the composite. Compositing is used extensively in film when combining computer-rendered image elements with live footage. Alpha blending is also used in 2D computer graphics to put rasterized foreground elements over a background.
Digital compositing is the process of digitally assembling multiple images to make a final image, typically for print, motion pictures or screen display. It is the digital analogue of optical film compositing.
Portable Network Graphics is a raster-graphics file format that supports lossless data compression. PNG was developed as an improved, non-patented replacement for Graphics Interchange Format (GIF)—unofficially, the initials PNG stood for the recursive acronym "PNG's not GIF".
Scalable Vector Graphics (SVG) is an XML-based vector image format for defining two-dimensional graphics, having support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium since 1999.
Vector graphics is a form of computer graphics in which visual images are created directly from geometric shapes defined on a Cartesian plane, such as points, lines, curves and polygons. The associated mechanisms may include vector display and printing hardware, vector data models and file formats, as well as the software based on these data models. Vector graphics is an alternative to raster or bitmap graphics, with each having advantages and disadvantages in specific situations.
2D computer graphics is the computer-based generation of digital images—mostly from two-dimensional models and by techniques specific to them. It may refer to the branch of computer science that comprises such techniques or to the models themselves.
Bit blit is a data operation commonly used in computer graphics in which several bitmaps are combined into one using a boolean function.
RGBA stands for red green blue alpha. While it is sometimes described as a color space, it is actually a three-channel RGB color model supplemented with a fourth alpha channel. Alpha indicates how opaque each pixel is and allows an image to be combined over others using alpha compositing, with transparent areas and anti-aliasing of the edges of opaque regions.
Java 2D is an API for drawing two-dimensional graphics using the Java programming language. Every Java 2D drawing operation can ultimately be treated as filling a shape using a paint and compositing the result onto the screen.
Digital illustration or computer illustration is the use of digital tools to produce images under the direct manipulation of the artist, usually through a pointing device such as a graphics tablet or, less commonly, a mouse. It is distinguished from computer-generated art, which is produced by a computer using mathematical models created by the artist. It is also distinct from digital manipulation of photographs, in that it is an original construction "from scratch". Photographic elements such as background or texture may be incorporated into such works, but they are not necessarily the primary basis.
Color digital images are made of pixels, and pixels are made of combinations of primary colors represented by a series of code. A channel in this context is the grayscale image of the same size as a color image, made of just one of these primary colors. For instance, an image from a standard digital camera will have a red, green and blue channel. A grayscale image has just one channel.
The X Rendering Extension is an extension to the X11 core protocol to implement image compositing in the X server, to allow an efficient display of transparent images.
An image file format is a file format for a digital image. There are many formats that can be used, such as JPEG, PNG, and GIF. Most formats up until 2022 were for storing 2D images, not 3D ones. The data stored in an image file format may be compressed or uncompressed. If the data is compressed, it may be done so using lossy compression or lossless compression. For graphic design applications, vector formats are often used. Some image file formats support transparency.
In computer graphics, a palette is the set of available colors from which an image can be made. In some systems, the palette is fixed by the hardware design, and in others it is dynamic, typically implemented via a color lookup table (CLUT), a correspondence table in which selected colors from a certain color space's color reproduction range are assigned an index, by which they can be referenced. By referencing the colors via an index, which takes less information than needed to describe the actual colors in the color space, this technique aims to reduce data usage, including processing, transfer bandwidth, RAM usage, and storage. Images in which colors are indicated by references to a CLUT are called indexed color images.
In computer graphics, a fragment is the data necessary to generate a single pixel's worth of a drawing primitive in the frame buffer.
Layers are used in digital image editing to separate different elements of an image. A layer can be compared to a transparency on which imaging effects or images are applied and placed over or under an image. Today they are an integral feature of image editor.
Blend modes in digital image editing and computer graphics are used to determine how two layers are blended with each other. The default blend mode in most applications is simply to obscure the lower layer by covering it with whatever is present in the top layer ; because each pixel has numerical values, there also are many other ways to blend two layers.
Deep image compositing is a way of compositing and rendering digital images that emerged in the mid-2010s. In addition to the usual color and opacity channels a notion of spatial depth is created. This allows multiple samples in the depth of the image to make up the final resulting color. This technique produces high quality results and removes artifacts around edges that could not be dealt with otherwise.
Image editing encompasses the processes of altering images, whether they are digital photographs, traditional photo-chemical photographs, or illustrations. Traditional analog image editing is known as photo retouching, using tools such as an airbrush to modify photographs or editing illustrations with any traditional art medium. Graphic software programs, which can be broadly grouped into vector graphics editors, raster graphics editors, and 3D modelers, are the primary tools with which a user may manipulate, enhance, and transform images. Many image editing programs are also used to render or create computer art from scratch. The term "image editing" usually refers only to the editing of 2D images, not 3D ones.
This is a glossary of terms relating to computer graphics.
This page is based on this Wikipedia article Text is available under the CC BY-SA 4.0 license; additional terms may apply. Images, videos and audio are available under their respective licenses.
