Photoshop tutorial: icone stile web 2.0 in 3 passi

image Questo tutorial in Photoshop dimostra come sia “relativamente” semplice creare delle accattivanti icone stile web 2.0, con riflessi e quant’altro, semplicemente impostando gli effetti sul layer. Una volta compreso il processo, inoltre, è possibile – dando libero sfogo alla vostra creatività – creare numerose varianti.

PASSO 1 – FORMA ICONA

Creaiamo un layer e disegnamo un rettangolo image (o quadrato) con gli angoli leggermente arrotondati.

image

Applicate a questo layer i seguenti effetti:

image

image
Come colore ombra interna ho usato un #ffd800

image
La sfumatura va da #067500 a #0cff00

Abbiamo quasi ottenuto la nostra icona! La sfumatura potete farla del colore che più gradite! La cosa importante è partire da una gradazione scura verso una chiara.

image

PASSO 2 – RIFLESSO

Aggiungete un nuovo layer sopra questo cha abbiamo appena realizzato. Selezionate la forma dell’icona (Ctrl+click sul layer) e – sempre restando sul nuovo layer ancora vuoto – selezionate dal menu Selezione->Modifica->Contrai: inserite 2 pixel:

image    image

Impostate il colore di primo piano a bianco image  e selezionate lo strumento sfumatura image , che vada dal bianco al trasparente. Tracciate quindi un sfumatura dall’alto verso il basso, in modo da ottenere:

image

Ora, tocco finale, selezionate lo strumento di selezione circolare image , selezionate una elisse e posizionatela come mostrato in figura qui sotto e premete il tasto Canc – se volete potete impostare la trasparenza a 90/80:

image image image

PASSO 3 – TESTI E SIMBOLI

Usando una delle tante librerie font gratuite è possibile aggiungere un simbolo grafico, un’icona insomma. Se questa è outline, come nel mio caso, aggiungendo l’effetto:

image

Otteremo un simpatico effetto a rientrare:

imageimage

Manca solo il testo… a vostra scelta!

