Ci sono tre tipi di intestazioni che di solito vedo esaurite sul vecchio interwebs: intestazioni di navigazione, intestazioni di foto complete e intestazioni di benvenuto. Se sei interessato a come creare un’intestazione del blog, dovrai conoscere i pro ei contro di ogni tipo prima di arrivare al nocciolo della creazione.

Intestazioni di navigazione

Le intestazioni di navigazione non sono basate su foto. Ad esempio, nella parte superiore del mio sito web, ho il mio logo, oltre a link a pagine importanti o moduli di iscrizione. Dai un’occhiata.

Le intestazioni di navigazione come queste sono l’ideale se sei un fan del minimalismo e vuoi convincere la gente a concentrarsi davvero sulla tua scrittura senza essere distratto dalle immagini.

È anche un ottimo percorso da percorrere se sei nuovo, non hai capito il tuo marchio o hai solo bisogno di essere installato e funzionante online.

Il layout non è impostato in pietra — le intestazioni di navigazione possono essere disposte in tutti i modi. Probabilmente hai visto alcuni in cui il logo si trova al centro sopra i collegamenti di testo, o potrebbe semplicemente avere il logo senza collegamenti (o viceversa).

Questa intestazione vive spesso in armonia con intestazioni di blog aggiuntive (il mio sito ha anche un’altra intestazione sotto di essa), come intestazioni di foto complete e tappetini di benvenuto.

Intestazioni foto

Lo stile di intestazione foto è molto accattivante e ti attira davvero. Se vuoi un’intestazione di foto sul tuo blog, pensa a quale sarà il soggetto. Sarà una foto di una persona? Come voi, o voi e la vostra famiglia, o qualche rappresentazione del vostro cliente ideale? O sarà una foto con una sorta di paesaggio, modello, cartone animato/icone o anche un video?

Controlla questo esempio da AlexTooby.com. Alex usa una foto di se stessa più un po ‘ dell’idea del tappetino di benvenuto con un forte invito all’azione per iscriversi al suo corso.

La foto funziona, sia per i nuovi arrivati che per i visitatori di ritorno. Perché? Perché usa un paio di elementi visivi sottili (ne parleremo più avanti) che servono a rafforzare la forza di questa intestazione. Lei sta tenendo il suo telefono fuori, con l ” interfaccia Instagram deriso su di esso, e lei sta guardando verso il testo che vuole che tu legga. Il tuo occhio è naturalmente attratto dal suo viso, poi verso le parole, poi verso il basso per il pulsante rosa brillante per fare clic. Questo sarebbe meno efficace se lei stava guardando fuori al lato sinistro dello schermo.

Pro-Tip: Avere qualcuno rivolto “in” verso la copia o il pulsante è un trucco di design ninja che puoi usare.

Le intestazioni delle foto possono creare uno stato d’animo e aiutare i tuoi lettori ad agire. Poiché le intestazioni delle foto sono grandi, bloccano altre distrazioni sulla pagina e aiutano a concentrare i lettori su esattamente ciò che vuoi che facciano (come il pulsante “Inizia il corso gratuito” di Alex).

Intestazioni del tappetino di benvenuto

Il tipico “tappetino di benvenuto” che potresti vedere su Internet è un’acquisizione a schermo intero e ci sono strumenti che ti aiutano a farlo.

Oppure, se non vuoi prendere in consegna l’intera pagina, puoi anche impostare una porzione per agire come un tappetino di benvenuto o un modulo di iscrizione per un omaggio speciale che stai offrendo. Non sei sicuro di come sarebbe? Controlla l’immagine qui sotto dal mio sito web. Sto offrendo un e-corso gratuito che voglio che tutti i visitatori di vedere prima in modo da poter costruire la mia lista e-mail con il pubblico giusto per le email future e promozioni. Le mie voci di blog appaiono sotto questo modo i visitatori possono semplicemente scorrere verso il basso per vedere i miei ultimi post.

Ora che hai visto i tre stili diversi, è il momento di parlare di creare un blog header per il tuo sito web.

Come creare un’intestazione di blog che sembra marchiata

So che il termine “branded” suona ufficiale e intimidatorio, ma non temere mai! In realtà è abbastanza facile se ti concentri su un paio di cose chiave. Vale a dire, i colori (spesso si trovano nel tuo logo) e i caratteri.

Pro punta: Metti insieme una guida al marchio in una cartella in modo da poter tenere traccia di queste informazioni (insieme al tuo logo) per un facile accesso in qualsiasi momento.

