Share
Questa è la seconda di una serie di tutorial in due parti sul reskinning di un'applicazione per iPhone con Photoshop. Hai bisogno di recuperare? Leggi la prima parte su PSDTuts +! In questo tutorial copriremo il resto del design dell'interfaccia dell'applicazione, prestando molta attenzione a dettagli piccoli e delicati, come la tipografia, la progettazione dei pulsanti e i campi di immissione testo, che renderanno il design complessivo pop.
Abbiamo completato il tutorial precedente con la nostra pagina di avvio delle applicazioni completata, così come lo sfondo principale per i nostri schermi e l'intestazione / barra di navigazione per ogni schermata.
Una volta aperto il documento in Photoshop, andremo direttamente al lavoro sulle nostre icone. Nel tutorial precedente abbiamo già impostato lo sfondo, l'area della barra degli strumenti e lo sfondo del testo (dove posizioneremo il nostro testo, i pulsanti e tutto il resto). Vogliamo quattro icone diverse, ognuna delle quali rappresenterà la stessa cosa nell'applicazione originale. Le quattro icone sono:
Per creare le nostre icone, utilizzeremo alcune guide per il righello per assicurarci che abbiano tutte le stesse dimensioni. Vai a Visualizza> Righelli se non sono già sul tuo schermo. Trascina un paio di guide dai righelli e posizionale accanto al nostro sfondo bianco.
Seleziona il strumento per selezione di un'area rettangolare e creare una selezione di dimensioni fisse di 100x75 px. Fai clic da qualche parte sulla tela e posiziona la selezione accanto alla tua guida sinistra nell'area della barra degli strumenti.
Trascina un'altra guida dal righello e fallo finire direttamente alla fine della selezione (dovrebbe scattare automaticamente).
Ripeti il passaggio, trascinando una guida nella parte superiore e inferiore della selezione.
Continua a ripetere questo passaggio finché non abbiamo quattro diversi rettangoli composti da guide.
Queste forme verranno utilizzate per inserire le nostre icone. Il motivo per cui sono più larghe di quanto non siano alte è perché metteremo anche il titolo delle icone al di sotto di esso. Centreremo ogni singola icona e elemento di testo all'interno della nostra griglia.
Usando la stessa tecnica che abbiamo appena usato, aggiungiamo altre guide in modo da sapere dove posizionare le nostre icone e il testo, come mostrato di seguito:
Anche se sembra confuso, una volta che avremo iniziato a progettare icone e inserire il nostro testo, le cose sembreranno molto più semplici.
Ora abbiamo impostato le nostre guide, in realtà possiamo iniziare a progettare icone e testo. Ho intenzione di iniziare con il testo. Prendi il Strumento di testo e selezionare un font pulito e di facile lettura. Il testo sarà molto piccolo, quindi deve essere pulito! Userò Helvetica per tutti i font del mio corpo. Inserisci gli spazi vuoti che hai creato per il tuo testo assicurandoti di posizionare le tue caselle di testo nella cartella della barra degli strumenti.
Raccomando di allineare manualmente il testo usando i tasti cursore come le opzioni di allineamento (testo) di Photoshop incorporate a volte possono essere un po 'spente, ed è importante che questi titoli brevi siano centrati bene. Una volta inserito il testo, è necessario aggiungere alcuni stili. Apri la finestra Stili di livello (Opzioni di fusione) e assicurati che l'icona di anteprima sia selezionata.
Il primo stile che applicheremo è un semplice Overlay colore. Sto usando il colore # 955425, una tonalità marrone medio che ho preso dal titolo dell'intestazione dell'applicazione.
Lo stile successivo da aggiungere è un semplice tratto da 1 pixel che utilizza il colore E5C39B. Assicurati che il tratto sia applicato all'esterno del testo e non all'interno.
Per rendere il testo più facile da leggere e adattarlo maggiormente al nostro stile di legno, applicheremo uno stile di ombreggiatura interna. Imposta l'opacità del tuo stile al 65% e la distanza e la dimensione a 2 pixel. Ho angolato la mia ombra interiore a 45 gradi.
Dopo aver applicato gli stili, ma facendo clic sul pulsante OK, è necessario applicare gli stessi stili agli altri titoli delle icone. Per fare ciò, seleziona il tuo livello di testo "Uscire" e poi vai a Fare clic con il tasto destro> Copia stile livello. Seleziona gli altri livelli di testo contemporaneamente, tenendo premuto il tasto Maiusc, quindi vai a Fare clic con il tasto destro> Incolla stile livello applicare lo stesso stile agli altri titoli.
Ora che i titoli delle icone sono finiti, è tempo di creare delle icone semplici. Per creare le nostre icone utilizzeremo le varie Strumenti di selezione. La prima icona che stiamo per produrre è l'icona dei report, in quanto sarà la più semplice! Crea un nuovo livello e chiamalo "Icona Rapporti".
Vogliamo che l'icona si inserisca bene nella nostra guida quadrata che abbiamo creato per questo. Seleziona il strumento per selezione di un'area rettangolare e fai una piccola selezione all'interno del tuo quadrato, come mostrato di seguito:
Riempi la selezione con il nero, quindi sposta la selezione verso il basso di alcuni pixel e ripeti il processo. Continuate a farlo finché non avrete una bella fila di forme nere.
Fai una nuova selezione, questa volta andando orizzontalmente anziché verticalmente.
Premi il tasto di cancellazione per rimuovere le aree non necessarie delle righe che abbiamo appena creato. Ciò creerà un'icona che rappresenterà facilmente un elenco o un documento del tipo di rapporto. Incolla il tuo stile di livello che abbiamo appena creato sull'icona.
Prima di passare a qualsiasi altra icona, trascina una nuova guida dal righello e posizionala direttamente sotto la nostra nuova icona, come mostrato di seguito:
Per la nostra icona delle impostazioni, creeremo un'icona a forma di chiave semplice. Crea un nuovo livello e chiamalo "Icona Impostazioni". Seleziona il Strumento Lazo poligonale e mentre si tiene premuto il tasto Maiusc, creare la forma di una mezza chiave come mostrato di seguito:
Riempi la forma con il nero e quindi duplica il livello.
Vai a Modifica> Trasforma> Rifletti verticale per capovolgere la forma della chiave duplicata. Vai a Modifica> Trasformazione libera e mentre si tiene premuto il tasto Maiusc, ruotare la seconda chiave a metà giro.
Usando i tasti cursore, spingere insieme la forma della chiave, quindi unire i due strati chiave insieme.
Sposta, ruota e ridimensiona la tua chiave finché non sembra buona, quindi applica gli stili di livello copiati su di essa.
Usando tecniche simili, crea le tue icone "spendometer" e "going out". Puoi rimuovere le tue guide in seguito andando a Visualizza> Cancella guide.
Individua individualmente ciascuna delle quattro icone e riduci l'opacità di esse a circa l'80%. Ciò consentirà di mostrare parte della venatura del legno e darà un po 'più di profondità alla barra di navigazione generale.
Seleziona ognuna delle tue icone e titoli di icone e duplicali. Uniscili tutti insieme andando a Livello> Unisci giù. Apri le Opzioni di stile livello (Opzioni di fusione) per il tuo nuovo livello unito e rimuovile tutte separatamente da Sovrapposizione colore. Cambia il colore della sovrapposizione in bianco e fai clic su OK.
Posiziona il tuo nuovo livello di livello bianco sotto tutti gli altri livelli dell'icona e del titolo dell'icona, quindi, utilizzando i tasti del cursore, sposta il livello di un pixel verso il basso. Abbassa l'opacità del livello a circa il 20%. Questo è un cambiamento molto sottile, ma tutti si aggiungono alla qualità del look finale dell'app.
Con le icone di navigazione fatte e spolverate, è ora di passare all'area del contenuto principale. Come menzionato nella prima parte del tutorial, molti schermi sono abbastanza simili (solo titoli diversi), quindi ci concentreremo solo su alcuni degli schermi:
Cominceremo con la schermata Spendometro. Seleziona il tuo Strumento di testo e usando lo stesso tipo di carattere usato per i titoli delle icone, digita "Spendi contanti di nuovo? Quanto stavolta?" nella parte superiore della tua scatola bianca. La dimensione del mio carattere era impostata su 4pt. Assicurati di creare questa nuova casella di testo nella cartella dei livelli dello spendometro.
Aprire la finestra Stile livello (finestra Opzioni di fusione) per il livello di testo successivo. Applicare uno stile sovrapposizione colore, utilizzando il colore # 613111 (un marrone scuro). Aggiungi anche un'ombra esterna utilizzando le impostazioni standard con un'opacità del 15%.
Il prossimo compito è quello di creare la nostra casella di testo e il nostro pulsante. Seleziona il strumento per selezione di un'area rettangolare e creare una dimensione fissa di 550x100 pixel. Fare clic sulla tela e centrare la selezione. Crea un nuovo layer e chiamalo "Money Entry". Vai a Seleziona> Modifica> Smussa e inserisci un raggio di 5px e fai clic su OK.
Riempi la tua selezione con il nero. Prima di deselezionare la tua forma, vai a Seleziona> Modifica> Contratto e contrai la tua forma di 10 pixel. Crea un nuovo livello e chiamalo "Campo di inserimento denaro", completa la tua nuova selezione con il nero.
Seleziona il tuo layer "Money Entry" e apri la finestra Opzioni di fusione. Applicare una sovrapposizione colore usando il colore # E4DCD5. Aggiungeremo anche un'ombra interiore molto sottile, usando le opzioni viste di seguito:
Riduci l'opacità del livello su cui abbiamo lavorato a circa il 50%. Apri la finestra Opzioni di fusione per il tuo livello chiamato "Campo di inserimento denaro". Applicare una sovrapposizione colore bianca pura al campo di testo e un tratto 1px utilizzando il colore # C0B8B0.
Duplica le due forme che abbiamo appena creato e spingile verso il basso. Rinominali in "Spent Background" e "Spent Button". Apri la finestra Opzioni di fusione per il tuo livello chiamato "Pulsante Speso". Rimuovi tutte le opzioni correnti e applica una sovrapposizione sfumatura. Utilizzerò i colori verdi passando da # 50911B a # A0D327. Una volta che sei soddisfatto della sovrapposizione della sfumatura, premi il pulsante OK.
Aggiungiamo qualche tocco in più al nostro pulsante, ma dato che saremo molto precisi con loro e presteremo attenzione a tutti i piccoli dettagli, lo faremo manualmente. Seleziona il contenuto del tuo livello pulsante.
Crea un nuovo livello sopra il tuo pulsante e chiamalo "Button Outer Stroke". Vai a Modifica> Tratto e applicare un tratto di 1 pixel utilizzando qualsiasi colore all'esterno della selezione.
Apri la finestra Opzioni di sfumatura dei tratti del tratto e applica un gradiente predefinito con colori che vanno da # 30580F a # 86BD23.
Ripeti di nuovo l'ultimo paio di passaggi, ma questa volta utilizzando un tratto di 1 pixel all'interno della selezione e utilizzando una sfumatura che va da # 53941B a # E2E8D4.
Seleziona il Strumento di testo e trascina una casella di testo sopra il tuo pulsante. Digita "SPEND IT" nella casella di testo. Ho usato Helvetica Bold set a 8 punti (misura). Allinea il tuo testo al centro del tuo pulsante.
Applicare una sovrapposizione sfumatura al testo, passando da un grigio molto chiaro (ho usato #EBEBEB) a bianco (#FFFFFF). Vogliamo anche applicare un'ombra interiore utilizzando le impostazioni visualizzate di seguito:
Crea una selezione della forma originale del pulsante e quindi crea un nuovo livello sopra tutti gli altri livelli dei pulsanti. Chiamalo "Button Noise". Riempi la selezione con il bianco, quindi vai a Filtro> Disturbo> Aggiungi disturbo. Aggiungi circa il 25% di rumore, quindi fai clic su OK.
Cambia la modalità di fusione dei livelli in Luce soffusa e abbassa l'opacità del livello a circa il 50%. Questo aggiunge un bel tocco di texture al nostro pulsante. Ora ce l'abbiamo fatta, abbiamo finito con il nostro design di pulsanti! Un modo rapido, semplice ed efficace per rendere il pulsante come se fosse stato premuto è semplicemente ruotando il bottone di 180 gradi, in modo che il verde più scuro sia in alto anziché in basso.
Nella progettazione dell'applicazione originale c'erano schermi separati per le statistiche dello spendometro (la pagina che mostra quanto hai speso e quanto hai lasciato da spendere) e la pagina che abbiamo appena progettato. Tuttavia, ritengo che non sia necessario avere due schermi, quindi ridurrò solo quello e metto tutte le altre informazioni sullo stesso schermo di quello che abbiamo appena progettato.
Le informazioni che devono essere visualizzate sotto il nostro pulsante sono le seguenti:
Dopo aver aumentato di nuovo le dimensioni della mia "Spesa in contanti?" Quante volte questa volta? " testo, passerò alle "statistiche" sotto il pulsante. Trascina alcune guide sulla tua tela come mostrato di seguito:
Prendi il Strumento di testo e trascina una casella di testo nello spazio rimanente sullo schermo. Inserisci il tuo primo titolo ("Current Spend Rate") e poi applica lo stesso stile che abbiamo usato per "Spendere contanti ancora?" testo al tuo nuovo tipo.
Ripeti il passaggio due volte usando gli altri titoli delle statistiche.
Abbassa l'opacità dei tre tipi di strati a circa il 90% per renderli solo leggermente più leggeri dell'altro testo. Questo non fa un'enorme differenza, ma li differenzia leggermente. Duplica il tuo livello di tipo "Current Spend Rate" e spostalo nella colonna di destra. Cambia il testo in "$ XX.XX al giorno". Aumenta un po 'la dimensione del tuo carattere e allinala al centro della colonna usando i tasti del tuo cursore.
Ripeti il passaggio in modo da ottenere qualcosa di simile allo screenshot qui sotto:
Per completare queste statistiche, aggiungeremo un bordo piacevole e sottile a 2px. Crea un nuovo livello e chiamalo "Bordo bianco tracciato". Seleziona il tuo Strumento per selezione singola riga e fai una selezione tra il tuo pulsante "Spend It" e il titolo "Current Spend Rate". Riempi la selezione con un colore leggermente più scuro dello sfondo - Sto usando # E1D9D3.
Duplica il livello e rinominalo "Tracciato nero con il bordo" e spostalo verso il basso di un pixel in modo che la nuova riga si trovi direttamente al di sotto della precedente. Seleziona il contenuto dei livelli e riempilo con un colore leggermente più scuro di quello che abbiamo appena usato - Ho usato # A59C93.
Come puoi vedere dallo screenshot qui sopra, il nostro bordo / separatore si sovrappone alle aree che non vogliamo. Seleziona il livello "Tracciato nero bordo" e premi il tasto Cmd + E combinazione per unirlo al livello del tratto bianco. Rinominare il livello in "Separatore". Seleziona il strumento per selezione di un'area rettangolare e fai una selezione sul lato sinistro dello schermo.
Colpire il Elimina-Key rimuovere il separatore non necessario. Sposta la selezione sul lato destro e ripeti la procedura.
Usando i tasti cursore, sposta il separatore verso l'alto / il basso per assicurarti che sia centrato tra la parte inferiore del pulsante e la parte superiore del testo: il mio è esattamente 30px sotto il mio pulsante e 30px sopra il mio testo. Riduci l'opacità del livello dei separatori a circa il 50%. Ho quindi deciso di girarlo in modo che il colore più chiaro sul fondo, come ho sentito questo sembrava migliore.
Ripeti il procedimento diverse volte fino a quando c'è un separatore sotto ogni riga di testo - un modo rapido per farlo è semplicemente duplicando ogni livello precedente, e poi spingendolo verso il basso nella quantità corretta. Ho anche spostato verso il basso l'intera cartella delle statistiche in modo che si trovi al centro tra il pulsante e la parte inferiore della nostra area di sfondo bianca.
Aggiungi alcuni tocchi finali, come cambiare i colori delle nostre figure che sono lasciati da spendere. Ho anche riallineato le mie figure a destra.
Dopo aver aggiunto del testo fittizio al nostro campo di testo del denaro, abbiamo terminato il nostro primo progetto di schermi! Il pulsante qui è chiaramente accattivante, con la sua sfumatura verde vivace e l'attenzione ai piccoli dettagli come i tratti bianchi e neri.
Il resto delle nostre pagine (come elencato sopra) userà una combinazione delle tecniche che abbiamo già usato nei passaggi precedenti in questo tutorial e nella prima parte. Metti le tecniche che hai imparato ad usare per produrre da solo il resto del design dell'applicazione.
Di seguito sono riportati gli screenshot del progetto originale accanto all'interfaccia utente dell'applicazione riprogettata che hai imparato a creare da solo.
Quindi, ce l'abbiamo, il nostro risultato finale di questo tutorial in due parti, ragionevolmente lungo, è diventato abbastanza buono! Pubblica link al tuo risultato nella sezione commenti qui sotto - ci piacerebbe vederli!
Stiamo attivamente cercando i progettisti per contribuire con le loro competenze di progettazione mobile alla nostra comunità. Contattaci oggi se sei interessato a scrivere contenuti a pagamento!
Accentsconagua