21 commenti a: “Photoshop tutorial: icone stile web 2.0 in 3 passi”

  1. 09 mar, 2008 Marco:

    Complimenti x il tutorial, il web 2.0 sta dando degli standard che i webmaster non possono certo tralasciare…
    Ho cercato sulla rete un font grafico da inserire nei pulsanti simile a quello che hai usato ma non l’ho trovato, potresti dirmi come si chiama o dove trovarlo? Grazie

    RispondiQuota
  2. 09 mar, 2008 Giovambattista Fazioli:

    @Marco: grazie Marco! Puoi trovare alcuni font bitmap a questo indirizzo: http://www.orgdot.com/aliasfonts/

    RispondiQuota
  3. 28 apr, 2008 groggit.com:

    Photoshop tutorial: icone stile web 2.0 in 3 passi | Undolog.com…

    Tutorial per realizzare icone stile 2.0 con Photoshop….

  4. 06 mag, 2008 dapdudida:

    hei.. ma ti sei dimenticato di spiegarci come fare l’ombra sotto che sfuma!!!
    ;) .. sai com’è.. gia che hai fatto 99.. fa 100

    mitico pulsantino.. ma ci vorrebbe un’ombra fica eh eh!! ^.^

    RispondiQuota
  5. 06 mag, 2008 Giovambattista Fazioli:

    @Dapdudida:
    hai ragione :) Per farmi perdonare ho fatto un piccolo Screencast, anche se l’audio non vi è venuto! Vai qui Tecniche di riflessione
    Ci sono due tecniche: con la maschera sul layer (il primo esempio) e l’uso della maschera generale! Io preferisco il primo ;)

    RispondiQuota
  6. 12 lug, 2008 Artemisia:

    Grande tutorial! Lo cercavo da tempo, grazie mille! Il tuo blog tra i miei preferiti, subito ;-)

    RispondiQuota
  7. 12 lug, 2008 Giovambattista Fazioli:

    @Artemisia: grazie!! :)

    RispondiQuota
  8. 25 lug, 2008 Agriturismo Lazio:

    Ciao, complimenti per il tuotorial mi è stato utilissimo, ma la iconcine dove le hai trovate?
    Ho provato a guardare nel sito che hai postato nei commenti precedenti ma nn ho trovato niente.

    RispondiQuota
  9. 03 ago, 2008 Giovambattista Fazioli:

    @Agriturismo Lazio: le icone sono in realtà un font grafico. Puoi trovare molti font gratuiti che contengono invece dei caratteri normali delle icone di vario tipo. Cerca su Google “font dingbats” :P

    RispondiQuota
  10. 23 ott, 2008 MARCO:

    Cioè ragazzi dopo questo passaggio.. è una cavolata lo so, ma io sono in tilt “Aggiungere un nuovo layer sopra quello appena realizzato. Selezionare la forma (Ctrl+click sul layer) e restando sul nuovo layer ancora vuoto” qualcuno me lo può spiegare come se fossi un bambino di 2 anni?

    RispondiQuota
  11. 24 ott, 2008 Giovambattista Fazioli:

    @MARCO: quello che devi fare, in pratica, è ricreare la stessa forma del bottone sul layer vuoto, ma un pochino più piccola. Per selezionare il contenuto di un layer puoi usare la combinazione CTRL+Click del Mouse. In questo modo vedrai la selezione intorno la forma del bottone. Poi selezioni i layer vuoto così che la selezione fatta precedentemente agirà su questo layer.

    RispondiQuota
  12. 24 ott, 2008 MARCO:

    Il problema è che quando arrivo a settare “sovrapposizione sfumatura” poi tutto il layer si copre del colore della sfumatura e non mi permette di vedere il quadrato cioè la forma che avevo dato al bottone inizialmente. In secondo luogo, tornando all’inzio, creo il livello, disegno il quadrato ma per intervenire nelle ombre esterne ed interne devo necessariamente duplicare il livello. E’ giusto?

    RispondiQuota
  13. 11 nov, 2008 Mattia:

    Grazie mille per la tua ottima guida! Da quando l’ho vista le mie creazioni non possono che migliorare!

    RispondiQuota
  14. 11 nov, 2008 Giovambattista Fazioli:

    @Mattia: grazie a te! Per qualsiasi info non esistare a scrivermi :)

    RispondiQuota
  15. 28 nov, 2008 Giuseppe Serra:

    Mi puoi spiegare come hai gestito un video tutorial visibile con finestra stile popup?
    Insomma mi riferisco a l’effetto visisibile sul video dove proponi un tutorial sulla creazione delle icone stile web 2.0

    RispondiQuota
  16. 28 nov, 2008 Giovambattista Fazioli:

    @Giuseppe Serra:

    Mi puoi spiegare come hai gestito un video tutorial visibile con finestra stile popup?
    Insomma mi riferisco a l’effetto visisibile sul video dove proponi un tutorial sulla creazione delle icone stile web 2.0

    Ho usato la libreria Javascript ShodowBox che permette di aprire finestre popup con diversi contenuti: immagini, filmati flash o quicktime, pagine html e altro.

    RispondiQuota
  17. 18 giu, 2009 tutorial photoshop:

    semplice e pratico… proprio come piace a me : )

    RispondiQuota
  18. 06 mar, 2010 Stefano:

    Ciao quando tento di applicare la macshera al livello il secondo quadrato non scompare e la maschera sul layer è bianca e non nera come nel filmato come mai??

    RispondiQuota
  19. 08 mar, 2010 Giovambattista Fazioli:

    @Stefano: devi mantenere premuto il tasto ALT quando applichi la maschera :D

    RispondiQuota
  20. 10 lug, 2010 Cifra WM:

    Ottima guida, grazie!
    Mi manca solo una cosa… Il passaggio in cui si inserisce l’ellisse: non riesco a dare quell’effetto all’icona.

    Non riesco a capire questo passaggio:

    Ora, tocco finale, selezionate lo strumento di selezione circolare image , selezionate una elisse e posizionatela come mostrato in figura qui sotto e premete il tasto Canc – se volete potete impostare la trasparenza a 90/80:

    Grazie mille anticipatamente

    RispondiQuota
  21. 10 lug, 2010 Giovambattista Fazioli:

    @Cifra WM: questo è un passaggio semplice. Il layer sfumato va tagliato, meglio se con una forma circolare. Quello che bisogna fare è seguire le figure illustrate per rendere l’effetto simile a quello proposto, tuttavia è possibile anche applicare tagli diversi per effetti diversi. Posizionati sul layer “riflesso”, quello da tagliare, usa una selezione circolare per delimitare la zona da eliminare e premi il tasto “CANC” per tagliare la parte inferiore.
    In aggiunta l’opacità di questo livello può essere ridotta al 90% o 80% in base ai colori utilizzati.
    Spero di aver risposto al tuo quesito.

    RispondiQuota

Lascia un commento

TAG XHTML PERMESSI: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERIMENTO CODICE: 
<pre></pre> // blocco generico
					<code></code> // blocco generico
					[cc_actionscript][/cc_actionscript] // Actionscript
					[cc_actionscript3][/cc_actionscript3] // Actionscript 3
					[cc_css][/cc_css] // CSS Style Sheet
					[cc_html][/cc_html] // HTML
					[cc_js][/cc_js] // Javascript
					[cc_objc][/cc_objc] // Objective-C
					[cc_php][/cc_objc] // PHP
					[cc_sql][/cc_sql] // SQL


Stop SOPA