există trei tipuri de anteturi pe care le văd de obicei folosite pe interwebs — anteturi de navigare, anteturi foto complete și anteturi de bun venit. Dacă sunteți interesat de modul de a face un antet de blog, va trebui să cunoașteți argumentele pro și contra pentru fiecare tip înainte de a ajunge la gritty de creație.

anteturile de navigare

anteturile de navigare nu sunt bazate pe fotografii. De exemplu, în partea de sus a site-ului meu, am logo-ul meu, plus link-uri către pagini importante sau formulare de înscriere. Uită-te.

anteturile de navigare ca acestea sunt ideale dacă sunteți un fan al minimalismului și doriți să îi determinați pe oameni să se concentreze cu adevărat asupra scrisului dvs. fără a fi distrași de imagini.

este, de asemenea, o cale excelentă de parcurs dacă sunteți nou, nu v-ați dat seama de branding sau trebuie doar să vă ridicați și să rulați online.

aspectul nu este setat în piatră — anteturile de navigare pot fi așezate în tot felul de moduri. Probabil că ați văzut unele în care sigla se află în centrul de deasupra legăturilor text sau ar putea avea doar sigla fără legături (sau invers).

acest antet trăiește adesea în armonie cu anteturile suplimentare ale blogului (site-ul meu are de fapt un alt antet sub el), cum ar fi anteturile foto complete și covorașele de bun venit.

anteturi foto

stilul antetului foto este foarte atrăgător și te atrage cu adevărat. Dacă doriți un antet de fotografie pe blogul dvs., gândiți-vă care va fi subiectul. Va fi o fotografie a unei persoane? Ca tine, sau tu și familia ta, sau o reprezentare a clientului ideal? Sau va fi o fotografie cu un fel de peisaj, model, desen animat/icoane sau chiar un videoclip?

consultați acest exemplu de la AlexTooby.com. Alex folosește o fotografie cu ea însăși, plus un pic de idee de bun venit, cu o chemare puternică la acțiune pentru a se înscrie la cursul ei.

fotografia funcționează, atât pentru noii veniți, cât și pentru vizitatorii care se întorc. De ce? Pentru că folosește câteva elemente vizuale subtile (mai multe despre acestea mai târziu) care servesc la întărirea puterii acestui antet. Ea își ține telefonul afară, cu interfața Instagram batjocorită pe ea și se uită spre textul pe care vrea să-l citești. Ochiul tău este atras în mod natural de fața ei, apoi de cuvinte, apoi până la butonul roz strălucitor pentru a face clic. Acest lucru ar fi mai puțin eficient dacă ar privi în partea stângă a ecranului.

Pro-Tip: Având pe cineva cu care se confruntă” în ” spre copia sau butonul este un truc de design ninja puteți utiliza, de asemenea.

anteturile foto pot seta o stare de spirit și pot ajuta cititorii să ia măsuri. Deoarece anteturile foto sunt mari, acestea blochează alte distrageri de pe pagină și ajută cititorii să se concentreze exact pe ceea ce doriți să facă (cum ar fi butonul „Start Free Course” al lui Alex).

anteturi mat de bun venit

„covorul de bun venit” tipic pe care l-ați putea vedea pe internet este o preluare pe ecran complet și există instrumente care vă ajută să faceți acest lucru.

sau, dacă nu doriți să preluați întreaga pagină, puteți configura, de asemenea, o porțiune pentru a acționa ca o saltea de bun venit sau un formular de înscriere pentru un freebie special pe care îl oferiți. Nu sunteți sigur cum ar arăta? Check out imaginea de mai jos de pe site-ul meu. Ofer un curs electronic gratuit pe care vreau ca toți vizitatorii să îl vadă mai întâi, astfel încât să-mi pot construi lista de e-mailuri cu publicul potrivit pentru e-mailuri și promoții viitoare. Intrările mele pe blog apar sub acest lucru, astfel încât vizitatorii să poată derula în jos pentru a vedea ultimele mele postări.

acum, că ați văzut cele trei stiluri diferite, este timpul să vorbim despre crearea unui antet de blog pentru site-ul dvs. web.

cum se face un antet de blog care arată marca

știu că termenul „marcă” sună oficial și intimidant, dar nu vă temeți niciodată! De fapt, este destul de ușor dacă te concentrezi doar pe câteva lucruri cheie. Anume, culori (adesea găsite în logo-ul dvs.) și fonturi.

Sfat Pro: Pune împreună un ghid de brand pentru tine într-un dosar, astfel încât să puteți urmări aceste informații (împreună cu logo-ul) pentru un acces facil în orice moment.

chiar dacă nu faceți un ghid tipărit fantezist, puteți nota aceste informații pe o notă lipicioasă și păstrați-le pe monitor. Acesta vă va economisi o mulțime de timp pe termen lung! Acum, să descompunem câteva elemente de design.

