Tutorial: dithering

[arj0n]

Hi,

I'm looking for a tutorials about dithering since I do not understand much about dithering yet.
Did a search on the forum but no results (or my way of search terms sucks ).

Anyway, can someone please advice me a good tutorial that includes dithering (for pixelart)?

Thanx,
-arj0n

[monkey0506]

1) Flood fill the area with the darkest color.
2) Go several pixels out from the shaded area with the next lightest color, and create an inner outline. Then flood fill the inner area with that color.
3) Use the spray can and shoot random pixels everywhere.
4) Print it out.
5) Burn it.
6) Hire an artist.
7) Stop taking advice from monkeys online.
8)
9) Profit.

[Renal Shutdown]

http://www.pixeljoint.com/forum/forum_posts.asp?TID=11299

[arj0n]

1) Flood fill the area with the darkest color.
2) Go several pixels out from the shaded area with the next lightest color, and create an inner outline. Then flood fill the inner area with that color.
3) Use the spray can and shoot random pixels everywhere.
4) Print it out.
5) Burn it.
6) Hire an artist.
7) Stop taking advice from monkeys online.
8)
9) Profit.

Thanx Monkey, I'll check 1 to 3. If I fail I will proceed with 7 I guess

http://www.pixeljoint.com/forum/forum_posts.asp?TID=11299

Now that's what I was looking for, awesome link Renal. Thanx!

[monkey0506]

If all else fails, you could try just Photoshopping colored QR codes into your art. Looks exactly the same.

[Monsieur OUXX]

Arj0n, here is my advice specifically about dithering for gradients.

1) choose if you want to create a gradient with some random dithering or some "organized" dithering.


- What I call random dithering is the second picture
- What I call "organized" dithering is the first picture.

When it comes to pixel art, depending on the situation, you might want a "pretty", organized dithering, or a random dithering might be enough.

2) If you want organized dithering

Old pixel-art tools allowed you to create them. Now it's not so easy in Photoshop or other advanced drawing tools. What I usually do is stealing them in Google images. You can find all shapes and sizes of dithered gradients.
For example this one will come handy to draw a circular gradient with several colors :


If you can't find what you need in Google Images, then draw it yourself I'm pretty sure that it's what the guy did here:

He chose to use 6 levels of gradient, but you might want to use more, or less. But as you can see, the pixels are perfectly organized.


3) If random dithering is enough.

Here is a quick trick to create one, in any recent drawing tool.
1. Create a smooth gradient the way you like.

2. Use a "noise" filter and add a lot of monochromatic noise ("monochromatic" means that the noise will only randomize the intensity of each pixel, not change its color! Other wise your gradient will look like a clow's jacket )

As you can see it's rougher, but still not suited for pixel-art, as you have thousands of colors.
3. Use a "posterize" filter (it's the filter that reduces the number of colors)


There you go! Now just adjust the brightness and contrast, and finally apply the tint you like (red, green, blue, whatever).

========================
As an educative resource:
Here is an exhaustive approach to dithering algorithms. It's not the same goal as monkey's tutorial. This is more to understand what is dithering, and how there are so many types of dithering. http://caca.zoy.org/study/part3.html

[nihilyst]

In addition to OUXX's third method, you can do the following in Photoshop to achieve dithered gradients.

1) Make a gradient with the colours you like (as in his first step).
2) Change the color mode from RGB to indexed colours.
3) Reduce the number of colours to, like, 6 or 9 or 12 or how many seems best to you.
4) Choose a method of dithering.
5) Apply.

[selmiak]

As an educative resource:
Here is an exhaustive approach to dithering algorithms. It's not the same goal as monkey's tutorial. This is more to understand what is dithering, and how there are so many types of dithering. http://caca.zoy.org/study/part3.html

after wondering who this nice girl is and some research on the interwebz I found her

[arj0n]

Thanx again for all the input!

[Construed]

Very good monsieur!

[Tabata]

You can find lots of tuts about pixel art on DevArt - some related to the techniques and some also including tips for using a special program.

A newsletter (that I am still not through completely) gives you some example-links to take a peek:
http://vanmall.deviantart.com/journal/Tutorial-Showcase-13-392893293
I already read a very lot of interesting things about the special rules of doing pixel art.

Also I recommend you to use the search function to find, what exactly you are looking for.
There are also some groups, that gather all kind of tutorials. To the right side of the linked journal
there are three groups of that kind already named and ready to jump right in.

[Monsieur OUXX]

I just found out the most amazing thing of my life.
On a side note :
- I also discovered that I was a fool.
- I re-discovered that Photoshop-users (a.k.a mostly Mac users) are a nightmare when it comes to tutorials, because they never use the proper terms in forums, hence pixel artists can never Google answers.

For a very very long time I was searching in Photoshop how to do that "ordered" dithered gradient thing I was talking about in my first post. I searched everything in google, combining keywords in every possible way: dithered gradient, photoshop posterizing plugins, photoshop advanced posterizing, halftones posterizing, pixel-artists gradients, etc... I never found anything.

I was crying out loud because there are no advanced options in the "posterize" filter dialog box. I was also gutted because the poserize filter is really bad.

Behold something that everybody probably already knew, except me :

