In deze tutorial leer je hoe je met Photoshop een perfect passende header kunt maken voor bovenaan je eigen WordPress blog.
Een ‘header’ of in het Nederlands ‘kopafbeelding’ is een afbeelding met soms een titel of andere informatie erin die bovenaan een website of gewone pagina staat, vaak in een vrij laag en breed formaat. Dus eigenlijk is een header/kopafbeelding hetzelfde als een dikke koptekst bovenaan een artikel maar dan in afbeelding vorm.

Door eerst op WordPress op te zoeken welk precieze formaat in pixels er voor de header van het thema van jouw WordPress blog wordt aangeraden en door daarna dat formaat te gebruiken bij het aanmaken van een nieuw Photoshop document kun je ervoor zorgen dat je de header bij het uploaden niet meer hoeft uit te vergroten/verkleinen of bij te snijden.
Hierdoor krijgt je header afbeelding de best mogelijke scherpte die je kunt krijgen op je blog website en leer je meteen hoe je dat ook voor andere websites en apparaten kunt doen.

Deze tutorial is vooral bedoeld als warming-up voor het ‘echte’ Photoshop werk, en laat je kennismaken met een paar basis handelingen die nodig zijn voor bijna ieder Photoshop project. Zoals het formaat van een document in pixels instellen, afbeeldingen in het document plaatsen, verplaatsen en schalen met éen van de belangrijkste functies van Photoshop, ‘Free Transform’ en hoe je text bovenop een afbeelding zet.

Na deze introductie tutorial kun je bijvoorbeeld de ‘Photoshop boek/film/game cover’ tutorial gaan doen, die op deze tutorial voortborduurt.

So, let’s get started then..!

1. Zoek uit welk formaat jouw WordPress header precies moet zijn

Ga eerst naar je eigen WordPress site en log in op het admin gedeelte (Dashboard).
Je kan direct naar de (basis) admin pagina gaan door /wp-admin achter het website adres van je eigen blog te typen in je internet browser, dus door ‘naamvanjeblog’ te vervangen met jouw eigen blog adres:

https://naamvanjeblog.wordpress.com/wp-admin

Klik daarna in de menubalk links op Appearance > Header
(Weergave > Kopafbeelding)

Als je toch van de andere blauwe admin pagina gebruik maakt klik je in het menu op Design > Customize (Ontwerp > Customiser)

Als je niet direct in het header menu terecht komt maar eer in de site ‘customiser’ klik dan nogmaals op ‘Header Image‘, ‘Header Media’ of ‘Kopafbeelding‘. Wat er precies bij jou in het customiser menu staat en wat je in kunt stellen is afhankelijk van het thema dat je hebt gekozen:

Zoek in de tekst links-bovenaan in het Header menu naar het formaat in pixels dat wordt aangeraden. Bijvoorbeeld 1020 x 250, maar dit is per thema verschillend!

Sommige thema’s laten in dit venster het aangeraden formaat niet zien, klik in dat geval op ‘Add new image’ en kijk of je in het venster wat daarna opent bij ‘Media Library’ het aangeraden formaat wel ziet staan:

Als je het formaat hebt gevonden kun je de pagina open laten staan om aan het einde van de tutorial je header te uploaden. Het formaat de resolutie heb je nodig voor de volgende stap.

Het kan zijn dat het thema wat je gebruikt geen header optie heeft. Je ziet dan ook in de thema customiser geen optie hiervoor staan. De thema customiser laat namelijk zien welke dingen je aan je gekozen thema kunt veranderen en dit is per thema verschillend.
In dit geval kun je via Appearance > Thema’s een ander thema uitzoeken met wel een Header optie.
Het thema van deze blog, Baskerville 2 en de thema’s Twenty eleven, Twenty sixteen, Twenty Fourteen, Twenty Seventeen, Edin en Dara hebben allemaal een header optie maar dit zijn slechts een paar voorbeelden.
Je kunt gerust verschillende thema’s uitproberen tot je iets geschikts vind, het thema verandert voornamelijk alleen het uiterlijk van je blog, de content (inhoud) van je blog berichten blijf hetzelfde!