alegeți culorile

s-ar putea să aveți câteva culori pe care ați ales să le utilizați pentru marca dvs., dar un loc bun pentru a începe este cu logo-ul dvs. Culoarea (culorile) logo-ului dvs. sunt excelente de utilizat pe site-ul dvs. web, branding și antetul blogului. Consistența este esențială — dacă aveți un roz fierbinte, atunci poate fotografiile dvs. au un element de roz pentru ele sau o distribuție roz generală sau poate folosiți alb-negru și trageți culoarea în alte moduri.

Aby de YouBabyMeMummy.com face acest lucru frumos prin introducerea unei versiuni superbe, pline de culoare peste logo-ul ei ca o suprapunere pe o fotografie alb-negru a ei cu fiica ei. Acest antet fotografie într-adevăr te trage în povestea ei într-un mod îndrăzneț și angajarea. Faceți clic pe site-ul ei dacă doriți să vedeți mai multe exemple de imagini uimitoare, pe ecran complet.

și dacă încă încerci să-ți dai seama ce culori să folosești în marca ta, acest articol despre psihologia culorilor este foarte revelator!

selectați un font

încorporarea unui font elegant sau de marcă chiar în antetul dvs. poate fi o modalitate foarte relevantă și rapidă de a vă transmite mesajul. Ca în această imagine foarte unic și ochi-prinderea de la Luci peste pe ByLucinda.co.uk.

acest peisaj marin se potrivește perfect cu marca ei, care încorporează o mulțime de elemente naturale și prezintă atmosfera ei elegantă, dar sassy. Fără Times New Roman pentru această doamnă! De asemenea, are un mod inteligent de a-și arăta legăturile de socializare pe partea dreaptă într-o bandă dreptunghiulară verde deschis. Conectează navigarea de sus cu fotografia mare îndrăzneață și ajută la tragerea ochiului în jos a paginii într-un mod intenționat.

puteți găsi unele foarte distractiv, fonturi gratuite online din locuri cum ar fi font Squirrel și Dafont. Multe dintre aceste fonturi gratuite sunt construite chiar în programe precum Canva și PicMonkey. Cu toate acestea, din moment ce sunt gratuite, există șanse mai mari ca altcineva (chiar și un concurent) să-l folosească pe cel dorit.

dacă doriți să utilizați fonturi crescătoare în corpul sau titlurile site-ului dvs. web (adică nu într-o imagine), atunci ar trebui să vă luați ceva timp pentru a afla despre fonturile Google. Și pentru îndrumări cu privire la fonturile pe care să le utilizați pentru designul web, consultați aceste trei porunci.

încorporați elemente vizuale

pe măsură ce compuneți antetul blogului dvs. de marcă, ar trebui să vă gândiți la ce elemente vizuale doriți să includeți. Am analizat exemple folosind un logo, o fotografie și un buton clar mare.

Jen din ToastMeetsJam.com face doar asta. Ea nu a scăzut doar într — un tabel ca ai avea într-o foaie de calcul plictisitor-ea a folosit artistice de frontieră și fonturi mari, împreună cu câmpurile ei de formă și un buton circular „du-te”.

a se vedea modul în care ea încorporează perfect înscriere ei de e-mail în proiectarea? Nu numai că te angajează cu fotografia în care arată animată și prietenoasă, dar folosește și un fundal curat, gri, pentru a te menține concentrat pe text și formular. Nu există modele sau imagini care să vă distragă atenția pentru a vă îndepărta de sarcina cheie de a completa acel formular și de a merge mai departe. Nu ar putea fi mai clar ce trebuie să faceți pentru a obține cursul gratuit de cinci zile.

pregătește-te să proiectezi

ai văzut câteva exemple de anteturi grozave de blog, dar ce faci în continuare? Pentru a merge pe propriul antet de blog, va trebui să adunați câteva instrumente de proiectare și informații despre dimensiunea imaginii.

instrumente de proiectare

instrumentele de proiectare esențiale pentru a face propriul antet blog personalizat nu trebuie să fie greu de utilizat sau costisitoare. Încercați câteva afară și a vedea ceea ce sunteți confortabil cu, apoi du-te pentru ea! Nu vă faceți griji dacă se simt incomode la început — veți deveni mai buni cu cât le folosiți mai mult. Iată câteva pe care le puteți începe să explorați, de la cel mai ușor la cel mai dificil.

Canva. Acesta este probabil cel mai ușor de pe piață și este gratuit! Există o versiune plătită numită Canva for Work dacă doriți să vă scufundați mai adânc, dar versiunea gratuită este foarte distractivă și ușor de învățat. Este un instrument de proiectare bazat pe web, așa că trebuie doar să vă conectați la site-ul web și să îl utilizați chiar în browserul dvs.

