How to remove moiré from screenshots
Moiré is an unwanted pattern that appears in screen shots, as shown in this example (a scanned image from a printed page):
On the Windows platform, the problem typically arises with images of scroll bars. It makes documentation look unprofessional, but what can you do? One guaranteed solution is to remove the source of the problem.
Moiré is an interference pattern that is caused when two regular patterns overlap. In our case, one of the patterns is the reproduction of the dots on the printed page and the other pattern is contained in the scroll bar. This is not obvious when you view the scroll bar on the screen, or when you print an image. However, if you resize an image, the pattern becomes obvious. The image below is five times the actual size of a scroll bar, and you can clearly see light (white) and dark pixels:
To solve the problem, replace the pattern of dots with a block of solid colour:
What colour values should you use for the solid block of colour? A quick fix is to choose a shade of grey that looks correct. Alternatively, you could calculate values. One method that works (we don't make any claims about its purity from a theoretical perspective) is to use the average values of the colour data. Your graphics application probably has this feature. If it does not, you can calculate the colour manually.
The RGB values for white are 255, 255, 255. Our grey pixels have the following RGB values: 212, 208, 200. For each colour channel, we want the average between the grey and the white, as shown in the last column of the table below. In the table, Vg represents the value for the grey pixels.
| Colour channel | Vg | 255-Vg | ˝ (255-Vg) | Vg+(˝ (255-Vg)) = average colour |
|---|---|---|---|---|
| Red | 212 | 43 | 21 | 233 |
| Green | 208 | 47 | 23 | 231 |
| Blue | 200 | 55 | 27 | 227 |
To create the solid block of grey in the final screen shot above, we used the values from the last column in the table.
RSS feed