Anche se non si crea una guida stampata di fantasia, è possibile annotare queste informazioni su una nota adesiva e tenerla sul monitor. Vi farà risparmiare un sacco di tempo nel lungo periodo! Ora, analizziamo alcuni elementi di design.

Scegli i tuoi colori

Potresti avere alcuni colori che hai scelto di utilizzare per il tuo marchio, ma un buon punto di partenza è con il tuo logo. Il colore del logo(s) sono un grande da usare attraverso il tuo sito web, branding e intestazione del blog. La coerenza è la chiave – se si dispone di un rosa caldo, allora forse le tue foto hanno un elemento di rosa a loro o un cast rosa generale, o forse si utilizza in bianco e nero e tirare a colori in altri modi.

Aby di YouBabyMeMummy.com lo fa splendidamente inserendo una splendida versione a colori sul suo logo come sovrapposizione su una foto in bianco e nero di se stessa con sua figlia. Questa foto intestazione davvero si tira nella sua storia in modo audace e coinvolgente. Clicca intorno al suo sito se volete vedere altri esempi di stordimento, immagini a schermo intero.

E se stai ancora cercando di capire quali colori usare nel tuo marchio, questo articolo sulla psicologia del colore è molto rivelatore!

Seleziona un font

Incorporare un font elegante o di marca nella tua intestazione può essere un modo davvero rilevante e veloce per far passare il tuo messaggio. Come in questa immagine davvero unica e accattivante da Luci over on ByLucinda.co.uk.

Questo paesaggio marino si adatta perfettamente al suo marchio, che incorpora molti elementi naturali e mette in mostra la sua atmosfera elegante ma impertinente. Nessun Times New Roman per questa signora! Ha anche un modo intelligente di mostrare i suoi collegamenti social media sul lato destro in una striscia rettangolare verde chiaro. Si collega la navigazione in alto con la grande foto in grassetto e aiuta a tirare l’occhio verso il basso la pagina in modo intenzionale.

Puoi trovare alcuni font davvero divertenti e gratuiti online da luoghi come Font Squirrel e Dafont. Molti di questi font gratuiti sono costruiti a destra in programmi come Canva e PicMonkey. Tuttavia, dal momento che sono liberi, c’è una maggiore probabilità che qualcun altro (un concorrente anche) potrebbe utilizzare quello che si desidera.

Se si desidera utilizzare font più elaborati nel corpo o titoli del tuo sito web (cioè, non in un’immagine), allora si dovrebbe prendere un po ‘ di tempo per conoscere Google Fonts. E per una guida su quali font utilizzare per il web design, dai un’occhiata a questi tre comandamenti.

Incorpora elementi visivi

Mentre componi l’intestazione del tuo blog di marca, dovresti pensare a quali elementi visivi vuoi includere. Abbiamo esaminato esempi utilizzando un logo, una foto e un grande pulsante chiaro.

ToastMeetsJam.com fa proprio questo. Non si è limitata a cadere in un tavolo come avresti fatto in un noioso foglio di calcolo: ha usato caratteri artistici e fantastici insieme ai suoi campi modulo e un pulsante circolare “VAI”.

Guarda come incorpora perfettamente la sua iscrizione via email nel design? Non solo ti sta coinvolgendo con la foto di se stessa che sembra animata e amichevole, ma sta anche sfruttando uno sfondo pulito e grigio per tenerti concentrato sul testo e sulla forma. Nessun modello o immagine che distragga per attirarti lontano dal compito chiave di compilare quel modulo e andare avanti. Non potrebbe essere più chiaro cosa devi fare per ottenere il suo corso gratuito di cinque giorni.

Preparati a progettare

Hai visto alcuni esempi di grandi intestazioni di blog, ma cosa fai dopo? Per andare avanti sulla tua intestazione del blog, dovrai raccogliere alcuni strumenti di progettazione e informazioni sulle dimensioni dell’immagine.

Strumenti di progettazione

Gli strumenti di progettazione essenziali per creare l’intestazione del tuo blog personalizzato non devono essere difficili da usare o costosi. Provare un paio di fuori e vedere che cosa hai dimestichezza con, poi andare per esso! Non preoccupatevi se si sentono a disagio in un primo momento — si otterrà meglio più li si utilizza. Qui ci sono alcuni si può iniziare ad esplorare, in ordine dal più facile al più difficile.

Canva. Questo è probabilmente il più facile sul mercato, ed è gratis! C’è una versione a pagamento chiamata Canva for Work se vuoi immergerti più a fondo, ma la versione gratuita è davvero divertente e facile da imparare. È uno strumento di progettazione basato sul Web, quindi accedi al sito Web e usalo direttamente nel tuo browser.

