Welkom bij TheHotSeat, pseudoniem voor een Gentse freelance webontwikkelaar. Maar bovenal een blog over webdesign, webontwikkeling en (digitale) vormgeving
Tientallen foto’s in één klap stofvrij maken!
11 Sep 2008•Wie met een digitale reflexcamera foto’s neemt, krijgt ongetwijfeld wel eens last van stof op de sensor. Heel vervelend is dat, want het zorgt voor kleine maar zichtbare vlekjes op je digitale foto’s. De afbeelding hieronder illustreert dat:

De sensor schoonmaken is dan uiteraard aangeraden, maar ondertussen zit je wel met tientallen of honderden bevlekte digitale foto’s. Onbegonnen werk om die allemaal manueel te gaan retoucheren.
Adobe Camera Raw
Gelukkig staan de vlekjes op elke foto altijd op exact dezelfde plaats. Dat maakt het makkelijk om de veelheid aan foto’s in één bewerking stofvrij te maken. De Adobe Camera Raw plugin van Photoshop CS3 helpt je hierbij.
Stap 1: Open je foto’s in Camera Raw
Open Photoshop CS3 en gebruik het menu ‘Bestand’ > ‘Bladeren’ om Adobe Bridge op te starten. In Bridge blader je naar de juiste map en selecteer je alle besmette foto’s. Het maakt niet uit of dat jpg of raw bestanden zijn.

Daarna kies je voor ‘Bestand’ > ‘Openen in Camera Raw’.

Het Camera Raw dialoogvenster verschijnt en hoewel er slechts 1 van de foto’s uitgelicht is voor bewerking, zie je aan de linkerkant toch een thumbnail van alle daarnet geselecteerde foto’s.

Stap 2: Zoomen & retoucheren
Zoom in op het stofvlekje op je foto door gebruik te maken van het Zoomen gereedschap.

Vervolgens activeer je het gereedschap Retoucheren en klik je éénmaal midden op de vlek. Photoshop retoucheert nu het vlekje automatisch terwijl je een rode en een groene cirkel te zien krijgt.

De rode cirkel duidt de plaats aan die Photoshop onderzoekt op vlekken. De groene cirkel toont je waar Photoshop de informatie vindt waarmee de vlek uit de rode cirkel weggeretoucheerd kan worden. De pixels uit de groene cirkel doen dus dienst als kloonbron voor de pixels uit de rode cirkel.
Stap 3: Verfijn je retoucheerwerk
Wil je andere pixels als kloonbron kiezen, verplaats dan gerust de groene cirkel. Gebruik de regelaar bij ‘Straal’ om de cirkeltjes groter of kleiner te maken. Het beste resultaat bekom je doorgaans door de rode cirkel net iets groter te maken dan het te retoucheren vlekje. Wil je je foto bekijken zonder de cirkeltjes te zien, vink dan ‘Bedekking tonen’ af. De knop ‘Alles wissen’ wist de cirkeltjes en daarmee ook het retoucheerwerk van Photoshop.
Stap 4 (optioneel): Bijkomende vlekjes verwijderen
Herhaal de bovenstaande stappen (2 en 3) indien nodig om meerdere vlekjes te verwijderen.
Stap 5: Synchroniseren!
Zo, je eerste foto is nu vlekvrij. Om de vlekken ook van de andere foto’s te verwijderen kan je links bovenaan in Camera Raw op de knop ‘Alles selecteren’ klikken. Hiermee activeer je alle geopende foto’s. Klik nu op ‘Synchroniseren’. Een dialoogvenstertje komt tevoorschijn dat je vraagt welke bewerkingen je wil synchroniseren met alle actieve foto’s.

Kies uit de keuzelijst de voorinstelling ‘Vlekken verwijderen’ en klik op ‘Ok’. Photoshop past nu je bewerking toe op alle foto’s en voilà: alle foto’s zijn meteen verlost van vlekken!
Stap 6: Verifiëren
Eventueel kan je de foto’s één voor één overlopen door op hun thumbnails te klikken aan de linkerkant van het Camera Raw venster. Zo kan je verifiëren of het retoucheren overal goed is verlopen. Verplaats de groene cirkel als je hier en daar wat wil bijsturen per foto.
Stap 7: Opslaan
Vervolgens klik je rechts onderaan op de ‘Gereed’ knop en klaar is kees!
Categorieën: Photoshop,
Top vijf nieuwe functies voor aangekondigde Adobe Photoshop CS4
5 Sep 2008•Adobe heeft op z’n website laten weten dat het Creative Suite 4 zal aankondigen in een webuitzending op 23 september. Meer dan waarschijnlijk wordt er dus in 2009 een nieuwe versie van Photoshop op de wereld losgelaten. “It’s going to be brilliant”, is wat Adobe er zelf over te zeggen heeft.
Dat zullen we dan wel zien zeker? Het logo dat nu de registratiepagina voor de CS4 webuitzending ontsiert, schept alvast geen hoge verwachtingen:

