Creazione di pulsanti per interfacce mobili in Photoshop CS6

Sommario
Questi tipi di pulsanti sono molto popolari, specialmente quando lavoriamo creando parti per interfacce mobili come il i phoneIn effetti, era questo dispositivo che incorporava questi tipi di pulsanti che sembrano una piccola linguetta di plastica lucida su cui colpisce un piccolo riflesso di luce.
Per costruire questo tipo di pulsante, utilizzeremo tecniche di base come forme rettangolari con bordi arrotondati, l'uso di sfumature e l'uso di tavolozze di colori per ottenere gli effetti richiesti.
Per prima cosa dobbiamo avviare il processo generando il modulo base del nostro pulsante, per questo seguiremo i seguenti passaggi.
1- Iniziamo creando un vettore a forma di rettangolo con bordi arrotondati e nel menu dei livelli applicheremo un effetto di gradiente sovrapposto:

2- La sfumatura deve essere di un colore scuro nella parte superiore e una variazione dello stesso colore ma più chiara nella parte inferiore, la proporzione può essere di 80% scuro e un 20% di chiarezza.
3- Ora dobbiamo livello duplicato, per questo possiamo premere la combinazione di tasti CTRL + JLo facciamo per poter modificare il gradiente nel livello duplicato, quindi una volta duplicato faremo doppio clic sull'effetto gradiente.
4- Modificheremo il gradiente impostando la sua opacità su a 50% e cambieremo i colori in bianco sullo sfondo e la parte più chiara sarà trasparente:
5- Ora il prossimo passo che dobbiamo fare è eliminare gli ancoraggi, per questo selezioneremo il strumento punto, l'idea è di spostare i riferimenti del livello duplicato, in modo che copra solo un terzo circa della tela.
6- Ora creeremo una curvatura nel bordo inferiore del livello duplicato, per questo useremo lo strumento selezione della direzione e al centro della linea generiamo il movimento necessario.
7- Quando stiamo per finire, modificheremo il livello e cambieremo l'opacità a circa il 65% e il parametro di riempimento o Riempire lo lasciamo a 0 questo farà prendere forma tutto.
8- Infine possiamo aggiungere un'immagine o un testo, così facendo dobbiamo posizionare una piccola ombra in modo che evidenzi l'elemento e possiamo associarlo a un pulsante:

Come possiamo vedere, abbiamo generato un pulsante molto simile a quelli utilizzati nelle interfacce mobili, questi ci danno un aspetto sorprendente e fresco che possiamo incorporare nei nostri schizzi e proposte per interfacce mobili, sono usati più di ogni altra cosa per rappresentare applicazioni e elementi del genere, non per le azioni di base dell'utente, tuttavia tutti possono usare la propria creatività per ottenere una posizione.
Con questo finiamo questo tutorial, come abbiamo visto applichiamo diverse tecniche di base per ottenere il risultato finale, va notato che più ci esercitiamo, più velocemente saremo e saremo in grado di generare questi elementi con maggiore sicurezza.Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo

Aiuterete lo sviluppo del sito, condividere la pagina con i tuoi amici

wave wave wave wave wave