Crea una interfaccia di login – Tutorial Photoshop
22 Commenti - Categoria: Tutorial Photoshop, Webdesign - Creare siti web
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 “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!
LUIGI
ciao andrea grazie del tutorial e ‘ fantastico. GRAZIE INFINITE
Mario
Ciao Andrea,
complimenti per il tutorial e per tutto il sito!
Una domanda: come si “unisce” l’immagine creata al codice effettivo di login?
Grazie
Andrea Leti
In che senso? Spiegati meglio…
alessio
penso che intendesse dire che che vuole il codice php
da affiancare alla grafica..
Zaso
Mario, dal punto di vista del codice gli elementi del login-form sono costituiti da tag html (, , , , ecc…), per “donargli” la grafica realizzata basterà esportare da photoshop quest’ultima a pezzi (un’immagine per lo sfondo, un’altra per il bottone e via così) ed associarla agli elementi del sito tramite regole CSS (es. background-image).
Mario
@Andrea
Intendo come inserico l’immagine creata al posto del tradizionale login del template, per esempio in wordpress
Andrea Leti
Ciao Mario,
per “piazzare” la grafica che ho creato su WordPress più che un commento ci vuole un vero e proprio tutorial personalizzato.
Questa interfaccia però non si adatta bene a quella di WordPress, perchè NON è stata pensata per WordPress.
Si può comunque fare ma come ho già detto ci vorrebbe un tutorialone “mantenibile” nel tempo
La questione da affrontare è: Quanto ne vale davvero la pena?
Andrea Leti
Mario ho fatto un articolo che ti spiega come fare
Gennaro
Molto bello; i miei complimenti.
Ciao Gennaro
Andrea Leti
Grazie Gennaro!
vik
Quelle ombre così forte mi portano in dietro negli anni
Andrea Leti
vik
Quando, nella seconda metà degli anni 90, realizzavo i miei primi lavori grafici si portava usare queste ombre nette e molto distanti ma nel contesto stanno bene anche se personalmente l’avrei fatte meno forti. Credo ci voglia un punto da qualche parte.
Andrea Leti
E allora sarai felice perchè quei contrasti con le ombre forti saranno oggetto del 2012
Stefano
Grazie Andrea!
Mario
@Zaso @Andrea
grazie è quello che intendevo
Chris
Bellissimo anche questo Tutorial … Grande Andrea!!
Ho provato anche io a crearne uno simile (uguale) al tuo …
http://intelligenceandnews.blogspot.com/2011/12/photoshop-creazione-finestrella-accesso.html
Andrea Leti
Benissimo! E’ proprio quello che volevo vedere…
Pingback: √ - Da Photoshop a Html – Creare una interfaccia di login | Andrealeti.it
franco
molto ben fatto,utilie,chiaro e altamente professionale; Grazie!
3REBELL
gran bell tuttorial molto utile
Mary
Tutorial Stupendo ed è molto chiaro