Hoe dan ook: ik hou van Photoshop en een nieuw versienummer betekent nieuwe functies die de digitale fotobewerking makkelijker moeten maken. Als ik zo vrij mag zijn enkele suggesties te doen, hier is mijn persoonlijk wenslijstje voor Photoshop CS4:
1. Een masker per slimme filter
Het maakt niet uit hoeveel filters je toepast op een slim object, Photoshop creërt altijd 1 masker per object. Zou het niet fantastisch zijn als Photoshop CS4 die logica kon omkeren en ons 1 masker per slimme filter zou toelaten? Pas dan benader je echt de kracht en flexibiliteit van de zo geliefde aanpassingslagen. (Edit: Hier vind je trouwens een tussenoplossing!)
2. Betere grafische gebruikersomgeving (GUI)
De grafische gebruikersomgeving van Photoshop bulkt letterlijk uit van de regelaars, keuzelijsten, balken, menu’s, venstertjes, knopjes, subknopjes, subsubknopjes en subsubsubknopjes. En met elke nieuwe versie wordt het probleem alleen maar erger. Sommige zaken zitten dan nog eens op de meest onlogische plaatsen verborgen. Resultaat: het programma is een hel om aan te leren. Een goede hersituering van de GUI zou zeker en vast een verademing betekenen.
3. Visuele aanpassingen & alles omkeerbaar
In die zin is Adobe Camera Raw eigenlijk veel eigentijdser: bij alles wat je uitvoert zie je tegelijkertijd het resultaat toegepast op je foto. Ook de ‘meer-of-minder-regelaars’ werken heel intuïtief. Daarbovenop is elke bewerking altijd omkeerbaar. Het gevaar dat je je originele foto dus verprutst is onbestaande.
4. Maskers in Adobe Camera Raw
Adobe Camera Raw (ACR) is om bovenvermelde redenen prachtig. Jammergenoeg kan je er wel geen lokale aanpassingen doen aan je foto: elke bewerking wordt altijd op je volledige afbeelding toegepast. De inbreng van maskers in ACR zou dus wel eens een hit kunnen zijn. Of nog beter: een volledige integratie van Camera Raw in Photoshop zelf!
5. Een betere ruisreductiefilter
De filters om ruis van digitale foto’s te verwijderen werken eigenlijk helemaal niet goed. Een betere ruisreductiefilter is zeker geen overbodige luxe. Vooral omdat het ook een pak meer mogelijkheden zou bieden voor het verbeteren van sterk onderbelichte foto’s.
Welke nieuwe mogelijkheden zou jij het liefste zien opduiken in Photoshop CS4?
Categorieën: Photoshop,
Belichtingscorrectie met Photoshop CS3
22 Aug 2008•De foto die je hieronder ziet, illustreert een veelvoorkomend fotografisch probleem. Het is een foto die ik nam op een bewolkte dag in Montréal, Canada. De combinatie van de drukke wolkenhemel en de strakke lijnen van de wolkenkrabber sprak me sterk aan, dus probeerde ik beide samen op de digitale gevoelige plaat te zetten. Het resultaat kan je zien: heel matig.

Het probleem situeert zich uiteraard in de belichting: een stuk van de wolken is overbelicht, terwijl er grote delen van de wolkenkrabber onderbelicht zijn. Hierdoor gaan heel wat interessante details verloren en dat is jammer.
Eigenlijk valt hier op het moment van de opname maar weinig tegen te doen. Camera’s hollen nu eenmaal het menselijke oog hopeloos achterna. Geen enkele is in staat om een beeld als dit op het vlak van belichting perfect te fotograferen.
De ‘oude’ oplossing
Vroeger nam de fotograaf in situaties als deze twee foto’s: eentje waarbij de wolkenmassa mooi belicht is (en het appartementsgebouw dus pikzwart) én eentje waarbij de wolkenkrabber er goed uitziet (en de hemel dan wel spierwit). In Photoshop werd het beste van beide foto’s dan achteraf gecombineerd tot het gewenste resultaat.
Gemakkelijker dankzij Photoshop CS3 en Raw
Het kan eenvoudiger, maar je moet er wel voor in het RAW-formaat fotograferen. Als je fototoestel RAW ondersteunt, dan vind je in de handleiding zeker hoe je kan switchen van JPG naar RAW. In zo’n RAW-bestand is er altijd heel wat meer beeldinformatie aanwezig dan wat er op je scherm te zien is. Dankzij Photoshop kan je zo toch nog detail terugvinden in delen van je foto die er op het eerste gezicht hopeloos over- of onderbelicht uitzien.
Dubbele belichting
Om de foto te corrigeren ga ik de techniek van de dubbele belichting toepassen. Hiervoor maak ik gebruik van Adobe Photoshop CS3. Volg even mee.
Stap 1: open je foto in Photoshop
Omdat het een RAW-foto betreft, wordt het beeld geopend in de Adobe Camera Raw-werkomgeving. Dat is een onderdeel van Photoshop dat RAW-bestanden kan openen en bewerken.

Stap 2: eerste maal belichten
Gebruik de regelaars vanaf ‘Belichting’ tot en met ‘Helderheid’ om de belichting van de wolken goed te krijgen. Waarschijnlijk wil je hier vooral de regelaar ‘Belichting’ naar links bewegen, zodat de wolken donkerder worden en er dus meer detail te zien is. Terwijl je dit doet, wordt ook de wolkenkrabber een stuk donkerder natuurlijk, maar dat probleem lossen we straks wel op. Focus je nu alleen op het overbelichte stuk van je foto en negeer die wolkenkrabber.

Stap 3: open de foto in Photoshop als een slim object
Via de knop ‘Afbeelding openen’ onderaan kan je de foto openen in Photoshop als een gewone pixellaag. Maar om deze techniek te doen slagen moeten we de foto openen als een slim object. Houd hiervoor de shifttoets ingedrukt: de ‘Afbeelding openen’-knop verandert nu naar een ‘Object openen’-knop. Klik op de knop terwijl je de shifttoets ingedrukt houdt. De foto wordt nu in Photoshop geopend als een slim object. (Meer informatie over slimme objecten komt aan bod in een latere blogpost.)

Stap 4: maak een nieuw slim object via kopiëren
Geef het slim object (de laag) in het lagenpalet een beschrijvende naam, zoals ‘wolken goed belicht’. Dat kan je doen door te dubbelklikken op de huidige naam van de laag. Ga dan naar het menu ‘Laag’ > ‘Slimme objecten’ > ‘Nieuw slim object via kopiëren’ om het slimme object te kopiëren naar een nieuwe laag. Je hebt nu twee lagen met daarop exact dezelfde foto.

Stap 5: tweede maal belichten
Dubbelklik op de miniatuurafbeelding van het bovenste slimme object in het lagenpalet. Je foto wordt nu opnieuw geopend in Adobe Camera Raw. In Camera Raw gebruik je dezelfde regelaars als daarnet, maar nu om de belichting van het appartementsgebouw te corrigeren. Je zal zien dat de wolkenhemel hierdoor een witte vlek wordt, maar dat is niet erg. Focus je nu alleen op het onderbelichte stuk van je foto. Klik op de knop ‘Ok’ onderaan om de wijzigingen door te voeren in Photoshop.
Stap 6: geef je tweede slim object een naam
Geef de bovenste laag in het lagenpalet een beschrijvende naam, zoals ‘gebouw goed belicht’. Dat kan je doen door te dubbelklikken op de huidige naam van de laag (‘wolken goed belicht kopie’). Neem ook even wat tijd om je lagenpalet te bestuderen: op de onderste laag vind je de foto met de goed belichte wolken en op de bovenste laag vind je de foto met het goed belichte gebouw.
Stap 7: combineer het beste van beide lagen
Voeg een laagmasker toe aan de bovenste laag. Dat kan je doen door de bovenste laag te selecteren (eenmaal op klikken) en dan in het menu te kiezen voor ‘Laag’ > ‘Laagmasker’ > ‘Alles onthullen’. Neem nu in het gereedschapspalet een penseel en schilder met zwart op het masker op die plaats van je foto waar je pixels wil verbergen. Je schildert dus over het slechtbelichte stuk (de wolken in ons geval). Zodra je dat doet, zal je zien dat de pixels van de onderste laag op die plaatsen zichtbaar worden. Op die manier kan je dus het beste van beide lagen behouden. Fantastisch, niet!

