det finnes tre typer overskrifter jeg vanligvis ser brukt ut på ol’ interwebs — navigasjonsoverskrifter, fulle bildeoverskrifter og velkomstmatteoverskrifter. Hvis du er interessert i hvordan du lager en bloggoverskrift, må du vite fordeler og ulemper for hver type før vi kommer ned til det nitty gritty av skapelsen.

navigasjonsoverskrifter

Navigasjonsoverskrifter er ikke-fotobaserte. For eksempel, på toppen av nettstedet mitt, jeg har min logo, pluss linker til viktige sider eller registreringsskjemaer. Ta en titt.

Navigasjonsoverskrifter som disse er ideelle hvis du er en fan av minimalisme og ønsker å få folk til å virkelig fokusere på skrivingen din uten å bli distrahert av bilder.

Det er også en flott rute å gå hvis du er ny, ikke har funnet ut merkevaren din,eller bare trenger å komme i gang på nettet.

oppsettet er ikke satt i stein-navigasjonsoverskrifter kan legges ut på alle slags måter. Du har sikkert sett noen der logoen er i midten over tekstkoblinger, eller det kan bare ha logoen uten koblinger (eller omvendt).

denne overskriften lever ofte i harmoni med flere bloggoverskrifter (nettstedet mitt har faktisk en annen overskrift under den også), som fulle bildeoverskrifter og velkomstmatter.

Foto overskrifter

bildet header stil er veldig iøynefallende og virkelig trekker deg inn. Hvis du vil ha et bildeoverskrift på bloggen din, tenk på hva emnet vil være. Vil det være et bilde av en person? Som deg, eller du og din familie, eller noen representasjon av din ideelle kunde? Eller vil det være et bilde med en slags landskap, mønster, tegneserie/ikoner eller til og med en video?

Sjekk ut dette eksemplet fra AlexTooby.com. Alex bruker et bilde av seg selv pluss litt av velkomstmatten med en sterk oppfordring til handling for å melde seg på kurset hennes.

bildet fungerer, både for nykommere og returnerende besøkende. Hvorfor? Fordi hun bruker et par subtile visuelle elementer (mer om disse senere) som tjener til å styrke styrken til denne overskriften. Hun holder telefonen ut, Med Instagram-grensesnittet spottet på det, og hun ser mot teksten hun vil at du skal lese. Øyet er naturlig trukket til ansiktet hennes, deretter over til ordene, deretter ned til lys rosa knappen for å klikke. Dette ville være mindre effektivt hvis hun så ut til venstre på skjermen.

Pro-Tip: Å ha noen vendt » inn » mot kopien eller knappen er et ninja designtrick du kan bruke også.

Foto overskrifter kan sette en stemning og bidra til å drive leserne til å ta affære. Siden bildeoverskrifter er store, blokkerer de andre distraksjoner på siden og hjelper med å fokusere leserne på nøyaktig hva du vil at De skal gjøre (Som Alexs «Start Gratis Kurs» – knapp).

Velkommen mat overskrifter

den typiske «velkommen mat» du kan se rundt på internett er en fullskjerm overtakelse, og det finnes verktøy som hjelper deg å gjøre dette.

Eller, hvis du ikke vil overta hele siden din, kan du også sette opp en del for å fungere som en velkomstmatte eller et registreringsskjema for noen spesielle freebie du tilbyr. Ikke sikker på hva det ville se ut? Sjekk ut bildet nedenfor fra nettstedet mitt. Jeg tilbyr et gratis e-kurs som jeg vil at alle besøkende skal se først, slik at jeg kan bygge e-postlisten min med riktig publikum for fremtidige e-postmeldinger og kampanjer. Mine blogginnlegg vises under dette slik at besøkende kan bare bla ned for å se mine siste innlegg.

Nå som du har sett de tre forskjellige stilene, er det på tide å snakke om å lage en blogg header for nettstedet ditt.

hvordan lage en bloggoverskrift som ser merket ut

jeg vet at begrepet «merket» høres offisielt og skremmende ut, men frykt aldri! Det er faktisk ganske enkelt hvis du bare fokuserer på et par viktige ting. Nemlig, farger (ofte funnet i logoen din) og skrifter.

pro tips: Sett sammen en merkevareguide for deg selv i en mappe, slik at du kan holde oversikt over denne informasjonen (sammen med logoen din) for enkel tilgang når som helst.