2. Een nieuw Photoshop document aanmaken

Start Photoshop en klik bovenin de menubalk op File > New (Bestand > Nieuw).

Zorg ervoor dat je achter hoogte en breedte de ‘units’ op Pixels zet en niet op millimeters of iets anders! Typ daarna bij breedte en hoogte het formaat in dat door WordPress werd aangeraden:

Geef je document rechts bovenin alvast een naam en klik daarna op OK.
Een nieuw leeg Photoshop document (.psd) met het exacte formaat van je header wordt aangemaakt:

3. Een achtergrond afbeelding in de header plaatsen

Zoek een afbeelding op internet die je voor de achtergrond van je header wilt gebruiken en download deze naar het bureaublad je computer.
Als je met Google op afbeeldingen zoekt en de muiscursor over de thumbnail plaatjes houdt, geeft Google het werkelijke formaat van de afbeelding weer, in pixels.
Als dit niet het geval is moetje misschien eerst op de afbeelding klikken voor je het formaat in pixels ziet staan. Het formaat in pixels/de resolutie wordt altijd aangeduid met een getal voor de breedte en de hoogte met een x ertussen:

(Let op dat je de afbeelding eerst aanklikt/opent voor je deze met je rechtermuisknop download en dus niet het kleine ‘thumbnail’ plaatje gebruikt)

Als je een afbeelding zoekt die de hele header moet bedekken kun je voor het beste resultaat een foto uitzoeken die groter is in pixels dan het formaat van je header. Je hoeft dan in Photoshop de foto alleen te verkleinen, wat een beter resultaat geeft dan een afbeelding uit te vergroten.

Klik in Photoshop in de menubalk op File > Place Embedded (Bestand > Ingesloten Plaatsen) en selecteer de afbeelding die je hebt gedownload:

4. Afbeeldingen Transformeren met ‘Free Transform’

Na het plaatsen kun je de afbeelding direct gaan transformeren (verplaatsen ,schalen, roteren) omdat Photoshop na het plaatsen van een afbeelding de functie ‘Free Transform‘ (Vrije Transformatie) automatisch voor je aanzet, je kunt het zien aan de vierkante handles in de hoeken van de afbeelding:

Menu-balk: Edit > Free Transform (Bewerken > Vrije Transformatie) of Ctrl+T

Omdat Photoshop terwijl Free Transform aanstaat de afbeelding altijd in een lagere preview kwaliteit laat zien, kan het zijn dat je afbeelding er tijdelijk minder scherp uitziet, na het transformeren zal je afbeelding weer de oorspronkelijke scherpte aannemen. Photoshop doet dit simpelweg om minder te hoeven rekenen, zodat het transformeren ook met extreem grote foto’s en langzame computers soepel blijft werken. 

Schalen, en roteren kan met de vierkante handles in de hoeken van de afbeelding en verplaatsen door op de afbeelding te klikken en te slepen. Om een afbeelding te roteren houdt je de muiscursor net naast éen van de handles in de hoek, je zal zien dat de cursor in een gebogen pijl verandert:

Om te zorgen dat tijdens het schalen de hoogte/breedte verhouding gelijk blijft kun je de Shift toets ingedrukt houden terwijl je een van de vier handles in de hoeken van je afbeelding klikt en sleept.
Afhankelijk van de Photoshop versie die je gebruikt en de instellingen kan het ook andersom zijn, dan hoef je alleen Shift te gebruiken als je juist niet wil dat de verhoudingen gelijk blijven.

Je kunt ook kijken naar de width en height (H) getallen in procenten, bovenin de Application Bar van Photoshop. De breedte en hoogte getallen moeten hetzelfde zijn, tenzij je een uitgerekte afbeelding wilt.
Door op het ketting/koppeling symbooltje tussen de W en de H (de B en de H in de Nederlandse versie) te klikken kun je de breedte en hoogte aan elkaar koppelen zodat je niet steeds Shift ingedrukt hoeft te houden bij het schalen:

