Share
Costruiamoci un elemento UI lunatico. Useremo Photoshop per esplorare trame sottili e combinare un quadrante del volume dall'aspetto eccezionale. Andiamo!
Apri un nuovo documento RGB di dimensioni 800x600px e una risoluzione di 72 dpi.
Seleziona uno scuro blu scuro per lo sfondo (in questo caso il codice colore è # 1b1c20) e poi usa lo strumento secchiello per riempire lo sfondo.
Applicare un po 'di rumore sullo sfondo, per dargli una consistenza morbida (1% di rumore gaussiano e monocromatico).
Ora controlla il download del codice sorgente: troverai un file di pattern in cui dovrai fare doppio clic per installarlo in Photoshop. Applica il disegno a un nuovo livello e riempi l'intero livello con il motivo.
Ruota l'opacità della sovrapposizione del motivo al 15-20% a seconda dei tuoi gusti, per finire con qualcosa del genere:
Crea un nuovo gruppo con il nome "pulsante" e aggiungi una forma circolare (fai questo selezionando lo strumento forma ellittica e tenendo premuto shift per renderlo perfettamente circolare). Dagli un colore vivido in modo da poter vedere chiaramente il livello più in basso lungo la linea?
Modifica l'opacità di riempimento del livello fino allo 0% e applica un'ombreggiatura con le seguenti proprietà:
Quindi applica una leggera ombra interna per farlo sembrare rientrato.
Quindi applica una luminosità interna per far sembrare piena la base.
Per il prossimo passaggio, crea un'altra circonferenza e assegnagli un colore bianco, questa sarà la forma base del nostro elemento dell'interfaccia utente e servirà per un paio di altri livelli di dettaglio, quindi crea una dimensione di cui sei davvero soddisfatto! Chiamalo "button_base" o qualcosa di simile.
Applicare una sfumatura ad angolo sovrapposta ad esso, iniziare con il bianco e aggiungere due stop di un colore grigio chiaro. Usa i due stop bianchi nel mezzo per giocare con la nitidezza del pulsante e mentre lavori mantieni l'anteprima dell'elemento per vedere come appare.
Applicare una smussatura e rilievo alla base, per far sembrare un po '3d-ish.
Ora per i dettagli. Crea una copia del livello base e mettilo sotto la base del pulsante. Ora gira il riempimento a 0% per vedere solo i filtri applicati a quel livello e non il contenuto. Crea un'ombra esterna con le seguenti impostazioni:
Per far risaltare un po 'di più il pulsante, copia nuovamente la base del pulsante, posizionandolo sotto la base del pulsante e sopra l'ombreggiatura. Dagli una sovrapposizione di colore scuro per renderlo fantastico.
Ora crea un'altra copia del livello di base del pulsante, ma trasformalo in una dimensione più grande. Mettilo sopra il livello di base del pulsante e rasterizzalo!
Fatto ciò, vai al pannello dei filtri e dargli un filtro del rumore massimo (quindi pensi di guardare una TV rotta).
Quindi, applica un filtro Sfocatura radiale e impostalo sul valore massimo per ottenere un buon effetto.
Dovresti ridurre l'opacità di questo livello a circa il 20-40%, quindi centrare il centro con il pulsante. Quando lo hai nel centro, seleziona il livello del pulsante e vai a selezionare> inverso. Quindi seleziona il livello di scratching e premi elimina. Dovresti lasciare un bel effetto graffiato sul pulsante.
Per verificare che stiamo facendo tutto ok, dovresti avere qualcosa di simile a questo:
Fai un piccolo cerchio per la tacca (o indicatore) sul pulsante.
Dagli una goccia bianca per dargli un aspetto in rilievo.
Dare alla tacca una piccola ombra interiore.
E finalmente portarlo alla vita con un colore di tua scelta.
Dovresti avere qualcosa di simile a questo:
Ora restiamo bloccati nei piccoli dettagli finali! Fai un piccolo rettangolo per le tacche nella base del pulsante.
Riduci il riempimento fino allo 0% e assegnagli un'ombreggiatura bianca.
Ha bisogno di un po 'di ombreggiatura anche all'interno, quindi dargli una piccola ombra interiore.
Ora copia e lanciala sull'altro lato.
Metti il tuo contenuto testuale lì, usando un font di tua scelta (ho optato per Myriad Pro).
Applica un'ombreggiatura al testo per farla apparire rientrata.
Quindi applica una leggera ombra interna.
Questo dovrebbe essere quello che stai vedendo nel tuo file:
E questo è il nostro ultimo elemento dell'interfaccia utente, un semplice quadrante del volume per pompare la musica!
Spero che questo tutorial ti sia piaciuto, sarà il primo di molti, quindi sentiti libero di seguirmi su Twitter o iscriverti alla newsletter del mio sito. Felice design e stai bene!
Accentsconagua