Verkleinen voor web met Photoshop-actions

Zoals gisteravond al aangekondigd hier het vervolg op de post van gister. Vanavond behandel ik het verkleinen van foto’s met behulp van een Photoshop-action. Op aanvraag zijn vandaag de termen en screenshots in het Engels. Hier en daar zal ik bovendien de Nederlandse termen of een enkele Nederlandstalige screenshot plaatsen. Mocht je na het lezen van deze post toch nog vragen hebben of iets niet kunnen vinden, laat gerust een reactie achter.

Ook voor deze informatie geldt: Photoshop CS3 en CS4, ik verwacht dat ook CS2 prima bruikbaar is (en misschien zelfs nog oudere versies).

Foto’s verkleinen voor web

Ik wil graag beginnen met het bouwen van een action die foto’s voor je kan verkleinen voor web. Daarbij wil ik graag:

- Verkleinen naar maximaal 950 pixels breed en 650 pixels hoog (opnieuw in verband met de lay-out van mijn weblog)
- De foto verscherpen met een Unsharp Mask
- Het kleurprofiel omzetten naar sRGB
- Eventuele lagen samenvoegen tot één achtergrondlaag

We beginnen met een bestand dat in alle opzichten afwijkt van onze wensen. Open dus allereerst een foto groter dan 950×650 pixels, in verband met de verscherping die we zullen toepassen bij voorkeur een hi-res foto van ca. 6 tot 12 megapixels. Controleer dan het kleurprofiel van de foto. Ik zou je willen aanraden Photoshop daarvoor in te stellen zodat het profiel onder de foto wordt getoond:

Standaard staat “Show” ingesteld op “Document Sizes”, terwijl je die info meestal niet nodig hebt en bovendien kunt vinden in het Info-venster. Van de overige opties is “Document Profile” mijns inziens de meest nuttige, aangezien het best handig is in één oogopslag te kunnen zien welk kleurprofiel aan het bestand gekoppeld is. Klik daarom op het pijltje, kies Show en klik op Document Profile.

Controleer nu het kleurprofiel. In mijn geval is het profiel Adobe RGB. Dat wijkt af van sRGB (uiteindelijke profiel) en is dus prima voor de action die we gaan maken.

Heeft jouw foto een ander kleurprofiel dan sRGB, dan is dat prima. Is jouw bestand wél sRGB (dat ziet eruit zoals hierboven), dan moet het bestand eerst worden omgezet naar een ander profiel. Omdat we in onze action straks een stap willen opnemen die het bestand omzet naar sRGB, moeten we namelijk tijdens het opnemen van de action het bestand wel kúnnen omzetten naar sRGB… Overigens, in CS4 is het tot op bepaalde hoogte wel mogelijk sRGB om te zetten naar sRGB en dat te registreren in je action. Dat is wel behoorlijk bewerkelijk, dus omzetten van (bijvoorbeeld) Adobe RGB naar sRGB blijft gemakkelijker.

Jouw foto sRGB? Kies dan Edit, Convert to Profile (Bewerken, Omzetten in profiel). Selecteer bij Profile een profiel dat afwijkt van sRGB, bijvoorbeeld het bovengenoemde Adobe RGB. Hoewel de overige instellingen in dit geval niet van belang zijn, kun je in de volgende twee screenshots de door mij gebruikte instellingen bekijken.

Verscherping toepassen kun je op ieder willekeurig bestand en is bovendien aan te raden als je een hi-res bestand verkleint naar webformaat, dus daarvoor hoeven geen voorbereidende werkzaamheden te worden gedaan. Blijft over: zorgen voor een extra laag op je (waarschijnlijk) platte afbeelding. Dat kan heel simpel door Ctrl+Shift+N (Cmd+Shift+N op de Mac) in te drukken, Layer, New, Layer te kiezen of rechtsonderin je Layers-venster op het pictogram voor een nieuwe laag te klikken (tussen het mapje en de vuilnisbak). In datzelfde Layers-venster kun je bovendien controleren of er inderdaad een nieuwe laag is toegevoegd.

