ik weet dat niet iedereen geboren is met ontwerpvaardigheden, dus ik ben hier om je wat hoop te geven en je te vertellen dat je nog steeds een mooi uitziende blogheader kunt maken, zelfs als je geen ontwerper bent!!
eerst moet je een plek hebben om een header aan te maken. Als je Photoshop hebt, ben je op het juiste spoor. Als u nog geen Photoshop hebt gebruikt, kunt u zoiets als GIMP (het is als een gratis Photoshop) of Canva gebruiken.
Stap 1: Stel uw dimensies in
zodra u uw editorwapen naar keuze hebt gekozen, is het tijd om de afmetingen van uw header in te stellen. U zult waarschijnlijk willen dat uw header om de breedte van uw blog te rekken. Als u niet weet wat de volledige breedte van uw blog is, kunt u pop in uw Template Editor/Customizer en kijk voor de header gebied breedte die moet worden weergegeven in pixels.
wanneer u een nieuwe afbeelding of project aanmaakt in een van deze programma ‘ s (bestand > Nieuw), moet het u vragen om afmetingen. Stel uw aangepaste afmetingen in op pixels en voer de breedte van uw blog in, gevolgd door de hoogte die u wilt dat uw banner is. Er is geen vuistregel voor een hoogte, maar ik zou waarschijnlijk houden onder 350px alleen voor esthetische doeleinden.
als er een resolutie of DPI-instelling is, moet deze worden ingesteld op 72. Alles voor het web moet altijd een resolutie van 72 DPI hebben. Maak de achtergrond wit om het makkelijker te maken.
geweldig! Nu heb je een leeg document in de exacte grootte van je header. Laten we naar het ontwerp gaan …
Stap 2: het ontwerpen van je blog header
als je een van die mensen bent die geen artistieke vaardigheden heeft, is het beste advies dat ik je kan geven iets wat ik in de derde klas heb geleerd … K. I. S. S.-hou het simpel, dom!
een mooi uitziende header hoeft niet vol te staan met afbeeldingen en al je favoriete dingen. Het kan eenvoudig en chic zijn zonder enige graphics. Lettertypen zijn je nieuwe beste vrienden.
enkele dingen om te onthouden als je het simpel houdt:
- Beperk het gebruik van lettertypen, probeer maximaal twee lettertypen.
- titels moeten gemakkelijk leesbaar zijn. Gebruik een leesbaar lettertype.
- als u een mooi lettertype gebruikt voor het ene element, probeer dan een eenvoudig lettertype voor het andere.
- zorg ervoor dat alles goed op één lijn staat
- probeer dezelfde hoeveelheid opvulling over alle randen te laten
hier zijn enkele voorbeelden van eenvoudige berichtkoppen:
deze eerste kop is de eenvoudigste van eenvoudige. Het maakt gebruik van hetzelfde lettertype overal en de slogan is opgesteld met het einde van de “T” in de regel erboven, waardoor dingen mooi en gerechtvaardigd. De padding (witte ruimte) aan de boven-en onderkant is gelijk, en hetzelfde geldt voor de linker-en rechterkant.
dit is een verbetering ten opzichte van de eerste kop. Zie wat een verschil het maakt als je in staat bent om perfect line-up van de slogan met het woord erboven? Als alles in orde is, ziet het ontwerp er veel meer uniform uit. Ik vulde de lege witte ruimte naast de slogan met een eenvoudige 1px rechte lijn om dingen samen een beetje beter te binden.
de header hierboven gebruikt verschillende lettertypen. Voor de blog titel, Ik gebruikte een fancy lettertype, wat betekent dat de slogan hieronder moet iets veel eenvoudiger. Ik denk dat deze twee lettertypen elkaar goed aanvullen omdat ze zowel serif lettertypen en lichtjes hoog zijn. Zoek lettertypen die elkaar aanvullen als je meerdere lettertypen gaat gebruiken. Deze titel lettertype heet Rosewood als u geïnteresseerd bent in het proberen.
een beetje kleur toevoegen! Zodra u uw lettertypen hebt ingesteld, kunt u experimenteren met een beetje kleur. Nogmaals, zorg ervoor dat de kleuren die u kiest elkaar aanvullen en zorg er ook voor dat de tekst zich onderscheidt van de achtergrond. Dus bijvoorbeeld, doe dit niet:
de titel is te licht en te zwaar voor de ogen. Het valt niet op zoals het zou moeten tegen de witte achtergrond. De slogan is gewoon veel te NEON en belast ook je ogen als je ernaar staart. Alsjeblieft mensen, stop met het gebruik van neon groen. In plaats daarvan, als je deze kleuren wilt gebruiken, probeer dan de tinten een beetje af te stemmen zoals dit:
dat is veel makkelijker voor de ogen, is het niet? Ik ben terug te schakelen naar een aantal meer fundamentele lettertypen omdat ik denk dat de bovenstaande is een beetje te druk voor mijn smaak en geeft niet echt de juiste vibe van mijn blog. Dat is ook iets wat je in gedachten moet houden… het algemene gevoel van uw blog. Laten we proberen om die uit het park te slaan door een beetje grafisch werk toe te voegen:
ik gebruikte dezelfde basisstructuur als header # 2, alleen gooide ik een beetje grafisch detail en zorgde ervoor dat het niet interfereerde met de tekst.
u kunt een aantal clipart van sites zoals Etsy of Creative Market of u kunt online zoeken naar een aantal kleine afbeeldingen. Zorg ervoor dat je de rechten hebt om de graphics te gebruiken… en daarmee bedoel ik ga niet zomaar spullen pakken van Google Image Search.
het ding om in gedachten te houden met graphics is dat je de tekst niet wilt overmeesteren. Het hele punt van een header is zodat mensen vertrouwd kunnen raken met de naam van uw blog. Het is als je eigen logo.
als u een logo voor uzelf zou ontwerpen, zou u er niet een hele hoop willekeurige foto ‘ s van uzelf en uw avonturen bij gooien, zou u? Dus terwijl een header de toon voor uw blog kan zetten, hoeft u niet iedereen alle hoogtepunten van uw blog in een keer te laten zien. Dat is waar je berichten voor zijn;).
als u er toch op staat om een paar foto ‘ s in uw header te tonen, zorg er dan voor dat ze niet afleiden van de titel en zo georganiseerd zijn dat de pagina goed stroomt.
hier zijn enkele voorbeelden van wat niet te doen:
de uitlijning is overal en de opvulling is uitgeschakeld.
No. Gewoon nee. Twee compleet verschillende fancy lettertypen in elkaar geschoven ziet er als volgt uit. De slogan is moeilijk te lezen. Dit zou leuk zijn als de tagline kleiner was, niet met hoofdletters en in een standaard schreefloos lettertype.
er zijn genoeg lettertypen om uit te kiezen, en als je ze van een site als DaFont pakt, kun je zelfs je blognaam typen in het tekstvak “typ je tekst hier” op de categoriepagina ‘ s om precies te zien hoe je Titel eruit zou zien.
Stap 3: Als u uw header
opslaat, moet u die Afbeelding opslaan als een PNG als u een transparante achtergrond kiest. Sla het anders op als een JPG. JPG en PNG beide werken goed voor web images.
ik hoop dat dit je een beetje geholpen heeft! Vergeet niet om je ogen te vertrouwen en zorg ervoor dat alles goed is verdeeld. Je zou verbaasd zijn over hoe eenvoudig het uitlijnen van dingen en het kiezen van de juiste lettertypen kan echt maken of breken een header!
Laatst bijgewerkt op 6 April 2021