Jump to content

  • Log In with Google      Sign In   
  • Create Account

Awesome job so far everyone! Please give us your feedback on how our article efforts are going. We still need more finished articles for our May contest theme: Remake the Classics

#ActualHodgman

Posted 04 October 2012 - 04:46 AM

The second one is created in sRGB space.

That's a linear gradient, as it's just a linear interpolation of two RGB values.
I guess you could say that if the two inputs were sRGB colours, then the output is an sRGB gradient -- but seeing black/white are the same in linear and in sRGB -- it's basically a linear gradient (being displayed on an sRGB device).

First gradient is created in linear space and gamma corrected.

That's also a linear gradient approximately transformed to sRGB, because the sRGB curve is approximately equal to the "gamma 2.2" curve. This is what I'd call an sRGB gradient (except using the proper curve, instead of the pow2.2 approximation)

N.B. In both sRGB/Gamma2.2, 187 equates to 50% black/white. In linear, 128 corresponds to 50% black/white.

Now according to http://filmicgames.com/archives/354 if you resize a 2 pixel image, where one pixel is white and second is black then the resulting pixel should have color (187,187,187). So the middle color of the gradient should be (187,187,187) - just like in the first gradient.

Theres a reason for this -- if your monitor is correctly calibrated as an sRGB device, then when standing back from a black/white checkerboard image and squinting, it will appear exactly the same as an image filled with 187 grey. An image filled with 128 grey will appear much darker than the (averaged due to distance/squinting) black/white checkerboard.

On the other hand second gradient looks better.

this isn't a fair visual comparison because you're skipping over a huge number of values in your first gradient. After 0/255, your second value is 21/255 (pow(1/255,1/2.2)*255), so you've skipped 19 shades in there! Your first gradient would have to be almost 200000 pixels wide for you to see all the unique 256 shades of grey in the 8-bit gamma 2.2 gradient.
The second one might look better because it's made up of 256 unique shades, whereas your first is only made up of 183 shades.

Even though, as above there is a mathematical reason for 187 being "middle grey", if you're using this gradient for an artistic purpose, then the "best" gradient is going to be subjectively defined, not mathematically defined.

when you set up a gradient on a button from black to white it looks bad and graphic artists don't like it

If this is the root problem, can you describe it a bit more -- e.g. what this gradient is for?

Also there's something weird with your gradient images; the labelled shades are to the left of their markers by a bit.

#15Hodgman

Posted 04 October 2012 - 04:41 AM

The second one is created in sRGB space.

That's a linear gradient, as it's just a linear interpolation of two RGB values.
I guess you could say that if the two inputs were sRGB colours, then the output is an sRGB gradient -- but seeing black/white are the same in linear and in sRGB -- it's basically a linear gradient (being displayed on an sRGB device).

First gradient is created in linear space and gamma corrected.

That's also a linear gradient approximately transformed to sRGB, because the sRGB curve is approximately equal to the "gamma 2.2" curve. This is what I'd call an sRGB gradient (except using the proper curve, instead of the pow2.2 approximation)

N.B. In both sRGB/Gamma2.2, 187 equates to 50% black/white. In linear, 128 corresponds to 50% black/white.

Now according to http://filmicgames.com/archives/354 if you resize a 2 pixel image, where one pixel is white and second is black then the resulting pixel should have color (187,187,187). So the middle color of the gradient should be (187,187,187) - just like in the first gradient.

Theres a reason for this -- if your monitor is correctly calibrated as an sRGB device, then when standing back from a black/white checkerboard image and squinting, it will appear exactly the same as an image filled with 187 grey. An image filled with 128 grey will appear much darker than the (averaged due to distance/squinting) black/white checkerboard.

On the other hand second gradient looks better.

this isn't a fair visual comparison because you're skipping over a huge number of values in your first gradient. After 0/255, your second value is 21/255 (pow(1/255,1/2.2)*255), so you've skipped 19 shades in there! Your first gradient would have to be almost 200000 pixels wide for you to see all the unique 256 shades of grey in the 8-bit gamma 2.2 gradient.
The second one might look better because it's made up of 256 unique shades, whereas your first is only made up of 183 shades.