The advanced dithering options are not in the "posterize" filter... but instead in the "indexed colors" dialog box.
If you want a nice dithered gradient, with dithering patterns (checkerboard, whatnot) then just go Image-->Mode-->Indexed color.



The most interesting option is the "dither" dropbox.
You should try yourself between the 3 available options :
- diffusion (this one even allows you to select the level: 0% to 100%)
- pattern
- noise



The only issue is that you cannot just add a layer containing the corrective filter (like you'd do with Posterize) and play with its settings afterwards. You must change your image mode, copy the result, and go back to your RGB mode.

[Adeel]

after wondering who this nice girl is and some research on the interwebz I found her

And that too, in some *ahem* nice threads...

On topic: That's a very useful find indeed, Monsieur . Now, I've some assurance that my pixel art will not look "that" bad.

[Frodo]

When I saw the title for this thread, I thought it was about putting thigs off. 

Spoiler

You ditherer. 

[close]

[Snarky]

- I re-discovered that Photoshop-users (a.k.a mostly Mac users) are a nightmare when it comes to tutorials, because they never use the proper terms in forums, hence pixel artists can never Google answers.

For a very very long time I was searching in Photoshop how to do that "ordered" dithered gradient thing I was talking about in my first post. I searched everything in google, combining keywords in every possible way: dithered gradient, photoshop posterizing plugins, photoshop advanced posterizing, halftones posterizing, pixel-artists gradients, etc... I never found anything.

I would argue that the correct term for this is not "posterization" (which does not involve dithering) but "color quantization" or "palette reduction". Those search terms should have got you some better results.

[Monsieur OUXX]

I would argue that the correct term for this is not "posterization" (which does not involve dithering) but "color quantization" or "palette reduction". Those search terms should have got you some better results.

That's exactly my point : Photoshop uses its own, hyped-up terms. So when you look for something in Photoshop users forums, you can't search "color quantization" because that's a generic concept, and it's discussed abstractly in most forums. You need to search the only remotely-related filter : "posterizing". But then you only find billions of basic tutorials for that filter. So you're stuck in Google limbo. You can never guess that the dithering options don't exist as a filter, but only as a by-product of color mode.

I found these since my previous post : http://www.ximagic.com/

Denoise is great to take an actual 256-colors background (e.g. Lucasarts background), and remove the excess noise that was added by the old-school dithering they applied to their scanned bacgrounds. I just tried it on a Monkey Island 2 bg, now it looks gorgeous!

Then, ColorDither is nice to go the reverse way, and add some dithering back, but not too much: you can fake 8-bit games but keep the comfort and beauty of 32-bits games.

[Babar]

Not sure how useful this is for you all here, as I learnt of this tool from these forums, so you might already know about it:
http://download.cnet.com/DepthDither/3000-2192_4-10644079.html

[Monsieur OUXX]

GraphEST DepthDither 2.0

Hey Babar, I've just tested your suggestion. This is exactly on-topic and could be great...
The pros :
- it's still a quicker solution to apply this filter to a layer, than having to create a whole new image every time and change its color mode to "indexed".
- there is a dispersion setting not only for the "diffusion" dithering, like in the "indexed color" photoshop window, but also for the "noise" and "pattern" ditherings.

The cons :
- The dithering algorithms aren't very good and make the result look quite dirty... Big issue!

All in all it can come handy depending on the needs. Thanks!

[Snarky]

That's exactly my point : Photoshop uses its own, hyped-up terms. So when you look for something in Photoshop users forums, you can't search "color quantization" because that's a generic concept, and it's discussed abstractly in most forums. You need to search their own term : "posterizing". But then you only find billions of basic tutorials for that filter. So you're stuck in Google limbo. You can never guess that the dithering options don't exist as a filter, but only as a by-product of color mode.

But what gave you the idea that "posterizing" was the term to search for in this case?

I find that if you know the correct technical term (assuming there is one), you can usually just google that + "photoshop" and get at least some relevant results. But I agree that it can be difficult to figure out what that technical term is, and that digging out the relevant info from tons of super-basic tutorials is often difficult or tedious.

Not sure how useful this is for you all here, as I learnt of this tool from these forums, so you might already know about it:
http://download.cnet.com/DepthDither/3000-2192_4-10644079.html

From the description, it doesn't sound like it does anything Photoshop doesn't already do (its claim that PS only allows you to reduce to 256 colors is outright false). Or am I missing something?

[Babar]

I think Photoshop's "Indexed Colours" mode is technically 8bit. However, I think you can manually edit the palette to make it fewer. I also sometimes save as a gif, which allows variable numbers of colours also in the save wizard. Another thing I do for speedy colour reduction is set up and save a gif (or image with Indexed colour mode) with a palette I already like, then copy a high-colour image into that image, which automatically sets all the colours to be the ones that have been indexed (doesn't dither, though).

In conclusion, Photoshop is really not the ideal tool for fine-tuned palette handling. Also, that plugin is pretty old, so maybe when it came out, Photoshop did only allow reductions to 256 colours.

Snarky, the tool I linked allows for dithering at 8bits, 4bits, 2bits and 1bit colours, and also has certain preset dither patterns, and sliders to vary them. That functionality isn't currently in photoshop, at least not as easily as it is to do with this.