Cosi mentre realizzavo il restyling di una membership commissionata cercavo delle icone che raffigurassero le risorse da scaricare: mp3, pdf, ppt, video ecc.

Cercando sui vari siti di icone però mi sono accorto che la stragrande maggioranza delle icone presenti è massicciamente presente in moltissimi siti web. Questo aspetto poteva rendere poco professionale l’aspetto di un sito al quale la gente paga per poter accedere ai contenuti.

Bene ho pensato di farti vedere attraverso un tutorial phoshop come creare icone personalizzate.

Iniziamo!

Per prima cosa apri un nuovo documento 512×512 pixel con risoluzione 300 pixelxcm

Appena dentro crea un nuovo livello, rinominalo FOGLIO BASE, e con lo strumento selezione (M) crea una selezione rettangolare simile ad un foglio A4. Colora di bianco questa selezione sul nuovo livello e lasciando la selezione attiva, togli la visibilità (cliccando sull’ochio) al livello sfondo.

A questo punto attiva lo strumento sfumatura e crea una sfumatura dal bianco #ffffff al grigio #f5f5f5. Dalla barra opzioni strumento selezione sfumatura RADIALE.

Con la selezione attiva del livello (se non è attiva tieni premuto CTRL e clicca sulla miniatura del livello – nella palette dei livelli) fai partire la sfumatura più o meno come mostrato nella figura qui sotto:

Ti ritroverai con un punto di luce bianco nel vertice alto destro. Disattiva la selezione con CTRL+D

A questo punto devi crere una bella fascia indicativa che ti servirà per dare una “direzione” alla tua icona.

Crea un nuovo livello rinominalo ETICHETTA e se non lo è già posizionalo in cima a tutti gli altri livelli.
Con lo strumento selezione (M) crea una selezione come in figura:

Adesso tenendo premuto CRTL+ALT+SHIFT clicca sulla miniatura del livello FOGLIO BASE. Vedrai che il cursore del mouse mostrerà una x. Se hai fatto tutto bene troverai la nuova selezione attiva:

Assicurandoti di avere il livello ETICHETTA attivo premi ALT+BACKSPACE (che non è la barra spaziatrice ma il tasto che solitamente cancella indietro). Non importa il colore asssegnatogli.

A questo punto clicca su fx nella palette dei livelli ed applica una sovrapposizione sfumatura. Per questo articolo utilizzerò una sfumatura di rosso.

per ottenere…

Bene a questo punto deseleziona con CRTL+D.

Attiva lo strumento testo, scegli il font e seleziona il colore del testo per scrivere l’estensione del file.

In questo articolo scriverò pdf.

Applico un’ombra esterna alla scritta:

per ottenere questo effetto:

Ok! A questo punto parte la personalizzazione.

Per questo articolo ho pensato ti applicare il mio logo in saturazione zero.

Ecco Alcune varianti

Insomma puoi diverti come vuoi!

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=HwdXyrPUhLs

Dopo una attenta analisi e test vari ne è venuto fuori che la variabile che ha fatto impennare i lead era il tasto di conversione. Vediamo subito con questo tutorial Photoshop come puoi realizzare questo tasto in stile skype.

Iniziamo…

Per prima cosa apri un nuovo documento su photoshop della dimensione di 250×80 pixels.

Con lo strumento forma rettangolo con angoli arrotondati e un raggio di 30px crea la forma di tasto. Non importa il colore.

Il prossimo passaggio sarà impostare gli stili al pulsante.

Di seguito mostrerò una carrellata di stili da applicare (dal tasto fx del livello). Settali tutti contemporaneamente cosi come li mostro.

Applica una sovrapposizione sfumatura con tonalita di azzurro lineare a 90 gradi con il colore più chiaro in alto:

Adesso uno smusso ed effetto rilievo con queste impostazioni:

Adesso applica una traccia di 1 pixel centrale del colore #0f9fc9.

I prossimi due effetti riguardano relativamente le ombre esterna ed interna.

Ombra esterna:

Ed ombra interna:

A questo punto il grosso è fatto non ci resta che inserire la Call To Action!

Il testo della call to action differisce da azione a azione. In questo tutorial immaginerò che tu voglia far scaricare qualcosa e dunque il “Download” come azione può andar bene.

Alla scritta Download di colore bianco applica un leggera ombra interna:

Il risultato Finale

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