Book Blogging 101 #5 Creare un header step by step + programmi da usare

Rubrica creata dal blog la cui idea di base è dare consigli, suggerimenti, idee per i blogger (nuovi e non) su tutto ciò che dalla grafica all'organizzazione dei post alle recensioni!


Buongiorno, lettori!Oggi vi propongo un nuovo appuntamento con la rubrica Book Blogging 101, e in questo post vi parlerò finalmente di grafica e nello specifico di come creare un header passo dopo passo!
Visto che vi parlo sia in generale dei programmi da usare sia di come costruire un header, vi anticipo che il post sarà abbastanza lungo!Avrei voluto ridurre qualcosa ed eliminare qualche passaggio, ma sapendo che molti di voi lettori non sono familiari con photoshop e simili ho deciso di includere ogni cosa!
Prima di iniziare vi riassumo velocemente la lista di post che comprendono la "serie" per cosi dire dedicata alla grafica, mano a mano che pubblicherò i post inserirò i link qui sotto!I titoli in grassetto sono i temi che tratto nel post di oggi ;)

SCALETTA PER SERIE DI POST SULLA GRAFICA

1.Trovare l'ispirazione per una nuova grafica
2.Programmi/siti da usare per la grafica e per il blog
3.Introduzione a photoshop e/o Gimp
4.Creare un header di base
5.Creare un banner di base
6.Creare un rating personalizzato
7. Dove e come trovare icone per i social network
8.Inserire e personalizzare un menu
9.Personalizzare i gadget
10.Piccoli trucchi e consigli per migliorare l'aspetto del blog


PROGRAMMI DA USARE

Per quanto riguarda i programmi da usare per la grafica, personalmente utilizzo da anni Photoshop e mi ci sono trovata sempre bene. Premetto che non sono di certo un'esperta del programma, ma riesco a usare le funzioni di base e per creare una grafica quelle bastano e avanzano.
Una buonissima, e gratuita, alternativa a photoshop è Gimp, che ho utilizzato qualche volta e che ho trovato molto semplice e intuitivo!Non so dirvi le differenze esatte tra Photoshop e Gimp, ma penso che per creare una grafica anche quest'ultimo sia più che sufficiente!
Infine, un'altra alternativa è il famosissimo PicMonkey!Qualche volta mi sono trovata a usare anche questo ed è sicuramente molto semplice da utilizzare, in più le opzioni, gli effetti e i font sono tantissimi!Non è di certo uguale a Photoshop o Gimp ma ripeto, se non volete scaricare un programma, PickMonkey è una valida alternativa!

CREARE UN HEADER


Per il tutorial sulla creazione dell'header ho scelto come esempio la grafica che ho usato in estate (questa al lato), visto che vi avevo parlato già della sua ideazione nel post precedente!
Come ho detto il tutorial è molto molto lungo visto che ho incluso praticamente ogni passaggio!Altra cosa, il tutorial è fatto con photoshop, ma chi usa Gimp non dovrebbe avere problemi visto che si tratta di funzioni base che hanno entrambi i programmi ;)

Partiamo con le dimensioni. Un header dovrebbe essere o lungo quanto la colonna centrale del post (in caso abbiate un blog con le due colonne laterali) o quanto l'intero blog. Il mio è 1200x300 da un bel po' di tempo ormai e penso continuerò a lasciare queste misure anche per le grafiche future!

Passando alla creazione vera e propria. Una volta entrati nella schermata home del vostro programma, dovete aprire un nuovo progetto andando su file-nuovo, e inserendo nella schermata che vi appare le dimensioni del vostro logo:



E adesso vi apparirà il logo vuoto, nel colore predefinito (il mio è bianco). Andiamo adesso a inserire un testo (il titolo del blog) cliccando sullo strumento testo nella barra laterale (1). Una volta cliccato su testo vi apparirà nella barra in alto una serie di opzioni (2), dove potete cambiare il font (io ho inserito Levi Brush) e le dimensioni. Fatto questo andiamo a scegliere il colore che vogliamo dare al testo nell'estremità in basso della barra laterale degli strumenti (3), e scriviamo il testo posizionandolo come vogliamo (4).



Adesso passiamo sulla destra della schermata, dove c'è la barra dedicata ai livelli. Nel mio logo al momento ci sono tre livelli in tutto: uno dello sfondo bianco, uno del testo Sweety e uno di Readers. Per andare a modificare uno di questi livelli, basta fare doppio click su di esso (in questo caso io cliccato sul testo Sweety).


