pagina 1 van 10
Deel 4: kleuren, maskers en kleurmodi Walther Hermsen - 24 april 2003
Ook in dit deel van de cursus maak je weer kennis met handige vaardigheden om je foto's via Photoshop 6 te bewerken. Zo leer je om te gaan met de zogenaamde maskers waardoor je sneller een selectie kunt maken. Verder leer je hoe je door een vrij simpele bewerking de kleur van een object kunt vervangen door een andere kleur. Maar naast deze praktische toepassingen wordt in dit deel van de cursus ook een stukje theorie behandeld. Zo wordt er uitleg gegeven over de verschillende kleurmodellen, kleurmodi en bestandsformaten waaruit je kunt kiezen. En verder wordt er aandacht besteed aan het websafe maken van een afbeelding. Vervangen van een kleur Stel, je hebt een mooie foto gemaakt maar de kleuren bevallen je niet. Met Photoshop is het vrij makkelijk om deze kleur subtiel te bewerken, maar je kunt er ook voor kiezen de kleur volledig te vervangen. Hieronder staat een foto van een waterlelie waarvan we de bloem geel willen maken, de foto kun je hier als PSD bestand downloaden zodat je zelf de handelingen uit kunt voeren.
Afbeelding 1. Waterlelie
Om de kleur van de bloem te vervangen door de kleur geel, moet de bloem eerst geselecteerd worden. Natuurlijk kun je dit doen met de Lasso tool in combinatie met de Magic Wand, zoals je in het eerste deel van de cursus al hebt geleerd. Maar het kan ook met een zogenaamde quickmask (snelmasker). Quickmask Een snelmasker is eigenlijk het omgekeerde van een selectie. Maak eerst een grove selectie van de bloem met behulp van de lasso. Klik dan in de toolbox op de knop voor het snelmasker (rechterknop van afbeelding 2), dit kan ook met de Q op het toetsenbord. Q wisselt de modus tussen quick mask en de standaard mode. Terwijl je aan het werk bent kun je zo handig snel even kijken hoe de selectie er op dat ogenblik uitziet.
Afbeelding 2. Snelmasker
http://www4.hccnet.nl/404/dsp_print.cfm?fuseaction=MyApp.Print&id=33&base=Hom... 1-1-2004
pagina 2 van 10
Je zult zien dat alles buiten de selectie voorzien wordt van een transparante laag. In ons geval is er gekozen voor de kleur geel. Zo is heel duidelijk te zien wat er geselecteerd is en wat niet. Overigens kun je de kleur wijzigen die gebruikt wordt om het gebied buiten de selectie te kleuren. Je kunt er zelfs voor kiezen om juist de selectie te kleuren. Dit kan ingesteld worden door dubbel te klikken op het mask-icoontje waarna je de verschillende mask-opties in beeld krijgt. Als je bijvoorbeeld een afbeelding met veel rood wilt bewerken is het handiger om een blauwe mask te kiezen, zie afbeelding 3.
Afbeelding 3. Quick Mask Options
Om de nu nog grove selectie te verfijnen kan bijna elke tool gebruikt worden. In ons geval is er gekozen voor de pencil die je afhankelijk van de benodigde precisie groter en kleiner kunt maken. Makkelijker is om de mask met een flinke vergroting toe te passen zodat op pixelniveau te zien is waar je mee bezig bent. Een handigheid hierbij is het gebruik van de X op je toetsenbord. Door deze toets in te drukken kun je de voor- en achtergrondkleur wisselen in de snelmaskerfunctie. Stel dat je met het nauwkeuriger maken van de selectie per ongeluk uitschiet. Door de X in te drukken kun je dit corrigeren. Als je hierna weer de X indrukt kun je weer verder met het maken van de selectie. Ook handig is om een nieuwe view te openen door op View te klikken en dan te kiezen voor New View. Hierdoor wordt hetzelfde venster nog eens geopend. Zo kun je zien waar je bezig bent. Door te kiezen voor Windows - Tile kun je deze twee vensters netjes naast elkaar zetten. De uiteindelijke snelmaskerselectie ziet er uit als foto 2 in afbeelding 4. Foto 1 is het origineel.
Afbeelding 4. Het toepassen van een snelmasker
Met het maken van een snelmasker kleur je alles wat je NIET wilt selecteren geel. De selectie zelf blijft ongekleurd. De selectie kun je nu activeren door de standaard edit modus te herstellen (linkerknop van afbeelding 2 indrukken in de Toolbox), de selectie zie je nu weer aangegeven door de 'marching ants' (het stippellijntje).
http://www4.hccnet.nl/404/dsp_print.cfm?fuseaction=MyApp.Print&id=33&base=Hom... 1-1-2004
pagina 3 van 10
Nu je een perfecte selectie hebt gemaakt kun je hier alle bewerkingen op loslaten die je wilt. Wel moet je natuurlijk eerst even de selectie opslaan door Select - Save Selection. Je kunt dan altijd weer de selectie opvragen door middel van Load Selection zolang de afbeelding open blijft staan. Duplicate Layer Nu je een selectie hebt gemaakt van het object/gedeelte van de afbeelding, waar je de kleur van wilt veranderen, is het maken van een Duplicate layer de volgende stap. Dit doe je door in de menubalk te klikken op Layer en vervolgens op Duplicate layer. Nadat je deze nieuwe laag een naam hebt gegeven zie je hem verschijnen in het Layer palet. De oorspronkelijke laag laten we verder met rust. In de nieuwe laag zorgen we ervoor dat alles buiten de lelie verwijderd wordt. Dit doe je door de selectie eerst omgekeerd te maken (Ctrl-Shift-I) en daarna op delete te drukken. In eerste instantie zie je weinig veranderen, dit komt doordat de eerste laag ongestoord blijft. In het Layers palet zie je echter van de nieuwe laag dat alleen de bloem is overgebleven (zie afbeelding 5).
Afbeelding 5. Layers palet: Duplicate layer
Zorg er vervolgens voor dat deze nieuwe laag vooraan staat en 'geactiveerd'. De eerste stap om de bloem een andere kleur te geven is het wegnemen van de oorspronkelijke kleur. Dit doe je door weer gebruik te maken van Ctrl-Shift-I waardoor de bloem weer staat geselecteerd. Vervolgens klik je op Image in de menubalk, daarna Adjust en tenslotte op Desaturate. Hierdoor verdwijnen de kleuren van de lelie zoals je ziet in afbeelding 6 foto 1.
http://www4.hccnet.nl/404/dsp_print.cfm?fuseaction=MyApp.Print&id=33&base=Hom... 1-1-2004
pagina 4 van 10
Afbeelding 6. Toevoegen van een nieuwe kleur
De nieuwe kleur Om nu de bloem met een nieuwe kleur te vullen wordt weer een nieuwe laag gemaakt. In dit geval een New Fill Layer omdat we met kleuren willen werken. Dit gebeurt door te klikken op New Fill Layer en vervolgens of Solid Color. Hierdoor verschijnt een schermpje in beeld in welke je de kleur uit kunt kiezen. In ons geval is dat geel. Verder, omdat we een realistische kleur willen hebben moet je kiezen voor Soft Light en een Opacity (ondoorzichtigheid) van 85%. Het resultaat van de New Fill Layer zie je in afbeelding 6. foto 2. Nu moeten we deze laag koppelen aan de bloem zodat een bewerking op de bloem ook invloed heeft op deze laag. Dit gebeurt door met de muis op de rand te staan van de twee lagen in het layerspalet. Als je nu de Alt-toets indrukt zie je de muis in twee rondjes veranderen. Door nu te klikken met de muis koppel je de kleurlaag aan de bloemlaag, zie afbeelding 7.
Afbeelding 7. New Fill Layer
Overigens kan dit ook door Layer - Group with previous of de toetsencombinatie Ctrl - G. Nu je dit resultaat hebt bereikt kun je de verschillende lagen samenvoegen door Layer - Merge Down. Hierna kun je zoals je al eerder in de cursus 'met Grace Kelly' geleerd hebt, gebruik maken van Hue/Saturation en Brightness/Contrast om de kleur te intensiveren. Het resultaat is te zien in foto 3 van afbeelding 6. Ten slotte kun je met de tekengereedschappen, waar je ook eerder kennis mee hebt gemaakt in het vorige deel van de cursus, de afbeelding 'af' maken door het hart van de bloem in te kleuren. Zie foto 4 van afbeelding 6.
http://www4.hccnet.nl/404/dsp_print.cfm?fuseaction=MyApp.Print&id=33&base=Hom... 1-1-2004
pagina 5 van 10
Hieronder in afbeelding 8. vind je nog twee voorbeelden van hoe je het vervangen van kleuren toe kunt passen.
Afbeelding 8. Voorbeelden van kleurvervanging
In dit deel, maar ook in de vorige delen van de cursus, heb je al herhaaldelijk met kleuren gewerkt binnen Photoshop. In Photoshop worden de kleuren in een afbeelding bepaald door het kleurmodel en de kleurmodus. Kleurmodellen Een kleurmodel is een van tevoren vastgestelde range van kleuren, dit is vaak een theoretische beschrijving. Een kleurmodus bepaalt hoe er met het model om wordt gegaan en welk kleurpalet beschikbaar is voor de afbeelding. De kleurmodus zorgt ervoor dat de range kleuren uit het kleurmodel bewerkt, getoond en geprint kan worden. Photoshop biedt vier verschillende kleurmodellen. Het RGB Model Voor ons is het RGB model het belangrijkste model, eigenlijk is het ook het simpelste model. Dit model wordt gebruikt om het spectrum van licht na te bootsen. Elk apparaat dat werkt met licht, bijvoorbeeld de monitor of scanner maar ook het menselijk oog, is gebaseerd op dit model. Het model wordt ook wel aangeduid als het Additief Primair model, omdat de additief primaire kleuren Rood, Groen en Blauw (vandaar RGB), de primaire kleuren van het zichtbare spectrum, in dit model gebruikt worden. Het beeld van de monitor wordt opgebouwd uit deze drie RGB-kleuren. De pixels van de monitor worden ieder afzonderlijk met de drie RGB-kleuren belicht. Door de intensiteit van de afzonderlijke kleuren te laten variëren kan een bepaalde mengkleur ontstaan. Deze intensiteit wordt geregeld in stappen van 0 tot 255. Deze 256 mogelijke stappen kunnen worden beschreven met 8 bits en dit voor iedere kleur. In totaal is er 24 bits nodig om de kleur van één pixel te beschrijven. Het RGB model wordt daarom ook wel een 24-bits kleursysteem genoemd.
http://www4.hccnet.nl/404/dsp_print.cfm?fuseaction=MyApp.Print&id=33&base=Hom... 1-1-2004
pagina 6 van 10
Afbeelding 9. Additief kleurmengen
Het HSB Model In het HSB model wordt elke kleur gedefinieerd aan de hand van de menselijke waarneming, uitgedrukt in drie waarden, Hue (de kleurtoon), Saturation (kleurverzadiging) en Brightness/Lightness (helderheid). De kleurtoon wordt uitgedrukt in graden (0 tot 360) op de zogenaamde standaardkleurencirkel, bestaande uit de drie primaire basiskleuren (RGBkleuren) en diens mengkleuren, de secundaire basiskleuren. De kleurverzadiging, of chroma, is een uitdrukking voor de sterkte van de kleur gemeten in percentages waarbij 0% een volledige desaturatie inhoudt met als resultaat een grijze kleur en 100% een volledige verzadiging met als resultaat de 'volle' kleur. De helderheid wordt ook gemeten in een percentage van 0% tot 100%, alleen in dit geval staat 0% voor zwart en 100% voor wit. Het CMYK Model Het CMYK model (uitgesproken als smik) wordt gebruikt bij het afdrukken van kleuren met drukinkt en is derhalve gebaseerd op de reflectie van kleuren. Het CMYK model wordt bijvoorbeeld toegepast door drukkers. In tegenstelling tot het additieve RGB model spreekt men in geval van het CMYK model over een subtractief primair model. Het model werkt met vier kleuren; zwart en de drie primaire drukinktkleuren, cyaan, magenta en geel.
Afbeelding 10. Kleurencirkel
Het Lab Model Het Lab model wordt ook wel het CIE Lab genoemd omdat het is ontwikkeld door de Commission Internationale d'Eclarage (CIE). Eigenlijk zijn alle kleuren van alle besproken modellen in dit model opgenomen, en meer! Alleen het model is zeer complex en niet intuïtief, iets wat het minder uitnodigend maakt voor gebruik. Kleurmodi Nu je weet welke modellen door Photoshop gebruikt worden, kun je bepalen welke modus gekozen moet worden voor de bewerking van een afbeelding. Hiermee houd je rekening met wat je uiteindelijk met de afbeelding van plan bent. Als je de afbeelding voor een brochure wilt gebruiken ligt het voor de hand dat je moet kiezen voor de CMYK modus. De kleurenafbeelding wordt namelijk gedrukt. Echter, wanneer je met kleurenafbeeldingen werkt voor gebruik op Internet is RGB de aangewezen modus. Hoe kun je de kleurmodi bekijken? Allereerst kies je Image, vervolgens klik je op Mode (zie afbeelding 11).
http://www4.hccnet.nl/404/dsp_print.cfm?fuseaction=MyApp.Print&id=33&base=Hom... 1-1-2004
pagina 7 van 10
Afbeelding 11. Kleurenmodi
Je ziet verschillende modi staan. RGB, CMYK en Lab hebben we besproken. Een andere belangrijke modus is de Indexed Color modus (Geïndexeerde kleur). In deze modus kun je het aantal kleuren kiezen dat je wilt gebruiken. Hierover later in dit deel van de cursus meer. Wat opvalt is dat er geen modus voor HSB beschikbaar is, met andere woorden je kunt afbeeldingen niet in de HSB modus zetten en vervolgens bewerken. Wel is het mogelijk om in het kleurenpalet en in de kleurenkiezer (waarover later meer) de HSB waarden aan te passen. Beperkte HSB manipulaties zijn dus wel mogelijk zonder in de HSB modus te werken. Websafe maken van een afbeelding Per kleur kunnen er 256 verschillende gradiënten weergegeven worden. Bij elkaar zijn dat dus 256*256*256= ±16,7 miljoen kleuren. Deze worden echter niet door alle browsers en monitoren op dezelfde wijze weergegeven. In de praktijk wordt er een websafe kleurenrange gehanteerd die bestaat uit 216 kleuren die wel door alle browsers, monitoren en besturingssystemen hetzelfde worden weergegeven. Als je er dus absoluut van overtuigd wilt zijn dat de afbeelding die je hebt gemaakt bij iemand anders op de monitor exact dezelfde kleuren als bij jou heeft, moet je werken met webveilige kleuren. Op Internet staan de kleuren van een pagina in de broncode als een hexadecimale aanduiding (#RRGGBB) weergegeven. De letters R, G en B staat in dit geval ook weer voor de primaire kleuren Rood, Groen en Blauw van het visuele spectrum. Alleen de waarden voor RR, GG en BB die met 00, 33, 66, 99, CC en FF beginnen zijn webveilig. Zoals net al vermeld zijn dit 216 kleuren, namelijk 6x6x6. In het RGB model zoals dat in Photoshop en andere beeldbewerkingsprogramma's gehanteerd wordt zijn dat voor R, G en B de waarden 0, 51, 102, 153, 204 en 255. In het RGB model kon voor iedere kleur gekozen worden uit 256 waarden. Weet je nog? Webveilige kleuren via de kleurenkiezer Hoe je voor een afbeelding een voorgrond- en achtergrondkleur kunt kiezen, door middel van de stalen in het kleurenpalet, is al eerder besproken in de cursus. Ook kun je een voorgrondof achtergrondkleur kiezen voor een bestaande afbeelding door in de afbeelding met de pipet uit de toolbox op de gewenste kleur te klikken. Verder is het mogelijk om in het kleurenpalet niet alleen via de stalen, maar ook door op het kleurverloop onder in het tabblad color te klikken een kleur te kiezen. Door te klikken op de voor- of achtergrondkleur die je gekozen hebt verschijnt de Color picker (kleurkiezer) in beeld, zie afbeelding 12.
http://www4.hccnet.nl/404/dsp_print.cfm?fuseaction=MyApp.Print&id=33&base=Hom... 1-1-2004
pagina 8 van 10
Afbeelding 12. Color Picker
In de color picker ofwel kleurenkiezer kun je veel preciezer de gewenste kleur kiezen. Links zie je het grote kleurvak waar een cirkeltje staat om de gekozen voor- of achtergrondkleur. Door met de muis de cirkel ergens anders te plaatsen verandert de kleur. Probeer maar eens. Overigens zie je rechts van het kleurvak de waarden voor de kleurmodellen HSB, RGB, Lab en CMYK. Als je alleen maar uit de webveilige kleuren wilt kiezen kun je linksonder het vakje bij Only Web Colors aanvinken. Hierdoor zie je de vloeiende gradiënt verdwijnen en rechts zie je de waarden veranderen voor de kleuren naar die van de webveilige kleuren. Overigens zie je ook de hexadecimale aanduiding voor de kleuren onder de RGB waarden staan, deze wordt gebruikt in de broncode van HTML-pagina's. Als er geen vinkje staat bij Only Web Colors is het sowieso altijd te zien of je met een webveilige kleur werkt. Als je met een niet-webveilige kleur werkt verschijnt er namelijk een klein waarschuwingskubusje naast het kleurvlak waar de huidige kleur en de te kiezen kleur staan, om aan te duiden dat het geen webveilige kleur is, zie afbeelding 13. Door op dit kubusje te klikken wordt automatisch de kleur vervangen door die webveilige kleur die er het dichtste bij ligt.
Afbeelding 13. Websafe of niet?
Webveilige kleuren via het kleurenpalet Door in het kleurenpalet op het optieknopje te klikken kun je door een vink voor Web Color Sliders en een vink voor Make Ramp Web Safe te zetten, webveilige kleuren kiezen binnen het kleurenpalet.
http://www4.hccnet.nl/404/dsp_print.cfm?fuseaction=MyApp.Print&id=33&base=Hom... 1-1-2004
pagina 9 van 10
Afbeelding 14. Webveilige kleuren via het colorpalet
Je ziet in het kleurenpalet nu bij de sliders (schuifknoppen) een indeling naar veilige webkleuren. Ook in het kleurenverloop onder in de palet kun je nu webveilige kleuren kiezen. Zie afbeelding 15. Overigens, door tijdens het schuiven van de sliders de Alt-toets ingedrukt te houden kun je ook niet webveilige kleuren kiezen. Ook hierbij verschijnt dan het waarschuwingskubusje weer in beeld.
Afbeelding 15. Websafe sliders
Bestandsformaten Er zijn veel verschillende bestandsformaten die je kunt gebruiken voor het opslaan van een afbeelding. Hieronder is een overzicht te zien.
Afbeelding 16. Bestandsformaten binnen Photoshop
De belangrijkste bestandsformaten zijn JPG (voor foto's) en GIF (eenvoudige afbeeldingen), maar ook BMP, PNG en TIF (TIFF) zijn veelgebruikte formaten. GIF Gif is een van de meest gebruikte bestandsformaten op Internet. De kleurmodus voor Gif is Geïndexeerde Kleur met een maximum van 256 kleuren. Gif is vooral goed voor eenvoudige afbeeldingen maar niet geschikt voor foto's. JPG Naast Gif is JPG het meest gebruikte bestandsformaat op Internet. JPG-afbeeldingen kunnen in theorie meer dan 16 miljoen kleuren bevatten. Het formaat is uitstekend geschikt voor foto's. Voor tekeningen met maar enkele kleuren is het beter om het Gif-formaat te gebruiken. Let
http://www4.hccnet.nl/404/dsp_print.cfm?fuseaction=MyApp.Print&id=33&base=Hom... 1-1-2004
pagina 10 van 10
wel op, JPG comprimeert zeer effectief maar met verlies. Elke keer als een JPG-afbeelding wordt geopend en weer wordt opgeslagen treedt er verlies aan gegevens op en dus een teruggang in de kwaliteit. Bewaar daarom altijd het originele bestand van de afbeelding, als het kan het PSD-bestand. BMP is het standaard Windows-formaat, een kopie van de schermbitmap zonder compressie. PNG is een compressieformaat van RGB-kleuren zonder verlies van informatie. Het Tif ofwel TIF-formaat is een algemeen grafisch formaat dat gelijk is voor zowel Mac als Windows. Het gaat te ver om alle formaten uitvoerig te bespreken. Aan te raden is om zelf met de verschillende formaten te experimenteren en er zodoende achterkomen wat de mogelijkheden zijn. Maar zoals gezegd zouden voor Internettoepassingen afbeeldingen zo klein mogelijk moeten blijven. De verschillende formaten kun je met elkaar vergelijken in het Save for Web venster. Hoe dit gedaan wordt komt uitvoerig aan de orde in het vijfde deel van de Cursus Photoshop. © Hccnet.nl
http://www4.hccnet.nl/404/dsp_print.cfm?fuseaction=MyApp.Print&id=33&base=Hom... 1-1-2004