háromféle fejléc van, amelyeket általában az ol’ interwebs-en szoktam használni-navigációs fejlécek, teljes fotó fejlécek és üdvözlő mat fejlécek. Ha érdekel, hogyan lehet blogfejlécet készíteni, akkor ismernie kell az egyes típusok előnyeit és hátrányait, mielőtt eljutnánk a teremtés apró szemcséjéhez.
navigációs fejlécek
a navigációs fejlécek nem fotóalapúak. Például a weboldalam tetején van a logóm, valamint a fontos oldalakra vagy a regisztrációs űrlapokra mutató linkek. Nézd meg.
az ilyen navigációs fejlécek ideálisak, ha a minimalizmus rajongója vagy, és azt szeretné elérni, hogy az emberek valóban az írásra összpontosítsanak anélkül, hogy a képek elterelnék a figyelmüket.
ez is egy nagyszerű út, ha új vagy, még nem jöttél rá a márkádra, vagy csak fel kell állnod és futnod kell az interneten.
az elrendezés nincs kőbe vésve-a navigációs fejlécek mindenféle módon elrendezhetők. Valószínűleg látott néhányat, ahol a logó a szöveges linkek felett középen található, vagy lehet, hogy csak linkek nélküli logóval rendelkezik (vagy fordítva).
ez a fejléc gyakran harmóniában él a további blogfejlécekkel (a webhelyem valójában egy másik fejléc is van alatta), mint a teljes fotó fejlécek és az üdvözlő szőnyegek.
fotó fejlécek
a fotó fejléc stílusa nagyon szemet gyönyörködtető és igazán felhívja Önt. Ha fotófejet szeretne a blogjában, gondoljon arra, hogy mi lesz a téma. Ez egy személy fotója lesz? Mint te, vagy Ön és családja, vagy az ideális ügyfél valamilyen képviselete? Vagy lesz egy fotó felvázoló valamiféle táj, minta, rajzfilm / ikonok, vagy akár egy videót?
nézze meg ezt a példát AlexTooby.com. Alex használ egy fotót magáról, valamint egy kicsit az üdvözlő szőnyeg ötlet egy erős call-to-action, hogy iratkozzon fel neki természetesen.
a fotó működik, mind az újonnan érkezők, mind a visszatérő látogatók számára. Miért? Mert néhány finom vizuális elemet használ (ezekről később), amelyek megerősítik ennek a fejlécnek az erejét. Ő tartja a telefont, az Instagram felület kigúnyolta rajta, és ő felé néz a szöveget akar olvasni. A szemed természetesen az arcához húzódik, majd át a szavakhoz, majd le a fényes rózsaszín gombra kattintva. Ez kevésbé lenne hatékony, ha a képernyő bal oldalára nézne.
Pro-Tip: Ha valaki “befelé” néz a másolat vagy a gomb felé, az egy ninja tervezési trükk, amelyet használhat, is.
a fotó fejlécek beállíthatják a hangulatot, és segíthetik az olvasókat, hogy cselekedjenek. Mivel a fotó fejlécek nagyok, blokkolják az egyéb zavaró tényezőket az oldalon, és segítenek az olvasóknak arra összpontosítani, hogy pontosan mit akarnak csinálni (például Alex “ingyenes tanfolyam indítása” gombja).
üdvözlő szőnyeg fejlécek
a tipikus “üdvözlő szőnyeg”, amelyet az interneten láthat, egy teljes képernyős átvétel, és vannak olyan eszközök, amelyek segítenek ebben.
vagy ha nem akarja átvenni az egész oldalt, beállíthat egy részt is, amely úgy viselkedik, mint egy üdvözlő szőnyeg vagy egy regisztrációs űrlap valamilyen speciális freebie-hez, amelyet kínál. Nem biztos benne, hogy nézne ki? Nézze meg az alábbi képet a weboldalamról. Ingyenes e-tanfolyamot kínálok, amelyet először minden látogatónak látnia kell, hogy az e-mail listámat a megfelelő közönséggel készíthessem a jövőbeli e-mailekhez és promóciókhoz. A blogbejegyzéseim ez alatt jelennek meg, így a látogatók csak lefelé görgethetnek a legújabb bejegyzéseim megtekintéséhez.
most, hogy látta a három különböző stílust, itt az ideje, hogy beszéljünk egy blog fejléc létrehozásáról a webhelyéhez.
Hogyan készítsünk egy blog fejlécet, amely márkásnak tűnik
tudom, hogy a “márkás” kifejezés hivatalosnak és félelmetesnek hangzik, de soha ne félj! Valójában nagyon egyszerű, ha csak néhány kulcsfontosságú dologra koncentrál. Nevezetesen a színek (gyakran megtalálhatók a logóban) és a betűtípusok.
Pro tipp: Állítson össze egy márka útmutatót egy mappába, így nyomon követheti ezeket az információkat (a logóval együtt), hogy bármikor könnyen hozzáférhessen.
még akkor is, ha nem készít valamilyen divatos nyomtatott útmutatót, lejegyezheti ezt az információt egy cetlire, és megtarthatja a monitoron. Ez takarít meg rengeteg időt hosszú távon! Most bontsunk le néhány tervezési elemet.
válasszon színeket
lehet, hogy van néhány szín, amelyet a márkájához választott, de jó kiindulópont a logóval. A logó színe(I) kiválóan használható a webhelyén, a márkajelzésen és a blog fejlécén. A konzisztencia kulcsfontosságú — ha forró rózsaszínű, akkor talán a fotóidnak van egy rózsaszín eleme, vagy egy általános rózsaszín öntött, vagy talán fekete-fehéret használsz, és más módon húzod a színt.
éb. év YouBabyMeMummy.com gyönyörűen teszi ezt egy gyönyörű beillesztésével, színes változat a logója fölött, mint egy fekete-fehér fotó a lányával. Ez a fotó fejléc valóban merész és vonzó módon vonzza Önt a történetébe. Kattintson a webhelyére, ha további példákat szeretne látni a lenyűgözőre, teljes képernyős képek.
és ha még mindig próbálod kitalálni, hogy milyen színeket használj a márkádban, ez a cikk a színpszichológiáról nagyon felfedő!
válasszon egy betűtípust
a stílusos vagy márkás betűtípus közvetlenül a fejlécbe való beépítése valóban releváns és gyors módja lehet az üzenet átadásának. Mint ebben a nagyon egyedi és szemet gyönyörködtető kép Luci over on ByLucinda.co.uk.
ez a tengeri táj jól illeszkedik a márkájához, amely sok természetes elemet tartalmaz, és bemutatja elegáns, mégis pimasz hangulatát. Nincs Times New Roman ennek a hölgynek! Ő is egy okos módon mutatja meg a szociális média linkeket a jobb oldalon egy világos zöld téglalap alakú csík. Összekapcsolja a felső navigációt a nagy merész fotóval, és segít szándékosan lehúzni a szemét az oldalon.
megtalálható néhány igazán szórakoztató, ingyenes betűtípusok online helyeken, mint a Font Squirrel és Dafont. Ezek közül az ingyenes betűtípusok közül sok olyan programokba épül be, mint a Canva és a PicMonkey. Mivel azonban ingyenesek, nagyobb az esély arra, hogy valaki más (akár egy versenytárs is) használja a kívánt terméket.
ha rajongói betűtípusokat szeretne használni a webhely törzsében vagy címsoraiban (azaz nem egy képen), akkor szánjon egy kis időt a Google betűtípusok megismerésére. És útmutatást arról, hogy mely betűtípusokat használja a webdesignhoz, nézze meg ezt a három parancsolatot.
vizuális elemek beépítése
a márkás blog fejlécének összeállításakor el kell gondolkodnia azon, hogy milyen vizuális elemeket szeretne belefoglalni. Áttekintettük a példákat egy logó, egy fénykép és egy nagy törlés gomb használatával.
Jen-tól ToastMeetsJam.com csak ezt teszi. Nem csak egy asztalra esett, mint egy unalmas táblázatba — művészi szegélyeket és nagyszerű betűtípusokat használt az űrlapmezőkkel és egy kör alakú ” GO ” gombbal.
nézze meg, hogyan zökkenőmentesen beépíti az e-mail regisztrációját a tervezésbe? Nem csak magával ragadja a fotót, amelyen animált és barátságos, hanem egy tiszta, szürke hátteret is felhasznál, hogy a szövegre és az űrlapra összpontosítson. Nincsenek zavaró minták vagy képek, amelyek elcsábítanák Önt az űrlap kitöltésének és a továbblépésnek a legfontosabb feladatától. Nem is lehetne egyértelműbb, hogy mit kell tennie, hogy ingyenes, ötnapos tanfolyamot kapjon.
készülj fel a tervezésre
láttál néhány példát a nagyszerű blogfejlécekre, de mit csinálsz ezután? Ahhoz, hogy elinduljon a saját blog fejlécében, össze kell gyűjtenie néhány tervezési eszközt és képméreti információt.
tervezőeszközök
a saját egyéni blog fejlécének elkészítéséhez szükséges alapvető tervezőeszközöknek nem kell nehezen használhatónak vagy drágának lenniük. Próbálj ki néhányat, és nézd meg, mit szeretsz, majd menj rá! Ne aggódjon, ha először kínosnak érzik magukat — annál jobb lesz, minél többet használja őket. Íme néhány, amit elkezdhet felfedezni, a legegyszerűbbtől a legnehezebbig.
Canva. Ez talán a legegyszerűbb a piacon, és ingyenes! Van egy fizetett változat, a Canva for Work, ha mélyebbre akarsz merülni, de az ingyenes verzió nagyon szórakoztató és könnyen megtanulható. Ez egy web alapú tervező eszköz, így csak jelentkezzen be a weboldalra, és használja közvetlenül a böngészőben.
PicMonkey. Ha tényleg a fényképek szerkesztésére és játszik szűrők, akkor PicMonkey érdemes kipróbálni. Sok szórakoztató effektus van beépítve. A Canva-hoz hasonlóan a PicMonkey is webalapú, ingyenes verzióval, valamint fizetett verzióval rendelkezik, további funkciókkal.
Photoshop. Nem említheted a tervező szoftvert, és nem hozhatod fel a Photoshopot! Ez egy program erőműve, és sokkal többet tehet, mint egy blog fejlécét, de ez határozottan nagyszerű. Ez egy letöltött alkalmazás, amelyet havi előfizetéssel fizet (ingyenes próbaverzió is elérhető).
professzionális tervezőként egész karrierem során a Photoshopot használtam, és imádom. Olvasóim többsége úgy gondolja, hogy a Photoshop eleinte megfélemlítő, de teljesen megvalósítható, ha megtanul néhány alapot. Azt kell mondanom, hogy a Canva felfedezése óta gyakran használom a Photoshop és a Canva kombinációját a grafika elkészítéséhez. Canva csak annyira szórakoztató!
Pro tipp: ha az Adobe-tól veszi át a fotózási tervet, akkor a Photoshop + Lightroom-ot meglehetősen alacsony havi költséggel kaphatja meg. Nem túl kopott.
WordSwag. Ha szeretsz grafikákat készíteni a telefonodon, ez az Ön számára. Ez a mobil alkalmazás nem ingyenes, de csak néhány dollárt, és van egy iOS és Android verzió. Ráadásul egy ingyenes creative commons stock fotóoldalhoz van csatlakoztatva, így soha nem veszít a képválasztás a blog fejlécében. Ez mindenféle színek, textúrák és betűtípusok közül lehet választani. Csak annyit kell tennie, hogy elmenti a végső grafikát a “felhőbe”, vagy csatlakoztatja a számítógépéhez, hogy feltölthesse webhelyére.
képméretek
a blog fejlécének létrehozásakor figyelembe kell vennie a kép méretét a webhely platformjához viszonyítva. A WordPress téma mérete eltérhet a következő személy Squarespace oldalától vagy a GoDaddy GoCentral weboldal készítőjétől. Itt van néhány dolog, hogy tartsa szem előtt:
Pixel méretek. A méretek általában néhány számként vannak felsorolva széles néhány számmal magas pixel méretekben. Például: 1000-400 (vagy 1000 képpont x 400 képpont) azt jelenti, hogy a kép 1000 képpont széles, 400 képpont magas.
felbontás. Az internet számára a felbontás egyszerű-mindig 72! Nagyobb felbontások, például 300, 600 vagy annál több, nyomtatásra szolgálnak. A monitorok képernyőfelbontása mindig csak 72. Tehát a fenti példaméreteink felhasználásával a végső kép 1000 képpont széles, 400 képpont magas, 72 dpi (vagy ppi) lenne.
Fájltípus. A PNG fájlok soha nem veszítik el a minőségüket, függetlenül attól, hogy hányszor mentette őket, de MB (megabájt) méretben nagyobbak. A JPG (jpeg) fájlok különböző minőségi szintekre menthetők, így a fájlméret (MB) kicsi lehet, de minden alkalommal, amikor menti őket, elveszítik egy kicsit a minőséget. A.a kétszer mentett jpg fájl jól néz ki, de miután öt vagy 10 alkalommal mentette el, pixelesnek és szemcsésnek tűnik.
az optimalizálás azt jelenti, hogy kisebb fájlmérettel kompaktabbá kell menteni őket, de óvatosan, hogy ne veszítse el a minőségét. Ezt egyszerűen megteheti a TinyPNG nevű ingyenes weboldal használatával. Nézze meg az aranyos panda tömöríteni a képeket oly módon, hogy tartja őket keres mesés, de takarít meg megabájt!
hogyan készítsünk blog fejlécet a Canva-ban
-
iratkozzon fel egy fiókra.
-
használjon egyedi méreteket.
-
válasszon egy ingyenes fényképet.
-
Egyéni szöveg hozzáadása.
-
személyre szabhatja a tervét.
-
adjon hozzá egy logót.
-
töltse le a blog fejlécét.
most a szórakoztató rész! Vessünk bele egy egyedi blogfejléc elkészítésébe a semmiből a Canva segítségével. Olyan erőforrásokat használok, amelyek ingyenesen elérhetők, így ezt teljesen egyedül is megteheti velem együtt. Csak regisztrálj egy ingyenes fiókot, és készen állsz.
itt a blog fejlécet fogunk tenni:
1. Iratkozzon fel egy fiókra.
Ha regisztrál egy fiókot Canva, kapsz egy hozzon létre egy tervezési oldal, ahol akkor eldönthetjük, hogy kattintson az egyéni méretek használata a jobb felső sarokban.
egyéni méretek használata.
töltse ki a kívánt szélességet és magasságot a megjelenő mezőkben, majd válassza a “px” lehetőséget a pixelekhez. Ezután kattintson a tervezésre! gomb.
egy új projekt jelenik meg egy üres képernyővel és a Layouts fülrel a bal oldalon. Ne feledje, hogy a projekt neve nincs megadva, ezért a Megosztás gomb melletti tetején “1000px x 400px — Untitled Design” nevet ad.
válasszon ki egy szabad fotó.
kattintson az elemekre, és válasszon egy ingyenes fotót a megadott képek közül. Az összes szabad azt mondja, hogy” szabad ” az alsó sarokban. Feltöltheti saját fényképét is, de oktatóanyagunkhoz ezen ingyenes fotók egyikével fogunk dolgozni.
miután rákattintott a fotóra, azonnal megjelenik a projekt tervezési területén. Nevezzük át ezt a projektet, ha már itt tartunk. Kattintson a megosztás gomb melletti ideiglenes névre, majd írjon be egy újat. Ezt az “utazási naplót” hívom a színlelt utazási blogomhoz.
miután a kép a tervezési területen ül, a sarkokban lévő körök húzásával nagyobbá teheti. Folytassa, és méretezze át ezt a képet, hogy illeszkedjen a dokumentumhoz.
Add egyéni szöveget.
nagyszerű! Most kell egy kis szöveg. Kattintson a szöveg fülre a bal oldali oszlopban, és látni fogja, hogy néhány lehetőség közül választhat. Kattintson az előre megtervezett szövegelrendezésekre az ablak alsó részén vagy az egyes szövegsorokra a tetején. Menj előre, és kattints a címsor hozzáadása gombra. Ez a szöveg megjelenik a képen, alapértelmezés szerint fekete.
most egy kis móka! Válasszunk egy másik betűtípust. Böngésszen a betűtípus választás, és vedd semmit, hogy a sztrájk a képzelet. Én egy ecsetstílust választottam. Nehéz fekete színben látni a kép tetején, ezért változtassuk fehérre. Kattintson a színes doboz tetején, hogy ki Színválaszték, és válassza ki a fehér négyzet. A méretet is 104-re állítottam.
ezután húzza a fejlécet a kép helyére, hogy jobban középre kerüljön.
személyre design.
egy kicsit nehéz olvasni, és a szövegre összpontosítani ezen a forgalmas háttéren, ezért adjunk hozzá egy elmosódott hatást. Csak kattintson a háttérképre a kiválasztásához, majd válassza a szűrő lehetőséget, majd kattintson a Speciális beállítások gombra.
a szűrőablak kibővül, hogy megmutassa néhány más dolgot, amit tehet. Ön tudja játszani a telítettség, színes színezés, adjunk hozzá egy matrica, és így tovább.
kattintson a fekete pontra az elmosódás részben, majd húzza jobbra. A + 22-et választottam az elmosódási skálán.
adjon hozzá egy logót.
most kattintson ki az ablakon, hogy a design. Jól nézel ki! Most márkázzuk meg egy logó hozzáadásával. A logó feltöltéséhez kattintson a bal oldali feltöltések fülre, majd a nagy zöld saját képek feltöltése gombra.
válasszon egy átlátszó .a logó png verziója, így nem simul egyszínűre (kivéve, ha a logó stílusa fehér téglalapon belül van, vagy valami ilyesmi).
amikor betöltődik, látni fogja a zöld gomb alatti területen. Ott marad, hogy felhasználhassa a jövőbeli projektekben. Ügyes! Már feltöltöttem a hamis logómat, ezért csak lefelé görgettem, hogy megtaláljam.
kattintson a logóra, majd megjelenik a tervben.
most már átméretezheti, mozgathatja, és akár divatos is lehet, és játszhat az átlátszósággal, ha akarja.
töltse le a blog fejlécét.
Hurrá! Most a design készen áll,így csak a letöltés maradt. Kattintson a Letöltés gombra a képernyő tetején, és válassza ki a fájltípust. Általában az ajánlott PNG típust használom.
Miután letöltötte a tervét a számítógépére, megnyithatja és megcsodálhatja, majd betöltheti a blogjába.
és ennyi az egész! Remélhetőleg van egy jó fogást, hogyan lehet egy blog fejléc és annak fontosságát, hogy egy csillag kép. Most, akkor megy hozzá egy, hogy a blog. Boldog branding!