Custom WordPress Header

Photoshop: Custom WordPress Header

Stap 1: Zoek uit welk formaat je WordPress blog header precies moet zijn

Ga eerst naar je eigen WordPress site en log in op het admin gedeelte (Dashboard).
Je kan direct naar de (oude) admin pagina gaan door /wp-admin achter het adres van je blog te typen in je internet browser:

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

Ga in de menubalk links naar 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 het aangeraden formaat wel ziet staan:

Stap 2: Een nieuw Photoshop document aanmaken

Open Photoshop en klik bovenin de menubalk op Bestand > Nieuw.

Zorg ervoor dat achter hoogte en breedte de ‘units’ op Pixels staat ingesteld en niet op centimeters of iets anders. Typ daarna bij breedte en hoogte het formaat in dat door WordPress wordt 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:

Stap 3: Een achtergrond plaatje 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:

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 Bestand > Ingesloten Plaatsen en selecteer de afbeelding die je hebt gedownload.
Na het plaatsen kun je de afbeelding gelijk transformeren (schalen, verplaatsen, roteren) omdat Photoshop na het plaatsen van een afbeelding de functie ‘Vrije Transformatie’ voor je aanzet.
(Menu-balk: Afbeelding > Vrije Transformatie of Ctrl+T)
Omdat Photoshop tijdens het transformeren je afbeelding in lagere preview kwaliteit laat zien, om er sneller mee te kunnen werken, kan het zijn dat je afbeelding er even wat minder goed uitziet. Na het transformeren zal je afbeelding weer de oorspronkelijke scherpte aannemen.

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

Je kunt ook kijken naar de breedte (B) en hoogte (H) getallen in procenten, bovenin de Application Bar van Photoshop. De breedte en hoogte getallen moeten over het algemeen altijd 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.:

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 en de plus of min toets in te drukken of door Alt in te drukken en je muis scroll wiel 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 schalen op Enter of klik in de Application Bar op het afvink teken om het transformeren te bevestigen.

Je kan een afbeelding altijd later nog een keer transformeren met de toetsencombinatie Ctrl+T of via de menubalk Bewerken > Vrije transformatie.

Stap 4: 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 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 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.

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

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 kies dan de Move tool door je linkermuisknop 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 menu-balk het lettertype, formaat en de kleur van je 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 stukken tekst 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:

Om tekst gemakkelijk te verplaatsen kun je de bovenste tool uit de tool-bar gebruiken, de move tool. Let wel op dat je eerst de laag die je wilt verplaatsen selecteert in het lagen-paneel.

Om verschillende 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 é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. Je kunt effecten aanzetten door ze aan te vinken en door op de naam van het effect te klikken kun je de verschillende instellingen voor het effect aan de rechterkant te zien krijgen:

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.

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

Stap 5: De header opslaan als .jpg

Klik in de menubalk op Bestand > Opslaan als.
Geef je header een passende naam en selecteer bij bestandsindeling JPEG in plaats van Photoshop voordat je het bestand opslaat.
Als je een bestand opslaat als .jpg dan worden de verschillende lagen voor plaatjes en tekst verenigd tot 1 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 wel bewaard.

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

Advertisements

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: