Immagine tutorial creazione logo

Tutorial: creare un logo

Print Friendly, PDF & Email

Livello di competenza: medio/basso.   Ultimo aggiornamento: 02/05/2016 22:19

In questo breve tutorial vedremo quali sono le operazioni fondamentali per creare un logo da utilizzare in un sito web. Useremo operazioni eseguibili con qualunque programma di grafica o fotoritocco come Gimp, che noi consigliamo, anche perché è Open Source, cioè gratuito.
Per dare un tocco di originalità all'interno di una grafica web complessivamente regolare e geometrica, abbiamo deciso di usare come logo del nostro sito la firma stessa della pittrice a cui è dedicato il sito in questione. Di solito, infatti rinveniamo, fra i vari siti, soluzioni molto più elaborate, ma di impatto minore.

Per ottenere un aspetto più originale abbiamo utilizzato delle fotografie in alta risoluzione della firma della pittrice, che erano state eseguite direttamente sulla tela. Abbiamo creato dell'immagine in questione un livello a sé stante.
Dopo aver selezionato l'intero corpo della scritta, ad esempio dicendo al nostro programma di grafica di selezionare tutto ciò che è di colore nero come la scritta, e aver eliminato dalla selezione tutte le parti inutili, abbiamo proceduto a invertire l'intera selezione. In questo modo resta selezionato lo sfondo. Siccome l'immagine era costituita da un unico livello, cancellando la porzione attualmente selezionata, resta visibile solo la scritta della firma, mentre tutto il resto dell'immagine risulta trasparente.
Si procede, quindi, a rifilare l'immagine, in modo che lo spazio intorno alla firma non sia eccessivo per nessun bordo. Successivamente, ridimensioniamo l'intera immagine ad una larghezza orizzonatale di circa 500 pixels, che è una dimensione più che abbondante rispetto allo spazio disponibile nella testata del nostro sito.
A questo punto si riduce la profondità colore portandola a soli due colori, uno per la scritta, in questo caso sceglieremo il bianco, e l'altro per lo sfondo trasparente. Siccome lo sfondo del nostro sito è scuro, il colore bianco andrà benissimo per il primo piano, ma ovviamente potete scegliere il colore che si adatta meglio alle vostre esigenze.
Ora è possibile salvare l'immagine costituita da un unico bit colore (= 2 colori), in formato PNG, e utilizzarla come logo nel nostro sito, inserendola all'interno di un tag <IMG>. Quest'immagine userà pochissima memoria e sarà di effetto, ma non rallenterà il caricamento della pagina web. Inoltre anche se possiede un solo colore per la trasparenza, produce ugualmente un piacevole effetto di contrasto.
Se si desidera che le dimensioni del logo si adattino automaticamente alla dimensione dello schermo, dovremo semplicemente ricorrere ai comandi CSS Bootstrap. Nell'immagine qui sotto vediamo il risultato finale nel sito in costruzione (in alto a sinistra).

Autore e Copyright: © 2016 operedigitali.com ® - realizzazione siti web ottimizzati, responsive ed economici

Articoli collegati: Loghi, Icone e Gadgets, Lavori di Grafica, Come ottimizzare le immagini per la pubblicazione Web

Print Friendly, PDF & Email