PicMonkey. Se sei davvero interessato a modificare le foto e giocare con i filtri, allora vale la pena provare PicMonkey. Ci sono molti effetti divertenti costruiti in. Come Canva, PicMonkey è web-based e ha una versione gratuita più uno a pagamento con funzionalità aggiuntive.

Photoshop. Non si può parlare di software di progettazione e non far apparire Photoshop! È una centrale elettrica di un programma e può fare molto di più che creare un’intestazione del blog, ma è sicuramente fantastico per questo. È un’applicazione scaricata e pagherai con un abbonamento mensile (è disponibile anche una prova gratuita).

Come designer professionista, ho usato Photoshop per tutta la mia carriera e lo adoro. La maggior parte dei miei lettori pensano Photoshop è intimidatorio in un primo momento, ma è completamente fattibile una volta che si impara alcune nozioni di base. Devo dire, però, da quando ho scoperto Canva, uso spesso una combinazione di Photoshop e Canva per creare la mia grafica. Canva è così divertente!

Suggerimento pro: se si prende in mano il piano di fotografia da Adobe, è possibile ottenere Photoshop + Lightroom per un costo mensile piuttosto basso. Non troppo malandato.

WordSwag. Se ti piace fare grafica sul telefono, questo è per voi. Questa applicazione mobile non è gratuito, ma è solo pochi dollari e ha una versione iOS e Android. Inoltre, è collegato a un sito gratuito di foto creative commons, quindi non sei mai in perdita per le scelte di immagine nell’intestazione del tuo blog. Ha tutti i tipi di colori, texture e font tra cui scegliere. Tutto quello che devi fare è salvare il grafico finale su “the cloud” o collegarlo al computer in modo da poterlo caricare sul tuo sito.

Dimensioni immagine

Quando crei l’intestazione del blog, devi considerare le dimensioni dell’immagine in relazione alla piattaforma del tuo sito. La dimensione per il tuo tema WordPress potrebbe essere diversa dalla pagina Squarespace della persona successiva o da GoDaddy GoCentral Website Builder. Ecco alcune cose da tenere a mente:

Dimensioni in pixel. Le dimensioni sono solitamente elencate come un numero largo da un numero alto e in dimensioni in pixel. Ad esempio: 1000×400 (o 1000px x 400px) significa che l’immagine è larga 1000 pixel per 400 pixel di altezza.

Risoluzione. Per Internet, la tua risoluzione è facile-è sempre 72! Risoluzioni più elevate come 300, 600 o più, sono per la stampa. Risoluzioni dello schermo per i monitor sono sempre solo 72. Quindi, usando le nostre dimensioni di esempio dall’alto, l’immagine finale sarebbe 1000px di larghezza per 400px di altezza, 72 dpi (o ppi).

Tipo di file. I file PNG non perdono mai la qualità, non importa quante volte li salvi, ma sono più grandi in MB (megabyte). I file JPG (jpeg) possono essere salvati a diversi livelli di qualità in modo da poter mantenere le dimensioni del file (MB) piccole, ma ogni volta che li salvi, perdono un po ‘ di qualità. A.il file jpg che viene salvato due volte sembra buono, ma dopo averlo salvato cinque o 10 volte, inizierà a sembrare pixelato e granuloso.

Ottimizzare significa salvarli per essere più compatti con dimensioni del file più piccole, ma con attenzione in modo da non perdere la qualità. È possibile farlo facilmente utilizzando un sito web gratuito chiamato TinyPNG. Guarda il panda carino comprimere le immagini in un modo che li mantiene alla ricerca favoloso, ma consente di risparmiare megabyte!

Come creare un’intestazione del blog in Canva

1. Registrati per un account.

2. Utilizzare dimensioni personalizzate.

3. Seleziona una foto gratuita.

4. Aggiungi testo personalizzato.

5. Personalizza il tuo design.

6. Aggiungi un logo.

7. Scarica l’intestazione del tuo blog.

Ora per la parte divertente! Scaviamo nel creare un’intestazione del blog personalizzata da zero usando Canva. Sto usando le risorse che sono disponibili gratuitamente, in modo da poter totalmente fare questo da soli insieme a me. Basta registrarsi per un account gratuito e si è pronti ad andare.

Ecco l’intestazione del blog che faremo:

1. Registrati per un account.

Una volta che ti iscrivi per un account su Canva, si arriva a un Creare una pagina di progettazione in cui si desidera fare clic su Usa dimensioni personalizzate nell’angolo in alto a destra.

