Tekstomloop op het web in Photoshop

Bij het ontwerp van nieuwspagina’s of blogpagina’s op websites zie je vaak een foto links of rechts bovenaan het artikel. De tekst loopt dan mooi rondom de foto. Hieronder een voorbeeldje van wat ik bedoel, zoals te zien op www.typography.com:

Het is een vormgeving die natuurlijk ook heel vaak in offline media te zien is zoals kranten en magazines. In opmaakprogramma’s als InDesign is het daarom makkelijk gemaakt om een tekstomloop rond een afbeelding te creëren. Er is zelfs een volledig paletje aan gewijd met bijkomende tekstomloopopties.

Ook met HTML en CSS is zoiets heel eenvoudig te realiseren. In Photoshop daarentegen is het allemaal wat moeilijker. Logisch: Photoshop is er in de eerste plaats om foto’s te bewerken. En niet om teksten te zetten. Maar omdat zoveel ontwerpers opgegroeid zijn met Photoshop, is het toch voor velen onder ons het favoriete programma om websites in te ontwerpen.

Vandaar deze eenvoudige tip om het effect van een tekstomloop te bekomen in Photoshop:

• Teken met de pen de vorm van een tekstkader rondom je foto. Door te shift-klikken kan je trouwens perfect horizontale of verticale lijnen tekenen.
• Beweeg met het tekstgereedschap binnenin je padvorm. Als alles goed is zie je een bolle cursor.
• Klik in de padvorm om het pad om te zetten naar een tekstkader.
• Typ of plak je tekst in het tekstkader.

Je tekst zal nu mooi rond de foto lopen. Als je het tekstkader wil aanpassen dan kan je daarvoor de padgereedschappen gebruiken. Met de witte pijl kan je bijvoorbeeld de ankerpuntjes nog individueel verplaatsen.

Het is een beetje behelpen, maar het werkt wel.

Categorieën: Ontwerp, Typografie, Photoshop, Webomgeving,

1 reacties

Een Photoshoptip voor webdesigners

Sinds een paar weken werk ik met de nieuwste versie van Photoshop: CS4. Het programma heeft een aantal leuke nieuwigheden die vooral voor fotografen interessant kunnen zijn, zoals de mogelijkheid om lokale aanpassingen te doen op foto’s in Camera Raw.

Ook het nieuwe Content-aware scaling (of Zo schalen dat inhoud behouden blijft in het Nederlands) is erg handig wanneer je een foto buiten verhouding in een ontwerpje moet doen passen. Wie er nog niet van gehoord heeft moet zeker eens dit filmpje checken.

Vandaag ontdekte ik dat Content-aware scaling ook erg interessant kan zijn voor wie net als ik vaak websiteontwerpen maakt.

Ik werkte zopas aan een html-formulier en dan heb ik de gewoonte om standaard invulvelden via een screenshot in mijn ontwerp te plakken. En dan begint het natuurlijk: een textarea moet groter worden, een tekstveld moet smaller worden, een knop moet breder worden… vóór versie CS4 was dat vooral een vervelende kwestie van selecteren, verplaatsen, stukjes kopiëren en plakken. Want wie dat niet deed kwam uiteraard bedrogen uit:

Het invulveld hierboven is geschaald op de oude manier: via Bewerken > Transformatie > Schalen. Niet erg mooi en helemaal niet realistisch. Door Bewerken > Zo schalen dat inhoud behouden blijft (wat een naam voor een menu-item!) te gebruiken, kan je vrij makkelijk dit resultaat bekomen:

Dit ziet er wél scherp en realistisch uit! Ik ben verkocht. Nu is het nog aan pak makkelijker om formuliervelden tientallen keren te schalen terwijl het ontwerp vorm krijgt.

Tot slot nog een kleine tip: ik heb gemerkt dat het via Zo schalen dat inhoud behouden blijft beter is in stappen te schalen wanneer je een beduidend stuk groter of kleiner moet schalen. Probeer je het in 1 beweging dan durft Photoshop de randen wel eens een onrealistische wrong te geven.

Categorieën: Ontwerp, Photoshop,

9 reacties

Over resolutie en het web

“Foto’s voor het web bewaar je best op 72 ppi.” Het is één van de meest hardnekkige fabeltjes uit de digitale beeldbewerking. Nochtans is de waarheid heel eenvoudig: wil je een foto op een website plaatsen? Dan speelt de resolutie geen enkele rol.

Van digitale naar afgedrukte beelden: resolutie

Een digitale foto is opgebouwd uit pixels. Het aantal is onbegrensd: sommige bestaan uit nauwelijks 100 pixels en andere uit meer dan 10 miljoen. Zolang een foto digitaal bestaat, dan wordt de grootte ervan uitgedrukt in pixels. Zo kan een beeld bijvoorbeeld uit 800 pixels in de breedte en 600 pixels in de hoogte bestaan. In totaal bestaat die foto dan uit (800 x 600 =) 4800 pixels.