Het maken van de action

Nu aan het bestand een “foutief” kleurprofiel en een extra laag gekoppeld zijn, kunnen we beginnen met het maken van de action. Ga naar het Actions-venster (niet zichtbaar? Window, Actions of sneltoets Alt+F9) en maak daar allereerst een nieuwe actionset aan door op het map-pictogram te klikken. Noem de set “Verkleinen en watermerken” en druk op Enter. Je ziet dat er nu een nieuw mapje verschijnt in je Actions-venster. Klik nu op het pictogram voor een nieuwe action (identiek aan het pictogram voor een nieuwe laag) en noem de action “Verkleinen voor web“. Sneltoetsen en kleurtjes toewijzen kan ook later nog, maar doe vooral wat je niet laten kan. Klik daarna op Record (Nederlands: Opnemen) en je kunt beginnen met het aanmaken van je action. Je Actions-venster ziet er nu als volgt uit:

Waarschijnlijk bevat jouw Actions-venster bovendien een map met standaardactions en eventuele eigen actions. Ik heb mijn venster voorafgaande aan het schrijven van deze blogpost volledig leeggegooid om ‘t overzichtelijk te houden. Het rode rondje onderaan het venster indiceert dat alles wat je nu doet wordt opgenomen. Voor we beginnen nog even een paar tips:

- Alles wat je doet wordt geregistreerd. Even een ander bestand openen, opslaan of een nieuwe laag toevoegen wordt allemaal vastgelegd in je action. Dat wil je niet, dus concentreer je op één ding: het maken van je action.
- Ctrl+Z of Cmd+Z maakt je handelingen ongedaan, maar verwijdert geen onderdelen uit je action. Sterker nog, Ctrl+Alt+Z of Cmd+Alt+Z (meerdere stappen ongedaan maken) zal je action vullen met “Select previous history state” of “selecteren vorige historie status”. Dat wil je al helemáál niet.
- Om te voorkomen dat je action overspoeld raakt met allerlei ongewenste stappen: houd je Actions-venster in de gaten, druk op “stop” als er iets mis gaat, verwijder ongewenste stappen uit de action, stel je history gelijk met het meest recente correcte onderdeel van je action, druk op “Begin recording” (het rondje, ja) en ga verder waar je gebleven was.
- Gaat er niet echt iets fout, maar zitten er wel ongewenste stappen (bijvoorbeeld een nutteloze “Set foreground color” of “Select previous history state”) in je action, dan kun je deze natuurlijk ook achteraf verwijderen. Doe dit alleen als je zeker weet dat de stap verder geen invloed heeft op de werking van je action.

Fit image: We beginnen onze action met het op maat maken van de foto. Met het commando Image size kun je alleen absolute waardes ingeven, waardoor bestanden zónder “Constrain Proportions” zullen worden uitgerekt naar de ingegeven waardes en mét die functie aangevinkt staande en liggende foto’s zullen afwijken in formaat maar wel met overeenkomstige hoogte of breedte. Stel je een liggende foto in je action in op 600×900, worden staande foto’s 400×600 of 900×1350, afhankelijk van de waarde (600 of 900) die je bij het maken van de action hebt ingevuld in het dialoogvenster.

Image size is dus niet heel praktisch. In ons geval (wens: staand 650 hoog, liggend 950 breed) zullen we de functie niet zo ver krijgen aan onze wens te voldoen. Ook als je je foto’s standaard wil verkleinen naar bijvoorbeeld 800 pixels langste zijde, kom je er met Image size niet. Gelukkig biedt Photoshop onder File, Automate de functie Fit image (Nederlands: Afbeelding passend). Daarin kun je net als in de Image processor een maximale breedte en hoogte opgeven waarbinnen de foto’s gegarandeerd zullen blijven.

Vul de waardes 950 breed en 650 hoog in en klik op OK. Daarop wordt je afbeelding verkleind naar het gewenste formaat. Druk Ctrl+Alt+0 (Cmd+Alt+0) om de afbeelding op 100% te bekijken en zorg dat de afbeelding geheel zichtbaar is. In- en uitzoomen en het veranderen van de schermmodus wordt overigens niet opgeslagen in je action, dus dat kun je ongelimiteerd doen.

