Share
I design chiari sono una parte importante di un'interfaccia iPad di successo. In questo tutorial spiegheremo come creare una bellissima GUI per un'applicazione iPad Audio / DJ in Photoshop. Iniziamo!
Crea un nuovo file. Impostare Larghezza su 768 e Altezza su 1024 e la risoluzione su 132 PPI.
Crea un nuovo gruppo e chiamalo Sfondo. Open Leather Texture di Tommaso Nervegna, costruisce un sistema a griglia proprio come quello nell'esempio, dividendo la tela a metà sull'orizzontale e in 3 sulla verticale. Ridimensiona la texture per adattarla a una delle 6 forme e duplicala ancora 5 volte in modo che possiamo riempire ciascuna di esse.
Unisci tutti e 6 i livelli precedenti e applica una sovrapposizione sfumatura dal pannello Stile livello. Centra il gradiente appena al centro della tela esattamente come visto nell'esempio e il nostro sfondo è fatto. Continua a leggere per ottenere più passaggi.
Crea un nuovo Gruppo e chiamalo Piatto. Ora usando Ellisse Strumento (U) Crea un cerchio perfetto (513x513 px), riduci il livello di riempimento a 0 e applica gli stili di livello dell'esempio. Dovresti ottenere un risultato simile a quello nella parte inferiore dell'esempio.
Ora daremo alla forma un leggero tratto. Usando lo strumento Pennello (B) imposta la dimensione a 300 e la Durezza, imposta il colore di primo piano a # 01f5f5 e crea un punto come quello nell'esempio. Imposta la modalità di fusione per il livello su Sovrapponi.
Usando lo strumento Ellisse (U) fai un altro cerchio perfetto (483x483 px), imposta il primo piano a # 111111 e applica un bagliore esterno, usando le impostazioni dell'esempio.
Ancora usando lo strumento Ellipse (U) fai un altro cerchio perfetto (481x481 px) ma rendi questo uno più piccolo di 2 px rispetto al precedente. Imposta il colore di primo piano su # 00a2ff e applica gli stili di livello dal mio esempio.
Crea una nuova circonferenza usando Ellipse Tool (U) imposta il colore di primo piano su # c2c2c2, rendilo più piccolo di 10 px rispetto al nostro precedente (471x471 px) e applica un tratto dal pannello Stili livello, utilizzando le impostazioni dell'esempio.
In questo passaggio creeremo alcune forme per dare più profondità al piatto. Usando lo strumento Penna (P) disegna una forma come quella nell'esempio. Portalo intorno a 64 px di larghezza e 55 di altezza, imposta il colore di primo piano a # 000000 piuttosto che duplicalo per creare un cerchio fuori dalle forme e applica la sovrapposizione di sfumature a ogni forma, cambiando leggermente l'orientamento dell'angolo mentre ti sposti da una forma all'altra per dargli una tonalità più dinamica, in questo caso offrendoci più profondità. Raggruppa tutte queste forme e usando lo strumento Ellisse (U) crea un cerchio perfetto (467x467 px) sopra questo gruppo. Trasferisci la miniatura della maschera vettoriale dal cerchio che abbiamo creato al gruppo di forme ed elimina il cerchio.
Usando lo strumento Ellisse (U) disegna un altro cerchio perfetto (469x469 px), riduci il livello di riempimento a 0 e applica gli stili di livello dell'esempio.
Usando lo strumento Penna (P) disegna una forma come quella nell'esempio. Fatelo intorno (425x425 px), impostate il colore di primo piano su # 8d8a8a e applicate la sovrapposizione sfumatura usando le impostazioni nell'esempio.
Raccogli lo strumento Ellisse (U) e crea un cerchio perfetto (405x405 px), imposta il colore di primo piano a # 232323 e applica gli stili di livello dell'esempio.
Duplica il cerchio precedente, riduci il livello di riempimento a 0 e applica gli stili di livello.
Usando lo strumento Ellisse (U) fai un cerchio perfetto (160x160 px), riduci il livello di riempimento a 0 e applica un tratto di 1 px, nero (# 000000) dal pannello Stile livello. Ora duplica questo livello e ridimensionalo per renderlo un po 'più piccolo di quello precedente prima di ottenere un risultato simile a quello dell'esempio.
Seleziona tutti i livelli, uniscili in un oggetto avanzato e imposta il livello di riempimento su 10%. Duplica questo oggetto avanzato altre 4 volte e posiziona i duplicati nei punti indicati dall'immagine di esempio e imposta il colore di riempimento su 5%.
Crea un nuovo gruppo e chiamalo Pannello di controllo. Usando lo strumento Penna (P) disegnate forme come quelle nell'esempio, una sul lato sinistro e un'altra sul lato destro del piatto. Crea le forme attorno a 300 px e. Il primo piano non è importante perché aggiungeremo una texture in cima alla forma e useremo solo la forma come base per la nostra struttura in legno. Dopo aver finito di disegnare le forme, applica gli stili di livello dell'esempio.
Apri e importa Wood Texture di Matthew Skiles e posiziona uno strato sopra la forma base sinistra e destra che abbiamo creato per il Pannello di controllo. Trasforma i livelli delle texture in Maschere di ritaglio e passa al passaggio successivo.
Usando lo strumento Penna (P) disegna 2 forme simili alle precedenti, ma un po 'più piccole. Ridurre il livello di riempimento a 0 e applicare gli stili di livello.
In questo passaggio creeremo le frecce di indicazione. Usando lo strumento Penna (P) disegna 2 forme come quelle nell'esempio. Imposta il colore di primo piano su # 000000 e applica gli stili di livello.
Aggiunta di testo con l'aiuto di Horizontal Type Tool (T). Usare Tahoma> Grassetto come font, impostare la dimensione su 6 e scrivere sotto la freccia sinistra "- (parentesi) REV" e sotto la freccia destra "+ (parentesi) FWD" e applicare a entrambi gli effetti Ombra esterna dagli stili di livello pannello usando le impostazioni dell'esempio.
Ora per aggiungere del testo al pannello di sinistra, che diventerà il nostro Equalizzatore. Usando lo Strumento tipo orizzontale (T) imposta la dimensione a 4 px, font su Arial> Narrow e annota "10hz 20hz 40hz 80hz 1khz 2khz 3khz 4khz 5khz 6khz" e applica l'effetto Ombra esterna mantenendo le impostazioni dell'esempio.
Utilizzando lo strumento Rettangolo arrotondato (U), impostare il Raggio su 2 px e disegnare 10 forme come quelle nell'esempio. Il colore di primo piano per le forme è # 000000. Impostare la modalità di fusione per i livelli su Luce morbida e applicare gli stili di livello dell'esempio.
Ora faremo i pulsanti EQ. Utilizzando lo strumento Rettangolo arrotondato (U), impostare il Raggio su 5 px e il colore di primo piano su #ffffff e disegnare 10 forme come quelle nell'esempio. Renderli intorno a 30 px di altezza e 20 di larghezza. Applica gli stili di livello e vai al passaggio successivo.
Usando lo Strumento di tipo orizzontale (T) inseriremo alcuni indicatori di intensità. Usando Tahoma> Regolare come font, 6 px come dimensione del carattere e colore di primo piano impostato su #ffffff scrivi una serie di "..." come nell'esempio. Ora imposta il carattere su Grassetto e mantieni le impostazioni precedenti, e scrivi, all'interno delle cerchie rosse che vedi sull'immagine di esempio, seguendo lo stesso ordine "-", "0", "+" e applica gli stili di livello a tutti i livelli di testo che abbiamo fatto in questo passaggio.
Ora passiamo al pannello di destra. Qui avremo il nostro controllo Pitch e molti altri pulsanti. Usando lo strumento Rettangolo arrotondato (U) imposta il Raggio su 2 px e disegna una forma come quella nell'esempio, successivamente applica uno stile Smusso e rilievo dal pannello Stili livello, utilizzando le impostazioni nell'esempio.
Ora usando lo strumento Rettangolo (U) disegneremo indicatori su entrambi i lati della forma che abbiamo fatto nel passaggio precedente. Imposta il colore di primo piano su # 00ffff e disegna una serie di forme rettangolari, proprio come quelle nell'esempio. Assicurati di tenere a mente uno schema e, quando disegni, crea una forma rettangolare di 22 px per 2 px, quindi disegna 4 forme da 18 px per 1 px e così via fino a raggiungere la parte inferiore della forma. Quando hai finito di disegnare le forme, selezionale tutte e uniscile in un oggetto avanzato e applica gli stili di livello indicati nell'esempio. Quindi duplica l'oggetto avanzato e lo specchia sull'altro lato della diapositiva.
Facciamo ora il pulsante Tempo. Utilizzando lo strumento Rettangolo arrotondato (U), impostare il raggio su 5px e disegnare una forma come quella nell'immagine. Fallo intorno a 45 px x 55 px e imposta il colore di primo piano a #dbdbdb, poi applica gli stili di livello visti nell'immagine di esempio.
Utilizzando lo strumento Rettangolare arrotondato (U) con il raggio impostato su 5 px, creare una forma come quella nell'esempio. Imposta il colore su #dbdbdb e applica gli stili di livello.
Prendi lo strumento Rettangolo (U) e disegna 3 forme #ffffff bianche come quelle nell'esempio. Sopra di loro disegnare altre 3 forme, stesse dimensioni delle precedenti, tranne fare tutti i 3 su pixel superiore a quelli bianchi. Imposta i colori di primo piano per queste ultime 3 forme a # 545353 e passa al passaggio successivo.
Usando lo strumento Ellisse (U) disegna 2 cerchi perfetti sul lato sinistro della nostra applicazione proprio sotto il pannello di controllo EQ. Crea le forme attorno a 89 px x 89 px e imposta il livello di riempimento su 0. Applica gli stili di livello visti nell'esempio e continua a leggere il passaggio successivo.
Crea 2 cerchi in più usando Ellipse Tool (U), alcuni pixel più piccoli questa volta, imposta il colore di primo piano a # 0a0a0a e applica gli stili di livello.
Usando lo strumento Ellisse (U) crea 2 cerchi piccoli come le forme viste nell'esempio, imposta il livello di riempimento su 0 e applica gli stili di livello.
Ora per aggiungere del testo e dei simboli. Sul pulsante sinistro, usando lo Strumento di tipo orizzontale (T), imposta il carattere su Calibri> Grassetto e la dimensione del carattere su 8 px e scrivi al centro del pulsante "/". Per il pulsante destro, usando le stesse impostazioni, scrivi "CUE". Ora usando lo Strumento Rettangolo (U) disegna 2 rettangoli come quelli nell'esempio, sul lato destro del "/" e sul lato sinistro, usando lo Strumento Penna (P) disegna un triangolo come quello nell'esempio. Applica lo stile di livello a tutti i livelli di testo e forma che abbiamo eseguito in questo passaggio.
In questo passaggio creeremo alcuni pulsanti più interessanti. Utilizzando lo strumento Rettangolo arrotondato (U), impostare il Raggio su 10 px e disegnare 7 forme quadrate come quelle nell'esempio, rendendole intorno a 53 px per 53 px. Imposta il colore di primo piano su # 000000, riduci il livello di riempimento al 10% e applica gli stili di livello.
Ora faremo i pulsanti della modalità normale. Usando lo strumento Rettangolo arrotondato (U) disegna solo 5 forme, come indicato nell'esempio, imposta il colore di primo piano su # 0a0a0a e applica gli stili di livello.
Usando lo Strumento Rettangolo (U), imposta il colore di primo piano su #ffffff e disegna forme rettangolari come quelle nell'esempio. Ora usando lo strumento Penna (P) mantieni il colore di primo piano su #ffffff e disegna forme triangolari come quelle nell'esempio. Raccogli lo strumento di tipo orizzontale (T) e annota negli stessi luoghi come nell'esempio le parole "PLAYLIST", "POWER", "EJECT", "RICERCA TRACCIA", "RICERCA". Quando hai finito, applica l'effetto Ombra esterna a tutti i livelli che abbiamo eseguito in questo passaggio.
Crea alcune forme rettangolari come quelle nell'esempio usando lo Strumento Rettangolo (U) e applica lo Stile livello. Fai attenzione a renderli di 1 px di larghezza.
Ora per rendere i pulsanti attivi. Utilizzando lo strumento Rettangolo arrotondato (U), impostare il Raggio su 10 px e disegnare 2 forme come quelle nell'esempio. Imposta il colore di primo piano su # 0a0a0a e applica gli stili di livello.
Seleziona Strumento penna (P) e disegna 2 forme triangolari come quelle nell'esempio. Imposta il colore di primo piano su #ffffff e applica lo stile di livello.
Ora per disegnare la spina USB. Utilizzando lo strumento Rettangolo arrotondato (U), impostare il Raggio su 10 px e tracciare una forma sopra il pulsante Playlist. Rendere le stesse dimensioni della base Playlist. Imposta il livello di riempimento su 10 e applica gli stili di livello.
Usando lo strumento Pennello (B) imposta la dimensione a 36 e la durezza a 0 e fai un piccolo nero # 000000 come quello nell'esempio. Ora usando lo strumento Selezione rettangolare (M), fai una selezione come quella nell'esempio ed eliminala. Ora il nostro punto diventerà un'ombra. Applica l'effetto Ombra esterna al livello del punto e, utilizzando lo strumento Penna (P), disegna una forma come quella nell'esempio. Imposta il colore di primo piano su # 000000 e applica gli stili di livello.
Seleziona nuovamente lo strumento Pennello (B) e imposta la dimensione del pennello su 49 px e la durezza sul 70% e crea un punto nero # 000000 come quello nell'esempio. Utilizzando lo strumento Selezione rettangolare (M), effettuare una selezione come quella nell'esempio ed eliminare quella parte. Imposta il livello di opacità al 40% e duplica il livello. Sposta il livello duplicato di 1 px a sinistra e premi CMD / CTRL + I (invertito) e imposta l'opacità per quest'ultimo livello al 10%.
Ora per disegnare i pulsanti Speed. Usando lo Strumento Rettangolo (U) disegna 2 linee #ffffff bianche come quelle nell'esempio, quindi passa a Ellisse (U) e disegna 3 cerchi come quelli nell'esempio. Imposta il livello di riempimento per tutte le forme su 0 e applica gli stili di livello.
Usando lo strumento Ellisse (U) disegna 3 cerchi, all'interno dei 3 cerchi precedenti, ma questa volta un po 'più piccoli. Questo rappresenterà il pulsante stesso. Imposta il colore di primo piano su # 0a0a0a per il pulsante centrale, questo sarà il nostro pulsante di stato attivo e applicherà gli stili di livello dell'esempio.
Imposta il colore di primo piano su # 0a0a0a per entrambi i pulsanti sinistro e destro, questo sarà lo stato inattivo per i pulsanti e applicherà gli stili di livello.
Usando lo strumento Ellisse (U) fai 2 piccoli cerchi come quelli nell'esempio, imposta il livello di riempimento su 0 e applica gli stili di livello.
Ora per aggiungere del testo. Usando lo Strumento di tipo orizzontale (T) annota nel mezzo di ciascun pulsante, da sinistra a destra i numeri "1", "2", "3" e applica gli stili di livello a ciascuno di essi.
Utilizzando lo strumento Rettangolo arrotondato (U), impostare il Raggio su 10 px e disegnare 3 forme come quelle nell'esempio nel pannello di destra. Riduci il livello di riempimento al 10% e applica gli stili di livello.
Ora crea un'altra forma usando lo Strumento rettangolo arrotondato (U), mantenendo il raggio a 10 px ma riduci la dimensione della forma in modo che possa adattarsi alla precedente. Imposta il colore di primo piano su # 000000 e applica gli stili di livello.
Disegna altre 2 forme usando lo Strumento rettangolo arrotondato (U), con il raggio impostato su 10 px come nell'esempio, imposta il colore di primo piano su # 000000 e il livello di riempimento su 10% e applica gli stili di livello.
Ora per rendere lo stato attivo. Utilizzando lo strumento Rettangolo arrotondato (U), impostare il Raggio su 10 px e disegnare 3 forme come quelle nell'esempio. Applicare gli stili di livello solo alla forma superiore, perché sarà il nostro pulsante di stato attivo.
Ora per lo stato normale, applica gli stili di livello visti nell'esempio ai pulsanti.
Aggiungere testo Usando lo Strumento tipo orizzontale (T), imposta il carattere su Tahoma> Normale, e la dimensione del carattere su 6 px e scrivi sotto ciascun pulsante il seguente testo "BPM LOCK", "VINIL", "RESET TEMPO" e applica l'effetto Ombra esterna a tutti i livelli di testo.
Usando Custom Shape Tool (U) inserisci Arrow 18, da Frecce e posizionalo al centro dell'ultimo pulsante. Vai a Modifica> Trasforma> Scala e posiziona un segno meno nell'impostazione Imposta una scala orizzontale, quindi applica l'effetto Ombra esterna, mantenendo le impostazioni visualizzate nell'esempio.
Usando Custom Shape Tool (U) inserisci il segno "NO", dai simboli e posizionalo nel mezzo del primo pulsante. Come la forma precedente, vai a Modifica> Trasforma> Scala e posiziona un segno meno nell'impostazione Imposta una scala orizzontale, quindi applica l'effetto Ombra esterna, mantenendo le impostazioni visualizzate nell'esempio.
Ora per creare alcuni indicatori attivi. Usando lo strumento Ellisse (U) disegna alcuni piccoli cerchi come mostrato nell'esempio. Imposta il colore di primo piano su # 00c52e per l'indicatore del pulsante di accensione e per il resto, impostalo su # 007dc5 e applica gli stili di livello.
Utilizzando lo strumento Rettangolo arrotondato (U), impostare il Raggio su 4 px e disegnare una forma come quella nell'esempio. Imposta il colore di primo piano su # 000000 e applica l'Ombra esterna. Raccogli lo strumento Rettangolo arrotondato (U), mantieni le stesse impostazioni e disegna un'altra forma, ma questa volta un po 'più piccola. Imposta il colore di primo piano su # 000000 e applica gli stili di livello.
Ora facciamo l'album Art Holder. Usando lo strumento Rettangolo (U) disegna una forma rettangolare come quella nell'esempio, imposta il colore di primo piano su # 00fbff e applica gli stili di livello. Ora apri e posiziona qualsiasi album artistico che ti piace. La mia scelta è stata Chase e Status, Album "More Than Alot". Trasforma il livello di copertina dell'album in una maschera di ritaglio. Ora usando lo strumento Penna (P) disegna una forma come quella nell'esempio. Aggiungi una maschera di livello e uniformemente usando un pennello di dimensioni medie, dipingi sulla maschera con il colore nero # 000000 per ottenere un risultato come nell'esempio. Imposta il livello di opacità al 20% e passa al passaggio successivo.
È arrivato a Digital dream Font e lo importa in Photoshop. Selezionate Strumento tipo orizzontale (T), impostate il Font su Digital dream Fat Skew Narrow e la dimensione Font su 12 px e scrivete "Chase & Status", "More than Alot" usando il bianco #ffffff come colore di primo piano. Conserva il carattere, ma modifica la dimensione da 12 px a 14 px e annota nella dimensione in basso a sinistra, come nell'esempio le parole "Pezzi - (piano feat B)" e sul lato destro del nostro display "00 00 00 "2 volte, e ridurre il livello di opacità per questo 2 livello di testo a 10 px. Ora in cima a loro mantenendo la stessa impostazione scrivi "02:13. 33" e "04:49. 02" esattamente come visto nell'esempio. Applicare l'effetto Bagliore esterno a tutti i livelli di testo.
Usando lo strumento Penna (P) disegna una forma come quella nell'esempio, aggiungi una maschera di livello ad esso e usando un pennello nero di dimensioni medie # 000000, schivalo via in modo da ottenere una transizione graduale dal bianco #ffffff alle informazioni sotto questo strato. Imposta il metodo di fusione per questo livello su Esclusione e il livello Riempimento su 7%.
Usando lo strumento Penna (P) disegna 2 forme come quelle nell'esempio. Imposta il livello di riempimento su 0 e applica gli stili di livello, quindi converti ciascuna forma in oggetto avanzato. Noterai che il Gradien è cambiato. Aggiungi maschere di livello a entrambi gli oggetti avanzati e spazzola via la parte inferiore, usando un pennello nero medio # 000000.
Seleziona Strumento penna (P) e disegna 2 forme, come quelle nell'esempio. Imposta il colore di primo piano su # 0c0c0c e applica lo stile di livello.
Usando lo Strumento Rettangolo (U) crea una serie di forme rettangolari come quelle nell'esempio. Imposta il colore di primo piano su #ffffff per tutti e raggruppali per i lati EX: "EQ gruppo di sinistra". Trasforma i gruppi in oggetti intelligenti e vai a Modifica> Trasforma> Deforma. Tirare gli angoli per ottenere un risultato simile a quello nell'esempio e ridurre il livello di riempimento al 10%.
Duplica Smart Obkects dal nostro passaggio precedente. Imposta il livello di riempimento su 100% e applica gli stili di livello. Ora usando lo strumento Lazo poligonale (L) fai 2 selezioni come quelle nell'esempio e aggiungi una maschera di livello a ciascun oggetto intelligente.
Usando lo strumento Penna (P) disegna 2 forme come quelle nell'esempio. Imposta il colore di primo piano su #ffffff, aggiungi una maschera di livello e togli il lato inferiore usando un pennello nero medio # 000000, come mostrato nell'esempio. Riduci il livello di riempimento al 20% e applica lo stile di livello. Seleziona Strumento penna (P) e disegna #ffffff una forma bianca come quella nell'esempio. Vai a Filer> Sfocatura> Sfocatura movimento e imposta Distanza a 40 e Angolo a 0. Riduci l'opacità al 30% e abbiamo finito.
Puoi giocare, creare nuovi elementi, cambiare colore e forma. Sperimentare! Questa è sempre stata la chiave per imparare. Spero ti sia piaciuto questo tutorial. Grazie per aver letto!
Accentsconagua