Custom WordPress Header

Photoshop: Custom WordPress Header

screen-shot-2017-09-26-at-12-55-59.png

Aangeraden header formaat achterhalen.
Document maken met de juiste pixel dimensies.
Afbeeldingen plaatsen.
Transformeren.
Text bewerken.

 

Introductie

In deze tutorial leer je hoe je met Photoshop een perfect passende header (kopafbeelding) kunt maken voor je eigen WordPress blog. Door eerst te kijken naar het verwachte formaat van de header in de instellingen van je blog en daarna dat formaat te gebruiken bij het maken van een nieuw Photoshop document, kun je ervoor zorgen dat je de header bij het uploaden niet hoeft uit te vergroten/verkleinen of bij te snijden. Hierdoor krijg je de best mogelijke scherpte die je kunt krijgen op je blog website.

Hou in gedachten dat je voor de meeste websites waar je een eigen header kunt uploaden, zoals Twitter, Facebook, Instagram etc. kan uitzoeken welk formaat zo’n header precies moet zijn en dat veel sites daarvoor ook templates aanbieden die je kunt downloaden.

Deze tutorial is vooral bedoeld als warming-up voor het ‘echte’ werk, en laat je uitsluitend kennismaken met de paar basis handelingen die nodig zijn voor bijna ieder Photoshop project, zoals: een formaat document uitkiezen, afbeeldingen plaatsen, de belangrijkste functie van Photoshop ‘Free Transform’ en hoe je text bovenop een afbeelding zet.

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 adres van je blog te typen in je internet browser:

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

Klik daarna in de menubalk links op Appearance > Header.
(Of in het Nederlands: Weergave > Kopafbeelding)

Als je niet direct in het header menu terecht komt maar in de site ‘customizer’ klik dan nogmaals op ‘Header image‘ of ‘Kopafbeelding‘:

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:

2. Een nieuw Photoshop document aanmaken

Open Photoshop en klik bovenin de menubalk op 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 plaatje op internet wat 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:

(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 en selecteer de afbeelding die je hebt gedownload.

4. Afbeeldingen Transformeren met ‘Free Transform’

Na het plaatsen kun je de afbeelding direct transformeren (schalen, verplaatsen, roteren) omdat Photoshop na het plaatsen van een afbeelding de functie ‘Free Transform’ voor je aanzet, je kunt het zien aan de vierkante handles in de hoeken van de afbeelding:
(Menu-balk: Edit > Free Transform of Ctrl+T)

Screenshot 2019-04-08 at 15.50.52.png

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 verplaatsen etc. 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.

FreeTransformPhotoshop

Om te zorgen dat tijdens het schalen de hoogte/breedte verhouding gelijk blijft kun je de Shift toets erbij 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 kan het ook andersom zijn, dan hoef je alleen Shift te gebruiken als je niet wil dat de verhoudingen gelijk blijven.)

Je kunt ook kijken naar de width (W) 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 symbooltje tussen de B en de H 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 in beeld te krijgen, dit kun je doen door Ctrl ingedrukt te houden en daarna de plus of min toets in te drukken of door Alt in gedrukt te houden en het scroll wieltje van je muis te gebruiken.

Om een afbeelding te roteren kun je net-naast de handles in de hoeken van je afbeelding klikken. Je cursor zal veranderen in een gebogen pijl om aan te geven dat je daarmee de afbeelding kunt roteren.

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

Druk na het transformeren op Enter of klik in de Application Bar op het afvink teken om het transformeren te bevestigen:

ConfirmFreeTransformPhotoshop-01

Je kan een afbeelding altijd later nog een keer transformeren met de toetsencombinatie Ctrl+T of via de menubalk Edit > Free Transform!

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’:

VerticalTypeTool


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

Animated GIF showing how to place a title on an image in Photoshop

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 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 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 eventueel later ook weer kan loskoppelen of aanpassen. Layer Styles kunnen voor tekstlagen gebruikt worden maar ook voor afbeelding- of  tekenlagen

Om de verschillende styles/effecten zoals schaduw, kleurverlopen (gradients), gloed, textures etc. aan een tekst-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 alle 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 het effect te klikken kun je de verschillende instellingen voor het gekozen 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 plus knop waarmee je bijvoorbeeld meerdere schaduwen aan éen laag kunt 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 paar voorbeelden van wat je ermee kunt doen:

Een simpel voorbeeld van hoe je een layerstyle kunt gebruiken voor een afbeelding laag is bijvoorbeeld voor het geven van een gloed aan een uitgeknipte maan:

Example image showing a Photoshop glow effect around an image of the moon.

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:

Screenshot 2019-04-08 at 15.15.25

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 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 origineel en een .jpg bestand als een kloon van het origineel.
In de praktijk komt het veel voor dat er vanuit een origineel hoge kwaliteit .psd bestand meerdere 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

Je zelfgemaakte WordPress header kun je nu via het Customize/Aanpassen menu van je WordPress thema instellen, in hetzelfde venster als waar je ook in stap 1 het aangeraden formaat van je header hebt opgezocht:

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

Advertisements

One thought on “Custom WordPress Header

Add yours

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Powered by WordPress.com.

Up ↑

%d bloggers like this: