Share
Questa serie di tutorial illustrerà tutti i passaggi necessari per la riprogettazione di un'applicazione iPhone con Photoshop. Imparerai molte delle considerazioni e schemi di progettazione unici utilizzati durante la creazione di interfacce di app standalone. Questo tutorial è presentato in due parti in collaborazione con Mobiletuts +, dove potrai trovare in futuro una quantità crescente di tutorial sul design mobile. Leggi la seconda parte di questa serie e scarica l'interfaccia PSD su Mobiletuts+.
Benvenuti alla prima parte della nostra serie di tutorial sulla riprogettazione dell'applicazione Spendometer per iPhone! L'applicazione è una piccola e fantastica app che ti consente di rispettare un budget. Come estratto dal sito Web di Apple, questo è ciò che fa lo Spendometro:
Se stai cercando di rispettare un budget, è una buona idea tenere un registro di tutto ciò che spendi, ma è un duro lavoro scrivere tutto su un quaderno. Lo Spendometro Moneybasics è un'applicazione che rende il bilancio giornaliero semplice e pratico. Il Spendometro ti consente di impostare un budget, registrare le tue spese e visualizzare i rapporti di spesa per vedere dove e quanti soldi sono stati spesi finora in una determinata settimana o mese, tutto mentre sei in viaggio. Ha anche una funzione che ti aiuta a tenere traccia delle tue spese per una serata fuori.
Ogni volta che acquisti qualcosa, inseriscilo nel Spendometro sul tuo telefono e manterrà un record per te. Puoi impostare i tuoi limiti di spesa e scegliere la modalità di segnalazione della spesa, settimanale o mensile.
Lo Spendometro Moneybasics ti fornirà lo strumento essenziale per assicurarti di essere sempre aggiornato sulle tue finanze.
È davvero una bella piccola applicazione che soddisfa bene il suo scopo, ma siamo onesti, potrebbe fare con un po 'di TLC dal punto di vista del design. Qui sotto puoi vedere l'icona delle applicazioni e diversi screenshot dell'applicazione. Gli screenshot sono stati presi utilizzando un iPhone 4 - come puoi vedere, alcune aree sono pixelate, il che significa che devono ancora aggiornare la loro applicazione con una grafica ad alta risoluzione.
È consigliabile conoscere un po 'del design per l'iPhone prima di procedere con questo tutorial. Idealmente, dovresti leggere le linee guida per l'interfaccia umana di iPhone dal sito ufficiale degli sviluppatori di Apple.
Come per tutti i principali progetti, la prima cosa che dovresti fare è avere un'idea approssimativa di come vuoi che sia il tuo design. Il modo migliore per farlo è ovviamente lo sketch. Per le grandi applicazioni, molti progettisti dell'interfaccia utente tracceranno pagine e pagine di idee, annotazioni e brainstorms - poiché abbiamo già una struttura per l'applicazione che stiamo riprogettando, possiamo andare avanti con essa abbastanza rapidamente.
Di seguito sono riportati alcuni schizzi che ho messo insieme: sono idee molto approssimative, e solo un'idea generale di wireframe che ho nella testa di ciò che voglio che il design assomigli. Colori e stili possono aspettare fino a quando non arriveremo a quella fase in seguito!
L'immagine che ho nella mia testa è un'interfaccia molto semplice da usare, elegante, moderna e strutturata. Qualcosa che farà andare le persone "wow". Voglio anche che sia molto minimale - l'app è molto semplice, e quindi anche il design lo sarà. Non c'è bisogno di confusione inutile.
Ricorda che non devi seguire questo tutorial parola per parola, sperimentare cose diverse e mettere la tua creatività dietro le tecniche utilizzate. Ci piacerebbe vedere i tuoi risultati, quindi condividi i tuoi progressi nell'area dei commenti.
Un'altra cosa prima di iniziare: sto scrivendo questo tutorial durante la progettazione, non dopo aver completato il progetto. Penso che sia importante mostrare il processo creativo dietro un design. La maggior parte dei tutorial viene scritta dopo che i progetti sono stati completati e quindi non si vedono gli errori del progettista, o quanti tentativi di qualcosa li ha portati a ottenere qualcosa di giusto. Ogni designer fa questo, proprio come qualsiasi altro lavoro: le persone commettono errori, imparano da quegli errori e migliorano solo le cose. Quindi, se vedi che potresti tornare indietro mentre leggi questo tutorial, è perché ho deciso che qualcosa deve cambiare! Iniziamo!
Il primo passo è impostare il tuo documento. Progetteremo per il nuovo display Retina ad alta definizione dell'iPhone 4, il che significa progettare con una risoluzione molto più alta rispetto a quello che avevamo precedentemente fatto con l'iPhone 3GS.
Apri Photoshop e vai a File> Nuovo ... . Assegna un nome al tuo nuovo documento, ad esempio "Spendometer Redesign". Inserisci le tue dimensioni (non c'è preimpostazione in Photoshop per il nuovo display) per il display Retina iPhone 4, useremo 640x960 pixel, con una risoluzione di 326ppi (pixel per pollice), che è il nuovo standard. Puoi vedere le mie impostazioni qui sotto.
Il nostro prossimo passo è inserire in alcune forme fittizie la barra di stato (la barra con le informazioni sul telefono e l'ora), la barra di navigazione (la barra sotto la barra di stato) e la barra degli strumenti (la barra nella parte inferiore dello schermo).
Il modo migliore per farlo è inserire semplicemente uno screenshot preesistente di un'applicazione andando a File> Luogo.
Ora puoi usare il strumento per selezione di un'area rettangolare per selezionare le diverse aree del design e sostituirle con forme solide. Per ora userò solo il nero. Riempi questi nuovi livelli e rinomina i tuoi livelli con qualcosa di adatto come "Barra di navigazione" e "Barra degli strumenti". Creeremo forme base e aggiungiamo colore e dettagli in seguito. Puoi anche cancellare la maggior parte dello screenshot che abbiamo incollato - l'unico bit che conservo è la barra di stato come mostrato di seguito.
Ora abbiamo una tela per iPhone vuota pronta per iniziare la progettazione. La prossima cosa che vogliamo fare è creare alcune nuove cartelle nella nostra finestra dei livelli. Abbiamo bisogno di diverse cartelle per diversi schermi:
L'applicazione stessa ha in realtà alcune schermate in più rispetto a questa, ma ritengo che molte di esse non siano necessarie, quindi la ridurremo drasticamente, adattando più contenuti sullo stesso schermo. Ci mancheranno anche un paio di schermate che replicheranno praticamente gli altri schermi, con l'unica differenza dei titoli!
Crea una nuova cartella di livelli nella finestra Livelli per ognuna delle schermate elencate sopra. Puoi farlo cliccando sulla piccola icona della cartella nella finestra dei livelli. Non abbiamo ancora bisogno di inserire nulla in queste cartelle.
Voglio unire un design elegante e moderno con un pizzico di texture. La trama della scelta sarà il legno, questa texture per essere precisi (vale la pena $ 2-4). Dopo aver scaricato alcune trame, vai avanti e inseriscile nel tuo documento andando a File> Posiziona ... . Ridimensionare la trama in modo che si adatti perfettamente al design dell'interfaccia utente e unirla al livello di sfondo.
Vogliamo rallegrare la nostra trama un po 'perché non vogliamo che sia così audace. Crea un nuovo livello direttamente sopra il tuo sfondo di trama in legno e riempilo con il bianco usando il Strumento di riempimento. Abbassa l'opacità del livello al 35% per aggiungere un lavaggio bianco allo sfondo, quindi uniscilo verso il basso colpendo il Cmd + E (Ctrl + E) combinazione per applicare il lavaggio al nostro background.
Utilizzeremo anche una struttura di legno per la barra di navigazione e la barra degli strumenti. Dallo stesso pacchetto di GraphicRiver, seleziona una delle altre trame e inseriscile nel tuo documento. Ridimensionalo e posizionalo sulla barra di navigazione.
Una volta che sei soddisfatto di una determinata posizione, fai clic sulla miniatura dei livelli della barra di navigazione tenendo premuto il pulsante Cmd-Key per selezionare i contenuti dei livelli. Fai nuovamente clic sul tuo nuovo layer texture di legno e vai a Modifica> Copia per copiare la tua selezione. Elimina il livello texture e quindi incolla la selezione su un nuovo livello.
È giunto il momento di aggiungere uno stile alla barra di navigazione. Fai clic con il tasto destro del mouse sul nuovo livello della barra di navigazione e seleziona Opzioni di fusione per aprire la finestra Stile livello. Vogliamo aggiungere un paio di stili semplici alla nostra barra di navigazione che aumenterà notevolmente l'aspetto della nostra barra.
Prima di tutto, aggiungiamo un'ombra esterna. Ho usato un angolo di 90 gradi con un'opacità del 25%: tutte le altre opzioni sono impostate sui valori predefiniti.
Per dare un po 'più di profondità alla nostra barra di navigazione, applicheremo uno stile Bevel and Emboss. Questo stile ha un pessimo nome per se stesso a causa di un uso improprio, ma in realtà è uno strumento grande e molto potente che ti fa risparmiare un sacco di tempo. Applica una smussatura interna liscia al tuo livello, utilizzando una profondità del 100%, con una dimensione di 196 px e ammorbidisci il livello di 16 px. Riduci l'opacità delle modalità evidenziate al 20% e l'opacità delle modalità ombra al 55%.
Applicando questi due stili semplici, ci rimane qualcosa che sembra abbastanza intelligente!
Esegui lo zoom direttamente nella barra di navigazione, poiché è ora di aggiungere un bel tratto da 1 pixel al lato inferiore per aumentare l'attenzione ai livelli di dettaglio. Crea un nuovo livello sopra la barra di navigazione, quindi crea una selezione lunga 1px utilizzando la Strumento per selezione singola riga. Riempi la tua selezione con il bianco.
Cambia la modalità di fusione dei livelli in Sovrapponi e abbassa l'opacità al 70% per produrre il seguente risultato.
Per ora questa è la nostra barra di navigazione - ci torneremo più tardi per produrre i nostri stili di tipografia delle intestazioni.
Ho deciso che avere un'altra barra degli strumenti in legno nella parte inferiore dell'app sarebbe troppo "pesante", quindi invece scuriremo un po 'il fondo e posizioneremo invece le nostre icone di navigazione.
Selezionare il contenuto dei livelli della barra degli strumenti e quindi selezionare il Strumento Gomma. Seleziona una gomma morbida a 100 px e, tenendo premuto il tasto Maiusc, cancella l'area superiore della barra degli strumenti nera. Tenendo premuto il tasto Maiusc durante questa operazione, sarai in grado di cancellare il contenuto su una linea retta, invece di avere il pieno controllo su ciò che puoi cancellare.
Cambia la modalità di fusione dei livelli della barra degli strumenti per sovrapporre e abbassa l'opacità al 60%. Questo darà un aspetto leggermente bruciato dandoci uno sfondo piacevole pronto a mettere le nostre icone (una volta che le abbiamo progettate). Ora è il momento giusto per mettere la barra di navigazione e i livelli della barra degli strumenti nelle proprie cartelle di livelli separate.
Quindi siamo pronti per andare avanti. Ora stiamo progettando la nostra schermata di avvio, che sarà la schermata più semplice dell'applicazione in quanto non includerà alcuna barra di navigazione o barre degli strumenti. Nascondere la barra di navigazione e le cartelle del livello della barra degli strumenti e creare un nuovo livello (trasparente) nella cartella della schermata di avvio e chiamarlo "shadow".
Riempi il tuo nuovo livello con un colore solido scuro (sto usando # 333333) usando il Strumento di riempimento. Seleziona il contenuto del livello della barra di stato, quindi fai clic sul nuovo livello di schermata di avvio e premi il tasto Canc per rimuovere una piccola area del livello grigio per rivelare la barra di stato.
Duplica il tuo livello in modo da avere due della stessa forma. Sul nuovo livello, vai a Modifica> Trasforma> Trasformazione libera per far apparire la casella di trasformazione sul tuo nuovo shape / layer. Mentre si tiene premuto Alt e il tasto Maiusc contemporaneamente, ridimensionare la selezione. Tenendo premuto il tasto Maiusc si manterrà la forma in proporzione, mentre man mano che si tiene premuto il tasto alt lo si ridurrà equamente attorno ai bordi. Fai una selezione della tua nuova forma ridimensionata.
Elimina la tua nuova forma (pur avendo la selezione dal vivo) e quindi elimina la selezione dal tuo livello originale. Dovresti ritrovarti con qualcosa che somiglia allo screenshot seguente.
Vai a Filtro> Sfocatura> Sfocatura gaussiana e usa un raggio di circa 50 pixel per dare all'ombra un effetto liscio e sbavato.
Usando la stessa tecnica che abbiamo usato in precedenza, facciamo una selezione della barra di stato e rimuoviamo qualsiasi ombra sovrapposta dal nostro livello di ombra.
Duplica nuovamente il nostro livello ombra. Modifica la modalità di fusione dei livelli d'ombra di fondo in sovrapposizione e la percentuale di opacità al 100% e modifica la modalità di fusione dei livelli d'ombra più in alto con il normale e la percentuale di opacità al 25%.
Il prossimo passo è produrre il nostro logo tipografico. Faremo sembrare che il tipo sia stato inciso nel legno usando una manciata di stili e tecniche di livello. Prendi il tuo tipo di strumento e impagina del testo. Utilizza le impostazioni del tipo per allineare bene il testo.
Gioca con alcuni tipi di caratteri diversi fino a quando non ti sembra che stia andando bene. Ho deciso di utilizzare una combinazione di Stencil e Helvetica.
È giunto il momento di rendere la nostra tipografia simile a come è stata incisa nel nostro background. Faremo molta della nostra tipografia in questo modo attraverso il design dell'applicazione, in particolare le icone e i titoli nella barra di navigazione.
Questo tipo di effetto richiede molti stili di livello. La prima cosa che dobbiamo fare è cambiare il colore del nostro tipo. Usando il Strumento contagocce seleziona un colore scuro dallo sfondo, quindi applica quel colore alla tua tipografia.
Riduci l'opacità dei livelli dei tipi al 50%, quindi apri le opzioni di fusione dei livelli di testo. Il primo stile che applicheremo è un'ombra interiore, utilizzando le seguenti impostazioni:
Il prossimo stile che applicheremo è un'ombreggiatura molto sottile, utilizzando le seguenti impostazioni:
Infine, aggiungeremo un tratto al nostro testo, usando le seguenti impostazioni (il colore che ho usato è # E6D0B3).
Cambia la modalità di fusione dei tipi di testo con la scrittura lineare.
Stiamo per rendere la nostra ombra interiore un po 'più forte / più audace. Duplica il tuo livello di testo e modifica la modalità di fusione in saturazione: ciò lo renderà quasi trasparente, ma consentirà comunque a tutti gli stili di livello di apparire. Apri la finestra degli stili di livello e rimuovi completamente gli stili di ombreggiatura e di traccia. Fai clic sulla scheda ombreggiatura interna e modifica le impostazioni in qualcosa di simile a ciò che puoi vedere di seguito.
Ripeti di nuovo lo stesso passo, questa volta usando le seguenti impostazioni:
Come puoi vedere, abbiamo applicato molte più ombre alla nostra tipografia, senza l'effetto del colore reale, semplicemente cambiando la modalità di fusione in saturazione. La prima ombra aggiuntiva ha aggiunto un'ombra morbida attorno a ciascuno dei bordi allo stesso modo, mentre la seconda ombra aggiuntiva ha applicato un'ombra forte e acuta al solo lato superiore del nostro tipo.
La nostra schermata di avvio sembra davvero buona, e sembrerà ancora migliore una volta ridimensionata su quel display retina ad alta risoluzione!
Il nostro prossimo passo è ovviamente lo schermo Spendometro, che è la prima schermata da visualizzare dopo aver visto la schermata di avvio. Usando gli effetti che abbiamo appena usato nel passaggio precedente, imposta la tua tipografia e applica alcuni stili di livello belli all'intestazione Spendometer nella barra di navigazione. È ideale qui per creare duplicati della barra di navigazione; uno per ogni schermo. Ho impostato il livello di testo al 90% di opacità per lasciare passare un po 'della trama e ho utilizzato i seguenti stili di livello. Non è necessario creare ombre aggiuntive per questo tipo in quanto è molto più piccolo.
Ho deciso che la barra di navigazione nella parte superiore del design è un po 'troppo scura, o la tipografia è troppo leggera. Per risolvere questo problema, alleggerirò leggermente la barra di navigazione. Il modo più semplice per farlo è selezionare il livello della barra di navigazione, quindi andare a Immagine> Regolazioni> Luminosità / Contrasto. Aumenta la luminosità a 60 e il contrasto a 10.
Riduci l'opacità del nostro tratto da 1 pixel sotto la barra di navigazione per adattarlo meglio alla nuova barra di navigazione più leggera. L'ho abbassato al 40%.
Per consentire alla trama del nostro testo di intestazione di navigazione di apparire un po 'più chiara, cambio il colore del nostro tipo in una scelta molto più leggera, quindi imposta la modalità di fusione dei livelli per moltiplicare - ricorda che è tutta una questione di sperimentazione - tutte le modalità di fusione reagiscono ( molto) in modo diverso a seconda del colore della forma base.
Duplica il tuo livello di testo e riduci l'opacità al 40%. Questo per rendere il nostro tipo un po 'più scuro, riportandolo a quello che era prima, ma permettendoci comunque di mostrare più texture senza abbassare l'opacità.
Ora puoi copiare e incollare la cartella del livello delle schede di navigazione in ciascuna delle tue diverse cartelle dello schermo e modificarle per assomigliare al titolo di ogni schermata, come mostrato di seguito:
Questo è il titolo dell'intestazione fatto per ora - potremmo visitarli di nuovo più tardi. Come avrai capito, progettare per dispositivi mobili ha molto a che fare con tentativi ed errori.
Il nostro prossimo passo prevede la creazione di uno sfondo bianco pronto a collocare più elementi su di esso. Ciò significa che copriremo molto il nostro background in legno, ma in generale la visualizzazione su uno sfondo bianco e non strutturato è di solito un'esperienza molto più piacevole sugli occhi.
Seleziona il strumento per selezione di un'area rettangolare e scegli una dimensione fissa di 600x700px. Fare clic in qualsiasi punto della tela e centrare la selezione utilizzando i tasti freccia. Dovrebbe essere facile da organizzare in quanto vi sono esattamente 20 pixel tra i lati e la selezione su ciascun lato (sinistra, sopra e destra).
Crea un nuovo livello nella cartella dello spendometro e chiamalo come "Sfondo bianco". Vai a Seleziona> Modifica> Smussa e liscia le forme con un raggio di 5 pixel. Riempi di bianco.
Seleziona il Strumento di selezione ellittica e trascina una selezione uguale. Posizionalo sul fondo come mostrato di seguito e premi il tasto di cancellazione per rimuovere una piccola selezione del nostro sfondo bianco.
Apri la finestra degli stili di livello. Applicheremo una serie di effetti sul nostro sfondo bianco. Prima di tutto, aggiungeremo un ictus. Ho usato le impostazioni di seguito, con il colore # 6C4C24:
Successivamente applicheremo un'ombra interna per aggiungere un po 'più di profondità al nostro background. Le impostazioni che ho usato possono essere viste qui sotto:
Lo stile di livello finale che applicheremo è un'ombra esterna, che utilizza le impostazioni seguenti per far risaltare lo sfondo bianco un po 'più dall'intero sfondo dell'applicazione:
Riduci l'opacità dell'intero livello di sfondo bianco a circa il 75% per consentire a una piccola parte di quella venatura del legno di mostrare. Il nostro risultato finale (sotto) ci regala una bella tela bianca su cui posizionare i nostri elementi applicativi, rendendola facile da leggere ma piacevole da guardare.
Aggiungeremo una bassa opacità, un tratto nero da 1 pixel nella parte inferiore del livello del contenuto principale. Duplica il tuo livello di sfondo bianco e rimuovi tutti gli stili di livello. Riempi la forma con il nero e spostalo verso il basso di un pixel usando i tasti cursore. Posizionalo sotto il livello di sfondo bianco originale. Fai una selezione del tuo livello di sfondo bianco originale, quindi fai clic sul tuo nuovo livello duplicato e premi il tasto Canc. Abbassa l'opacità a circa il 40%. Dovresti finire con qualcosa di simile a questo:
Questa è la fine della prima parte del tutorial. Si consiglia di esportare il file di volta in volta come un'immagine jpeg ad alta risoluzione e visualizzarlo sul display dell'iPhone per assicurarsi che sia in buone condizioni. Ecco come appare la mia schermata di lancio (testeremo le altre schermate nel prossimo tutorial!):
La seconda parte di questo tutorial è disponibile su Mobiletuts + e copre il resto del design dell'applicazione. Salta su per finire la creazione dell'interfaccia!
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