when you set up a gradient on a button from black to white it looks bad and graphic artists don't like it

If this is the root problem, can you describe it a bit more -- e.g. what this gradient is for?

Also there's something weird with your gradient images; the labelled shades are to the left of their markers by a bit.

#14Hodgman

Posted 04 October 2012 - 04:34 AM

The second one is created in sRGB space.

That's a linear gradient, as it's just a linear interpolation of two RGB values.
I guess you could say that if the two inputs were sRGB colours, then the output is an sRGB gradient -- but seeing black/white are the same in linear and in sRGB -- it's basically a linear gradient (being displayed on an sRGB device).

First gradient is created in linear space and gamma corrected.

That's also a linear gradient approximately transformed to sRGB, because the sRGB curve is approximately equal to the "gamma 2.2" curve. This is what I'd call an sRGB gradient (except using the proper curve, instead of the pow2.2 approximation)

N.B. In both sRGB/Gamma2.2, 187 equates to 50% black/white. In linear, 128 corresponds to 50% black/white.

Now according to http://filmicgames.com/archives/354 if you resize a 2 pixel image, where one pixel is white and second is black then the resulting pixel should have color (187,187,187). So the middle color of the gradient should be (187,187,187) - just like in the first gradient.

Theres a reason for this -- if your monitor is correctly calibrated as an sRGB device, then when standing back from a black/white checkerboard image and squinting, it will appear exactly the same as an image filled with 187 grey. An image filled with 128 grey will appear much darker than the (averaged due to distance/squinting) black/white checkerboard.

On the other hand second gradient looks better.

this isn't a fair visual comparison because you're skipping over a huge number of values in your first gradient. After 0/255, your second value is 20/255, so you've skipped 18 shades in there! Your first gradient would have to be almost 200000 pixels wide for you to see all the unique 256 shades of grey in the 8-bit gamma 2.2 gradient.
The second one might look better because it's made up of 256 unique shades, whereas your first is only made up of 183 shades.

when you set up a gradient on a button from black to white it looks bad and graphic artists don't like it

If this is the root problem, can you describe it a bit more -- e.g. what this gradient is for?

Also there's something weird with your gradient images; the labelled shades are to the left of their markers by a bit.

#13Hodgman

Posted 04 October 2012 - 04:24 AM

The second one is created in sRGB space.

That's a linear gradient, as it's just a linear interpolation of two RGB values.
I guess you could say that if the two inputs were sRGB colours, then the output is an sRGB gradient -- but seeing black/white are the same in linear and in sRGB -- it's basically a linear gradient (being displayed on an sRGB device).

First gradient is created in linear space and gamma corrected.

That's also a linear gradient approximately transformed to sRGB, because the sRGB curve is approximately equal to the "gamma 2.2" curve. This is what I'd call an sRGB gradient (except using the proper curve, instead of the pow2.2 approximation)

N.B. In both sRGB/Gamma2.2, 187 equates to 50% black/white. In linear, 128 corresponds to 50% black/white.

Now according to http://filmicgames.com/archives/354 if you resize a 2 pixel image, where one pixel is white and second is black then the resulting pixel should have color (187,187,187). So the middle color of the gradient should be (187,187,187) - just like in the first gradient.

Theres a reason for this -- if your monitor is correctly calibrated as an sRGB device, then when standing back from a black/white checkerboard image and squinting, it will appear exactly the same as an image filled with 187 grey. An image filled with 128 grey will appear much darker than the (averaged due to distance/squinting) black/white checkerboard.

On the other hand second gradient looks better.

