In questo tutorial vi voglio mostrare come realizzare un pulsante a scorrimento come quello che abbiamo disegnato per Searcheeze, la piattaforma per il Content Curation che adesso si è trasformata in Next Mags. Nello sviluppo dell’interfaccia ci siamo curati di ogni dettaglio grafico e di usabilità, particolare cura è stata prestata per la parte relativa al pannello di controllo utente, e abbiamo realizzato diverse soluzioni grafiche per pulsanti, form di inserimento dati e di ricerca. Qui di seguito parleremo dello slider per la pubblicazione dei contenuti collezionati con Searcheeze
Il tutorial è realizzato per utenti Windows, per chi usa Mac, basta usare Command al posto di CTRL
Come prima cosa creiamo un nuovo documento (Ctrl+N) di 500px x 300px a 72dpi e in Rgb.
Andiamo nel pannello strumenti a sinistra, clicchiamo sul colore in basso e scegliamo un grigio chiaro per il colore di fondo ( io ho usato #e8e9e8)
Una volta scelto il colore premiamo contemporaneamente Alt+Canc per colorare l’unico livello che abbiamo, oppure selezioniamo lo strumento Secchiello (tasto G della tastiera) per colorare, con un click in un punto qualsiasi della finestra bianca, il livello.
Piccola nota su questo metodo di riempimento.
Nella parte bassa degli strumenti di Photoshop ci sono due quadrati di colore, uno in primo piano e l’altro in secondo. Si può colorare un qualsiasi livello usando la combinazione dei tasti Alt+Canc oppure Ctrl+Canc. Nel primo caso si utilizzerà il colore in primo piano, nel secondo caso, invece, verrà usato il colore in secondo piano. Si può usare questo metodo sia per semplici livelli sia per livelli di testo
Una volta colorato il livello di grigio andiamo sui filtri e applichiamo un leggero disturbo (Noise) a tutto (1,5% può bastare).
Scegliamo lo strumento “Rettangolo Arrotondato” (Rounded shape) , settiamo il colore di riempimento con questo valore #474c51 e, con un raggio di 8px negli angoli, tracciamo un rettangolo di circa 280x27px. Il risultato dovrebbe essere simile a quello qui di seguito.
Selezioniamo il livello appena creato rinominiamolo in “fondo slider” e, con il click destro, trasformiamolo in un “Oggetto avanzato” (Smart Object). Premiamo Ctrl+F per aprire il pannello “Aggiungi disturbo” (il comando Ctrl+F applica l’ultimo effetto utilizzato) scaliamo l’effetto all’1% a premiamo ok.
A questo punto ci serve un’ombra interna per dare profondità a questo rettangolo
Nella parte bassa dei livelli clicchiamo sul tasto FX e dal pannello scegliamo “Ombra Interna” (Inner shadow) settandola con i parametri che potete vedere in figura ( Opacità 100% – Distanza 0px, estensione 0% e 5px di dimensione).
Scegliamo nuovamente lo strumento “Rettangolo Arrotondato” impostiamo il colore su un verde #a8d93d e tracciamo un rettangolo di 126x23px posizionandolo sopra il nostro livello “Fondo slider” come in figura. Rinominiamo questo oggetto come “Bottone On”
Apriamo il pannello degli effetti cliccando sempre sull’icona FX e cominciamo a dare stile al nostro pulsante. Cominciamo con una leggera ombra esterna dando i seguenti parametri: 12% di opacità, 1px di distanza, 0 di estensione e 1px di dimensione.
Adesso vogliamo illuminare la parte superiore per rendere bombato il nostro pulsante, quindi passiamo all’opzione “Sovrapponi Sfumatura” (Gradient Overlay) e settiamola cosi: Metodo Fusione “Sovrapponi” al 50%, e “Scala” al 150% assicurandoci che l’angolo di sfumatura sia di 90%
Volendo dare maggior luce alla parte alta del pulsante aggiungiamo un ombra interna che coloreremo di bianco (in alternativa si può usare il “Bagliore interno”)
Settiamo cosi la nostra “Ombra Interna”: cambiamo il colore portandolo al bianco (basta cliccare sul rettangolo di colore che nella figura seguente è cerchiato in rosso), aumentiamo l’opacità al 100% mettendo “Normale” come “Metodo di fusione”. Assicuriamoci che l’angolo di luce sia impostato a 90° e settiamo la Distanza a 1px e le Dimensioni a 2px. Non vi preoccupate se la luce vi sembra eccessiva, andremo a inspessire il bordo e la luce si ridimensionerà.
Passiamo quindi alla voce di menù “Traccia” (Stroke). Vogliamo dare un bordo interno al nostro rettangolo, quindi diamo uno spessore di 1px scegliendo come Posizione “Interno”. Lasciamo il metodo di fusione su “Moltiplica”, opacità al 100% e come colore settiamo un grigio chiaro #dbdbdb
Diamo l’ok a tutto e abbiamo dato la base per il nostro pulsante. Adesso è giunto il momento di arricchire il tutto con i testi e le frecce direzionali.
Scegliamo il font che preferiamo. Io ho optato per un PT Sans, che è un font web safe rilasciato da Google. Abbiamo utilizzato questo font su tutto il sito Searcheeze, quindi per coerenza l’ho mantenuto anche sui pulsanti.
Premete il tasto T (o selezionate lo strumento testo dal pannello degli strumenti) e cliccate in un punto qualsiasi del nostro lavoro, lo strumento Testo si attiverà e potrete scrivere immediatamente. Scriviamo “Pubblica” (lo scopo del nostro pulsante era di pubblicare le “Collezioni” realizzate dentro Searcheeze) e poi premiamo Ctrl+Invio per dare l’Ok al testo.
A prescindere dal testo che avete scelto, potete cambiare tutte le impostazioni dal pannello Opzioni che potete vedere in alto nella figura. Impostate il carattere come l’ho impostato io e, se non lo fosse, spostate il testo sopra il nostro pulsante verde.
Un altro modo di vedere il pannello testo è di premere Ctrl+T mentre si sta editando il testo.
Adesso aggiungiamo al testo un ombra per creare l’effetto scolpito nel pulsante. Quindi, sempre cliccando sull’icona FX in basso, scegliamo “Ombra esterna” , scegliamo come colore un grigio scuro #4c4c4c e impostiamo “Moltiplica” all’85%. Per rendere l’effetto come lo desideriamo cambiamo l’angolo di incidenza della luce impostandola a -90° e distanziamola di 1px e lasciando Estensione e Dimensione a 0. Confermiamo tutto cliccando su ok
Il risultato di tutto dovrebbe essere il seguente
Adesso dobbiamo aggiungere delle frecce per dare il senso di direzione al pulsante. Sempre con lo strumento testo selezionato, clicchiamo lateralmente al testo “Pubblica”, (facendo attenzione a non editare lo stesso Pubblica, ma a scrivere del testo nuovo) e scriviamo due frecce verso sinistra, cosi >>.
Senza premere nulla, quindi con ancora il testo in modalità di modifica, portare il cursore al centro delle due frecce e, tenendo premuto Alt, cliccare ripetutamente la freccia direzionale sinistra della tastiera. Questo farà avvicinare le due frecce. Continuate fino a quando non saranno vicine, distanti solo un paio di pixel.
A questo punto, se non è aperto, aprire il pannello con le impostazioni del testo premendo Ctrl+T (nota, Ctrl+T funziona solo mentre il testo viene editato, se premete Ctrl+T mentre fate altro vi apparirà l’opzione “Trasforma”. Potete aprire il pannello carattere anche dal menù in alto “Finestra- Carattere”)
Una volta che il pannello dei caratteri è aperto, cliccate Ctrl+Invio per confermare quello che avete appena scritto.
Adesso passiamo ai dettagli.
Scegliamo un verde scuro come colore #3f5916 e inspessiamo maggiormente il testo attivando l’opzione “Grassetto simulato” che si trova in basso a sinistra del pannello (come da figura).
Sempre in figura potete notare come il valore della crenatura (ovvero dello spazio fra i caratteri) sia cambiato; quello è l’effetto della pressione del tasto Alt associato ai tasti direzionali.
Portate questa freccia lateralmente al testo “Pubblica” e aggiungiamo un ombra per dare anche in questo caso, un senso di profondità.
L’ombra deve essere un Ombra interna bianca, con il 52% di opacità e metodo di fusione “Normale” . L’angolo di incidenza della luce deve essere di 120° e la distanza di 1px, i valori di Estensione e Dimensione si possono lasciare a 0. Confermiamo e accertiamoci che l’effetto finale sia il seguente. I livelli di testo solitamente prendono il nome dal testo editato, in questo caso il nostro livello si chiamerà >>.
Rinominiamolo, cliccando col tasto destro del mouse sul livello, e chiamiamolo “Freccia destra” ( nota: quando si lavora in team bisogna usare la massima chiarezza nella gestione dei file per evitare che altri perdano tempo cercando di interpretare i nomi dati ai nostri file. Photoshop permette di inserire nomi lunghi e anche note per spiegare determinate funzionalità nei layout web, meglio dettagliamo i nostri file e più speditamente procederemo con il lavoro)
Adesso bisogna solo duplicare la freccia e rifletterla per avere la sua copia speculare sul lato sinistro del pulsante.
Ci sono svariati metodi per duplicare un livello o un oggetto, visto che non solo vogliamo duplicarlo, ma anche riposizionarlo, il metodo che scelgo è la duplicazione per trascinamento.
Premiamo il tasto V per selezionare lo strumento “Sposta”, (dovremmo essere ancora sul livello della freccia destra, in caso contrario selezioniamo tale livello) adesso tenendo premuto il pulsante Alt e il pulsante Shift clicchiamo e teniamo premuto il tasto sinistro del mouse e trasciniamo la freccia verso sinistra.
Dovremmo vedere la freccia duplicarsi (il tasto Alt duplica mentre Shift mantiene l’oggetto duplicato in linea con l’originale)
Una volta posizionato alla sinistra del testo “Pubblica” clicchiamo Ctrl+T per trasformarlo, a quel punto scegliere la voce che appare “Rifletti Orizzontale” (flip horizontal) e poi premere Invio per confermare. Abbiamo così creato le due frecce per il nostro pulsante.
Manca solo una cosa da fare, duplicare il testo “Pubblica” da posizionare sullo slider, alla destra del pulsante, in modo tale da poter scrivere “Scorri per pubblicare”, un suggerimento da apporre al nostro bottone.
Quindi procediamo alla stessa maniera usata per le frecce.
Selezioniamo il livello con il testo “Pubblica”, teniamo premuti Alt e Shift e spostiamo il testo verso destra, duplicandolo.
Ovviamente occorre cambiare il testo e scrivere “Scorri per pubblicare”, dopo di che cambiamo lo stile del carattere da Bold a Regular e diminuiamo leggermente la grandezza del font (nel mio esempio il pulsante era 14px, quindi il testo copiato l’ho reso di 13px).
L’ultima cosa che occorre fare è cambiare l’ombra, che deve essere posizionata all’opposto della precedente.
Quindi procediamo cosi, apriamo l’effetto che è già presente sul nostro livello (cliccando due volte sulla FX a lato del livello del testo) andiamo sui parametri dell’ombra e settiamola in questo modo: colore più scuro, #272727 e direzione 90° (prima era -90°), tutto il resto rimane invariato.
Ed ecco il risultato finale
Se c’è qualche passaggio che non è chiaro, potete commentare qui di seguito, vi risponderò il prima possibile. Potete anche scaricare il psd realizzato da questo link.
Grazie per avermi letto.
