der er tre slags overskrifter, som jeg normalt ser brugt på ol’ internettet — navigationsoverskrifter, fulde fotooverskrifter og velkomstmåtehoveder. Hvis du er interesseret i, hvordan du laver en blogoverskrift, bliver du nødt til at kende fordele og ulemper for hver type, før vi kommer ned til skabelsens nitty gritty.

Navigationsoverskrifter

Navigationsoverskrifter er ikke-fotobaserede. For eksempel, øverst på min hjemmeside, jeg har mit logo, plus links til vigtige sider eller tilmeldingsformularer. Kigge.

Navigationsoverskrifter som disse er ideelle, hvis du er fan af minimalisme og ønsker at få folk til virkelig at fokusere på din skrivning uden at blive distraheret af billeder.

det er også en god rute at gå, hvis du er ny, ikke har fundet ud af din branding eller bare har brug for at komme i gang online.

layoutet er ikke sat i sten — navigationsoverskrifter kan lægges ud på alle mulige måder. Du har sikkert set nogle, hvor logoet er i midten over tekstlinks, eller det kan bare have logoet uden links (eller omvendt).

denne overskrift lever ofte i harmoni med yderligere blogoverskrifter (min side har faktisk også en anden overskrift under den), som fulde fotooverskrifter og velkomstmåtter.

foto overskrifter

foto header stil er meget iøjnefaldende og virkelig trækker dig ind. Hvis du vil have et fotohoved på din blog, skal du tænke over, hvad emnet vil være. Vil det være et billede af en person? Ligesom dig, eller dig og din familie, eller nogle repræsentation af din ideelle kunde? Eller vil det være et foto med en slags landskab, mønster, tegneserie/ikoner eller endda en video?

tjek dette eksempel fra AlexTooby.com. Aleks bruger et foto af sig selv plus lidt af velkomstmatteideen med en stærk opfordring til handling for at tilmelde sig sit kursus.

billedet fungerer, både for nyankomne og tilbagevendende besøgende. Hvorfor? Fordi hun bruger et par subtile visuelle elementer (mere om disse senere), der tjener til at styrke styrken af denne overskrift. Hun holder sin telefon ud, med Instagram-grænsefladen hånet på den, og hun ser mod den tekst, hun vil have dig til at læse. Dit øje er naturligt trukket til hendes ansigt, derefter over til ordene, derefter ned til den lyserøde knap til at klikke. Dette ville være mindre effektivt, hvis hun kiggede ud til venstre side af skærmen.

Pro-Tip: At have nogen, der vender “ind” mod kopien eller knappen, er et ninja-designtrick, du også kan bruge.