Selv Om du ikke lager noen fancy trykt guide, kan du skrive ned denne informasjonen på et notat og holde det på skjermen. Det vil spare deg masse tid i det lange løp! Nå, la oss bryte ned noen designelementer.

Velg farger

du har kanskje noen farger du har valgt å bruke for merkevaren din, men et godt sted å starte er med logoen din. Din logo farge(r) er en flott å bruke på tvers av nettstedet ditt, merkevarebygging og blogg header. Konsistens er nøkkelen – hvis du har en varm rosa, så har bildene dine kanskje et element av rosa til dem eller en samlet rosa cast, eller kanskje du bruker svart og hvitt og trekker i farge på andre måter.

Aby av YouBabyMeMummy.com gjør dette vakkert ved å sette inn en nydelig, fullfargeversjon over hennes logo som et overlegg på et svart-hvitt bilde av seg selv med datteren sin. Dette bildet header virkelig trekker deg inn i hennes historie i en dristig og engasjerende måte. Klikk på siden hennes hvis du vil se flere eksempler på flotte fullskjermbilder.

Og hvis du fortsatt prøver å finne ut hvilke farger du skal bruke i merkevaren din, er denne artikkelen om fargepsykologi veldig avslørende!

Velg en skrift

Å Innlemme en stilig eller merket skrift rett inn i overskriften din kan være en veldig relevant og rask måte å få meldingen på. Som i denne svært unike og iøynefallende bilde Fra Luci over på ByLucinda.co.uk.

dette seascape passer rett inn med hennes merkevare, som inneholder mange naturlige elementer, og viser hennes elegante, men sassy vibe. Ingen Times New Roman for denne damen! Hun har også en smart måte å vise sine sosiale medier linker på høyre side i en lys grønn rektangulær stripe. Den forbinder toppnavigasjonen med det store dristige bildet og bidrar til å trekke øyet ned på siden på en forsettlig måte.

Du kan finne noen virkelig morsomme, gratis fonter online fra steder som Font Squirrel og Dafont. Mange av disse gratis fonter er bygget rett inn i programmer Som Canva Og PicMonkey. Men siden de er gratis, er det en høyere sjanse for at noen andre (en konkurrent selv) kan bruke den du vil ha.

hvis du vil bruke mer avanserte skrifter i kroppen eller overskriftene på nettstedet ditt (dvs. ikke i et bilde), bør du ta deg tid til Å lære Om Google Fonts. Og for veiledning om hvilke skrifter som skal brukes til webdesign, sjekk ut disse tre budene.

Innlemme visuelle elementer

når du komponerer din merkede bloggoverskrift, bør du tenke på hvilke visuelle elementer du vil inkludere. Vi har gjennomgått eksempler ved hjelp av en logo, et bilde og en stor klar knapp.

Jen fra ToastMeetsJam.com gjør nettopp det. Hun droppet ikke bare i et bord som du ville ha i et kjedelig regneark – hun brukte kunstneriske grenser og flotte skrifter sammen med skjemafeltene og en sirkulær » GO » – knapp.

Se hvordan hun sømløst inkorporerer sin e-registrering i design? Ikke bare engasjerer hun deg med bildet av seg selv, ser animert og vennlig ut, men hun utnytter også en ren, grå bakgrunn for å holde deg fokusert på teksten og skjemaet. Ingen distraherende mønstre eller bilder for å lokke deg bort fra den viktigste oppgaven med å fylle ut skjemaet og fremover. Det kan ikke være mer klart hva du trenger å gjøre for å få henne gratis, fem-dagers kurs.

Gjør deg klar til å designe

Du har sett noen eksempler på flotte bloggoverskrifter, men hva gjør du neste? For å komme i gang på din egen bloggoverskrift, må du samle noen designverktøy og bildestørrelsesinformasjon.

Designverktøy

de essensielle designverktøyene for å lage din egen tilpassede bloggoverskrift trenger ikke å være vanskelig å bruke eller dyrt. Prøv noen ut og se hva du er komfortabel med, så gå for det! Ikke bekymre deg hvis de føler seg vanskelig i begynnelsen — du blir bedre jo mer du bruker dem. Her er noen du kan begynne å utforske, i rekkefølge fra enkleste til vanskeligste.

Canva. Dette er trolig den enkleste på markedet, og det er gratis! Det er en betalt versjon kalt Canva For Arbeid hvis du vil dykke dypere, men den gratis versjonen er veldig morsom og lett å lære. Det er et nettbasert designverktøy, slik at du bare logger deg på nettstedet og bruker det rett i nettleseren din.

