5 ms·

> I’m not hip enough to know if this style has been assigned a pithy label, but I do enjoy it. At the same time, I find it frustrating — because as far as I can

> I’m not hip enough to know if this style has been assigned a pithy label, but I do enjoy it. At the same time, I find it frustrating — because as far as I can tell (the lack of examples I have seen in the wild supports this theory) there isn’t an easy way to replicate these illustrations with SVGs The term the author is looking for is "dithering". CSS-Tricks explains this on their page "Grainy Gradients" using the same technique: https://css-tricks.com/grainy-gradients/ https://css-tricks.com/grainy-gradients/ There's also a decent alternative to doing this with CSS, though it's applied to the entire image: https://github.com/tomren1/dither-with-css https://github.com/tomren1/dither-with-css

JKCalhoun 3y ago
Is that really dithering when you're not using a limited palette to simulate a larger one? Reminds me of vintage travel poster art. Example: https://www.graphicart-news.com/wp-content/uploads/2012/09/28_AF_afrique.jpg https://www.graphicart-news.com/wp-content/uploads/2012/09/2...
- betenoire 3y ago
  It's a dithering effect for sure. Drop shadows aren't actually shadows, either :)
  - kookamamie 3y ago
    "Dithering" is adding noise to randomize quantization errors and to hide banding. The OPs post looks like just adding noise for getting a noisy look.
    - itishappy 3y ago
      It's the same effect! OP may have done this for style, but the effect also happens to hide any banding that may have be present.
      - Someone 3y ago
        It may look similar in these high resolution pictures, but it’s different. With dithering, there’s negative correlation between the noise added to neighboring pixels (if one gets a bit blacker, at least one of its neighbors is more likely to be made a bit whiter). This adds Perlin noise. With that, I think that correlation is zero or, possibly, positive.
        itishappy 3y ago
        That's how good dithering works, but adding random noise is still dithering. https://commons.wikimedia.org/wiki/User:Gerbrant/Dithering_algorithms https://commons.wikimedia.org/wiki/User:Gerbrant/Dithering_a...
      - coldtea 3y ago
        Not the same. Not in how it's achieved (merely adding grain isn't dithering), and not in the final effect. Google Images "dithering" for examples of how dithering looks.
        deleted 3y ago
        [deleted]
        itishappy 3y ago
        It's bad dithering, but it's still dithering. Random noise gives poor but fast results. Error diffusion is great but slow (pixels are processed sequentially). My favorite technique is using a blue-noise matrix because it gives great results quickly. Creating the matrix is tricky, but you can do it offline and reuse it.
  - whilenot-dev 3y ago
    Rather looks like a risograph effect to me
dimmke 3y ago
Oh wow, this is a little embarrassing. I will have to update the post to link to that. I promise I had not seen it when I created this, I did this on my own and came to the same conclusions!
jszymborski 3y ago
Kinda makes me think more of stippling, which of course is related to dithering [0]. [0] https://en.wikipedia.org/wiki/Stippling https://en.wikipedia.org/wiki/Stippling
coldtea 3y ago
Dithering would be an actual technical technique with a similar end effect, but it's not about adding grain per se, nor is this made through dithering. And I think the guy looks for a design term for the visual style (similar to how we say "flat", "skeuomorphic", "italian style"), not the technical name of how it can be achieved, anyway. For that, I'd say, both the geometrical shapes in his design and the added grain, bring to mind the so-called "memphis style".
- jetrink 3y ago
  I agree and the grain/transparency effect specifically looks like the gradients made using a (physical) airbrush that show up a lot in the Memphis style. 1. https://www.etsy.com/listing/1402316103/memphis-style-postmodern-airbrush-on https://www.etsy.com/listing/1402316103/memphis-style-postmo... (Scroll down about halfway for the next one) 2. https://www.chairish.com/product/6986561/vintage-1980s-memphis-style-postmodern-airbrush-painting-signed-kingston https://www.chairish.com/product/6986561/vintage-1980s-memph... 3. https://glowgeometric.com/products/1980s-hollis-fingold-memphis-style-jewelry-box https://glowgeometric.com/products/1980s-hollis-fingold-memp...
GuB-42 3y ago
It really is just noise, more precisely a kind of Perlin noise combined with a "color burn" blending mode. It is not dithering, though it looks like it because it is applied on a gradient. The idea with dithering is that you start with a smooth image (high color depth) and quantize it, that is, reduce the number of colors. If you do it the simplest way, by integer division, you will get banding. To reduce banding, the idea is that for each pixel, you choose between the rounded up or rounded down value semi-randomly, with a probability depending on how close you are to each value. It will give gradients a noisy look, but if you happen to be on exactly the color you want, it will not look noisy at all. Even though dithering can be a stylistic choice, it is more often a technical one, so that you can have a good looking image with a limited palette. Here, the effect will result in a uniformly noisy texture, and it will not reduce banding if present. I think that for aesthetic purposes, it is better than true dithering. In addition to the aesthetic value of adding texture to the object, just like dithering, it can also improve the perceived quality of the image. For example, it can mask defects and increase the perceived sharpness.
- testermelon 3y ago
  Thank you for the great explanation of dithering. It’s very intuitive and easy to follow.
