• Please use real names.

    Greetings to all who have registered to OPF and those guests taking a look around. Please use real names. Registrations with fictitious names will not be processed. REAL NAMES ONLY will be processed

    Firstname Lastname

    Register

    We are a courteous and supportive community. No need to hide behind an alia. If you have a genuine need for privacy/secrecy then let me know!
  • Welcome to the new site. Here's a thread about the update where you can post your feedback, ask questions or spot those nasty bugs!

Photoshop - the "light gray checkerboard"

Doug Kerr

Well-known member
This is today's entry in the "Kerr's least useful Photoshop fact" contest.

*************

In Photoshop, a light gray checkerboard pattern (that's the default - we can redesign it if we wish) is said to show "transparent pixels". That's actually accurate, but in a way that may be a little more complicated than we recognize. In some situations, it may be a little difficult to figure out what the thing we see means (especially when we see a combination of a faded checkerboard and a faded actual color, and in multi-layer situations with masks having semitransparency and various blending modes).

There's another, completely-compatible outlook on the meaning of the checkerboard that can help us unscramble some of the difficult situations. (Experienced Photostat wallopers will of course be able to grasp as much as they need to know intuitively, but we telephone engineers sometimes need to have a block diagram.)

I'll lead up to it.

If we have a file with two or more image layers, we see the checkerboard where the composite image is transparent. That's hardly strange; we see red where the composite image is red.

If we look at the mechanism, we realize that the composite image is transparent only where every one of the component layers is transparent. (We will assume Normal blend mode throughout.)

But we can look at what happens a different way. Lets imagine we have two layers, Upper and Lower. (By the way, no masks are involved here.)

Where the Upper layer content is transparent, we "see right through it". What do we see? The content of the Lower layer there.

Suppose that in all or part of that region, the Lower layer content is also transparent. What happens there? Again, we "see right through it". What do we see now?

There being no further layer below, we see right through into the "great empty beyond"?

What does that look like? Well, not like anything. But Photoshop helps us out by making the "great empty beyond" look like a gray checkerboard (on screen).

Said another way, it is as if, for visual purposes only (that is, with respect to what we see on the screen), Photoshop has placed below the lowest layer of the stack a ground sheet covered with the gray checkerboard.

And in this outlook, that's what we really see, not the "transparent-ness" of the pixels on either of the layers as such.

Now, suppose we have only a single layer, with a colored square in its center and the remainder transparent. We set the layer opacity to 40%. What do we see?

In the center, a faded colored square "mixed with" a faded checkerboard; around that, a checkerboard.

How can we explain this in terms of our "great empty beyond" metaphor? In the center, we "40%" see the colored pixels, but we "60%" see through them. What do we see? The great empty beyond, which looks like a checkerboard. So we see the blend of those "two things seen".

Suppose we save this setup as a JPG file? Then, Photoshop makes the "great empty beyond" look white. If we examine that file in our Photoshop, we see a faded colored square (it has a different color than as we drew it) surrounded by white. Nothing is transparent or semitransparent anymore.

Supposed we save it as a GIF file, with transparency preserved? Then, Photoshop makes the colored area semitransparent (alpha=0.4)) and makes the surround transparent (alpha=0).

Now if we examine this GIF file in our Photoshop, what do we see? Well, it looks just like the file did before. Lets talk about the surround, which appears as a gray checkerboard. We can look at the significance of what we see in two different ways:

a. The pixels there are transparent, and Photoshop signals that to us with the gray checkerboard.

b. The pixels there are transparent; we see right though the into the "great empty beyond". Photoshop makes that look to us like a gray checkerboard.

These are both correct.

Now in this case, we would probably have no reason to think of this, or to describe it, other than per (a).

But in complicated situations, the other outlook can help us figure out what has happened.

Best regards,

Doug
 

Joachim Bolte

New member
I try to look at it more like lighttable. If you lay something transparent on there, you can see through it. WHAT you see is quite irrellevant. If the glass-plate of the lighttable would have a checkerboard motive, it would give you a Photoshop feel... :)

I also think it is only relevant for the base layer. If that is opaque, the layers with transparency above that will not give you back a checkerboard, but the contents of the base layer.

