Oggi in questo nuovo tutorial photoshop di webdesign, in formato testuale, vedrai come realizzare un layout per un pannello pop-up di login che sfrutta un’effetto grafico già visto sul blog: Effetto satin o satinato.

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 “[Solo gli utenti registrati possono vedere i link. Clicca qui per registrarti..]” 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



Andrealeti

Grazie mille mi serviva!
Complimenti


Edit!

Ho provato seguendo la guida... il risultato è: