Welkom bij TheHotSeat, pseudoniem voor een Gentse freelance webontwikkelaar. Maar bovenal een blog over webdesign, webontwikkeling en (digitale) vormgeving

view comments

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:

logo adobe creative suite 4

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?

0 reacties


view comments

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.

probleem van slechte belichting

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.

de adobe camera raw werkruimte

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.

de belichtingsregelaars in acr

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.)

openen als een slim object in acr

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.

de lagenpalet

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!

werken met een laagmasker

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).

afgewerkte foto

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.

0 reacties


view comments

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

optipng in actie in een Terminal venster

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.

0 reacties


view comments

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.

0 reacties


Over logo TheHotSeat 

foto Thomas Byttebier pijltje TheHotSeat is Thomas Byttebier, freelance webontwikkelaar en grafisch ontwerper.
Op deze website blog ik over alles wat met webdesign en digitale vormgeving te maken heeft. Meer informatie over mij.

RSS Feed TheHotSeatLaatste blog posts

Laatste reacties

Categorieën

AlleExpressionEngineiPhoneTransistorMarketingSEOOntwerpTypografieOntwikkelingjQueryPHPZend FrameworkOpiniesOverigePhotoshopWebomgeving