E vi apparirà la schermata di seguito. Ora, nella parte sinistra della schermata vi sono tutti gli effetti che possiamo applicare al livello (1). Io ho deciso di applicare l'ombra esterna, il bagliore esterno, e di sovrapporre al testo un pattern, spuntando le varie opzioni. Per l'ombra esterna e il bagliore vi sono delle misure già predefinite che io ho deciso di lasciare cosi come sono. Il pattern invece va cambiato, scegliendo tra i vari pattern installati quello che vogliamo applicare al testo (3).
Piccola parentesi sui pattern: per crearne uno, aprite una qualsiasi immagine, andate su modifica-definisci pattern-ok, e vi ritroverete l'immagine come pattern da applicare ovunque ne avrete bisogno,
Io ho scelto il pattern floreale (4). Per rendere effettivo il tutto basterà cliccare su ok e ritornerete alla schermata iniziale. In caso avete altro testo separato (io ho ancora "Readers"),cliccate sul livello e operate lo stesso procedimento.



E ora dovreste avere qualcosa del genere:
Adesso mancano solo gli uccellini laterali. Innanzitutto, ho scaricato il pennello da internet (non ricordo il nome esatto del sito, ma potete trovare qualsiasi pennello gratuitamente cercando su google), e ho estratto il file .zip, ritrovandomi con un file .abr. Per trasformarlo in "pennello", basta cliccare sullo strumento "pennello" nella barra laterale, andare nella barra che si aprirà nel bordo superiore della schermata (1), cliccare sulla piccola freccia rivolta in basso accanto alla forma del pennello predefinito (io avevo già impostato il pennello degli uccellini) e cliccare ancora sulla piccola freccetta rivolta verso destra che comparirà accanto a "dimensione pennello". Da qui cliccate "carica pennelli" e aprite il file .abr scaricato (2). Da qui in poi il pennello comparirà automaticamente tra le opzioni (3).



E adesso possiamo inserire gli uccellini nel logo. Cliccando su CTRL e T potrete ridimensionarli o spostarli.



Per inserire anche qui il pattern, vi basterà ripetere lo stesso procedimento di prima con il testo. E questo dovrebbe essere il risultato finale!


E questo è invece lo stesso logo con un pattern diverso!


E abbiamo finito!Ovviamente questo è uno degli infiniti modi per creare un logo con solo testo, ma adorando il tipo di header che si riesce a creare con i pattern e i pennelli, ho deciso di mostrarvi questo per oggi!Se vi piace l'idea, la settimana prossima magari posso creare un tutorial per un logo con immagini!

Per questo appuntamento è tutto, spero che il tutorial vi sia stato d'aiuto, fatemi sapere cosa ne pensate e se avete idee per altri post! =)







20 commenti

  1. Grazie mille per questo post, mi è stato utilissimo visto che sto aprendo un blog sui libri ma che non sono molto esperta in grafica ^^ Complimenti anche per il blog, è fantastico!

    RispondiElimina
    Risposte
    1. Ciao Pamy, ma grazie mille a te!Passo subito sul tuo blog =)

      Elimina
  2. Ooo dio ti devono fare santaaaa finalmente hai scopeto l arcano io sono negata x queste cose ma l hai spiegato veramente in modo molto pratico grazieeee adesso faccio un po di prove habab

    RispondiElimina
    Risposte
    1. Ahah ma grazie martina!Poi fammi sapere come va =)

      Elimina
  3. Grazie per queste spiegazioni, e soprattutto per i programmi alternativi a photoshop. Spero di riuscire a mettere in pratica i tuoi consigli ^^

    RispondiElimina
  4. Grazie per le tue dritte!
    Appena ho un po' di tempo mi eserciterò, seguendo i tuoi consigli :)

    RispondiElimina
  5. che brava che sei a spiegare queste cose

    RispondiElimina
  6. Questa rubrica è geniale!!! *___*
    Mi sa proprio che ne farò ampio uso!!! :) Grazie!!!!

    RispondiElimina
  7. Questo tutorial è utilissimo!!! Grazie Juliette :)

    RispondiElimina
  8. uhhhh forte!!!!!!!!*____________*grazie per quesot post dolcissima!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!Un bacione!

    RispondiElimina
  9. Tutorial molto utile! Comunque devi assolutamente postare il tutorial per il logo con le immagini u.ù

    RispondiElimina
  10. Spiegato così sembra davvero semplicissimo!! Io con Gimp finisco sempre col farci a cazzotti. ;_;

    RispondiElimina
  11. Tutorial spiegato benissimo...non vedo l'ora do leggere quello relativo alla creazione di un rating personalizzato! :)

    RispondiElimina
  12. Ma Photoshop, quello che usi tu, è a pagamento?

    RispondiElimina

Grazie mille per aver commentato il mio post!Apprezzo tantissimo i vostri commenti e cercherò di rispondervi al più presto =)