De afgewerkte foto
Hieronder vind je de afgewerkte foto. Merk op dat er nu wel veel detail te zien is in de wolken bovenaan. Ook in het gebouw zelf is heel wat detail te zien in de plaatsen die voorheen veel te donker waren.
Hier vind je een vergelijking (voor en na).

Meer informatie over RAW vind je op deze Wikipediapagina. Toch nog even snel een waarschuwing: het spreekt voor zich dat té sterk over- of onderbelichte plaatsen in een foto niet te herstellen zijn. In een RAW-bestand zit heel wat meer informatie dan in een JPG-bestand, maar verwacht nu ook geen wonderen.
Categorieën: Photoshop,
OptiPNG: een korte handleiding
14 Aug 2008•Zoals in mijn vorige blogpost verteld, is Photoshop niet altijd ideaal wanneer je png-afbeeldingen wil optimaliseren voor het web. Toen ik aan de TheHotSeat-website werkte leverde OptiPNG in dat opzicht verbazingwekkende resultaten op. Het tooltje slaagde erin de Photoshop-png-bestanden gemiddeld zo’n 10% ‘lichter’ te maken. En dat zonder zichtbaar kwaliteitsverlies.
OptiPNG is een opensourceprogramma dat je gratis kan downloaden en gebruiken. Het is beschikbaar voor PC, Linux en Mac. De versie die ik in deze handleiding demonstreer, is de Mac 0.6-versie. Werk je niet op Mac, dan kan je met wat creativiteit en gezond verstand mijn uitleg zeker ook volgen op het platform dat jij gebruikt.
OptiPNG installeren
Na het downloaden en unzippen/untarren (gewoon dubbelklikken, je Mac doet de rest) krijg je de OptiPNG-bronbestanden in een mapje genaamd ‘optipng-0.6’ op je computer, waarschijnlijk in je ‘downloads’-map. Blader naar je ‘Programma’s’ > ‘Hulpprogramma’s’-map en start Terminal op. We gaan OptiPNG jammer genoeg moeten installeren en bedienen via Terminal omdat er geen GUI voorhanden is. Maar vrees niet, het is vrij eenvoudig.
In Terminal blader je eerst naar het OptiPNG source-mapje op je harde schijf via het commando:
cd downloads/optipng-0.6/src/
Start dan het makebestand uit de scripts map:
make -f scripts/gcc.mak
Als je niet voldoende rechten hebt, dan krijg je waarschijnlijk een foutmelding te zien. Probeer dan:
sudo make -f scripts/gcc.mak
en geef daarna je OSX-wachtwoord in.
Daarna installeer je het programma via hetzelfde makebestand:
make -f scripts/gcc.mak install
OptiPNG gebruiken
Om een png-bestand te comprimeren kan je gebruik maken van het ‘cd’-commando in Terminal om te bladeren naar het mapje waar het png-beeldje zich bevindt, bijvoorbeeld:
cd downloads/png-beeldjes/
Vervolgens laat je OptiPNG zijn werk doen:
optipng Afbeelding1.png
OptiPNG probeert nu tientallen png-compressiemethodes uit. De methode die het kleinste png-beeldje oplevert, zal uiteindelijk ook toegepast worden op je bronbestand (Afbeelding1.png in het voorbeeld hierboven). Het geoptimaliseerde bestand zal het oorspronkelijke bronbestand overschrijven. Wil je liever een back-up van je bronbestand? Gebruik dan:
optipng -k bestand1.png