- planede 3y ago
  > To reduce banding, the idea is that for each pixel, you choose between the rounded up or rounded down value semi-randomly, with a probability depending on how close you are to each value. This oversimplifies it a bit. Most dithering algorithms are deterministic. They are based on choosing a value for a pixel, remembering the difference between the ideal and the chosen value and then spreading out that difference to surrounding pixels. Random dithering is more commonly used in audio signals, AFAIK, not much in image processing.
- idk1 3y ago
  My suggestion for this style of effect: Graincore

JKCalhoun 3y ago

Is that really dithering when you're not using a limited palette to simulate a larger one? Reminds me of vintage travel poster art. Example: https://www.graphicart-news.com/wp-content/uploads/2012/09/28_AF_afrique.jpg https://www.graphicart-news.com/wp-content/uploads/2012/09/2...

betenoire 3y ago
It's a dithering effect for sure. Drop shadows aren't actually shadows, either :)
- kookamamie 3y ago
  "Dithering" is adding noise to randomize quantization errors and to hide banding. The OPs post looks like just adding noise for getting a noisy look.
  - itishappy 3y ago
    It's the same effect! OP may have done this for style, but the effect also happens to hide any banding that may have be present.
    - Someone 3y ago
      It may look similar in these high resolution pictures, but it’s different. With dithering, there’s negative correlation between the noise added to neighboring pixels (if one gets a bit blacker, at least one of its neighbors is more likely to be made a bit whiter). This adds Perlin noise. With that, I think that correlation is zero or, possibly, positive.
      - itishappy 3y ago
        That's how good dithering works, but adding random noise is still dithering. https://commons.wikimedia.org/wiki/User:Gerbrant/Dithering_algorithms https://commons.wikimedia.org/wiki/User:Gerbrant/Dithering_a...
    - coldtea 3y ago
      Not the same. Not in how it's achieved (merely adding grain isn't dithering), and not in the final effect. Google Images "dithering" for examples of how dithering looks.
      - deleted 3y ago
        [deleted]
      - itishappy 3y ago
        It's bad dithering, but it's still dithering. Random noise gives poor but fast results. Error diffusion is great but slow (pixels are processed sequentially). My favorite technique is using a blue-noise matrix because it gives great results quickly. Creating the matrix is tricky, but you can do it offline and reuse it.
- whilenot-dev 3y ago
  Rather looks like a risograph effect to me

dimmke 3y ago

Oh wow, this is a little embarrassing. I will have to update the post to link to that. I promise I had not seen it when I created this, I did this on my own and came to the same conclusions!

jszymborski 3y ago

Kinda makes me think more of stippling, which of course is related to dithering [0]. [0] https://en.wikipedia.org/wiki/Stippling https://en.wikipedia.org/wiki/Stippling

coldtea 3y ago

Dithering would be an actual technical technique with a similar end effect, but it's not about adding grain per se, nor is this made through dithering. And I think the guy looks for a design term for the visual style (similar to how we say "flat", "skeuomorphic", "italian style"), not the technical name of how it can be achieved, anyway. For that, I'd say, both the geometrical shapes in his design and the added grain, bring to mind the so-called "memphis style".

jetrink 3y ago
I agree and the grain/transparency effect specifically looks like the gradients made using a (physical) airbrush that show up a lot in the Memphis style. 1. https://www.etsy.com/listing/1402316103/memphis-style-postmodern-airbrush-on https://www.etsy.com/listing/1402316103/memphis-style-postmo... (Scroll down about halfway for the next one) 2. https://www.chairish.com/product/6986561/vintage-1980s-memphis-style-postmodern-airbrush-painting-signed-kingston https://www.chairish.com/product/6986561/vintage-1980s-memph... 3. https://glowgeometric.com/products/1980s-hollis-fingold-memphis-style-jewelry-box https://glowgeometric.com/products/1980s-hollis-fingold-memp...

GuB-42 3y ago

It really is just noise, more precisely a kind of Perlin noise combined with a "color burn" blending mode. It is not dithering, though it looks like it because it is applied on a gradient. The idea with dithering is that you start with a smooth image (high color depth) and quantize it, that is, reduce the number of colors. If you do it the simplest way, by integer division, you will get banding. To reduce banding, the idea is that for each pixel, you choose between the rounded up or rounded down value semi-randomly, with a probability depending on how close you are to each value. It will give gradients a noisy look, but if you happen to be on exactly the color you want, it will not look noisy at all. Even though dithering can be a stylistic choice, it is more often a technical one, so that you can have a good looking image with a limited palette. Here, the effect will result in a uniformly noisy texture, and it will not reduce banding if present. I think that for aesthetic purposes, it is better than true dithering. In addition to the aesthetic value of adding texture to the object, just like dithering, it can also improve the perceived quality of the image. For example, it can mask defects and increase the perceived sharpness.

testermelon 3y ago
Thank you for the great explanation of dithering. It’s very intuitive and easy to follow.
planede 3y ago
> To reduce banding, the idea is that for each pixel, you choose between the rounded up or rounded down value semi-randomly, with a probability depending on how close you are to each value. This oversimplifies it a bit. Most dithering algorithms are deterministic. They are based on choosing a value for a pixel, remembering the difference between the ideal and the chosen value and then spreading out that difference to surrounding pixels. Random dithering is more commonly used in audio signals, AFAIK, not much in image processing.
idk1 3y ago
My suggestion for this style of effect: Graincore