Innanzitutto apriamo il nostro documento e impostiamo le dimensioni del pop-up di login.

Essendo appunto un pannello che servirà esclusivamente a loggare gli utenti non abbiamo bisogno di un pannello enorme.

Per questo tutorial photoshop impostiamo il documento a 560px di larghezza e 360px di altezza.

Trascina le guide ai bordi del tuo documento come in questa figura:

Adesso: premi D per reimpostare i colori di base.

Attiva lo strumento rettangolo con angoli arrotondati, applica un raggio di 10px e crea un rettangolo orizzontale partendo dal vertice alto sinistro finendo al vertice basso destro.

Dovresti aver creato un rettangolo NERO con gli angoli arrotondati.

A questo punto seguendo gli stessi step del tutorial “Creare uno sfondo satinato” dobbiamo colorare il nostro rettangolo di un grigio scuro.

Quindi dalla palette dei colori che compare nella barra delle opzioni strumento dello strumento forma VEDI FIGURA:

seleziona il colore #353535. Un grigio abbastanza scuro e il colore del rettangolo cambierà.

Ora devi rasterizzare il livello. Clicca con il tasto destro sul livello forma e poi seleziona – Rasterizza livello.
Fatto questo, tieni premuto CTRL e fai un clic sull’immagine in miniatura, del livello stesso, per selezionare l’area del nostro pannello.

A questo punto applichiamo il filtro che genererà l’effetto satinato:

Dal menu: Filtro > Disturbo > Aggiungi Disturbo applichiamo quanto segue:

A questo punto la base del pannello pop-up di login è pronta. Adesso devi scegliere una linea di demarcazione fra la testata del pannello e gli oggetti del modulo.

Proprio su questa linea andrai a creare una forma linea di 1px di colore NERO. Una volta creata diplica la linea, spostala di un pixel verso il basso e colorala di un grigio #5d5d5d per ottenere un risultato simile a questo:

Adesso viene la parte piu interessante.

Con lo strumento Testo scrivi un testo che indica la funzione del pannello di pop-up. Per esempio accesso utenti.

Posiziona questa scritta, che utilizzerà un font che preferisci (per questo tutorial ho utilizzato PF BeauSans Pro), nella parte alta centrale del pannello. A questo testo, e a tutti i testi di colore bianco applica questi effetti:

Ovviamente per cambiare colore al testo basterà cambiare colore nella sovrapposizione colore.

Bene crea e posiziona i tuoi testi cosi.

Ora attiva lo strumento forma con angoli arrotondati e applicagli un raggio di 2px. Crea due rettangoli bianchi che andranno a formare i due campi di testo del pannello.

A questi due campi applica questi stili:

E infine posizionali rispettivamente per l’username e la password.

Infine crea un rettangolo per il tasto login, sovrapponi una sfumatira a piacere (io ho scelto una sfumatura di arancio) e applica la stessa ombra esterna applicata alle scritte.

Posiziona il rettangolo sotto la scritta Login ed il gioco è fatto!

Il risultato finale

Ecco invece una possibile simulazione sul mio stesso blog.

Sarei felice di ricevere un tuo commento!

http://www.youtube.com/watch?v=cssMhW38NoE

http://www.youtube.com/watch?v=THh1wSUUQFc

Ecco una semplice variante:

Se ti è piaciuto il video tutorial condividilo su facebook!

Ecco un breve tutorial Photsohop  che ti condurra, passo dopo passo, in maniera FACILE e CHIARA verso la creazione di un bottone con effetto lucido con photoshop.

Iniziamo da qui..

La prima operazione che devi fare per creare un bottone con photoshop è attivare lo strumento rettangolo con angoli arrotondati ed impostare (in alto nella barra delle opzioni strumento) un raggio di 2/3 pixel.

Fatto questo tracciamo l’area del nostro bottone.

Definita l’area del nostro bottone andiamo ad applicare i seguenti effetti:

Applica un Bagliore esterno con un grigio #666666

Applica un bagliore interno di 13px selezionando il colore #00ffe4

La sfumatura in realtà è molto soggettiva. Dipende dal colore del tuo sito o dall’utilizzo che intenderai farne. Per questo tutorial ho selezionato i colori #1a7fc3 e #2061af

Infine ho dato un colpo di traccia di colore #00aeff

Lo spessore della traccia è DIRETTAMENTE PROPORZIONALE alla grandezza del file finale!

Per una mia comodità i pulsanti li creo molto grandi. Conosco graphic designer che realizzano pulsanti a dimensione naturale. Ognuno ha le sue comodità sul lavoro.

Ecco l’anteprima di come risulterà dopo questi effetti:

A questo punto CREA UN NUOVO LIVELLO e sovrapponilo al pulsante.

Tenendo premuto CRTL fai un click sulla miniatura della maschera del pulsante per selezionare l’area del pulsante. Adesso seleziona lo strumento di selezione rettangolare (M) e scosta verso l’alto la selezione.

Ora dobbiamo creare l’effetto lucido.

Tenendo premuto CRTL+ALT+SHIFT clicca sulla miniatura della maschera del pulsante per avere la differenza delle selezioni. Riempi questa nuova selezione di bianco nel nuovo livello e riduci l’opacità a tuo piacimento. Io l’ho impostata al 40%.

A questo punto non resta che una bella scritta, con un font pulito da posizionare all’interno del bottone.
Ecco una possibile lista di font da selezionare.

• Arial
• Helvetica
• Myriad Pro – Scelto da me
• Verdana

Alla scritta ho solo impostato un semplicissimo effetto ombra a 90°

Il risultato finale

Pochissimi passi un una grande tecnica da utilizzare e riutilizzare per diversi lavori.

http://www.youtube.com/watch?v=D9y1SguwKDw