Afhankelijk van het formaat van de afbeelding die je plaatst kan het nodig zijn om in of uit te zoomen op je document om alle handles goed in beeld te krijgen, dit kun je doen door de Ctrl toets ingedrukt te houden en daarna de plus of min toets in te drukken of door Alt in gedrukt te houden terwijl je het scroll wieltje van je muis gebruikt:

Door Shift ingedrukt te houden terwijl je een afbeelding roteert kun je een afbeelding ook in vaste standen draaien, bijvoorbeeld precies 45, 90 of 180 graden.

Druk na het transformeren van je afbeelding op Enter of klik in de Application Bar op het afvink teken om het transformeren te bevestigen. Pas na het bevestigen of annuleren van Free Transform kun je verder met andere dingen in Photoshop..:

Je kan een afbeelding altijd later nog een keer transformeren als het nodig is met de toetsencombinatie Ctrl+T of via de menubalk Edit > Free Transform (Bewerken > Vrije Transformatie).

5. De titel en “tagline” van je blog

Klik in de Photoshop Tool-bar aan de linkerkant op het tekst symbool  ‘ T ‘ om de tekst tool te selecteren:

Let op!: bijna alle tools in Photoshop hebben meerdere keuzes die je pas te zien krijgt als je de linkermuisknop wat langer op éen van de tools ingedrukt houdt. Om bijvoorbeeld verticale tekst te typen houdt je de linkermuisknop op de Tekst tool ingedrukt en kies je de ‘vertical type tool’:

Klik hierna gewoon ergens op je header waar je de tekst wilt plaatsen en typ een titel voor je blog:

Je kunt ipv éenmalig te klikken voor zoiets als een titel, de Text-tool ook gebruiken om een tekstveld te klik-slepen, dat is handig voor bijvoorbeeld alinea’s of tekst kolommen maar voor een titel van 1 regel niet nodig en voor titels ook meestal niet handig.

Klik daarna opnieuw op je header om een tweede tekst object/laag te maken voor je blog’s tagline of subtitel.

Je kunt text en afbeeldingen verplaatsen met de bovenste tool in de Tool-bar, de ‘Move‘ tool. Als de bovenste tool bij jou niet op de Move tool is ingesteld maar op de Artboard tool, kies dan de Move tool door je linkermuisknop wat langer op de bovenste tool ingedrukt te houden:

Selecteer nu met de Tekst tool je titel tekst zoals je dat ook in een normale tekstverwerker doet, door erop te klikken en te slepen.
Daarna kun je bovenin de Application-bar het lettertype, formaat en de kleur van de geselecteerde tekst instellen:

Iedere keer als je een nieuw tekstveld maakt komt die tekst in een aparte tekst-laag te staan in het lagen paneel wat het gemakkelijker maakt om verschillende tekst objecten aparte kleuren en effecten te geven. Kijk in het lagen-paneel aan de rechterkant van Photoshop en je zult zien dat er boven je afbeeldingslaag nu ook de twee tekstlagen zijn verschenen:

6. Tekst opleuken met ‘Layer Styles’

Layer Styles zijn zoals de naam al zegt stijlen/effecten voor lagen die je als het ware aan een laag vast kunt koppelen en omdat ze ‘non-destructive’ zijn kun je ze eventueel later ook weer verwijderen of aanpassen. Layer Styles kunnen voor tekstlagen gebruikt worden maar ook voor gewone afbeelding- of  tekenlagen!

Om de verschillende styles/effecten zoals drop shadows (slagschaduw), gradients (kleurverlopen), glow (gloed), textures en andere effecten aan een laag vast te maken kun je de laag selecteren en daarna op de ‘FX’ knop onderin het lagen paneel klikken:

Door willekeurig éen van de effecten uit de lijst te selecteren kom je in het laagstijlen venster waarin je ook alle andere effecten uit de lijst nog een keer ziet staan. Aan de linkerkant kun je een of meerdere effecten aanzetten door dezen aan te vinken en door daarna ook op de naam van een van de effecten te klikken kun je de verschillende instellingen voor het effect aan de rechterkant te zien krijgen. Ieder effect heeft z’n eigen instellingen:

