Share
Uno dei modi migliori per imparare a creare interfacce sorprendenti per esercitarsi creando dispositivi elettronici in Photoshop. In questi giorni quasi tutti hanno una sorta di dispositivo MP3 per riprodurre musica. In questo tutorial dimostreremo come creare un'interfaccia MP3 elegante, elegante e semplice in Photoshop per riprodurre file audio per i tuoi progetti Flash.
Il primo passo è creare uno sfondo in cui possiamo applicare un gradiente radiale scuro. Dipingi il livello in qualsiasi colore e aggiungi uno stile di livello con la sfumatura mostrata sotto.
Con lo strumento rettangolo arrotondato (imposta un raggio di 20 pixel) crea l'elemento principale del dispositivo utilizzando un livello forma (facendo clic sulla prima opzione del menu superiore).
Fai doppio clic sul vettore di questo livello, il suo editor di colori si aprirà. Selezioneremo un colore grigio chiaro # E1E0E0 che ci consentirà di aggiungere un po 'di bagliore alla superficie. Ogni volta che vuoi creare oggetti bianchi devi aggiungere un po 'di colore grigio per illuminarli o aggiungere un po' di bagliore per rendere queste risorse abbastanza visibili.
Ora creeremo una smussatura attorno al dispositivo. Per fare questo dovremo creare delle guide di riferimento usando i righelli di Photoshop. Fare clic sull'angolo di convergenza di entrambi i righelli. Trascinando il mouse sarete in grado di visualizzare le linee tratteggiate che determinano con precisione dove si trova il cursore. Questo ci permetterà di creare un bisello equidistante attorno al perimetro del dispositivo.
Ora che abbiamo un nuovo livello di forma per lo smusso, dobbiamo prendere l'opacità di questo livello a zero, poiché vogliamo solo vedere uno smusso di 2 pixel sulla superficie.
Applicare un tratto da 1 pixel alla posizione interna utilizzando un colore più scuro rispetto al fronte del dispositivo. In questo passaggio creeremo una linea che rappresenta lo spazio comune tra il corpo e la parte anteriore del giocatore.
Applicare un bagliore interno con una linea da 2 pixel usando i valori seguenti.
Aggiungi un gradiente morbido per dare l'idea di convessità al fronte del dispositivo.
Ora ci prenderemo cura del margine del giocatore. Per fare ciò, aggiungi una linea che funzionerà come un'estrusione per dare l'illusione di un oggetto 3D. Aggiungi un tratto grigio di 2 pixel nella posizione esterna.
Utilizzando lo stile Bevel & Emboss aggiungiamo luce alla parte superiore di questa linea. Ora l'oggetto sembra avere un'estrusione verso il retro che riceve la luce dall'alto e diventa più scura alla base.
Aggiungi un'ombra interna morbida e piccola a questo livello per evidenziare ancora di più il fronte del giocatore.
Duplicando e modificando il livello smusso frontale, generiamo più smussi che rappresenteranno i diversi pulsanti di controllo del dispositivo.
Ora modifica il livello forma per creare il pulsante Play / Pausa principale del nostro player. Duplichiamo la prima smussatura e prendiamo i bordi all'interno per creare un oggetto circolare. Quindi ingrandirlo del 10% poiché sono necessari solo i biselli orizzontali.
Applicare una maschera morbida di 3 pixel alla forma che abbiamo creato nel passaggio 13 come mostrato di seguito.
Per fare in modo che la maschera nasconda l'oggetto e il relativo stile di livello, fai clic sull'opzione "Effetti maschera nascondi maschera" nella finestra degli stili. Se non scegliamo questa opzione, la maschera nasconderà solo l'oggetto ma mostrerà l'effetto all'esterno della maschera e vogliamo mantenerlo nascosto.
Questa stessa maschera sarà utile anche per gli altri smussi; possiamo prenderlo dallo strato che abbiamo mascherato prima. Facendo clic con il pulsante destro del mouse sull'icona della maschera all'interno del livello, scegliamo "Sottrai maschera di livello dalla selezione". Questo creerà una selezione identica alla precedente.
Con questa selezione ripetiamo il passaggio di conversione della selezione della maschera.
Abbiamo già i biselli di separazione del nostro set di pulsanti principali. Ora abbiamo bisogno di creare un livello forma per il display del giocatore: uno schermo acrilico nero dove verranno mostrati il nome della canzone e l'ora.
Per prima cosa usiamo l'ombra esterna per creare una smussatura inferiore in cui la luce proveniente dall'alto colpisce. Usa i valori mostrati nell'immagine per configurare lo stile per renderlo nitido e chiaro e non scuro e sfocato.
Ora dobbiamo creare un gradiente radiale. Portare entrambi i colori bianco e nero il più vicino possibile al centro l'uno dall'altro, quindi non c'è così tanta morbidezza tra i due colori. Posizione del nero 49%, posizione del bianco 50%.
Sblocca l'opzione Allinea con livello. Se non lo facciamo, il gradiente sarà solo dal centro dell'oggetto ai bordi e vogliamo che questo gradiente sia molto più grande e più largo.
Dopo aver prodotto l'effetto lucido, rifinisci questo stile con un paio di smussi simili a quelli creati per la fase del pulsante. Utilizzare un tratto nero da 1 pixel con il tratto allineato verso l'interno. Utilizzare un bagliore interno di 2 px con la modalità di fusione impostata sullo schermo.
Ora abbiamo finito la parte anteriore del nostro lettore MP3. Ora avremo bisogno di aggiungere alcune icone ai pulsanti e al testo all'interno del display.
Ora simuliamo lo scroller di testo sul nostro display. Usando un font pixelato abbiamo bisogno di aggiungere il nome dell'interprete e il nome del brano che verrà riprodotto. Puoi usare questo font gratuito. Ricordarsi di rimuovere l'aliasing nella finestra Carattere nel menu superiore dello strumento di testo per mantenere il testo nitido.
Con un altro font bitmap creiamo il cronometro che indica il tempo trascorso. Anche questo font è gratuito e puoi farlo qui.
Ora usa un font con le solite icone e simboli di un riproduttore audio o video. Puoi usare questo. Una volta installato, utilizzalo per creare i diversi pulsanti del player, in questo caso, il controllo Play / Pause (dovrai creare due stati per il pulsante quando sviluppi questo player, in quanto il pulsante Play diventa il pulsante Pause quando è premuto e viceversa).
Per questo simbolo usiamo lo stesso colore di quello che abbiamo scelto per la superficie frontale dell'oggetto. Con lo strumento di selezione del colore possiamo dipingere il testo.
Ora possiamo includere vari stili che rendono questo simbolo simile al bassorilievo. Utilizza i valori corrispondenti di seguito per l'ombra interna.
Alleggerisci lo smusso inferiore utilizzando questi valori.
Utilizzare un gradiente di larghezza morbida e piccola sulla superficie della depressione, quindi non è così noioso.
Creiamo il controllo del volume. Disegna un piccolo pulsante a manopola con una finitura in metallo lucido. Inizia con uno strato di forma circolare.
Usa un'ombra esterna per creare l'illusione di una grande estrusione.
Con una sfumatura in modalità Angolo e diverse strisce grigie e bianche possiamo simulare lo smalto circolare di questo tipo di pulsante. Assicurati che il colore grigio iniziale a sinistra sia lo stesso del colore grigio finale a destra.
Infine, aggiungi un tratto con un riempimento sfumato. Questo aggiungerà la smussatura sul perimetro. Seguire attentamente i valori dell'immagine.
Ora abbiamo finito il nostro pulsante di controllo del volume, ma vogliamo anche aggiungere un pulsante muto. Puoi farlo usando gli stili di livello.
Dipingi l'ombra del giocatore in un nuovo livello usando una selezione circolare arrotondata di 2 pixel (vedi il menu del valore superiore dello strumento).
Nascondi la selezione con Ctrl + H e usa un pennello da 100 pixel con il 10% del flusso di pittura, dipingi l'ombra delicatamente. Ciò lo renderà più intenso al centro dell'oggetto.
Ora aggiungiamo un po 'di bagliore sul bordo del display del lettore. Per prima cosa, dipingi un'area intensamente luminosa al centro di una selezione rettangolare alta 1 pixel. E poi, con lo stesso pennello ma senza alcuna selezione clicca più volte per aumentare l'intensità del centro.
Crea un effetto rollover sul pulsante principale per far scoppiare la superficie anteriore quando passa il mouse. Iniziamo creando una forma circolare dietro l'icona Pausa.
Questo effetto di depressione può essere fatto con: drop shadow per scurire e ammorbidire i bordi dell'oggetto, e una sfumatura per simulare che questa depressione abbia un'area superiore che è in tonalità, quando il pulsante è stato premuto verso il basso.
Abbiamo anche nascosto questo rollover con una maschera come abbiamo fatto con gli smussi del set di pulsanti principale. Ricorda l'opzione di nascondere gli effetti di livello allo stesso tempo.
Ripetendo i passaggi precedenti mascheriamo il rollover.
Aggiungeremo due effetti di luce per migliorare il rollover. Dipingendo con 2 colori (# 00CCFF per il bordo dell'effetto e il bianco per il suo centro) creiamo un bordo illuminato che maschereremo. Duplica il livello e rifletti verticalmente per far sembrare che si illumini in alto e in basso mentre il mouse passa sopra. Questo strato deve essere impostato su "Schermo" per integrare meglio i bagliori.
Infine, aggiungiamo un filo sottile che darà più realismo al giocatore. Per fare ciò, disegna uno strato di forma curva usando lo strumento penna.
Portalo a 0% di opacità e aggiungi un tratto con lo stesso tono di grigio della superficie del giocatore.
Separa il tratto dal livello forma che abbiamo creato, poiché è necessario aggiungere un po 'di ombreggiatura a questo filo. Fai clic con il tasto destro sull'icona fx accanto al livello e seleziona Crea livello.
Questa azione separa il tratto in un nuovo livello senza distruggere la forma precedentemente disegnata. Usa un'ombra interiore per dare l'idea di un rilievo cilindrico a questa linea.
Il nostro lettore MP3 è ora pronto per essere esportato come PNG trasparente e codificato in Flash per essere utilizzato sui siti Web. È possibile visualizzare l'immagine finale qui sotto o visualizzare una versione più grande qui.
Accentsconagua