PicMonkey. Hvis Du virkelig er i redigering av bilder og spiller med filtre, Er PicMonkey verdt å prøve. Det er mange morsomme effekter innebygd. Som Canva, PicMonkey er web-basert og har en gratis versjon pluss en betalt en med ekstra funksjonalitet.

Photoshop. Du kan ikke nevne designprogramvare og ikke ta Opp Photoshop! Det er et kraftverk av et program og kan gjøre mye mer enn bare å lage en bloggoverskrift, men det er definitivt bra for det. Det er et program du laster ned, og du betaler med månedlig abonnement (en gratis prøveversjon er også tilgjengelig).

som profesjonell designer har jeg brukt Photoshop hele min karriere, og jeg elsker Det. De fleste av mine lesere tror Photoshop er skremmende først, men det er helt gjennomførbart når du lærer noen grunnleggende. Jeg må si, men siden jeg oppdaget Canva, bruker jeg ofte En kombinasjon Av Photoshop og Canva for å lage grafikken min. Canva er bare så gøy!

Pro tips: hvis du henter fotograferingsplanen Fra Adobe, kan Du få Photoshop + Lightroom til en ganske lav månedlig kostnad. Ikke så shabby.

WordSwag. Hvis du liker å lage grafikk på telefonen, er dette for deg. Denne mobilapplikasjonen er ikke gratis, men er bare noen få dollar og har en iOS og Android-versjon. I tillegg er det koblet til et gratis creative commons stock photo-nettsted, slik at du aldri har tap for bildevalg i bloggoverskriften. Den har alle slags farger, teksturer og fonter å velge mellom. Alt du trenger å gjøre er å lagre den endelige grafikken til «skyen» eller koble den til datamaskinen din, slik at du kan laste den opp til nettstedet ditt.

Bildestørrelser

når du oppretter bloggoverskriften, må du vurdere bildestørrelsen i forhold til nettstedsplattformen din. Størrelsen På WordPress-temaet ditt kan være forskjellig fra Neste persons Squarespace-side eller GoDaddy GoCentral-Nettstedbygger. Her er noen Ting å huske på:

Piksel dimensjoner. Størrelser er vanligvis oppført som noen tall bred av noen tall høye og i piksel dimensjoner. For eksempel: 1000×400 (eller 1000px x 400px) betyr at bildet ditt er 1000 piksler bredt og 400 piksler høyt.

Oppløsning. For internett er oppløsningen din enkel-det er alltid 72! Høyere oppløsninger som 300, 600 eller mer, er for utskrift. Skjermoppløsninger for skjermer er alltid bare 72. Så ved å bruke våre eksempeldimensjoner ovenfra, vil ditt endelige bilde være 1000px bredt med 400px høyt, 72 dpi (eller ppi).

Filtype. PNG-filer aldri miste kvalitet uansett hvor mange ganger du lagrer dem, men er større I MB (megabyte) størrelse. JPG-filer (jpeg) kan lagres på forskjellige kvalitetsnivåer, slik at du kan holde filstørrelsen (MB) liten, men hver gang du lagrer dem, mister de litt kvalitet. A.jpg-fil som er lagret to ganger ser bra ut, men etter at du har lagret den fem eller 10 ganger, vil den begynne å se pixelated og kornete.

Optimalisering betyr å lagre dem for å være mer kompakte i en mindre filstørrelse, men forsiktig slik at du ikke mister kvalitet. Du kan gjøre dette enkelt ved å bruke et gratis nettsted Kalt TinyPNG. Se den søte panda komprimere bildene dine på en måte som holder dem ser fabelaktig, men sparer deg megabyte!

hvordan lage en bloggoverskrift I Canva

1. Registrer deg for en konto.

2. Bruk egendefinerte dimensjoner.

3. Velg et gratis bilde.

4. Legg til tilpasset tekst.

5. Tilpass ditt design.

6. Legg til en logo.

7. Last ned bloggen din header.

Nå for den morsomme delen! La oss grave i å lage en tilpasset bloggoverskrift fra bunnen av Ved Hjelp Av Canva. Jeg bruker ressurser som er tilgjengelige gratis, så du kan helt gjøre dette på egen hånd sammen med meg. Bare registrer deg for en gratis konto, og du er klar til å gå.