Bij het Drop Shadow (slagschaduw) effect kun je bijvoorbeeld de angle (hoek) van het licht en de distance (afstand) instellen om de plek van de schaduw te bepalen. Met spread (spreiding) en size (formaat) regel je de scherpte en het formaat van de schaduw.

Sommige effecten hebben in de lijst ook een grote plus knop waarmee je het effect kunt verdubbelen om bijvoorbeeld meerdere schaduwen aan éen laag te koppelen.

Doordat je verschillende effecten per laag afzonderlijk in kunt stellen zijn de mogelijkheden van laagstijlen eindeloos, ik raad je dus aan hier mee te experimenteren. Hieronder slechts een simpele paar voorbeelden van wat je ermee kunt doen:

Een simpel voorbeeld van hoe je een Layerstyle ook kunt gebruiken voor een afbeelding laag is bijvoorbeeld het geven van een Outer Glow effect aan een uitgeknipte maan:

7. De header twee keer opslaan, als .psd en als .png

Klik in de menubalk op File > Save As..

Geef je header een passende naam en selecteer bij format/bestandsindeling .PNG in plaats van Photoshop voordat je het bestand opslaat:

Als je dit gedaan hebt sla dan voor de zekerheid je bestand nogmaals op, maar dan wel als Photoshop document/.psd!

Als je een bestand opslaat als .PNG (of .jpg) dan worden de afzonderlijke lagen voor plaatjes en tekst verenigd tot maar 1 ‘platte’ laag, wat het lastig maakt om er hierna nog veel aan te veranderen in Photoshop.
Als je later nog verder wilt kunnen werken aan de verschillende lagen, moet je het bestand ook opslaan als Photoshop (.psd) bestand.
In een .psd bestand worden de afzonderlijke lagen namelijk wel bewaard.
Sla je Photoshop afbeeldingen dus altijd twee keer op, als .psd en als .png!
Het .psd bestand kun je zien als jouw eigen origineel of blauwdruk en een .jpg of .PNG bestand als een kloon of kopie van het origineel.
In de praktijk komt het veel voor dat er vanuit een origineel hoge resolutie .psd bestand meerdere verschillende formaten .PNG of .jpg klonen worden gemaakt.

FAQ: Waarom PNG en niet jpeg?

PNG bestanden worden ‘lossless’ genoemd, wat inhoudt dat er bij het opslaan geen kleurcompressie plaatsvind, waardoor je dus geen verlies (loss) van kwaliteit hebt. Jpeg bestanden noemt men ‘lossy’ omdat er (afhankelijk van de gekozen kwaliteit bij het opslaan) wel verlies van kwaliteit kan ontstaan omdat kleuren gecomprimeerd worden. Een ander voordeel van PNG t.o.v jpeg is dat een PNG bestand transparante delen kan hebben, waardoor je het dus makkelijk kan gebruiken voor zoiets als een logo zonder achtergrond of een character sprite voor een game:

8. De Header uploaden naar WordPress

De .PNG versie van je zelfgemaakte WordPress header kun je nu via het Customiser menu van je WordPress thema instellen, in hetzelfde venster als waar je ook in stap 1 het aangeraden formaat van je header hebt opgezocht door op ‘Add new image’ (Nieuwe afbeelding toevoegen) te klikken:

Omdat je de header op precies het juiste aangeraden pixel formaat hebt gemaakt kun je tijdens het uploaden het bijsnijden (cropping) overslaan.

Zoals je ziet is er ook een ‘Randomize uploaded headers’ optie om WordPress iedere keer als iemand je blog bezoekt willekeurig een afbeelding uit te laten zoeken uit al je ge-uploadde headers. Je kunt bijvoorbeeld verschillende versies maken van dezelfde header maar dan met steeds een andere foto, kleur, lettertype of ‘tagline’. Zo maak je er meteen een iets dynamischere website van!

Klik als je klaar bent rechtsbovenaan in het customiser menu op Publish om de wijzigingen op te slaan.