Maar wat als we willen printen? Als je een afgedrukte foto in een krant ziet staan, dan druk je de grootte niet meer uit in pixels maar in centimeter. Er moet dus net voor het afdrukken ergens een omrekening gebeuren van pixels (het digitale beeld) naar centimeter (het afgedrukte beeld).

De omrekening is op zich eenvoudig. Onze computer zal gewoon aan onze printer meegeven hoeveel pixels die per centimeter moet afdrukken. Het is die waarde — het aantal afgedrukte pixels per centimeter — die ‘resolutie’ wordt genoemd. Alleen wordt ze niet uitgedrukt in pixels per centimeter maar in pixels per inch (afgekort ppi). Maar als je weet dat 1 inch gelijk is aan 2,54 centimeter dan is de omrekening snel gebeurd.

Websites bekijk je op schermen

Laat het dus duidelijk zijn dat resolutie enkel belangrijk is wanneer je een digitaal beeld (pixels) wil omzetten naar een afgedrukt beeld (centimeter of inch). Websites zijn niet bedoeld om afgeprint te worden maar wel om op een scherm bekeken te worden. En of dat nu een gsm-, computer-, iPod- of iPhonescherm is: schermen geven pixels weer. Als we de regel in acht nemen dan kan je trouwens stellen dat 1 afbeeldingspixel overeenkomt met 1 schermpixel. Resolutie speelt dus geen enkele rol wanneer je een foto op een website wil plaatsen.

Is je website 1000 pixels breed en wil je dat je foto de helft van de breedte van je website in beslag neemt, dan zorg je er voor dat je foto 500 pixels breed is. Simple as that. Of de resolutie van die foto nu 300 ppi, 72 ppi of zelfs 1000 ppi bedraagt maakt helemaal niet uit.

Maar wat met de bestandsgrootte?

Nog zo’n fabeltje. Een hogeresolutiefoto zou meer plaats innemen op je harde schijf dan een lageresolutiefoto. Maar dat is helemaal niet waar. Als de pixelafmetingen van beide foto’s dezelfde zijn, dan blijft de bestandsgrootte van beide foto’s ook even groot. Logisch, want in beide gevallen moeten evenveel pixels bewaard worden. En de foto’s worden ook even groot op je scherm getoond want ze nemen telkens 500 pixels in de breedte in beslag.

Test het maar even uit. De foto’s hieronder zijn beide even groot. De resolutie van de ene foto is ingesteld op 1000 ppi en die van de andere op 1 ppi. Zie je een verschil? Bewaar ze alletwee maar eens op je harde schijf. Zie je een verschil in bestandsgrootte? Het antwoord is twee maal negatief!

Is er dan helemaal geen verschil?

Als je beide foto’s zou opslaan op je harde schijf en dan afprinten, dan ga je natuurlijk wel een verschil in afdrukgrootte zien. Want de resolutie bepaalt de afdrukgrootte: bij de ene wordt er maar 1 pixel per inch afgedrukt, bij de andere worden er 1000 pixels per inch afgedrukt. De eerste zal dus 1000 keer groter afgedrukt worden dan de andere. Maar de afdrukkwaliteit zal dan ook wel erbarmelijk zijn: in theorie zal je de pixels zien als grote vierkanten van 1 inch hoog en breed.

Slotsom

Maak je foto’s klaar om op een scherm te tonen dan speelt de resolutie geen enkele rol! Resolutie bepaalt enkel de afdrukgrootte van een foto. En bijgevolg ook de afdrukkwaliteit. Wat wél telt zijn de pixelafmetingen van de foto. Die bepalen hoe groot de foto op je scherm getoond wordt.

Categorieën: Photoshop, Webomgeving,

4 reacties

Een masker per slimme filter in Photoshop

Photoshop CS3 maakt 1 filtermasker aan per slim object, ongeacht het aantal filters dat je er op toepast. In deze blogpost demonstreer ik een techniek die je toelaat om een filtermasker te creëren per filter. En dat zonder lagen te hoeven kopiëren of samenvoegen. Het voordeel is grandioos: nu kan je filters toepassen met de flexibiliteit van aanpassingslagen.

Het probleem

Eerst even een schets van het probleem aan de hand van een foto die ik nam op een zomeravond in Québec:

Omdat ik vond dat de keien vooraan teveel aandacht opeisten, heb ik ze onscherp gemaakt. Zo creërde ik ook meteen een groter gevoel van scherptediepte.