PicMonkey. Dacă vă place cu adevărat să editați fotografii și să vă jucați cu filtre, atunci PicMonkey merită încercat. Există multe efecte distractive încorporate. La fel ca Canva, PicMonkey este bazat pe web și are o versiune gratuită, plus una plătită, cu funcționalități suplimentare.

Photoshop. Nu puteți menționa software-ul de proiectare și nu aduceți Photoshop! Este un centru de putere al unui program și poate face mult mai mult decât să facă un antet de blog, dar este cu siguranță minunat pentru asta. Este o aplicație pe care o descărcați și veți plăti prin abonament lunar (este disponibilă și o încercare gratuită).

ca designer profesionist, am folosit Photoshop pentru întreaga mea carieră și îmi place. Majoritatea cititorilor mei cred că Photoshop este intimidant la început, dar este complet realizabil odată ce înveți câteva elemente de bază. Trebuie să spun, totuși, de când am descoperit Canva, folosesc adesea o combinație de Photoshop și Canva pentru a-mi face grafica. Canva este doar atât de distractiv!

Sfat Pro: dacă ridicați planul de fotografie de la Adobe, puteți obține Photoshop + Lightroom pentru un cost lunar destul de scăzut. Nu prea ponosit.

WordSwag. Dacă vă place să faceți grafică pe telefon, Aceasta este pentru dvs. Această aplicație mobilă nu este gratuită, dar are doar câțiva dolari și are o versiune iOS și Android. În plus, este conectat la un site gratuit de fotografii creative commons, astfel încât să nu pierdeți niciodată alegerile de imagine din antetul blogului. Ea are tot felul de culori, texturi și fonturi pentru a alege de la. Tot ce trebuie să faceți este să salvați Grafica finală în „cloud” sau să o conectați la computer, astfel încât să o puteți încărca pe site-ul dvs.

dimensiuni imagine

când creați antetul blogului, trebuie să luați în considerare dimensiunea imaginii în raport cu platforma site-ului dvs. WordPress ar putea fi diferită de pagina Squarespace a următoarei persoane sau de GoDaddy Gocentral Website Builder. Iată câteva lucruri de reținut:

dimensiuni pixeli. Dimensiunile sunt de obicei listate ca un număr larg de un număr înalt și în dimensiuni de pixeli. De exemplu: 1000 x 400 (sau 1000px x 400px) înseamnă că imaginea dvs. are o lățime de 1000 pixeli pe 400 pixeli înălțime.

rezoluție. Pentru internet, rezoluția dvs. este ușoară-este întotdeauna 72! Rezoluții mai mari, cum ar fi 300, 600 sau mai mult, sunt pentru imprimare. Rezoluțiile ecranului pentru Monitoare sunt întotdeauna doar 72. Deci, folosind exemplul nostru dimensiuni de mai sus, imaginea finală ar fi 1000px lățime de 400px inaltime, 72 dpi (sau ppi).

tip de fișier. Fișierele PNG nu pierd niciodată calitatea, indiferent de câte ori le salvați, dar sunt mai mari în dimensiunea MB (megabyte). Fișierele JPG (jpeg) pot fi salvate la diferite niveluri de calitate, astfel încât să puteți păstra dimensiunea fișierului (MB) mică, dar de fiecare dată când le salvați, pierd un pic de calitate. A.fișierul jpg care este salvat de două ori arată bine, dar după ce îl salvați de cinci sau 10 ori, va începe să arate pixelat și granulat.

optimizarea înseamnă salvarea acestora pentru a fi mai compacte la o dimensiune mai mică a fișierului, dar cu atenție, astfel încât să nu pierdeți calitatea. Puteți face acest lucru cu ușurință folosind un site web gratuit numit TinyPNG. Uita-te la panda drăguț comprima imaginile într-un mod care le ține în căutarea fabulos, dar vă economisește megaocteți!

cum se face un antet de blog în Canva

1. Înscrieți-vă pentru un cont.

2. utilizați dimensiuni personalizate.

3. Selectați o fotografie gratuită.

4. Adăugați text personalizat.

5. Personalizați-vă designul.

6. adăugați un logo.

7. descărcați antetul blogului.

acum, pentru partea distractivă! Să săpăm în crearea unui antet de blog personalizat de la zero folosind Canva. Folosesc resurse care sunt disponibile gratuit, astfel încât să puteți face acest lucru pe cont propriu, împreună cu mine. Doar înscrieți-vă pentru un cont gratuit și sunteți gata de plecare.

Iată antetul blogului pe care îl vom face:

1. Înscrieți-vă pentru un cont.

