Rebelia.it

[Gimp] Creare un header

Notizia del 14/11/2006

Anche se non abbiamo grandi conoscenze grafiche o particolari velleità artistiche, con pochi passaggi potremo comunque creare un header per il nostro sito; vediamo come procedere usando Gimp, alcune foto scaricate da sxc.hu e un font tra i tanti offerti da dafont.com oltre a dei pennelli per Photoshop scaricati gratuitamente da un sito trovato in questa raccolta e averli convertiti secondo questo tutorial per da usarli al momento opportuno.

Scelgo tre foto di soggetto informatico e le salvo in locale:

Lancio Gimp e apro le tre immagini: File -> Apri -> [scelgo le immagini] -> Apri

Con lo strumento Strumenti -> Strumenti di colore -> Tonalità/saturazione le desaturo abbassando quanto più possibile il valore di saturazione:

Una volta terminata la desaturazione di tutte e tre, procedo a ridurne la dimensione: Immagine -> Scala immagine portandole a un'altezza di 350 pixel e badando che il simbolo evidenziato riporti una catena intera, in questo modo la larghezza si ridimensionerà in proporzione:

Creo un nuovo file: File -> Nuovo e nella finestra ho impostato larghezza [750 pixel] e altezza [300 pixel]

Torno sulle immagini e una alla volta le copio nel nuovo file; per farlo, nell'immagine che voglio copiare scelgo Modifica -> Copia

Mi sposto sulla nuova immagine e scelgo Modifica -> Incolla dentro; al termine avrò tre nuovi livelli ognuno dei quali contenenti una delle foto:

Sposto le immagini aiutandomi con lo strumento sposta livelli e selezioni (il terzo da sinistra a forma di croce nella seconda riga di strumenti) in modo da coprire tutta la superficie dell'immagine (la tastiera a sinistra, i circuiti al centro e i cavi elettrici a destra).

Mi accorgo che una delle foto non è girata come serve a me, perciò dopo aver attivato il livello che la contiene cliccandoci sopra nel pannello di gestione dei livelli, procedo a girarla con Livello -> Trasforma -> Rifletti orizzontalmente:

Sfumo i bordi della foto dei circuiti e della foto dei cavi nel bordo verso sinistra, quello che si va a sovrapporre rispettivamente alla foto della tastiera e a quella dei circuiti usando la gomma e dopo aver scelto un pennello non troppo preciso impostandolo in modo che rimuova l'immagine non troppo nettamente così da ottenere una sfumatura più naturale:

Completata l'operazione, creo un nuovo livello e imposto un colore blu non troppo vivo:

Quindi con lo strumento vasetto riempio il livello di blu e ne imposto la trasparenza:

Creo un nuovo livello e - aiutandomi con alcuni dei pennelli preparati in precedenza - simulo dei graffi:

Con lo strumento testo inserisco il nome del sito, usando un font che si adatta all'effetto graffiato:

Duplico il livello del testo, sfalso i due livelli e abbasso l'opacità di quello più basso:

Ridimensiono l'header per adeguarlo alle esigenze del layout dove lo utilizzerò; per rendere indipendenti i valori di altezza e larghezza è necessario "aprire" la catena cliccandoci su; in basso l'anteprima del file ritagliato:

A questo punto è sufficiente salvare il file con estensione jpg oppure gif; è sempre opportuno tenere anche il file salvato nel formato proprietario del programma che sto usando (nel caso di Gimp è xcf) per poter eventualmente apportare delle modifiche in futuro (il formato proprietario conserva i livelli, mentre i formati per il web li appiattiscono rendendo impossibili le modifiche successive).

Il risultato finale (ridotto):

I campi con * sono obbligatori.