Het onscherp maken deed ik vrij eenvoudig via de filter Gaussiaans vervagen (Eng: Gaussian blur). En door die als een slimme filter toe te passen kan ik ten allen tijde terugkeren naar mijn oorspronkelijke scherpe keien, mocht ik me achteraf bedenken. Tegelijk kan ik met zwart op het filtermasker schilderen boven het huisje, de berg en de wolken om die delen van mijn foto perfect scherp te houden.

Uitstekend dus! De lagenpalet van mijn foto zie je hieronder. Let op het filtermasker; het zwarte stuk zorgt er voor dat de filter Gaussiaans vervagen niet zichtbaar is op die plaats van de foto.

Ik hou van het contrast tussen het warme kunstlicht en de koele tinten van de omgeving. Om de aandacht van de kijker nog meer op dat kleurenspel te richten wilde ik graag een vignet aan de foto toevoegen. Dat is een vrij populair effect dat de hoeken van de foto donkerder maakt.

Een vignettering kan je snel verkrijgen via het menu ‘Filter > Vervorm > Lenscorrectie’ (‘Filter > Distort > Lens correction’). Alleen zit ik nu natuurlijk met het probleem dat het filtermasker van daarnet niet alleen de vervagingsfilter bovenaan onzichtbaar maakt, maar ook het vignet. De afbeelding hieronder toont wat er aan de hand is:

Zoals je ziet creërt Photoshop 1 filtermasker per slim object en niet per slimme filter. In het ongewenste resultaat zie je enkel een vignet in de onderste hoeken van de foto:

De oplossing

Er is gelukkig een mouw aan te passen. Volg deze werkwijze als je meerdere slimme filters wil toepassen, elk met hun eigen filtermasker:

Stap 1: Pas je eerste filter toe

Zet je laag om naar een slim object en pas je eerste filter toe. In mijn bovenstaande voorbeeld is dat de filter Gaussiaans vervagen. Gebruik het filtermasker indien nodig.

Stap 2: Dubbelklik op het slim object in de lagenpalet

Photoshop opent nu het referentiebestand waarnaar het slim object verwijst.

Stap 3: Zet de laag van dat referentiebestand om naar een slim object

Dat kan via ‘Laag > Slimme objecten > Omzetten in slim object’ (‘Layer > Smart objects > Convert to smart object’). Je werkt nu dus met een slim object in een slim object!

Stap 4: Pas je tweede filter toe op dit slim object

In het geval van mijn voorbeeld is dat de vignettering. Indien nodig kan je het filtermasker gebruiken om ook deze filter lokaal onzichtbaar te maken.

Stap 5: Bewaar en sluit het referentiebestand

Je zal zien dat je bewerking hierna ook doorgevoerd wordt in het oorspronkelijke bronbestand. En de tweede filter is niet meer onderhevig aan het filtermasker van de eerste filter. In mijn voorbeeld levert dat zoals je hieronder ziet een echt vignet op. De vier hoeken zijn nu donkerder:

Je kan de bovenstaande stappen indien nodig enkele keren herhalen om meerdere slimme filters toe te passen, elk met hun eigen filtermasker. De truck bestaat er dus gewoon uit om telkens een slim object binnenin een slim object te gaan maken. Het lijkt in het begin wat ingewikkeld maar laat je zeker niet afschrikken, het is helemaal niet zo moeilijk als het lijkt.

één klein nadeel misschien

Het nadeel aan de bovenstaande werkwijze is dat het niet evident is om ook nog maanden later te weten wat er juist met de foto is gebeurd. Dan moet je er aan denken te dubbelklikken op het slimme object in de lagenpalet om dan in het referentiebestand te zien dat er ook nog een tweede filter is toegepast op de foto. Maar je zou natuurlijk de naamgeving van het slim object zo kunnen aanpassen dat je weet dat er een tweede slim object in vervat zit. Ik denk dan aan iets als ‘foto huis SO in SO’.

En in Photoshop CS4?

Ik heb de kans nog niet gekregen om Photoshop CS4 uit te testen omdat ik wacht om mijn geld boven te halen tot de Nederlandstalige versie op de markt komt. Ik weet dan ook niet of Photoshop CS4 standaard een filtermasker per slimme filter aanmaakt (laat zeker iets weten als jij het al eens hebt kunnen testen! Update: Viero laat in een reactie weten dat ook CS4 geen masker per filter aanmaakt!). Maar als dat niet zo is, dan kan je ook in CS4 ongetwijfeld gebruik maken van deze techniek.

Gebruik je zelf een andere manier om een filtermasker te bekomen per slimme filter of heb je bemerkingen bij deze werkwijze? Dan hoor ik het uiteraard heel graag van je!

Categorieën: Photoshop,

7 reacties

Hou de foto’s op je website haarscherp