Voilà, zo eenvoudig is het. Je kan OptiPNG trouwens ook gebruiken om gif-, tiff-, bmp- of pnm-bestanden om te zetten naar png. Voor meer compressieopties raad ik je aan de OptiPNG-handleiding eens na te kijken. Zo kan je bijvoorbeeld ook kiezen voor simulaties, interliniëringopties instellen, het kleurenpalet beheren of het niveau van compressie instellen.
OptiPNG: ook de smalbandsurfer telt
28 Jul 2008•Tijdens het ontwerpen van TheHotSeat.be werd al snel duidelijk dat het een website zou worden die veel afbeeldingen bevat. Niet meteen afbeeldingen in de zin van echte foto’s, maar veeleer grafische elementen die het ontwerp een meerwaarde geven. Denk maar aan het subtiele motiefje dat in de bovenste donkere balk te zien is, de schaduw in het groene vlak hierboven of de lijntjes achter deze tekst.
Het nadeel van afbeeldingen
Afbeeldingen kunnen een webpagina een stuk aantrekkelijker maken, maar ze moeten natuurlijk wel telkens gedownload worden door de bezoeker zodat die ze op zijn scherm kan zien. En daar wringt het schoentje een beetje: de bestandsgrootte van afbeeldingen is doorgaans een stuk groter dan die van gewone html-tekst. Dat zorgt voor langere downloadtijden voor de bezoeker.
Een breedbandsurfer zal daar waarschijnlijk niets van merken, maar bij hen die via tragere verbindingen het web doorkruisen, kan zo’n afbeeldingsintensieve site nogal wat frustratie teweegbrengen. Stel je maar eens voor dat je telkens 15 seconden moet wachten vooraleer je een pagina op je favoriete website te zien krijgt…
Afbeeldingen optimaliseren met Photoshop
Afbeeldingen optimaliseren is dus de boodschap: hierbij ga ik op zoek naar de beste verhouding tussen een kleine bestandsgrootte en een hoge afbeeldingskwaliteit. Door de afbeeldingen te comprimeren via diverse compressiemethodes kan je vaak de bestandsgrootte van een beeldje serieus verminderen, zonder dat dat de kwaliteit van de afbeelding erbarmelijk hoeft te maken.
Het dialoogvenster ‘Opslaan voor web & apparaten’ (Eng: ‘Save for web & devices’) in Photoshop helpt je hierbij grandioos: je kan verschillende bestandstypes overlopen (jpg, gif of png) en meteen zien welk type de beste verhouding oplevert tussen bestandsgrootte en afbeeldingskwaliteit. Maar als je kiest voor png-24 als bestandstype, dan zijn er weinig extra opties die je zelf kan instellen om tot een nog kleiner beeldje te komen. Photoshop maakt heel gewoon een png-bestand van je afbeelding en dat is te nemen of te laten.
Verwelkom OptiPNG
Omdat op het web elke byte telt, ben ik op zoek gegaan naar een manier om de door Photoshop gegenereerde png-bestanden nog verder te comprimeren. En daarbij stootte ik op het fantastische OptiPNG. Het is een open-source command line programma, beschikbaar voor Mac én PC, dat automatisch tientallen png-compressiemethodes uittest op je beeldje en dan uiteindelijk de methode die het kleinste aantal bytes oplevert zal toepassen.
De resultaten met de png-afbeeldingen voor deze website waren verbazingwekkend. In de meeste gevallen genereerde OptiPNG een nieuw png-beeldje dat gemiddeld zo’n 10% kleiner was in bestandsgrootte. En de compressie is ‘lossless’, wat wil zeggen dat er geen zichtbaar kwaliteitsverlies optreedt. Nu lijkt 10% misschien niet zoveel, maar als er 20 afbeeldingen op één webpagina voorkomen, dan scheelt dat natuurlijk wél een slok op een borrel.
De smalbandsurfer zal je er dankbaar voor zijn. En daar draait het natuurlijk om, want een goede website moet altijd toegankelijk, duidelijk en prettig zijn voor zoveel mogelijk gebruikers.
Hoe je OptiPNG kan installeren en gebruiken, komt aan bod in een volgende blogpost. Heb je zelf ervaring met OptiPNG of ander png-optimalisatiegereedschap? Laat dan zeker iets weten in een reactie op deze blogpost.
Over
TheHotSeat is Thomas Byttebier, freelance webdesigner en user interface designer.
Op deze website blog ik over alles wat met webdesign en digitale vormgeving te maken heeft. Meer informatie over mij. @bytte op Twitter.
RSS Feed TheHotSeatLaatste blog posts
- Responsive web design
- Designer meetup Gent part 2
- Mobile first ontwerpen
- Sleepstreet: mijn eerste responsive ontwerp
- Ontwerpen zonder bladspiegel
Laatste reacties
- Maartje op Links op Twitter
- Stuart op Responsive web design
- Ton van Leest op Responsive web design
- Jeroen op Responsive web design
- Mindmap maken op Designer meetup Gent…
Categorieën
Alle • ExpressionEngine • iPhone • Transistor • Marketing • SEO • Ontwerp • Typografie • Ontwikkeling • jQuery • PHP • Zend Framework • Opinies • Overige • Photoshop • Webomgeving