Unsharp Mask: Als je verkleint door middel van Image Size, kun je eventueel direct een verscherping toepassen door bij Resample Image (NL: Nieuwe beeldpixels berekenen) te kiezen voor Bicubic Sharper (NL: Bicubisch scherper). Bij Fit Image kun je die opties niet selecteren, maar hangt het resultaat af van de “Image Interpolation”-instelling in je Preferences (Ctrl+K of Cmd+K; Nederlands: “Interpolatie van afbeeldingen). Standaard staat deze instelling op “Bicubic”, waarbij een verscherping door middel van een Unsharp Mask na verkleining eigenlijk vereist is. Kies Filter, Sharpen, Unsharp Mask (Filter, Verscherpen, Onscherp Masker). Zoom in het dialoogvenster indien gewenst wat in om het resultaat beter te kunnen bekijken. Houd je muis ingedrukt op de preview om de afbeelding zonder verscherping te kunnen bekijken, laat je muis los om de resultaten van de verscherping te kunnen bekijken. Zelf koos ik voor de volgende waardes:

Zie ‘t maar als richtlijn waar je gerust vanaf mag wijken. De mate van verscherping zal ook afhangen van de hoeveelheid verkleining (12 megapixel naar 800 pixels langste zijde is meer kwaliteitsverlies dan 800 pixels langste zijde naar 640 pixels langste zijde) en het formaat van je afbeelding (op 12 megapixels is meer verscherping gewenst dan op 800 pixels langste zijde). Mocht je zelf een voorkeur hebben voor andere waardes, ga vooral je gang. Houd het wel subtiel.

Flatten image: Tijd om van de overbodige lagen af te komen. Kies Layer, Flatten Image. In je Layers-venster zul je zien dat de lagen worden samengevoegd tot één.

Convert to profile: Om ervoor te zorgen dat je afbeeldingen er in zo veel mogelijk browsers zo goed mogelijk uit zien, is het aan te raden voor webafbeeldingen altijd het kleurprofiel sRGB te gebruiken. Kies daarom opnieuw Edit, Convert to Profile. Selecteer het profiel “sRGB IE61966-2.1″. Vergelijk de overige instellingen met die van mij en klik op OK.

Alle handelingen die je nodig hebt om afbeeldingen klaar te maken voor web, staan nu in je action. Druk op het stop-pictogram aan de onderzijde van je Actions-venster, verwijder eventuele overtollige info en je action is klaar om toegepast te worden op iedere willekeurige afbeelding, eventueel in combinatie met de Image processor.

Nog wat laatste tips

Details bekijken: Als je in je Actions-venster op de pijltjes voor specifieke onderdelen klikt, kun je de gebruikte instellingen voor desbetreffend onderdeel bekijken. Op die manier kun je door middel van diezelfde pijltjes de action ook weer inklappen. Mijn action ziet er als volgt uit:

Sneltoets toewijzen: Dubbelklik in je Actions-venster in het witte gebied naast “Verkleinen voor web”. Daarop opent een dialoogvenster waarin je onder andere een sneltoets aan de action kunt toewijzen. Mijn sneltoets wordt Cmd+F1 en staat nu weergeven rechts naast de naam van de action.

Actions kopiëren: Stel nu dat je naast deze action ook een action zou willen maken die de bestanden verkleint naar 800 pixels langste zijde. Je hoeft dan niet een geheel nieuwe action te maken. Houd Ctrl (of Cmd) ingedrukt en sleep “Verkleinen voor web” naar het pictogram voor een nieuwe action. Daarop verschijnt onder “Verkleinen voor web” nu een nieuwe action, “Verkleinen voor web copy”.

Actions hernoemen: Hoewel je de naam van een action kunt wijzigen in hetzelfde dialoogvenster als waar je de sneltoets toewijst, kun je ook gewoon dubbelklikken óp de naam van de action en direct een nieuwe naam invoeren. Noem de nieuwe action “Verkleinen voor web 800 pixels”.