Heb je ooit al eens een foto moeten verkleinen om die op een website te plaatsen? Misschien heb je dan gemerkt dat de verkleinde foto er plots een stuk onscherper uitziet. Het is een veelvoorkomende kwestie die vrij eenvoudig te verhelpen is.

Het probleem

Om te verkleinen ga je het dialoogvenstertje ‘Afbeeldingsgrootte’ (Image size) oproepen. Je wijzigt daarna de pixelafmetingen en klaar is kees. Van een foto als deze, bekom je dan een resultaat als dit:

Ziet er goed uit? Het kan beter! Zeker als je het origineel bekijkt dan valt op dat de letters een stuk waziger zijn. Dat komt omdat Photoshop tijdens het verkleinen niet echt rekening heeft gehouden met de randen die in je foto voorkomen. Nu is het net het randcontrast in je foto die de scherpte gaat bepalen.

De oplossing

Gelukkig kunnen we Photoshop op een andere manier de foto laten verkleinen. Als je even terugkeert naar het dialoogvenstertje ‘Afbeeldingsgrootte’ (Image size) dan zal je zien dat je onderaan het berekeningsalgorithme van Photoshop kan wijzigen bij ‘Nieuwe beeldpixels berekenen’. Als je wil verkleinen dan kies je hier best voor de optie ‘Bicubisch scherper (meest geschikt voor reductie)’.

Het resultaat

Het resultaat van de nieuwe verkleining kan je hieronder zien. De foto is stukken scherper en ziet er naar mijn mening veel beter uit. (Een snelle vergelijking.)

Opslaan voor web en apparaten

De meeste webdesigners gaan hun foto’s verkleinen in het dialoogvenster ‘Opslaan voor web en apparaten’ (Save for web and devices). Ook hier kan je het algorithme dat Photoshop gebruikt tijdens de verkleining gaan instellen op ‘bicubisch scherper’. De screenshot hieronder demonstreert dat:

Te scherp?

Vind je dat je foto er nu te scherp uitziet? Verklein dan op de oude manier (met het standaard ingestelde bicubisch algorithme), en ga net voor het opslaan je foto nog even verscherpen via ‘Filter > Verscherpen > Slim verscherpen’ (Filter > Sharpen > Smart sharpen). Nu heb je de hoeveelheid verscherping helemaal zelf in de hand.

Categorieën: Photoshop,

7 reacties

Een onmogelijke sneltoets in Photoshop

Het penseel (brush) is ongetwijfeld één van de Photoshopgereedschappen die ik het meeste gebruik. Het laat me toe om perfecte maskers te schilderen. Jammergenoeg zijn de sneltoetsen om het penseel groter en kleiner te maken niet beschikbaar voor de Belgische azertygebruiker. En dus moeten wij onze muisaanwijzer telkens naar de penselenpalet of de optiebalk verhuizen om die functionaliteit te activeren terwijl we het penseel gebruiken.

Vierkante haakjes

De sneltoetsen om in Photoshop de penseeldiameter te vergroten en te verkleinen zijn de vierkante haakjes ([ en ]). Maar als je op een azertyklavier de vierkante haakjes wil typen, dan kan dat niet zonder er eerst een hulptoets voor in te drukken (alt of shift-alt meestal). En dan begint het probleem: als je alt indrukt terwijl het penseel actief is, dan activeer je het pipet. Het is dus onmogelijk om een vierkant haakje te typen terwijl het penseel actief is!

Sneltoetsen wijzigen

Het lijkt er dus op dat Adobe de azertygebruiker vergeten is. Gelukkig kan je in Photoshop wel de sneltoetsen aanpassen. Ga naar het menu ‘Bewerken > Sneltoetsen’ (Eng.: ‘Edit > Keyboard shortcuts’) en in het dialoogvenstertje dat nu verschijnt kies je er voor de sneltoetsen voor de gereedschappen te zien. Bijna helemaal onderaan in de lijst (je zal moeten scrollen!) zie je de huidige sneltoetsen voor ‘Penseel verkleinen’ en ‘Penseel vergroten’. Klik op de huidige sneltoets ([ en ]) om een invulvakje te zien verschijnen waar je de sneltoets kan wijzigen.

Penseel verkleinen is bij mij ( geworden en penseel vergroten is ) geworden. Nu kan je je maskers, alfakanalen en selecties schilderen en gebruik maken van de haakjes om heel snel je diameter zelfs tijdens het schilderen aan te passen. En dat is verdomd handig! Als je ook nog even de sneltoetsen voor het verharden (:) en verzachten (;) van het penseel uit het hoofd leert, dan moet je bijna nooit meer in de penselenpalet zijn tijdens het schilderen.

Categorieën: Photoshop,

9 reacties

Tientallen foto’s in één klap stofvrij maken!

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,

0 reacties