Attenzione: l'articolo è stato scritto da oltre 1 anno, le informazioni in esso contenute potrebbero essere datate e non più attuali.

Creare un pulsante per il web

sfondoo Creiamo una nuova immagine 200x200, anche se il nostro fine è quello di un pulsante di 50x50. In questo modo riusciremo a lavorare con maggiore semplicità. Rimpiccioliremo l'immagine solo più avanti.
Poniamo poi le guide al centro dell'immagine: <imm> / Guide / Centra guide... (questa funzione è disponibile se avete installato il pacchetto Gimp-Perl e non è comunque fondamentale per la realizzazione del tutorial).

cerchioo Aggiungiamo un nuovo livello trasparente e disegnamo la selezione di un cerchio Selezione: iniziamo a tracciare dal centro poi premiamo CTRL e MAIUSC per forzare la creazione di un cerchio.
Impostiamo come colore di primo piano un viola (255,0,255) e come colore di sfondo un viola più scuro (183,0,183).
Riempiamo la selezione con il gradiente Gradientedei colori scelti.

ombrao Selezioniamo il livello del cerchio e aggiungiamo un ombra in rilievo a tale livello (<imm> / Script-fu / Ombre / Ombre in rilievo...) con spostamento 0 e sfocatura 15.
Scalate il livello ombra in modo che occupi solo la parte inferiore dell'immagine. Il risultato dovrebbe essere quello mostrato sulla sinistra.

livelli

frecciao Creiamo un nuovo livello e disegnamo un freccia con lo strumento selezione bezierBezier o con un path. Trasformiamo il tracciato in selezione cliccandoci dentro. Riempiamola di colore bianco. Invertiamo la selezione (<imm> / selezione / invertita) e applichiamo un ombra in rilievo con spostamento 6 e sfocatura 10.

cerchioA questo punto il lavoro principale è finito. Salviamo il lavoro in formato xcf e conserviamolo. Tornerà sicuramente utile in seguito.
Potete scaricare il file fatto da me QUI.


Ora rifiniamo il bottone e lo prepariamo per il web compiendo le seguenti operazioni: duplichiamo il lavoro fatto in precedenza (<imm> / immagine / duplica) in questo modo l'immagine di base rimarrà inalterata e potremo in seguito riutilizzarla. Poi appiattiamo l'immagine (<imm> / Livelli / Appiattisci immagine). A questo punto scaliamo l'immagine e la portiamo a 50x50 (<imm> / immagine / scala immagine). Infine rendiamo l'immagine in scala di colore (<imm> / immagine / modalità / scala di colore); nel mio caso ho scelto 64 colori e nessun dithering. Salviamo poi come immagine png e inseriamola nelle nostre pagine web:

Bottone

Considerazioni

Prima ho posto molto l'attenzione sul fatto di conservare un'immagine xcf del lavoro svolto. Il motivo è semplice, quando dobbiamo modificare l'immagine avere tutti i livelli e altre informazioni a disposizione, attraverso l'uso del formato nativo di Gimp, è utilissimo. Ad esempio, se vogliamo creare nuovi pulsanti di colore diverso possiamo aprire l'immagine xcf, duplicare l'immagine (<imm> / immagine / duplica), annullare la selezione esistente se c'è (<imm> / selezione / nessuna), selezionare il livello del cerchio e cambiargli tonalità con <imm> / Colori / Tonalità - Saturazione... muovendo lo slider della tonalità.
Ora possiamo preparare l'immagine per il web, come fatto sopra, appiattendo l'immagine, scalandola, rendendola a scala di colore e poi salvandola:

Bottone

Bottone

Argomenti correlati

Il tuo voto: Nessuno Media: 3.7 (3 voti)

Commenti

ho 1 problema

ho 1 problema

Siamo in tanti ad avere

Siamo in tanti ad avere problemi, se riguarda il tutorial di questa pagina puoi descrivere cosa non ti è chiaro altrimenti confidati con qualcuno che ti è vicino :)