her er bloggoverskriften vi skal lage:

1. Registrer deg for en konto.

når Du registrerer deg for En Konto Hos Canva, kommer du til En Opprett en designside der du vil klikke På Bruk egendefinerte dimensjoner øverst til høyre.

Bruk egendefinerte dimensjoner.

Fyll inn ønsket bredde og høyde i feltene som vises, og velg» px » for piksler. Etter Det, klikk På Design! knapp.

et nytt prosjekt vises med en tom skjerm og Oppsett-fanen valgt til venstre. Merk at prosjektnavnet ikke ble spesifisert, så det heter seg «1000px x 400px-Untitled Design» øverst ved Siden av Delingsknappen.

Velg et gratis bilde.

Klikk På Elementer, og velg et gratis bilde fra de som tilbys. Alle de frie sier «GRATIS» i nederste hjørne. Du kan også laste opp ditt eget bilde, men for vår veiledning vil vi jobbe med et av disse gratis bildene.

når du klikker på bildet, vises det umiddelbart i designområdet av prosjektet. La oss gå videre og omdøpe dette prosjektet mens vi er i gang. Klikk på det midlertidige navnet ved siden av del-knappen, og skriv inn en ny. Jeg kaller denne «reise dagbøker» for min late reise blogg.

Etter at bildet er plassert i designområdet, kan du gjøre det større ved å dra sirklene i hjørnene. Gå videre og endre størrelsen på dette bildet for å passe til dokumentet.

Legg til egendefinert tekst.

Flott! Nå trenger vi litt tekst. Klikk På Tekstfanen i venstre kolonne, og du vil se noen alternativer å velge mellom. Du kan klikke forhåndsutformede tekstarrangementer i den nedre delen av vinduet eller på individuelle tekstlinjer øverst. Gå videre og klikk På Legg til overskrift. Denne teksten vises i bildet, som standard til svart.

nå for litt moro! La oss velge en annen skrift. Bla gjennom skriftvalg og plukke noe som slår din fancy. Jeg valgte en brush-stylet en. Det er vanskelig å se i svart på toppen av bildet, så la oss bytte det til hvitt. Klikk på den fargerike boksen øverst for å få opp fargevalg, og velg den hvite firkanten. Jeg har også justert størrelsen til 104.

neste, gå videre og dra den overskriften på plass på bildet slik at det er mer sentrert.

Tilpass design.

det er litt vanskelig å lese og fokusere på teksten på denne travle bakgrunnen, så la oss legge til en uskarphet. Bare klikk på bakgrunnsbildet for å velge Det, velg Filter, og klikk På Avanserte Alternativer.

filtervinduet utvides for å vise deg noen andre ting du kan gjøre. Du kan spille med metning, farge missfarging, legge til en vignett, og mer.

Klikk på den svarte prikken I Blur-delen og dra den til høyre. Jeg valgte +22 på uskarphetsskalaen.

Legg til en logo.

klikk nå ut av vinduet for å se designet ditt. Ser bra ut! La oss nå merke det ved å legge til en logo. Du kan laste opp logoen din ved å klikke På Opplastingsfanen til venstre, og deretter Den store grønne Last opp dine egne bilder-knappen.

Velg en gjennomsiktig .png-versjon av logoen din, slik at den ikke er flatt på en solid farge (med mindre logostilen din er inne i et hvitt rektangel eller noe sånt).

når den er lastet, ser du den i området under den grønne knappen. Det forblir der for deg å bruke på fremtidige prosjekter. Handy! Jeg hadde allerede min falske logo lastet opp, så jeg rullet bare ned for å finne den.

Klikk på logoen, og så vil den vises i designet ditt.

Nå Kan du endre størrelsen på den, flytte den rundt, og selv få fancy og spille med åpenhet hvis du vil.

Last ned bloggen din header.

Yay! Nå er designet ditt klart, så alt som er igjen er å laste det ned. Klikk På Last ned-knappen øverst på skjermen, og velg filtypen. Jeg går vanligvis med den anbefalte PNG-typen.

Når designet ditt er lastet ned til datamaskinen din, kan du åpne det og beundre det, og deretter laste det til bloggen din.

Og det er alt som skal til! Forhåpentligvis har du et godt grep om hvordan du lager en bloggoverskrift og betydningen av et sterkt bilde. Nå kan du gå om å legge til en i bloggen din. Happy branding!