Photoshop: Custom WordPress Header

 

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

   Kijk naar 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:

   

2. Een nieuw Photoshop document aanmaken

   Open Photoshop en klik bovenin de menubalk op Bestand > Nieuw.
   Zorg ervoor dat achter hoogte en breedte de ‘unit’ 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 bovenin het nieuw document venster alvast een naam en klik daarna op OK.
   Een nieuw Photoshop document (.psd) met het exacte formaat van je header wordt aangemaakt.

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 je computer.
   Als je met Google op afbeeldingen zoekt en je de muis 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 > Plaatsen en selecteer de afbeelding die je hebt gedownload.

   Na het plaatsen kun je de afbeelding gelijk transformeren omdat Photoshop na het plaatsen van een afbeelding de functie ‘Vrije Transformatie’ voor je aanzet.
   (Menu-balk: Afbeelding > Vrije Transformatie of Ctrl+T)

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

   

   Om een afbeelding te roteren kun je de muis-cursor net-naast de handles in de hoeken van je afbeelding houden. Je cursor zal veranderen in een gebogen pijl en daarmee kun je de afbeelding 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 hierna 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.

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.
   Klik hierna ergens op je header waar je de tekst wilt plaatsen en typ een titel voor je blog.Klik daarna opnieuw op je header om een tweede tekstveld te maken voor je blog’s tagline.
   Je kunt text en afbeeldingen verplaatsen met de bovenste tool in de Tool-bar, de ‘Move’ tool.

   Selecteer met de tekst tool je tekst zoals je dat ook in een normale tekstverwerker doet, door erop te klikken en te slepen. Hierna kun je bovenin de menu-balk het formaat, lettertype en 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 afbeelding-laag 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.

5. 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 werken aan de verschillende lagen moet je het bestand ook opslaan als Photoshop (.psd) bestand. In een .psd bestand worden 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!