Basisbegrippen i.v.m. kleur op beeldschermen, afbeeldingsformaten en resoluties Kleurdiepte
De hoeveelheid kleurinformatie die een pixel op een beeldscherm kan bevatten wordt bepaald door de bitdiepte. Naarmate de bitdiepte toeneemt kan de pixel meer kleuren weergeven. Men noemt dit ook wel de kleurdiepte. 1 bit-afbeelding: 2 bits : 8 bits-afbeelding : 16 bits-afbeelding: 24 bit:
0 I 22 2 8 216 224
2 mogelijkheden / zwart of wit 4 mogelijkheden 00 II 0I I0 256 grijswaarden of kleuren 65.536 kleuren 16,7 miljoen mogelijkheden (kleuren)
In Photoshop zijn veel tools en filters niet beschikbaar voor afbeeldingen met minder dan 24 bitdiepte.
met Acrobat 6 kun je het instructiefilmje hiernaast bekijken.
Voor toepassing in andere media : gebruikelijk voor de kleurenschermen in een mobiele telefoon zijn een kleurdiepte van 8 bit (256 kleuren), 12 bit (4096), 16 bit (65.536 kleuren, 64k) of recentelijk zelfs 18 bit (262.144 kleuren, 256k).
Kleurkanalen en bestandgrootte.
3 kanalen met elk 8 bitdiepte = 256 x 256 x 256 = 16,7 miljoen mogelijke kleuren. Je kan de kleurkanalen afzonderlijk bekijken. Invloed op de bestandgrootte : 1 bit-afbeelding : enkel zwart of wit : bestand = bijvoorbeeld 1 Mb 8 bit-afbeelding : 256 grijswaarden mogelijk of kleuren : = 8Mb 24 bit-afbeelding in RGB : 24 Mb (3x 8 bit) 32 bit-afbeelding : in CMYK : 32 Mb (4 x 8 bit) Een foto van 1600 x 1200 pixels bevat in het totaal 1.920.000 pixels. Als elke pixel 24 bits gebruikt zijn dat samen 46.080.000 bits 8 bits = 1 byte --> geeft 5.760.000 bytes 1024 bytes = 1 kilobyte (K) --> geeft 5.625 K 1024 K = 1 Mb --> geeft 5,4 Megabite
Resolutie
Niet alleen het aantal kleuren in een foto is bepalend voor de kwaliteit. Ook het aantal pixels binnen een bepaalde oppervlakte is belangrijk. Op een beeldscherm wordt dit bepaald door de ingestelde resolutie van het scherm. Hoe meer pixels binnen hetzelfde gebied aanwezig zijn, hoe meer detail kan worden weergegeven. Een foto met een te lage resolutie kan geen mooie details tonen. De resolutie wordt uitgedrukt in aantal pixels per inch (1 inch = 2,54cm), afgekort DPI). Als er staat: 200 DPI, geeft dat aan dat er 200 pixels per inch worden gebruikt. Stel dat onze foto maar 1x1 inch groot is, dan kan er bij 200 DPI meer worden weergegeven dan wanneer we maar 72 DPI in diezelfde inch hebben. Stel dat we die 1 inch (met 200 DPI) 10x vergroten, dan wordt de resolutie lager, want dan hebben we dezelfde aantal pixels op een 10x groter gebied. De beste omschrijving voor resolutie is eigenlijk: de dichtheid van de punten per gegeven oppervlak. Je kan ook een hoge resolutie krijgen als je het beeld verkleint, want dan wordt de dichtheid groter. Voorbeeld : Een afbeelding van 800 x 600 pixels met een resolutie van 72 dpi wordt verkleind tot 400 x 300 pixles; de resolutie verhoogd tot 144 dpi
Bestandsformaten voor webtoepassingen
Voor het kiezen van het juiste bestandstype en de beste compressie/kwaliteitverhouding maak je in Photoshop gebruik van ‘Save for web’. Kies verschillende instellingen (jpg - gif - png) en vergelijk het resultaat (bestandgrootte en kwaliteit). Experimenteer met kwaliteitsniveau’s en aantal kleuren om het maximum eruit te halen.
CompuServe Graphics Interchange Format (GIF) GIF is primair bedoeld voor het uitwisselen van afbeeldingen (GIF staat voor Graphics Interchange Format). De GIF standaard kan maximaal 256 verschillende kleuren in een afbeelding aan, hetgeen er in de praktijk op neer komt dat alleen grafische werk (logo’s, grafieken e.d.) met beperkt aantal kleuren en zonder kleurverlopen zich goed laten opslaan in GIF formaat.
Dit logo bevat weinig kleuren. Bij keuze voor het gif-formaat worden de originele kleuren behouden en het bestand goed gecomprimeerd. Bij keuze voor jpegformaat (zie onderaan) worden de kleuren onzuiver en komt er ruis in het beeld.
Foto’s worden vaak erg lelijk als ze in GIF formaat opgeslagen worden omdat ze te weinig kleur informatie bevatten. Foto’s in grijswaarden komen wel toe met 256 tinten. Belangrijk voordeel is de ondersteuning van transparantie (voor één of meerdere kleuren, maar geen kleurverlopen). GIF-bestanden worden altijd gecomprimeerd en zijn een zeer efficiënte manier voor het opslaan van grote afbeeldingen met weinig kleur. Een variante van het .gif formaat is een ‘geanimeerde gif’. Door het achter elkaar zetten van een reeks plaatjes bouw je een klein animatiefilmpje.
Joint Photographic Experts Group (JPG / JPEG) Het JPEG-formaat gebruikt een compressiemethode waarbij de bestandsgrootte van een foto wordt verkleind door het selectief verminderen van de details van de afbeelding en door het overbrengen van de afbeeldinggegevens naar een formaat dat beter geschikt is om te worden gecomprimeerd.
Als we een afbeelding in JPG opslaan met laagste kwaliteit is het duidelijk merkbaar dat de kwaliteit verminderd.
Foto’s met minder details worden bijzonder goed gecomprimeerd, terwijl zeer gedetailleerde afbeeldingen enigszins aan kwaliteit inboeten. Wegens de efficiënte compressie is JPEG een uitstekend formaat om foto’s op Internet te plaatsen. Het is echter niet het meest geschikte formaat om foto te bewerken, omdat er telkens als je de foto opnieuw opslaat wat kwaliteitsverlies optreedt. Dit wordt compressie met verlies genoemd, omdat sommige afbeeldinggegevens verloren gaan ten behoeve van een betere compressie. Voor het bewaren en bewerken van grafische afbeeldingen gebruikt je beste een formaat zoals PSD of TIFF. Bij het opslaan heb je geen verlies.
Portable Network Graphics - (PNG) Grafische compressietechniek. PNG is als patent- en rechtenvrije tegenhanger van GIF van CompuServe ontwikkeld en bedoeld om GIF op te volgen als standaard voor afbeeldingen op het Internet. PNG ondersteund 8 bit en 24 bit kleurweergave. Een ander voordeel van het formaat is de mogelijkheiden tot gedeeltelijke transparantie. Zo kan je transparantie bekomen in verlooptinten of schaduwen. Doordat de veelgebruikte internetbrowser Microsoft Internet Explorer het PNG-formaat qua transparantie (nog) niet volledig ondersteunt, is het PNG-formaat nog niet zo populair als GIF, maar het gebruik van PNG stijgt terwijl dat van GIF daalt. Praktisch elk beeldverwerkingsprogramma ondersteunt het PNG-formaat.
Hierboven een voorbeeld met toepassing van 24-bit transparantie in een logo. JPG (linksonder) ondersteunt geen transparantie, de achtergrond wordt volledig wit. GIF (rechtsonder) ondersteunt transparantie, maar niet in verloop. PNG (rechstboven behoudt de transparantie in het verloop. De bestandsgrootte wordt wel aanzienlijk groter.
Kleuren voor internet :
Definitie van RGB-kleur aan de hand van een hexadecimale notatie Het hexadecimale getallenstelsel is een 16-delig getallenstelsel waarbij met 16 “cijfers” gewerkt wordt in plaats van met de 10 cijfers uit het decimale getallenstelsel. De cijfers 0 tot en met 9 worden gebruikt; 10 wordt weergegeven als A; 11 als B; 12 als C; 13 als D; 14 als E en 15 als F. De hexadecimale waarde van een getal tussen 0 en 255 bestaat uit 2 posities. De eerste positie geeft aan hoe dikwijls het getal door 16 kan gedeeld worden. De tweede positie geeft de restwaarde van deze deling aan. Bijvoorbeeld: een rode tint met waarde 178 = (11 x 16) + 2 (restwaarde) = B2 Notatie : #RRGGBB Wil je dat al je bezoekers met eender welke monitor, en met eender welke browser jouw pagina te zien krijgen zoals jij het hebt bedoeld, kan je best het webveilige kleuren gebruiken. Dit zijn 216 verschillende kleuren die door elke browser, en met elke monitor correct kunnen weergegeven worden. De 216 kleuren zijn zo gekozen dat er voor elke basiskleur 6 verschillende waarden zijn, gelijkmatig gespreid over de hele range (van 0% tot 100%). Zo bekomt men dus 6 * 6 * 6 = 216 webveilige kleuren. De overige 40 kleuren kunnen verschillen van systeem tot systeem. ‘Webveilige’ kleuren herken je in de hexadecimale code aan de combinaties van: 00 33 66 99 CC FF. De tijd dat computers nog met 256 kleuren werkten is intussen wel lang voorbij. Alle andere kleuren zijn dus ook perfect bruikbaar.
Overzicht van alle ‘webveilige’ kleuren.
Leesbaarheid
Leesbaarheid van tekst op gekleurde achtergronden is vaak een probleem. Zoek je goede kleurencombinaties voor de tekst, tekstlinks en achtergrond van je site, probeer dan eens met ‘colorpicker’ http://www.html-site.nl/colorpicker.php Een handig tooltje waarmee je alle mogelijke combinaties kan uittesten.
schermformaat versus browserscherm:
Als je een website ontwerpt moet je rekening houden met de afmetingen van de standaard beeldschermen. De grootste groep gebruikers heeft momenteel een resolutie van 1024 x 786 pixels.(*)
*bron: http://www. w3schools.com/browsers/ browsers_display.asp
Nog belangrijker bij het ontwerpen is dat je rekening houdt met de afmetingen van het bruikbare oppervlak in het browserscherm.
*bron: http://justaddwater. dk/2006/08/17/design-forbrowser-size-not-screensize/
http://www.themaninblue.com/experiment/ResolutionLayout/# (tekstbreedte van kolom past zich aan in verhouding tot breedte en resolutie van het scherm) Vaak wordt in de browserbalk nog een extra balk toegevoegd voor favorieten / bookmarks / Google... De beschikbare oppervlakte wordt daardoor nog kleiner. Om het verschil in formaat en resolutie van schermen op te vangen is ‘liquid layout” een goed alternatief. Een voorbeeld van zo’n contructie kan je hier bekijken