this isn't a fair visual comparison because you're skipping over a huge number of values in your first gradient. After 0/255, your second value is 20/255, so you've skipped 18 shades in there! Your first gradient would have to be almost 200000 pixels wide for you to see all the unique 256 shades of grey in the 8-bit gamma 2.2 gradient.
The second one might look better because it's made up of 256 unique shades, whereas your first is only made up of 183 shades.

when you set up a gradient on a button from black to white it looks bad and graphic artists don't like it

If this is the root problem, can you describe it a bit more -- e.g. what this gradient is for?

#12Hodgman

Posted 04 October 2012 - 04:22 AM

The second one is created in sRGB space.

That's a linear gradient, as it's just a linear interpolation of two RGB values.
I guess you could say that if the two inputs were sRGB colours, then the output is an sRGB gradient -- but seeing black/white are the same in linear and in sRGB -- it's basically a linear gradient (being displayed on an sRGB device).

First gradient is created in linear space and gamma corrected.

That's also a linear gradient approximately transformed to sRGB, because the sRGB curve is approximately equal to the "gamma 2.2" curve.

N.B. In both sRGB/Gamma2.2, 187 equates to 50% black/white. In linear, 128 corresponds to 50% black/white.

Now according to http://filmicgames.com/archives/354 if you resize a 2 pixel image, where one pixel is white and second is black then the resulting pixel should have color (187,187,187). So the middle color of the gradient should be (187,187,187) - just like in the first gradient.

Theres a reason for this -- if your monitor is correctly calibrated as an sRGB device, then when standing back from a black/white checkerboard image and squinting, it will appear exactly the same as an image filled with 187 grey. An image filled with 128 grey will appear much darker than the (averaged due to distance/squinting) black/white checkerboard.

On the other hand second gradient looks better.

this isn't a fair visual comparison because you're skipping over a huge number of values in your first gradient. After 0/255, your second value is 20/255, so you've skipped 18 shades in there! Your first gradient would have to be almost 200000 pixels wide for you to see all the unique 256 shades of grey in the 8-bit gamma 2.2 gradient.
The second one might look better because it's made up of 256 unique shades, whereas your first is only made up of 183 shades.

when you set up a gradient on a button from black to white it looks bad and graphic artists don't like it

If this is the root problem, can you describe it a bit more -- e.g. what this gradient is for?

#11Hodgman

Posted 04 October 2012 - 04:22 AM

The second one is created in sRGB space.

That's a linear gradient, as it's just a linear interpolation of two RGB values.
I guess you could say that if the two inputs were sRGB colours, then the output is an sRGB gradient -- but seeing black/white are the same in linear and in sRGB -- it's basically a linear gradient (being displayed on an sRGB device).

First gradient is created in linear space and gamma corrected.

That's a linear gradient approximately transformed to sRGB, because the sRGB curve is approximately equal to the "gamma 2.2" curve.

N.B. In both sRGB/Gamma2.2, 187 equates to 50% black/white. In linear, 128 corresponds to 50% black/white.

Now according to http://filmicgames.com/archives/354 if you resize a 2 pixel image, where one pixel is white and second is black then the resulting pixel should have color (187,187,187). So the middle color of the gradient should be (187,187,187) - just like in the first gradient.

Theres a reason for this -- if your monitor is correctly calibrated as an sRGB device, then when standing back from a black/white checkerboard image and squinting, it will appear exactly the same as an image filled with 187 grey. An image filled with 128 grey will appear much darker than the (averaged due to distance/squinting) black/white checkerboard.

On the other hand second gradient looks better.

this isn't a fair visual comparison because you're skipping over a huge number of values in your first gradient. After 0/255, your second value is 20/255, so you've skipped 18 shades in there! Your first gradient would have to be almost 200000 pixels wide for you to see all the unique 256 shades of grey in the 8-bit gamma 2.2 gradient.
The second one might look better because it's made up of 256 unique shades, whereas your first is only made up of 183 shades.

when you set up a gradient on a button from black to white it looks bad and graphic artists don't like it

If this is the root problem, can you describe it a bit more -- e.g. what this gradient is for?

PARTNERS