Usa dimensioni personalizzate.

Inserisci la larghezza e l’altezza desiderate nei campi visualizzati e seleziona” px ” per i pixel. Dopo di che, fare clic sul disegno! pulsante.

Un nuovo progetto appare con una schermata vuota e la scheda Layout selezionata a sinistra. Si noti che il nome del progetto non è stato specificato, quindi si chiama “1000px x 400px — Untitled Design” in alto accanto al pulsante Condividi.

Seleziona una foto gratuita.

Clicca su Elementi e scegli una foto gratuita tra quelle fornite. Tutti quelli liberi dicono “LIBERO” nell’angolo in basso. Puoi anche caricare la tua foto, ma per il nostro tutorial lavoreremo con una di queste foto gratuite.

Una volta che si fa clic sulla foto, appare immediatamente nella zona di progettazione del progetto. Andiamo avanti e rinominare questo progetto mentre ci siamo. Fai clic sul nome temporaneo accanto al pulsante Condividi e digitane uno nuovo. Lo chiamo “diario di viaggio” per il mio finto blog di viaggio.

Dopo che l’immagine è stata posizionata nell’area di progettazione, è possibile ingrandirla trascinando i cerchi negli angoli. Vai avanti e ridimensiona questa immagine per adattarla al documento.

Aggiungi testo personalizzato.

Grande! Ora ci serve un messaggio. Fare clic sulla scheda Testo nella colonna di sinistra, e vedrete alcune opzioni tra cui scegliere. È possibile fare clic su disposizioni di testo pre-progettate nella sezione inferiore della finestra o su singole righe di testo in alto. Vai avanti e fare clic su Aggiungi voce. Questo testo appare nell’immagine, predefinito in nero.

Ora per un po ‘ di divertimento! Scegliamo un font diverso. Sfoglia le scelte di carattere e scegliere tutto ciò che colpisce la vostra fantasia. Ne ho scelto uno in stile pennello. È difficile vedere in nero sopra quell’immagine, quindi cambiamola in bianco. Fare clic sulla casella colorata in alto per visualizzare le scelte di colore, e scegliere il quadrato bianco. Ho anche regolato la dimensione su 104.

Quindi, vai avanti e trascina quella voce in posizione sull’immagine in modo che sia più centrata.

Personalizza il tuo design.

È un po ‘ difficile da leggere e concentrarsi sul testo su questo sfondo occupato, quindi aggiungiamo un effetto di sfocatura. Basta fare clic sulla foto di sfondo per selezionarla, quindi scegliere Filtro e fare clic su Opzioni avanzate.

La finestra del filtro si espande per mostrarti alcune altre cose che puoi fare. Si può giocare con la saturazione, colorazione del colore, aggiungere una vignetta, e altro ancora.

Fare clic sul punto nero nella sezione Sfocatura e trascinarlo verso destra. Ho scelto +22 sulla scala di sfocatura.

Aggiungi un logo.

Ora clicca fuori da quella finestra per vedere il tuo disegno. Stai bene! Ora cerchiamo di marca con l’aggiunta di un logo. Puoi caricare il tuo logo facendo clic sulla scheda Uploads a sinistra, quindi sul grande pulsante verde Carica le tue immagini.

Scegliere un trasparente .versione png del tuo logo in modo che non sia appiattito su un colore solido (a meno che il tuo stile logo non sia all’interno di un rettangolo bianco o qualcosa del genere).

Quando viene caricato, lo vedrai nell’area sotto il pulsante verde. Rimane lì per l’utilizzo su progetti futuri. A portata di mano! Ho già caricato il mio logo falso, quindi ho appena fatto scorrere verso il basso per trovarlo.

Fare clic sul logo, e poi apparirà nel vostro disegno.

Ora puoi ridimensionarlo, spostarlo e persino ottenere fantasia e giocare con la trasparenza se vuoi.

Scarica l’intestazione del tuo blog.

Evviva! Ora il tuo design è pronto, quindi tutto ciò che rimane è scaricarlo. Fai clic sul pulsante Download nella parte superiore dello schermo e scegli il tipo di file. Di solito vado con il tipo PNG raccomandato.

Una volta scaricato il tuo progetto sul tuo computer, puoi aprirlo e ammirarlo, quindi caricarlo sul tuo blog.

E questo è tutto quello che c’è da fare! Speriamo che tu abbia una buona presa su come creare un’intestazione del blog e l’importanza di un’immagine stellare. Ora, si può andare circa l’aggiunta di uno al tuo blog. Felice branding!