weballey logo
 
left Webdesign - anti-aliasing backnext right
hometoolssite mape-mail
ALGEMEEN

WERKWIJZE

BANDBREEDTE

LAYOUT

GRAPHICS

paletten
voorbeelden
webpalet
< anti-aliasing >
dithering
minimaliseren
achtergronden

  anti-aliasing     Aliasing is een verschijnsel wat meestal geassocieerd wordt met kartelrandjes aan letters. Of trapsgewijs verlopen van lijnen die eigenlijk gewoon schuin horen lopen. Deze ongewenste verschijnselen worden veroorzaakt door de beperkingen van de techniek. De trucs die gebruikt worden om dit te verhelpen, noemen we anti-aliasing.
    Aliasing is eigenlijk een veel ruimer begrip. Het staat voor ongewenste bijverschijnselen, die door het digitaal weergeven van analoge informatie ontstaan. Hoge tikkende geluiden bij een synthesizer zijn daar een voorbeeld van. Ook ken je vast wel de gekleurde moiré-patronen op een televisiescherm, wanneer iemand kleding met een fijn ruitjespatroon draagt. Of achteruitdraaiende wielen aan een huifkar die gewoon vooruit rijdt.
    Op webpagina's heb je vooral met de grafische component van aliasing te maken. Kartelrandjes rond letters, ronde vormen, of flauw hellende lijnen. Op papier los je dit simpelweg op door een hoge resolutie te gebruiken. De meeste printers drukken af met een resolutie van minimaal 300 dpi (dots per inch). 600 of zelfs 1200 dpi is ook heel gewoon bij de nieuwere laserprinters. Drukwerk begint pas bij minimaal 2400 dpi.
    Op je beeldscherm is de resolutie echter veel lager. 72 dpi is standaard voor Macintosh beeldschermen, 96 dpi voor PC's. Slechter dan zelfs de beroerdste 9 naalds matrix-printer. We zullen daar dus iets anders moeten verzinnen. De techniek die het meeste gebruikt wordt is het mengen van de kleuren van de diverse figuren die afgebeeld worden.

    Schuine lijnen worden normaliter trapsgewijs afgebeeld op een beeldscherm. Computertaal bestaat uit nullen en enen: 0 staat voor uit, 1 voor aan. De schuine lijn wordt vertaald in een raster. Ligt het hart van de lijn in een vakje, dan krijgt het de kleur van de lijn. Ligt die erbuiten, dan krijgt het vakje de kleur van de achtergrond. Hoe flauwer de lijn loopt, hoe beroerder het wordt. De lijn wordt onderverdeeld in twee of meer horizontale segmenten.
    Wanneer we anti-aliasing gebruiken, mengen we de kleuren van de lijn en de achtergrond. De mengverhouding wordt bepaald door het deel van het vakje wat door de lijn bedekt wordt. Raakt de lijn net aan het vakje, dan overheerst de achtergrondkleur. Bedekt de lijn het vakje voor de helft, dan is de verhouding 1:1. Bedekt de lijn het vakje grotendeels, dan overheerst de kleur van de lijn.
    Het is een vrij grof middel, maar het werkt heel goed. Je maakt de afbeelding in feite vager. Maar je oog ziet weer schuine lijnen en ronde cirkels. Er ontstaat een illusie van een vloeiend lijnenverloop. Vandaar dat deze techniek heel populair is en veel gebruikt wordt in grafische software.

    Het werkt het beste bij redelijk grote kleurvlakken. Kleine vlakjes of dunne lijntjes lossen op in de achtergrond. Vooral kleine tekst (6 à 7 punts) kan hier erg onder lijden en zelfs onleesbaar worden. Dan moet je die techniek dus ook vooral niet gebruiken. Bestudeer de logo's bovenaan deze pagina maar eens. De letters hebben vloeiende, maar ook wat wazige randen. Wat bij het kleine logo nog maar net acceptabel is.
    Anti-aliasing voegt (de tussenliggende) kleuren aan je afbeelding toe. Hierdoor zullen je afbeeldingen groter worden (in bytes). Er ontstaat meer informatie, die ergens bewaard moet worden. Het is zoals altijd een kwestie van afwegen: beeldkwaliteit tegen bestandsgrootte. Gewoon een kwestie van uitproberen, hoeveel kleuren je nodig hebt om de afbeelding acceptabel weer te kunnen geven.
    Bij afbeeldingen met louter horizontale, verticale en/of diagonale lijnen is anti-aliasing overbodig, er treedt geen verbetering op. Je zou je bestanden alleen maar onnodig groter maken. Er kunnen zelfs ongewenste kartelrandjes ontstaan wanneer de tussenligende kleur geditherd wordt. Zet dan de anti-aliasing optie in je grafische editor uit.
goto top  
leftCopyright © Gerben Hoekstra - Alle rechten voorbehouden backnext right