If you ever get tired of the checkerboard 'glassplate', you can change it's colors and scale in the Preferences menu, under the 'Transparency' tab. If one would make GIF images for web use, he wouldn't rely on the checkerboard, but put up a base layer in the color of the websites background. This will prevent you from getting unwanted anti-aliassing artefacts. Just before saving the GIF, the background layer is turned off, and the image is saved with the proper transparency settings.
 

Doug Kerr

Well-known member
Hi, Joachim,

I try to look at it more like lighttable. If you lay something transparent on there, you can see through it. WHAT you see is quite irrellevant. If the glass-plate of the lighttable would have a checkerboard motive, it would give you a Photoshop feel
A nice outlook.

I also think it is only relevant for the base layer. If that is opaque, the layers with transparency above that will not give you back a checkerboard, but the contents of the base layer.
Exactly.

If you ever get tired of the checkerboard 'glassplate', you can change it's colors and scale in the Preferences menu, under the 'Transparency' tab. If one would make GIF images for web use, he wouldn't rely on the checkerboard, but put up a base layer in the color of the websites background. This will prevent you from getting unwanted anti-aliassing artefacts.

I'm not sure I follow that. Do you mean it would make what you see more like what would be seen on the Web, and the artifacts you speak of would be ones seen while in Photoshop?

Just before saving the GIF, the background layer is turned off . . .
I assume you are speaking of the "glass plate", not the Background layer.

. . . and the image is saved with the proper transparency settings.
Indeed.

Thanks for the further insight into this area.

Best regards,

Doug
 

Joachim Bolte

New member
I'm not sure I follow that. Do you mean it would make what you see more like what would be seen on the Web, and the artifacts you speak of would be ones seen while in Photoshop?
No, what I mean is that your GIF will have transparent parts, but when you place it on a website it will always be placed onto a certain color that will show through the transparent parts. If you don't take that in account while working in photoshop (so if you would take a transparent background or one with a different color than the website will have) you could not adapt the picture to the website it is on.

I am asking myself, does GIF support 1bit transparency (on/off), or does it support more levels just like photoshop does?

I assume you are speaking of the "glass plate", not the Background layer.
see above, I meant the background layer. Ideally you design a transparent part of a website with the webpage as a background, so you know what the transparent parts will work out like.
 
No, what I mean is that your GIF will have transparent parts, but when you place it on a website it will always be placed onto a certain color that will show through the transparent parts. If you don't take that in account while working in photoshop (so if you would take a transparent background or one with a different color than the website will have) you could not adapt the picture to the website it is on.

When saving a file for use on a Webpage, Photoshop offers some assistance in the "Save for Web & Devices..." file option. The Matte option allows to select the (uniform) background color of the web page upon which the image with transparency is to be placed, and creates the blended colors as part of the GIF palette/lookup table. It won't work with backgrounds that are not of a uniform color. For that one should use (part of) the real background image as a background layer in a layered composite, and make sure the image is placed in exactly the same position in the webpage.

I am asking myself, does GIF support 1bit transparency (on/off), or does it support more levels just like photoshop does?

As an indexed file format (each pixel has a color corresponding to a lookup table of up to 256 colors), only 1 optional value is available for transparency in a GIF. However, when saving as a PNG file, which is RGB, one can encode semi transparency.

Ideally you design a transparent part of a website with the webpage as a background, so you know what the transparent parts will work out like.

Indeed.

Cheers,
Bart
 

Doug Kerr

Well-known member
Hi, Joachim,
No, what I mean is that your GIF will have transparent parts, but when you place it on a website it will always be placed onto a certain color that will show through the transparent parts. If you don't take that in account while working in photoshop (so if you would take a transparent background or one with a different color than the website will have) you could not adapt the picture to the website it is on.
I understand. It is a matter of being able to see your work as it will be seen by the ultimate viewer.

I am asking myself, does GIF support 1bit transparency (on/off), or does it support more levels just like photoshop does?
I have always believed that GIF only supports 1-bit transparency, but I might be wrong.

For one thing, I will make a quick test by exporting a GIF file from a PSD that has semitransparency and see what survives.

Thanks.

Best regards,

Doug
 

Doug Kerr

Well-known member
Hi, Bart,

As an indexed file format (each pixel has a color corresponding to a lookup table of up to 256 colors), only 1 optional value is available for transparency in a GIF. However, when saving as a PNG file, which is RGB, one can encode semi transparency.

Thanks.

Best regards,

Doug
 
Top