odată ce vă înscrieți pentru un cont la Canva, veți ajunge la o creați o pagină de design unde veți dori să faceți clic pe Utilizați dimensiuni personalizate în colțul din dreapta sus.

utilizați dimensiuni personalizate.

completați lățimea și înălțimea dorite în câmpurile care apar și selectați „px” pentru pixeli. După aceea, faceți clic pe Design! button.

un proiect nou apare cu un ecran gol și fila Layouts selectată în stânga. Rețineți că numele proiectului nu a fost specificat, așa că se numește „1000px x 400px — Design fără titlu” în partea de sus de lângă butonul Partajare.

Selectați o fotografie gratuită.

Faceți clic pe elemente și alegeți o fotografie gratuită dintre cele furnizate. Toți cei liberi spun „liber” în colțul de jos. De asemenea, puteți încărca propria fotografie, dar pentru tutorialul nostru vom lucra cu una dintre aceste fotografii gratuite.

după ce faceți clic pe fotografie, aceasta apare instantaneu în zona de proiectare a proiectului dvs. Să mergem mai departe și redenumiți acest proiect în timp ce suntem la el. Faceți clic pe numele temporar de lângă butonul Partajare și tastați unul nou. Eu numesc acest „jurnale de călătorie” pentru blog-ul meu de călătorie pretinde.

după ce imaginea dvs. se află în zona de proiectare, O puteți mări trăgând cercurile în colțuri. Continuați și redimensionați această imagine pentru a se potrivi documentului.

Adăugați text personalizat.

grozav! Acum avem nevoie de un text. Faceți clic pe fila Text din coloana din stânga și veți vedea câteva opțiuni din care să alegeți. Puteți face clic pe aranjamente text pre-proiectate în secțiunea inferioară a ferestrei respective sau pe linii individuale de text din partea de sus. Mergeți mai departe și faceți clic pe Adăugare titlu. Acest text apare în imagine, implicit la negru.

acum, pentru unele distractiv! Să alegem un font diferit. Răsfoiți prin opțiunile de fonturi și alegeți orice lucru care vă lovește fantezia. Am ales una în stil pensulă. Este greu de văzut în negru deasupra acelei imagini, așa că hai să o schimbăm în alb. Faceți clic pe caseta colorată din partea de sus pentru a afișa opțiunile de culoare și alegeți pătratul alb. De asemenea, am ajustat dimensiunea la 104.

apoi, mergeți mai departe și trageți acea poziție în poziție pe imagine, astfel încât să fie mai centrată.

Personalizați-vă designul.

este un pic cam greu de citit și să se concentreze pe textul de pe acest fundal ocupat, așa că haideți să adăugați un efect de estompare. Doar faceți clic pe fotografia de fundal pentru ao selecta, apoi alegeți filtru și faceți clic pe Opțiuni avansate.

fereastra filtrului se extinde pentru a vă arăta alte lucruri pe care le puteți face. Puteți juca cu saturație, nuanță de culoare, Adăugați o vinietă și multe altele.

Faceți clic pe punctul negru din secțiunea Blur și trageți-l spre dreapta. Am ales +22 pe scara de estompare.

adăugați un logo.

Acum faceți clic pe din acea fereastră pentru a vedea design-ul. Arăți bine! Acum să-l marcăm adăugând un logo. Puteți încărca logo-ul dvs. făcând clic pe fila încărcări din stânga, apoi pe butonul verde mare încărcați propriile imagini.

alegeți un transparent .versiunea png a logo-ului dvs., astfel încât să nu fie aplatizată pe o culoare solidă (cu excepția cazului în care stilul logo-ului dvs. se află într-un dreptunghi alb sau ceva de genul acesta).

când este încărcat, îl veți vedea în zona de sub butonul verde. Acesta rămâne acolo pentru tine de a utiliza pe proiecte viitoare. Handy! Am avut deja logo-ul meu fals încărcat, așa că am defilat în jos pentru a găsi.

Faceți clic pe logo, apoi va apărea în designul dvs.

acum Puteți redimensiona, mutați-l în jurul, și chiar a lua fantezie și să se joace cu transparența, dacă doriți.

descărcați antetul blogului.

ura! Acum, designul dvs. este gata, deci nu mai rămâne decât să îl descărcați. Faceți clic pe butonul Descărcare din partea de sus a ecranului și alegeți tipul de fișier. De obicei merg cu tipul PNG recomandat.

odată ce designul dvs. este descărcat pe computer, îl puteți deschide și admira, apoi încărcați-l pe blogul dvs.

și asta e tot ce este de făcut! Sperăm că aveți o bună înțelegere a modului de a face un antet de blog și importanța unei imagini stelare. Acum, Puteți merge despre adăugarea unul la blog-ul. Branding fericit!