-
yoplaaa
.User deleted
Tutorial: Creare un pulsante WEB 2.0 con Gimp
Con questo tutorial intendo insegnarvi come creare un pulsante come questo:
Ovviamente questo interessa soprattutto i web designers, ma anche se non lo siete, sarà comunque divertente provare a farlo...
Vi consiglio di, inizialmente, eseguire esattamente ciò che vi mostro e con i colori che uso io, perchè sarà poi possibile modificare il colore del pulsante finale con due o tre click...
Bene, ora iniziamo:
Create una nuova immagine:
640x400 va benissimo, ci occuperemo dopo di ritagliare alla dimensione adatta.
Ora andate nel menu Immagine > Guide > Nuova guida in percentuale e create una guida orizzontale posizionata a 50%
Createne poi un'altra verticale a 50%
Otterrete questo:
Create un nuovo livello e chiamatelo "Base".
Selezionate lo strumento "selezione rettangolare" e impostate le opzioni così come segue:
tracciate un rettangolo di dimensioni qualsiasi partendo dal centro delle due guide. In seguito ridimensionate questo rettangolo a 200x50:
Riempite la selezione con questo colore: ffa800
Risultato:
Riducete ora la selezione di 1px (seleziona > riduci > 1px)
Impostate come colore di primo piano nero e come secondo piano: ffda92
Usate ora lo strumento gradiente e impostate le seguenti impostazioni:
Rimanendo sul livello "Base" tracciate il gradiente partendo dalla cima del rettangolo arancione fino al fondo del rettangolo, seguendo una linea verticale (aiutatevi premendo Ctrl)
Otterrete questo effetto:
Riselezionate lo strumento "selezione rettangolare" e con le seguenti impostazioni:
(notate che la modalità è impostata su "sottrae dalla selezione corrente") tracciate un rettangolo partendo da un punto qualsiasi sulla guida orizzontale (l'importante è che sia esterno al rettangolo arancione) e dirigendovi verso il basso, in modo da eliminare la parte inferiore della selezione.
Risultato:
Ora create un nuovo livello e chiamatelo "Effetto 3D"
Impostate come colore di primo piano bianco, selezionate lo strumento gradiente e riimpostate la modalità in "Normale"
come gradiente useremo "Da pp a trasparente".
Tracciate ora il gradiente partendo dal lato superiore del rettangolo e scendendo verticalmente (Ctrl) dino al lato inferiore.
Potete ora togliere la selezione.
Impostate l'opacità del livello a 85%
Cliccate col destro sul livello "Effetto 3D" e premete su alfa a selezione.
Poi: Selezione > riduci > 1px
Selezione > inverti
create un nuovo livello chiamandolo "Bordino sup." e tracciate lo stesso identico gradiente che avete appena creato in "Effetto 3D"
Ora, se dovesimo avere lo sfondo nero il risultato sarebbe questo:
non molto attraente, eh?
Per rimediare annullate la selezione, cliccate col destro sul livello "Effetto 3D" e selezionate "Alfa a selezione".
Invertite poi la selezione (Seleziona > inverti) e premete Delete (su certe tastiere Del).
Togliete la selezione (Seleziona > niente)
Dovreste notare un bordino lungo i lati esterni dell effetto 3D, come questo:
Duplicate questo livello (bordino sup.) e rinominatelo in "Bordino inf.".
Ora andate sul menu Livello > trasforma e selezionnate: rifletti verticalmente
Impostate poi la modalità del livello su Sovrapposto e l'opacità all'80%.
Ora creeremo l'ombraggiatura:
Tornate sul livello "Base" e selezionate il menu filtri > luce e ombra > proietta ombra e con le seguenti impostazioni create l'ombra:
Risultato:
Ora bisognerà creare il testo del pulsante:
Io userò il font "Comic Sans MS", grandezza 18px, ma se avete a disposizione un font secondo voi più appropriato, usate pure quello...
Abbiamo quasi finito...
Togliete la visibilità ai livelli sopra il testo, così:
Spostatevi ora sul livello Base e selezionate il menu livello > autoritaglia livello.
Selezionate lo strumento allinea.
cliccate sul rettangolo di base (state attenti a non cliccare sulla guida! (per controllare se avete fatto giusto dovrebbero apparire dei quadrattini agli angoli del rettangolo arancione...)
Spostatevi ora sul livello di testo e, mantenendo premuto Shift, cliccate SUL testo (e non nella zona trasparente del livello). Anche qui dovrebbero apparire dei quadrattini agli angoli del livello...
allineate ora "al centro dell'oggetto" e "alla mediana dell'oggetto"
Potete ora riimpostare la visibilità dei livelli.
creiamo come ultimo l'ombreggiatura del testo.
Quindi spostatevi sul livello di testo e selezionate il menu Filtri > Luce e ombra > proietta ombra
Impostazioni:
ora ritagliate l'immagine in modo da includere tutto il pulsante ( inclusa l'ombra)
togliete infine le guide (menu Immagine > Guide > Rimuovi tutte le guide)
ed ecco il vostro pulsante:
Ora, se non vi piace l'arancione e volete quindi cambiare il colore avete due possibilità:
1. rifare tutto dall'inizio con un colore diverso
2. Spostarvi sul livello Base e selezionare il menu Colori > Tonalità saturazione e giocherellare un po' con le impostazioni
E con questo abbiamo finito!!!!!!!
Spero che vi sia stato utile, o che almeno vi siate divertiti un po'.....
p.s. dato che questo è il mio primo tutorial, mi piacerebbe avere delle vostre opinioni o delle vostre valutazioni sul mio lavoro... Sono abbastanza comprensibile quando spiego le azioni da eseguire?
alla prossima!
yoplaaa
Edited by yoplaaa - 5/7/2010, 11:17. -
.
Effett molto fiQuo...Ma secondo me molte cose potevano essere saltate riducendo passaggi...
Io ho ottenuto questo risultato...
EDIT: avevo ciccato di brutto la gausiana.... -
.
. -
biker-89 .
User deleted
va bene?. -
.
si corretto ^__^
potevi toglier lo sfondo bianco però. -
biker-89 .
User deleted
ok 
, e senza quella linea bianca al centro sarebbe meglio?
. -
.
puoi provare, comunque i colori sopra e sotto devono esser leggermenti diversi e non riesco a capire se lo siano XD
comunque poi ciascuno può deviare dal tutorial originale per aver il risultato che più gli piace ^^. -
biker-89 .
User deleted
E si può postare qui ad esempio se la sfumatura è inclinata e non orizzontale? Nel senso che è orientata diversamente.
Comunque si sono diversi i due colori
. -
.
posta se comunque la base è la stessa del tutorial con qualche passaggio modificato ^^
Ps: comunque poi apri la tua gallery così li puoi ricevere tutti i consigli e commenti ^^. -
.
bel tutorial ^^ 
. -
.
va bene 
. -
xNapoleon .
User deleted
va bene così 
. -
(dragoste) .
User deleted
Giusto (: . -
~Cure Moonlight .
User deleted
Non c'è del sulla mia tastiera... . -
.
Però dovrebbe esserci Canc 
.
Pulsante WEB 2.0 |
Web