Een onderdeel aanpassen: Nu moet alleen het nieuwe webformaat nog worden opgeslagen in de huidige action. Dubbelklik in de nieuwe action op “Scripts”, het onderdeel waar de Fit Image in verstopt zit. Daarop opent het dialoogvenster Fit Image. Voer daar een hoogte en breedte in van beiden 800 pixels en klik op OK.

Een stop inbouwen: Ik kan me voorstellen dat je eventueel de Unsharp Mask zou willen aanpassen aan het nieuwe formaat. Dat kun je op de gok doen door gewoon dubbel te klikken op de Unsharp Mask in de nieuwe action. Wil je eerst een bestand verkleinen tot het gewenste formaat, dan kun je een stop inbouwen in je action. Klik op het onderdeel waarna de action moet stoppen (“Scripts”), klik op het lijstpictogram rechtsboven in je Actions-venster en kies Insert Stop (Nederlands: Stop invoegen). Indien gewenst kun je aan de stop een melding toevoegen. Klik daarna op OK.

Unsharp Mask aanpassen: Zorg ervoor dat je een hi-res afbeelding geopend hebt en speel je nieuwe action af. Je zult zien dat de action al na Fit Image een stopmelding geeft. Dubbelklik nu in je Actions-venster op het onderdeel Unsharp Mask, pas de waardes naar je eigen smaak aan en klik op OK.

Onderdelen weggooien: Je wil de stop natuurlijk niet bewaren. Sleep dat onderdeel naar de vuilnisbak. Meerdere items tegelijk verwijderen kan door ze met Ctrl of Cmd ingedrukt te selecteren en daarna samen naar de vuilnisbak te slepen.

Actions opslaan: Als je Photoshop nu afsluit, zullen je actions er de volgende keer dat je het programma weer opstart gewoon staan. Je vindt ze echter nog niet “tastbaar” op je harddisk. Wil je ze kunnen importeren op een andere computer, zul je ze eerst moeten opslaan. Klik daarvoor eerst op de set (“Verkleinen en watermerken”), vervolgens op het lijstpictogram en kies Save Actions (Nederlands: Handelingen opslaan). Kies een locatie, geef het bestand een duidelijke naam (“Set 1″ zegt niet zo veel) en klik op Opslaan. Actions importeren gaat via Load Actions in datzelfde menu.

Bestanden opslaan: Het is mogelijk aan de action ook nog een “Save As”- en “Close Document”-onderdeel toe te voegen. Let daarbij op dat je de bestanden in een andere map opslaat, niet als kopie en dat je bovendien de bestandsnaam niet aanpast; in dat geval zou het kunnen dat ieder bestand onder dezelfde naam wordt opgeslagen en dat bestand naar bestand wordt overschreven. Ook zul je iedere keer voor het gebruik van de action de doelmap moeten aanpassen door Photoshop één foto voor te doen, anders is de kans groot dat je “oudere” bestanden worden overschreven. Nogal wat haken en ogen dus. Laat het opslaan zodoende maar lekker aan de Image processor over.

Good, genoeg info voor vandaag denk ik. Het daadwerkelijk watermerken schuif ik weer even door naar dit weekend ergens.

Toevoeging: Even voor de volledigheid (met dank aan René Damkot) een lijstje met de introductie van de gebruikte functies:

- Vanaf Photoshop 3.0: Layers
- Vanaf Photoshop 4.0: Actions, Batch, Unsharp Mask (gigantische update: 7.0)
- Vanaf Photoshop 5.0: Colormanagement (leuk linkje) (vanaf 6.0 aanzienlijk verbeterd)
- Vanaf Photoshop 7.0: Fit Image
- Vanaf Photoshop CS2 (misschien zelfs CS): Image Processor

Geen Actions of Batch? Tijd om te upgraden ;-)

Disclaimer: in de prehistorie kunnen we er misschien een versie naast zitten, nogal lastig terug te zoeken… Maar dan zal het eerder nóg ouder zijn dan nieuwer.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>