Share
In questo tutorial, progetteremo l'interfaccia utente di un'applicazione iPhone basata finanziariamente su Photoshop. Useremo un carico di camion di tecniche moderne per rendere davvero questo pop design! Il tutorial sarà diviso in due parti, quindi assicurati di iscriverti tramite RSS o e-mail per controllare il resto del tutorial!
Con qualsiasi design, dovresti iniziare con uno schizzo, anche se è veramente approssimativo. Stiamo progettando un'interfaccia adatta per un'applicazione finanziaria, come una banca, in cui è possibile controllare il saldo, le dichiarazioni, ecc. Stiamo solo creando alcune schermate dell'applicazione in tutte e due le parti di questa serie di tutorial: la home page, la pagina dell'istruzione e la pagina dell'account add. Queste tre pagine consisteranno in icone / navigazione, un elenco e alcuni campi di testo. Se desideri creare più pagine dopo il tutorial, saranno fondamentalmente composte dagli stessi elementi che impareremo a creare.
Di seguito è riportato uno schizzo in uno schizzo dell'interfaccia utente che ho creato per basare il design dell'applicazione su:
Stiamo progettando l'applicazione sulle ultime dimensioni di iPhone 4, che misurano 640x960 pixel con una risoluzione di 326ppi. Apri Photoshop e vai a File> Nuovo. Crea il nuovo documento utilizzando queste impostazioni:
Dirigiti verso Teehan + Lax per scaricare il pacchetto per iPhone 4 GUI PSD (Retina Display). Questo pacchetto ci permetterà di afferrare gli elementi per la nostra applicazione, anche se non ne useremo molti perché la maggior parte del nostro design è altamente personalizzato.
Apri il file appena scaricato in Photoshop. Nel pannello dei livelli, trova la cartella denominata "barra superiore (applicazione)". Seleziona questa cartella e trascinala nel tuo PSD di progettazione dell'applicazione.
Torna al file PSD degli elementi della GUI e trascina su un livello "Barra (grigio - blu)":
Infine, trascina sopra la cartella "barra in basso". Li modificheremo molto. Se stai leggendo questo tutorial, probabilmente sai già come giocare con forme semplici, quindi dovresti essere in grado di creare qualcosa di simile a questi in ogni caso. La prima cosa è rimuovere i due pulsanti "indietro" e "modifica" dalla nostra barra in alto, poiché non ne avremo bisogno. Rimuovere le cartelle "pulsante indietro" e "pulsante blu" dalla cartella "Bar (grigio - blu)".
Cominceremo a giocherellare con i nostri colori ora e baseremo il resto dell'applicazione sui colori che decidiamo di usare nelle barre che abbiamo già. Apri la finestra degli stili di livello per il livello "sfondo" nella cartella "Bar (blu - grigio)".
Utilizzerò una combinazione di colori verde e argento per il mio design dell'applicazione. Dalla finestra degli stili di livello, apri la sezione di sovrapposizione della sfumatura, quindi apri la finestra dell'editor della sfumatura, come mostrato di seguito:
Cambia i colori in un colore a tua scelta. Sto usando due colori nella mia sfumatura, passando dal buio (# 719100) alla luce (# A1CF00).
Lo strato successivo, intitolato "oscurità inferiore", è troppo evidente per l'aspetto sottile che ho intenzione di fare nel mio progetto, quindi riduci l'opacità a circa il 50%. Fai lo stesso per il livello successivo intitolato "top highlight".
Ora aggiungeremo del rumore alla nostra barra in alto. Seleziona tutti e 4 i livelli nella nostra cartella "bar top", quindi fai clic con il tasto destro e seleziona "Rasterizza layer".
Crea un nuovo livello e chiamalo "rumore della barra superiore", posizionalo sopra il livello "sfondo", come mostrato di seguito:
Tieni premuto Cmd-Key (o Ctrl-Key su Windows) e fai clic sulla miniatura nel pannello dei livelli accanto al livello "sfondo". Questo dovrebbe fare una selezione della tua forma. Fai clic sul livello "rumore della barra superiore", quindi riempi la forma con il bianco.
Vai a Filtro> Disturbo> Aggiungi disturbo, e utilizzare le seguenti impostazioni:
Dopo aver premuto il pulsante OK, modifica la modalità di fusione dei livelli su "Sovrapponi" e abbassa l'opacità al 25%. Questo aiuta ad aggiungere un po 'di dettagli alla nostra progettazione dell'applicazione. Durante il tutorial useremo il rumore sottile come trama, quindi assicurati di ricordare come l'abbiamo fatto!
Ora cambieremo il colore della nostra barra di stato (la barra più in alto che mostra il segnale del telefono, ecc.). Usando la stessa tecnica usata in precedenza per cambiare il colore della barra in alto, cambia la barra di stato in una sfumatura verde scuro.
Passa attraverso i diversi livelli e cambia tutti gli oggetti della barra di stato in bianco (come la batteria, il tempo ecc.). Questo è molto facile da fare, è sufficiente rimuovere tutti i gradienti e sostituirli con una sovrapposizione di colore nella finestra di stile del livello.
Ingrandisci la barra superiore e seleziona lo strumento Selezione rettangolare. Fai una piccola, ampia selezione sulla parte superiore della barra in alto, assicurandoti che sia alta solo 2px.
Crea un nuovo livello nella cartella "barra superiore", assicurandoti che sia posizionato sopra tutti gli altri livelli. Chiamalo "top stroke" e, infine, riempi la selezione con il bianco, abbassando l'opacità del nuovo livello al 45%.
È ora di cambiare il testo che attualmente legge "Etichetta". Seleziona lo strumento di testo e fai clic sul testo, permettendoci di modificarlo. Digita qualcosa che si adatti alla tua idea di applicazione, nel mio caso è "Bankapp".
Giocare con caratteri e dimensioni - Ho intenzione di utilizzare un carattere chiamato "Blue Highway" impostato a 10pt.
Apri la finestra degli stili di livello per il testo e rimuovi completamente le impostazioni Ombra esterna. Clicca OK.
Duplica il tuo livello di testo e cambia il colore del testo originale in verde scuro. Spingi il vecchio testo verso il basso di 2 pixel, quindi a destra di 2 pixel. Abbassa l'opacità al 25%.
Ora lavoreremo alla barra in basso. Ho intenzione di fare il mio argento. Guardando indietro sullo schizzo, la barra sarà divisa in due pulsanti. Usando lo stesso processo usato in precedenza, cambia la barra blu inferiore in una barra d'argento. Ho usato un accenno molto piccolo di verde nei miei colori per dargli quel tocco in più. I colori che ho usato sono # B9BFB7 e # E8EDE6.
Usando la stessa tecnica che abbiamo usato prima, aggiungiamo un po 'di rumore alla barra in basso.
Riempi il tuo sfondo principale con un grigio chiaro (ho usato # F9F9F9). Vai a Filtro> Disturbo> Aggiungi disturbo e aggiungi un po 'di rumore al tuo background.
Seleziona lo strumento selezione rettangolare e fai due piccole selezioni sopra la barra inferiore e sotto la barra superiore. Riempi di nero su un nuovo livello direttamente sopra il livello di sfondo principale.
Vai a Filtro> Sfocatura> Sfocatura gaussiana e sfoca le tue nuove forme di circa 15 pixel.
Cambia l'opacità dei livelli al 15%. Queste nuove forme sfocate agiranno come ombre sotto le nostre barre, come mostrato di seguito:
È ora di mettere in ordine i nostri livelli: questa è una parte essenziale non solo del design dell'interfaccia utente mobile, ma di qualsiasi design. Un pannello di livelli disordinato porta a un cervello disordinato e ti prenderai a calci quando non riesci a trovare il livello di cui hai bisogno! Organizza i tuoi livelli in modo strutturato e adatto a te; il mio può essere visto sotto:
Prima di finire questo tutorial, creeremo le icone per la nostra barra in basso. Creare un nuovo livello e selezionare lo strumento Selezione rettangolare. Trascina una piccola selezione tenendo premuto il tasto Maiusc per tenerlo quadrato. Riempi di nero.
Sposta la selezione a destra utilizzando i tasti cursore, quindi ricarica di nero. Ripeti il processo finché non hai qualcosa che assomigli a questo ...
Zoom indietro. Se i governanti non lo stanno già mostrando, abilitalo andando a Visualizza> Righelli. Dai righelli, trascina le guide lungo tutto il documento in modo da sapere dove si trova il centro (larghezza) della schermata principale e la barra in basso.
Usa le guide per allineare l'icona menu / home - potresti dover ridimensionare l'icona per adattarla bene alla barra in basso, puoi farlo andando a Modifica> Trasforma> Scala.
Apri la finestra degli stili di livello per l'icona. Applica una sfumatura a sovrapposizione, un'ombra esterna, un'ombra interna e un tratto. Tutto di cui può essere visto sotto:
Crea un'icona per rappresentare la schermata delle impostazioni e riapplica gli stessi effetti.
Afferra lo strumento selezione rettangolare e crea una selezione verticale larga solo 1px, come mostrato di seguito.
Crea un nuovo livello e riempi la selezione con il nero. Duplica il livello e spostalo di un pixel verso destra usando i tasti cursore. Riempi questa linea con il bianco.
Cambia la modalità di fusione dei due strati in Sovrapponi e allinea le linee al centro della barra di navigazione.
Questo è tutto per il numero uno di questo tutorial! Abbiamo creato la struttura principale e la combinazione di colori del nostro design dell'applicazione. Nel prossimo tutorial, creeremo il contenuto per la home page, la dichiarazione e aggiungeremo le schermate dell'account, e rimarremo intrappolati in tutti gli elementi di design che renderanno il design ben coordinato.
Accentsconagua