Con questo tutorial imparerete a creare icone glossy in stile web 2.0.
Il tutorial proviene da 0tutor, io lo preso e lo testato.
Il tutorial originariamente era solo per un icona di cancellazione ma ne ho creata una anche per conferma(la classica ‘v’).
Alla fine del post vi sono i link ai file PSD che ho creato.
Iniziamo.
Allora per prima cosa bisogna creare un ellisse rotondo utilizzando lo strumento Forma(shape) e tenendo premuto Shift per fare un cerchio perfetto.
Successivamente andiamo nel menù Livello(Layer) e clicchiamo su “Opzioni di fusione”(Layer style).
Impostiamo queste opzioni.
Importiamo così il gradiente metallico:
Ok, avremo un cerchio in stile metallico così:
Ora dobbiamo creare il cerchio interno rosso con dimensioni minori(vedi sopra come si crea un cerchio perfetto).
Impostiamo queste opzioni sullo stile del livello:
Ecco cosa avremo:
Ora dobbiamo creare la X per l’uscita; potete utilizzare il testo o per chi ha un po’ più di dimistichezza la forma speciale sempre dalo strumento Forma(shape) e selezionare la forma X che vogliamo.
Applichiamo questi stili al livello:
Ok,siamo quasi alla fine.
Creiamo un nuovo livello e con lo strumento selezione ellittica selezioniamo tutto, successivamente impostiamo lo strumento selezione ellittica con l’opzione sottrai selezione.
Sulla selezione creiamo un gradiente che va dal bianco al trasparente come da immagine:
Ripetiamo il procedimento per tre volte in diversi punti e il gioco è fatto.
Per creare l’icona in stile glossy di una conferma cambiamo il colore del cerchio interno con un gradiente di verde e cambiamo il simbolo da X a V.
Eccovi i file PSD se volete prendere spunto.
X Gloss
V Gloss
Iscriviti al feed di Good2know