Share
Questo è il secondo di una serie di tutorial in due parti sulla progettazione di un'applicazione bancaria per iPhone. In questa parte della serie, progetteremo il layout / contenuto principale di ciascuna di queste pagine: il menu / home page, la pagina di istruzioni e le schermate di aggiunta di account. Manca la prima parte? Leggi subito la lettura.
Seguendo da dove abbiamo lasciato, selezionare lo strumento Selezione rettangolare. Dal sovraccarico della barra degli strumenti, seleziona la dimensione fissa dal menu a discesa dello stile e utilizza le impostazioni 50 x 50 pixel. Fai clic da qualche parte sulla tela per creare una selezione di 50 x 50 pixel. Trascina la selezione fino al bordo della tela e trascina una guida dal righello (Visualizza> Righello) e agganciala alla selezione. Ripeti il processo finché non hai due guide su entrambi i lati della tela.
Posiziona una guida al centro della tela: dovresti riuscire a scattare automaticamente.
Ora trascina le guide e rendile centrali tra le due che abbiamo già realizzato, come di seguito:
Ora abbiamo una griglia molto semplice pronta a posizionare la nostra icona / pulsanti una volta che li abbiamo progettati. Seleziona lo strumento selezione rettangolare e il menu stile, seleziona dimensioni normali anziché fisse. Trascina un quadrato (tieni premuto il tasto Maiusc per tenerlo squadrato) tra le nostre guide di sinistra. Riempi di nero.
Ripeti il processo altre due volte, assicurandoti di riempire ogni forma su un nuovo livello.
Duplica tutti e tre i livelli e posizionali di 50 pixel sotto le forme precedenti.
Utilizzando lo strumento Selezione rettangolare, crea un solido blocco nero nella parte inferiore della schermata del menu e rinomina il livello in "annuncio".
Con la struttura principale della nostra schermata iniziale, è ora di iniziare ad aggiungere tutti quei piccoli dettagli che rendono il design prendere vita. Cmd + clic (Ctrl + clic su Windows) sulla prima miniatura del livello delle icone per riselezionarlo. Vai a Seleziona> Modifica> Smussa e inserisci 4 pixel, quindi fai clic su OK. Fare clic con il tasto destro e selezionare Seleziona inverso dal menu.
Premi il tasto Canc sulla tastiera per rimuovere gli angoli della selezione. Vai a Visualizza> Cancella guide per rimuovere tutte le tue guide.
Apri la finestra degli stili di livello per la tua prima icona. Applica un'ombra discendente, una sovrapposizione di colore e un tratto. Tutte le impostazioni possono essere visualizzate negli screenshot qui sotto:
Duplica il tuo livello e vai su Modifica> Trasforma> Scala. Mentre si tiene premuto il tasto Maiusc e il tasto Alt, ridimensiona un po 'la tua forma.
Apri la finestra degli stili di livello per il tuo nuovo livello e applica le seguenti impostazioni ai nostri effetti esistenti e rimuovi completamente l'ombra esterna ...
Duplica nuovamente il livello e rimuovi completamente gli stili di livello facendo clic con il pulsante destro sul livello e selezionando lo stile di cancellazione dal menu. Vai a Filtro> Disturbo> Aggiungi disturbo. Ho aggiunto il 10% di rumore e poi ho abbassato l'opacità dei livelli al 5%.
Ripeti l'intero processo a tutte le tue icone.
È ora di iniziare a creare le icone che verranno poi posizionate in cima ai nostri pulsanti. Crea un nuovo livello e seleziona lo strumento Selezione rettangolare. La prima icona che andremo a progettare è una pila di monete che rappresenterà "l'equilibrio". Crea un piccolo rettangolo con lo strumento selezione e quindi riempilo con il nero.
Sposta la selezione su alcune tacche e poi a destra - riempi questa selezione con il nero sullo stesso livello. Continua a ripetere il passaggio finché non hai qualcosa di simile sotto.
Apri la finestra degli stili di livello per il tuo nuovo livello di monete. Aggiungi uno strato di sfumatura dorato piuttosto sottile alle tue monete.
Ora aggiungi un'ombra discendente e un'ombra interna alla tua forma, puoi vedere le impostazioni che ho usato nelle schermate sottostanti.
Usando le tecniche che abbiamo utilizzato in entrambe le parti di questo tutorial, completa tutte le altre icone. Creerò le seguenti icone: Estratto conto (per dichiarazioni), Busta (per le notifiche), Telefono cellulare (per ricariche telefoniche), Carta di credito (per estratti conto) e Sagoma (per aggiungere un conto).
Dopo aver completato le mie icone, ho deciso che l'ombra esterna sotto le nostre forme bianche principali ha bisogno di oscurarsi un po '. Apri la finestra di stile del livello e aumenta l'opacità dell'ombra al 15%. Ho anche aumentato la dimensione dell'ombra da 2px a 5px.
Fai lo stesso per tutte le altre forme di pulsanti.
Invece di usare il rettangolo in basso per un annuncio pubblicitario, penso che sarebbe una piccola aggiunta per avere un semplice grafico al suo posto, offrendo agli utenti una rapida panoramica sul fatto che il loro saldo sia in aumento (o in basso). Usando la stessa tecnica usata in precedenza, trascina alcune guide dal righello.
Afferra lo strumento Selezione ellittica e trascina un piccolo cerchio tenendo premuto il tasto Maiusc per mantenere i16t round. Riempi di nero su un nuovo livello.
Duplica il livello e posiziona un punto sulla prossima guida verticale. Ripeti il passaggio finché non hai qualcosa di simile a questo:
Vai a Visualizza> Cancella guide per rimuovere le guide sulla nostra tela. Apri l'opzione degli stili di livello per il tuo primo blob e applica i seguenti stili:
Copia gli stili di livello facendo clic con il pulsante destro sul tuo livello e selezionando Copia stile livello. Seleziona tutti gli altri livelli del cerchio, fai clic con il pulsante destro del mouse e seleziona Incolla stile livello. Questo dovrebbe aggiungere automaticamente gli stili appena creati a tutti gli altri livelli.
Afferra lo strumento Linea e trascina una linea da un punto all'altro. Fallo sotto i tuoi livelli di punti.
Fatto questo, lo è anche lo schermo di navigazione! Metti tutti i tuoi strati recenti in una cartella chiamata "Schermata di navigazione" per mantenere le cose belle e in ordine!
Trascina i livelli fino al bordo delle icone nella schermata di navigazione, quindi nascondi l'intera cartella. Crea una nuova cartella e chiamala "Schermata delle istruzioni".
Seleziona lo strumento Linea e dalla barra degli strumenti fai clic sul menu a discesa e assicurati che le punte della freccia (fine) siano selezionate.
Trascina una freccia molto piccola, come di seguito:
Fai clic con il pulsante destro del mouse sul livello delle frecce, seleziona rasterizzazione e quindi rinomina il livello in "freccia verde". Apri la finestra delle opzioni del livello per la tua freccia, quindi applica un'ombreggiatura, un'ombreggiatura interna, una sfumatura di sovrapposizione e un tratto. Tutte le impostazioni possono essere visualizzate di seguito:
Come probabilmente hai intuito, questa freccia sarà l'icona che usiamo per le transazioni in entrata (soldi pagati nell'account degli utenti). Duplica il livello e spostalo di alcuni spazi usando i tasti Maiusc e Cursore. Vai a Modifica> Trasforma> Ruota e mentre si tiene premuto il tasto Maiusc, ruotare la freccia in modo che punti verso sinistra.
Cambia il nome dei livelli in freccia rossa, quindi apri la finestra di stile dei livelli e applica una sfumatura rossa.
Continua a duplicare le due frecce e posizionale una sotto l'altra in ordine casuale.
Seleziona lo strumento Selezione riga singola e fai una selezione sotto la prima freccia, riempila con il nero su un nuovo livello chiamato "separatore".
Duplica il livello, quindi spostalo verso il basso di un pixel premendo il pulsante Giù sui tasti del cursore. Ricolora la linea in bianco.
Unisci i due livelli insieme selezionandoli entrambi, facendo clic con il pulsante destro e selezionando Unisci livelli dal menu. Cambia l'opacità del livello al 15%, quindi taglia la fine delle linee fino alle linee guida usando lo strumento Selezione rettangolare e il tasto Canc..
Duplica il livello e posizionalo tra le tue due frecce successive. Continua a ripetere il passo finché non hai una linea tra tutte le frecce. Vai a Visualizza> Cancella guide.
Afferra lo strumento Testo e trascina una casella di testo tra le prime due linee di separazione assicurandoti che sia centrale. Digitare qualcosa in. Ho utilizzato il testo "$ 107,62 da Nome società il 04/06/2010." Ho usato Helvetica per questo, impostato su 4pt.
Fai risaltare più parti del tuo testo utilizzando diversi sottotipi, come grassetto e corsivo.
Duplica il livello del testo e spostalo verso il basso fino alla transazione successiva - continua a ripetere questo passaggio finché non hai riempito tutti gli spazi.
Per rendere il tuo modello di progettazione più realistico, passa attraverso i livelli di testo e modifica la quantità, il nome dell'azienda e le date.
Usando le tecniche che hai già utilizzato in entrambe le parti del tutorial, avvia e completa la schermata Aggiungi account. Di seguito sono riportati diversi screenshot durante la progettazione della schermata finale del tutorial.
Schermata Home / Navigazione:
Schermata di istruzione:
Aggiungi schermata account:
Accentsconagua