Fotooverskrifter kan sætte en stemning og hjælpe med at få dine læsere til at handle. Da fotooverskrifter er store, blokerer de andre distraktioner på siden og hjælper med at fokusere læserne på præcis, hvad du vil have dem til at gøre (som f.eks.

velkommen mat overskrifter

den typiske “velkommen mat” du kan se rundt på internettet er en fuld skærm overtagelse, og der er værktøjer, der hjælper dig med at gøre dette.

eller hvis du ikke ønsker at overtage hele din side, kan du også oprette en del til at fungere som en velkomstmåtte eller en tilmeldingsformular til en speciel freebie, du tilbyder. Ikke sikker på, hvordan det ville se ud? Tjek billedet nedenfor fra min hjemmeside. Jeg tilbyder et gratis e-kursus, som jeg vil have alle besøgende til at se først, så jeg kan opbygge min e-mail-liste med det rigtige publikum til fremtidige e-mails og kampagner. Mine blogindlæg vises under dette, så besøgende bare kan rulle ned for at se mine seneste indlæg.

nu hvor du har set de tre forskellige stilarter, er det tid til at tale om at oprette en blog header til din hjemmeside.

Sådan laver du en blogoverskrift, der ser branded

jeg ved, at udtrykket “branded” lyder officielt og skræmmende, men frygt aldrig! Det er faktisk ret nemt, hvis du bare fokuserer på et par vigtige ting. Nemlig farver (ofte findes i dit logo) og skrifttyper.

Pro tip: Sammensæt en brand guide for dig selv i en mappe, så du kan holde styr på disse oplysninger (sammen med dit logo) for nem adgang til enhver tid.

selvom du ikke laver en fancy trykt guide, kan du notere denne info på en sticky note og holde den på din skærm. Det vil spare dig masser af tid i det lange løb! Lad os nu nedbryde nogle designelementer.

Vælg dine farver

du har muligvis et par farver, du har valgt at bruge til dit brand, men et godt sted at starte er med dit logo. Din logo farve(R) er en stor at bruge på tværs af din hjemmeside, branding og blog header. Konsistens er nøglen — hvis du har en hot pink, så har dine fotos måske et element af pink til dem eller en samlet pink cast, eller måske bruger du Sort / hvid og trækker i farve på andre måder.

Aby af YouBabyMeMummy.com gør dette smukt ved at indsætte en smuk, fuldfarvet version over hendes logo som et overlay på et sort-hvidt billede af sig selv med sin datter. Dette foto header virkelig trækker dig ind i hendes historie i en fed og engagerende måde. Klik rundt på hendes side, hvis du vil se flere eksempler på bedøvelse, billeder i fuld skærm.

og hvis du stadig prøver at finde ud af, hvilke farver du skal bruge i dit brand, er denne artikel om farvepsykologi meget afslørende!

vælg en skrifttype

inkorporering af en stilfuld eller mærket skrifttype lige ind i din overskrift kan være en virkelig relevant og hurtig måde at få din besked på. Ligesom i dette meget unikke og iøjnefaldende billede fra Luci over på ByLucinda.co.uk.

dette seascape passer lige ind i hendes brand, der indeholder masser af naturlige elementer og viser hendes elegante, men alligevel sassy stemning. Ingen gange nye romerske for denne dame! Hun har også en smart måde at vise sine sociale medier links på højre side i en lysegrøn rektangulær strimmel. Det forbinder den øverste navigation med den store fed foto og hjælper med at trække øjet ned på siden på en forsætlig måde.

du kan finde nogle rigtig sjove, gratis skrifttyper online fra steder som Font egern og Dafont. Mange af disse gratis skrifttyper er bygget lige ind i programmer som Canva og PicMonkey. Men da de er gratis, er der en større chance for, at en anden (en konkurrent selv) kunne bruge den ønskede.

hvis du vil bruge mere avancerede skrifttyper i brødteksten eller overskrifterne på din hjemmeside (dvs.ikke i et billede), skal du tage dig tid til at lære om Google Fonts. Og for vejledning om, hvilke skrifttyper der skal bruges til internetdesign, tjek disse tre bud.

Indarbejd visuelle elementer

når du komponerer dit brandede bloghoved, skal du tænke over, hvilke visuelle elementer du vil medtage. Vi har gennemgået eksempler ved hjælp af et logo, et foto og en stor klar knap.

Jen fra ToastMeetsJam.com gør netop det. Hun faldt ikke bare i et bord, som du ville have i et kedeligt regneark — hun brugte kunstneriske grænser og gode skrifttyper sammen med sine formularfelter og en cirkulær “GO” – knap.

se hvordan hun problemfrit inkorporerer sin e-mail-tilmelding i designet? Ikke kun engagerer hun dig med billedet af sig selv, der ser animeret og venlig ud, men hun udnytter også en ren, grå baggrund for at holde dig fokuseret på teksten og formen. Ingen distraherende mønstre eller billeder for at lokke dig væk fra nøgleopgaven med at udfylde denne formular og komme videre. Det kunne ikke være mere klart, hvad du skal gøre for at få hende Gratis, fem-dages kursus.

gør dig klar til at designe

du har set nogle eksempler på gode blogoverskrifter, men hvad gør du næste? For at komme i gang med din egen blogoverskrift skal du samle nogle designværktøjer og billedstørrelsesoplysninger.

designværktøjer

de væsentlige designværktøjer til at lave din egen brugerdefinerede bloghoved behøver ikke at være svære at bruge eller dyre. Prøv et par ud og se, hvad du er fortrolig med, så gå efter det! Bare rolig, hvis de føler sig akavede i starten — du bliver bedre, jo mere du bruger dem. Her er et par, du kan begynde at udforske, i rækkefølge fra letteste til sværeste.

Canva. Dette er nok den nemmeste på markedet, og det er gratis! Der er en betalt version kaldet Canva til arbejde, hvis du vil dykke dybere, men den gratis version er virkelig sjov og nem at lære. Det er et internetbaseret designværktøj, så du bare logger ind på hjemmesiden og bruger den direkte i din bro.ser.

PicMonkey. Hvis du virkelig er i at redigere fotos og lege med filtre, er PicMonkey værd at prøve. Der er mange sjove effekter indbygget. Ligesom Canva er PicMonkey internetbaseret og har en gratis version plus en betalt version med ekstra funktionalitet.

Photoshop. Du kan ikke nævne designprogrammer og ikke bringe Photoshop op! Det er et kraftcenter for et program og kan gøre meget mere end bare at lave en blogoverskrift, men det er bestemt godt til det. Det er et program, du henter, og du betaler med månedligt abonnement (en gratis prøveperiode er også tilgængelig).

som professionel designer har jeg brugt Photoshop i hele min karriere, og jeg elsker det. De fleste af mine læsere synes Photoshop er skræmmende i starten, men det er helt gennemførligt, når du lærer et par grundlæggende. Jeg må dog sige, at siden jeg opdagede Canva, bruger jeg ofte en kombination af Photoshop og Canva til at lave min grafik. Canva er bare så sjovt!

Pro tip: Hvis du henter fotograferingsplanen fra Adobe, kan du få Photoshop + Lightroom til en temmelig lav månedlig pris. Ikke for lurvet.

Ordvagt. Hvis du kan lide at lave grafik på din telefon, er dette noget for dig. Denne mobilapplikation er ikke gratis, men er kun et par dollars og har en iOS-og Android-version. Plus, det er tilsluttet et gratis creative commons stock photo site, så du er aldrig tabt for billedvalg i din bloghoved. Det har alle mulige farver, teksturer og skrifttyper at vælge imellem. Alt du skal gøre er at gemme din endelige grafik til “skyen” eller tilslutte den til din computer, så du kan uploade den til din hjemmeside.

billedstørrelser

når du opretter din blog header, skal du overveje billedstørrelsen i forhold til din site platform. Størrelsen på dit tema kan være forskellig fra den næste persons side eller GoDaddy GoCentral Hjemmesideprogram. Her er nogle ting, du skal huske på:

billeddimensioner. Størrelser er normalt angivet som nogle tal brede af nogle tal høje og i billeddimensioner. For eksempel: 1000 kr. 400 (eller 1000 kr. 400 kr.) betyder, at dit billede er 1000 kr.bredt og 400 kr. højt.

opløsning. For internettet er din opløsning let-det er altid 72! Højere opløsninger som 300, 600 eller mere er til udskrivning. Skærmopløsninger til skærme er altid kun 72. Så ved hjælp af vores eksempeldimensioner ovenfra ville dit endelige billede være 1000ph bredt med 400ph højt, 72 dpi (eller ppi).

filtype. PNG-filer mister aldrig kvalitet, uanset hvor mange gange du gemmer dem, men er større i MB (megabyte) størrelse. JPG (jpeg) filer kan gemmes på forskellige niveauer af kvalitet, så du kan holde Filstørrelse (MB) lille, men hver gang du gemmer dem, de mister en lille smule af kvalitet. A.jpg-fil, der gemmes to gange, ser godt ud, men når du har gemt den fem eller 10 gange, begynder den at se billedbelagt og kornet ud.

optimering betyder at gemme dem til at være mere kompakte i en mindre filstørrelse, men omhyggeligt, så du ikke mister kvalitet. Du kan gøre dette nemt ved at bruge en gratis hjemmeside kaldet TinyPNG. Se den søde panda komprimere dine billeder på en måde, der holder dem ser fabelagtig, men sparer dig megabyte!

hvordan man laver en blog header i Canva

1. Tilmeld dig en konto.

2. Brug brugerdefinerede dimensioner.

3. Vælg et gratis foto.

4. Tilføj brugerdefineret tekst.

5. Tilpas dit design.

6. Tilføj et logo.

7. Hent din blog header.

nu til den sjove del! Lad os grave i at lave en brugerdefineret bloghoved fra bunden ved hjælp af Canva. Jeg bruger ressourcer, der er tilgængelige gratis, så du kan helt gøre dette på egen hånd sammen med mig. Tilmeld dig bare en gratis konto, så er du klar til at gå.

her er bloghovedet, vi vil lave:

1. Tilmeld dig en konto.

når du tilmelder dig en konto hos Canva, kommer du til en opret en designside, hvor du vil klikke på Brug brugerdefinerede dimensioner i øverste højre hjørne.

Brug brugerdefinerede dimensioner.

udfyld den ønskede bredde og højde i de felter, der vises, og vælg “PK” for billedpunkter. Klik derefter på designet! knap.

et nyt projekt vises med en tom skærm og fanen Layout valgt til venstre. Bemærk, at projektnavnet ikke blev angivet, så det navngiver sig selv “1000ph 400ph — Untitled Design” øverst ved siden af knappen Del.

Vælg et gratis foto.

Klik på elementer, og vælg et gratis foto fra dem, der leveres. Alle de gratis siger” Gratis ” i nederste hjørne. Du kan også uploade dit eget foto, men til vores tutorial vil vi arbejde med et af disse gratis fotos.

når du klikker på billedet, vises det øjeblikkeligt i designområdet for dit projekt. Lad os gå videre og omdøbe dette projekt, mens vi er ved det. Klik på det midlertidige navn op ved siden af knappen Del, og skriv et nyt. Jeg kalder denne “rejse dagbøger” for min foregive rejse blog.

når dit billede sidder i designområdet, kan du gøre det større ved at trække cirklerne i hjørnerne. Gå videre og ændre størrelsen på dette billede, så det passer til dokumentet.

Tilføj brugerdefineret tekst.

fantastisk! Nu har vi brug for noget tekst. Klik på fanen Tekst i venstre kolonne, og du vil se nogle muligheder at vælge imellem. Du kan klikke på foruddesignede tekstarrangementer i det nederste afsnit af vinduet eller på individuelle tekstlinjer øverst. Gå videre og klik på Tilføj overskrift. Denne tekst vises på billedet, standard til sort.

nu for nogle sjove! Lad os vælge en anden skrifttype. Gennemse skrifttypevalgene og vælg alt, hvad der rammer din fancy. Jeg valgte en børste-stil. Det er svært at se i sort oven på det billede, så lad os ændre det til hvidt. Klik på den farverige boks øverst for at få vist farvevalg, og vælg den hvide firkant. Jeg justerede også størrelsen til 104.

næste, gå videre og træk denne overskrift på plads på billedet, så det er mere centreret.

Tilpas dit design.

det er lidt svært at læse og fokusere på teksten på denne travle baggrund, så lad os tilføje en sløreffekt. Klik bare på baggrundsfotoet for at vælge det, vælg derefter Filter, og klik på Avancerede indstillinger.

filtervinduet udvides for at vise dig nogle andre ting, du kan gøre. Du kan spille med mætning, farve toning, tilføje en vignet, og meget mere.

Klik på den sorte prik i Blur-sektionen, og træk den til højre. Jeg valgte +22 på sløringsskalaen.

Tilføj et logo.

Klik nu ud af vinduet for at se dit design. Ser godt ud! Lad os nu mærke det ved at tilføje et logo. Du kan uploade dit logo ved at klikke på fanen Uploads til venstre og derefter på knappen big green Upload dine egne billeder.

vælg en gennemsigtig .png version af dit logo, så det ikke er fladt på en solid farve (medmindre din logo stil er inde i et hvidt rektangel eller sådan noget).

når den er indlæst, kan du se den i området under den grønne knap. Det forbliver der for dig at bruge på fremtidige projekter. Handy! Jeg havde allerede mit falske logo uploadet, så jeg rullede bare ned for at finde det.

Klik på logoet, og så vises det i dit design.

nu kan du ændre størrelsen på det, flytte det rundt og endda få lyst og lege med gennemsigtigheden, hvis du vil.

Hent din blog header.

Yay! Nu er dit design klar, så alt der er tilbage er at hente det. Klik på knappen Hent øverst på skærmen, og vælg din filtype. Jeg går normalt med den anbefalede PNG-type.

når dit design er hentet til din computer, kan du åbne det og beundre det og derefter indlæse det til din blog.

og det er alt, hvad der er til det! Forhåbentlig har du et godt greb om, hvordan du laver en blogoverskrift og vigtigheden af et stjernebillede. Nu Kan du gå om at tilføje en til din blog. Glad branding!