Share
In questo tutorial, continueremo questa serie sulla creazione di un sito promozionale per app per iPhone prendendo il nostro precedente wireframe costruito da Fireworks e aggiungendo colore, texture, immagini ed effetti per rifinire questo disegno in Photoshop. Useremo alcuni elementi interessanti, come le immagini di iPhone e un'elegante illustrazione di sfondo vettoriale aurora. Finiremo con un design del sito professionale pronto per essere codificato! Andiamo ad esso!
Dai un'occhiata al design del sito web che creeremo. Puoi visualizzare l'anteprima dell'immagine finale qui sotto o l'immagine a dimensione intera qui.
Prendi il "wireframe_final.psd" che abbiamo esportato nel nostro ultimo tutorial di questa serie (Costruisci un sito Web promozionale di iPhone App Wireframe in Fireworks). Rinomina questo file in "final.psd" o nel tuo nome preferito.
Si noti sotto come il file importato si apre abbastanza bene in Photoshop. C'è un problema con le caselle di testo più lunghe del documento (seconda immagine in basso, nota come la scatola è lunga e continua oltre il fondo del documento). Non conosco un modo rapido per risolvere questo problema. È una peculiarità che ho menzionato nell'ultimo tutorial. Se qualcuno conosce una buona soluzione, fammelo sapere. Quindi, passa e copia il testo di ogni elemento, quindi ricrea una nuova casella di testo e incolla il testo sul posto, o lascia semplicemente come è.
Inoltre, andare avanti ed eliminare la cartella "Note", in quanto non abbiamo bisogno delle note qui.
Mi piace spesso lavorare sugli elementi visivi dominanti (e più importanti) del design e poi costruire da lì. Quindi, iniziamo con l'area "promozione".
Qui aggiungeremo un'illustrazione dell'aurora allo sfondo. Ian Yates ha scritto un fantastico tutorial di Illustrator su come realizzare un Aurora Borealis Vector Sky in Illustrator. Ci sono alcuni vantaggi nell'utilizzare un grafico vettoriale qui. Uno è che stilisticamente si distingue con un look unico. Inoltre, possiamo usarlo anche per altre aree di branding di dimensioni.
Dopo aver completato il tutorial sul vettore aurora boreale, vai avanti e importa il tuo risultato unico in Photoshop. Puoi vedere che l'unico cambiamento che ho fatto è stato quello di capovolgere il design. Ovviamente dovresti creare il tuo per il tuo lavoro. Ho incollato l'illustrazione come Pixels perché non ho bisogno di apportare alcuna modifica al file sorgente vettoriale dopo averlo inserito, quindi non c'è bisogno di usare uno Smart Object.
Ora trascina la maschera vettoriale dalla nostra forma di sfondo promozionale sul nostro design aurora boreale.
Questo applicherà la maschera vettoriale come mostrato di seguito, ma assicurati che si allinei come desideri.
C'è un omaggio spettacolare di un'immagine per iPhone con un sacco di grafica GUI per iPhone. Vai avanti e scarica l'iPhone GUI PSD 3.0. Apri il file e trascina l'immagine di iPhone nel tuo documento di lavoro. Quindi ridimensionarlo e allinearlo con le guide come mostrato nella seconda immagine in basso. Assicurati di prendere l'immagine come mostrato. L'unico componente dello schermo afferrato diverso dal telefono è un bagliore angolato trasparente dello schermo.
Ora aggiungeremo l'illustrazione aurora boreale all'iPhone. Questo rende il design un po 'più interessante. Nel sito web finale un file video sarebbe bello qui, il che mostra comunque l'app in azione. Porta in un'altra copia dell'illustrazione dell'aurora boreale. Puoi inserire una versione ridotta di questa volta, poiché stiamo riempiendo uno spazio più piccolo. Incollalo di nuovo come Pixel.
Ora con l'illustrazione posizionata sull'iPhone nella posizione in cui desideri e l'illustrazione selezionata, vai a Livello> Maschera vettoriale> Mostra tutto. Quindi prendi lo Strumento Rettangolo (U), assicurati che sia impostato su Percorsi nell'angolo in alto a sinistra e disegna lo schermo. Se non si ottiene la dimensione esatta necessaria per la prima volta, quindi premi Comando + T e ridimensiona la maschera del vettore rettangolo secondo necessità.
Assicurati di mantenere i tuoi livelli organizzati mentre continuiamo a costruire questo design.
Abbiamo appena aggiunto due elementi dominanti nella pagina. Inoltre, l'illustrazione dell'aurora che abbiamo aggiunto è un'ottima fonte per prelevare un po 'di colore per creare lo schema dei colori di questa pagina. Vai avanti e fai doppio clic sul layer "Sfondo" predefinito per sbloccarlo, chiamalo "sfondo" e posizionalo in una nuova cartella "sfondo".
Afferra lo strumento secchiello (G), quindi cambia il colore di primo piano con un grigio bluastro scuro (# 536475), che ho selezionato dall'illustrazione. Ora cambia lo sfondo di navigazione principale situato nella cartella "header" di un blu scuro (# 212b3f), che è stato anche campionato dall'illustrazione. Dare allo sfondo dell'area "in basso" lo stesso colore blu scuro dello sfondo.
A questo punto cambieremo anche il colore di alcuni dei nostri pulsanti di navigazione. L'immagine qui sotto mostra dove siamo finora in questo progetto. Cambia i colori dello sfondo del pulsante di navigazione principale in un grigio-blu leggermente più chiaro (# 5e7285) rispetto allo sfondo della pagina, ad eccezione del pulsante della pagina corrente. Vogliamo dare al pulsante della pagina corrente l'impressione di essere premuto. Quindi, renderlo dello stesso colore della pagina (# 536475). Lo aggiungeremo un po 'più avanti nel tutorial quando aggiungiamo lo stile.
Nell'area "secondary_nav" seleziona lo sfondo più grande dietro l'icona di Aurora e cambia il suo colore in un blu-grigio (# 475665) leggermente più scuro dello sfondo della pagina. Di nuovo, faremo apparire questo rientro. Inoltre, vai avanti e usa lo stesso colore grigio-blu più chiaro (# 5e7285) come pulsanti di navigazione principali sui pulsanti del piè di pagina.
Puoi vedere quanto sta diventando buio con il nostro design della pagina dolorosamente ovvio che è ora di lavorare sui colori del testo. Abbiamo progettato il testo principalmente con la luce scura per il wireframe, ma ora dobbiamo andare alla luce al buio. Cambia la maggior parte del tuo testo in bianco. Indicherò le poche eccezioni qui sotto. Inoltre, ripulire qualsiasi testo, riposizionare elementi e sperimentare con il peso del carattere mentre si passa attraverso questo.
Sto impostando parte del testo in Myriad Pro, anche se nelle aree che verranno codificate e non nelle immagini ho spesso usato Helvetica per questo disegno, che è onnipresente sui sistemi informatici. Ho anche usato Helvetica per alcune aree che volevo avere un aspetto leggermente diverso da quello utilizzato da Myriad Pro. Ho impostato il nome Aurora in Futura Condensed Extra Bold dove doveva essere usato per il branding.
Puoi vedere il testo nella maggior parte delle "intestazione", "secondary_nav", "promozione" e "corpo" è bianco. Alcune eccezioni sono l'area del logo (che per ora è solo un segnaposto), il testo "Aurora App" che è blu scuro (# 131828) per aiutarlo a risaltare e le intestazioni per il corpo che sono dello stesso blu scuro.
Dobbiamo anche lavorare sul testo della sezione "in basso". Ho impostato tutti i titoli di Myriad Pro Bold a 20pt. Il colore è un blu brillante (# 85a1bc). Ho usato lo stesso blu per i collegamenti testuali. Ho impostato il resto del testo in bianco usando un Helvetica Bold più piccolo.
Il "footer" ha solo un paio di cambi di colore. I collegamenti sono stati modificati in un baby blue ancora più luminoso (# 97b8d8), ad eccezione del collegamento attivo che è bianco e sottolineato. Il testo del copyright è 12pt Helvetica e blu scuro (# 212b3f).
Per prima cosa, prendi uno screenshot del nostro file PSD dell'area in cui inseriremo il logo (con il testo del segnaposto del logo disattivato). Accendi Illustrator. Posiziona lo screenshot sul proprio livello e bloccalo. Ho anche disattivato la visibilità della tavola da disegno (Maiusc + Comando + H). Ora crea un livello per il tuo logo e inserisci il testo "iLoveMyApps", che funge da nome dell'azienda per questo tutorial. Imposta il testo in Cooper Std Black Italic a 30pt e assegnagli un riempimento bianco, come mostrato di seguito. Ora con il testo selezionato, vai su Testo> Crea contorni, quindi separa il testo (Maiusc + Comando + G). Inoltre, elimina "o", poiché lo sostituiremo con un cuore.
Ora lavoriamo sulla forma del cuore. Per prima cosa, attiva la griglia (Command + ") e attiva Snap to Grid (Shift + Command +"), che ti permetterà di disegnare facilmente la forma. Vai avanti e crea una forma a mezzo cuore con lo strumento Penna. Ora vai su Oggetto> Trasforma> Rifletti e applica una copia con le impostazioni mostrate sotto. Ora allinea il bordo interno di entrambe le forme a mezzo cuore, quindi nella palette Pathfinder fai clic su Unisci, che ci dà una forma a cuore finale.
Ora ridimensiona la forma del cuore e posizionala come mostrato. Inoltre, lavora sulla spaziatura di ogni lettera del testo finché non ti sembra giusta. Volevo che l'intero testo appaia come uno, ma ho distanziato ogni parola per aumentare la leggibilità. Si legge comunque come una sola parola. Ora copia e incolla il logo finale come oggetto avanzato in Photoshop.
Continueremo a scendere dall'alto verso il basso, ma tieni presente che mentre stai progettando puoi rimbalzare di più in varie aree del design e sperimentare con stili e stili diversi, il che è fantastico e libero fare quello.
All'interno della sezione "intestazione", seleziona lo sfondo, quindi applica gli stili di livello mostrati di seguito. Ciò conferisce alla parte superiore dell'area del corpo un piccolo punto luce e un'ombra sottile viene proiettata nell'area dell'intestazione, che la respinge un po 'indietro.
Ora applica gli stili mostrati sotto al nostro logo. Per la sovrapposizione del gradiente il gradiente passa dal grigio (# c0c4c9) al grigio chiaro (# e3e5e7).
Per prima cosa lavoreremo sugli stili di sfondo del collegamento primario non attivo, il che significa tutto tranne il collegamento "App". Applica gli stili mostrati sotto e usa i colori che ti sembrano adatti. Nota: ho ottenuto molta ispirazione dal sito Meta Lab per questa parte del design. Adoro il lavoro svolto da questa azienda, controlla il loro folio mentre sei lì.
È sempre importante immaginare dove si trova la fonte di luce nel tuo progetto. Stiamo applicando alcuni effetti di luce delicati, che conferiranno a questo design un tocco moderno, anche se abbiamo ancora bisogno di tenere a mente la sorgente luminosa.
Immagina che ci sia una fonte di luce proveniente dalla parte superiore della pagina che scatta verso il basso, il che ci sta dando la direzione della luce per molti degli stili che aggiungeremo. Ovviamente puoi immaginare più di una fonte di luce, e in qualche modo puoi discostarti da questo, ma tenere a mente la sorgente di luce primaria primaria aiuterà a rendere gli stili che applichi avere un senso e lavorare insieme visivamente.
Ora applica gli stili mostrati di seguito allo sfondo del link "App", che è il nostro link attivo e lo farà apparire come premuto.
Ora applica il seguente stile Bevel and Emboss al testo all'interno della navigazione primaria per farlo risaltare un po '. L'effetto sul testo è sottile, ma evidente.
Prima di tutto aggiungiamo le icone delle nostre app per iPhone. Per l'icona principale di Aurora, usa la stessa illustrazione di aurora usata nell'area promozionale. Trascina la maschera vettoriale che viene applicata come un quadrato grigio al momento, su una versione ridotta dell'illustrazione dell'aurora, fai riferimento al Passaggio 2 su come farlo. Ora aggiungiamo uno stile qui. Aggiungi i seguenti stili di livello all'icona.
Applica gli stessi stili allo sfondo dell'icona esterna come abbiamo fatto al pulsante di sfondo "App" nel Passaggio 7. Fai clic tenendo premuto il tasto Ctrl sulla miniatura del livello dello sfondo pulsante "App" e seleziona Copia stili livello. Quindi seleziona lo sfondo esterno, fai Control-clic sulla sua miniatura del livello e scegli Incolla stile livello, come mostrato di seguito.
Ora aggiungeremo uno stile alle nostre altre icone dell'applicazione. Questi sono solo segnaposto per mostrare al cliente dove sarebbero andate le altre icone. Quindi voglio dare loro un aspetto simile all'icona Aurora, ma non farli risaltare molto. Quindi, iniziamo colmandoli con uno schema. Per prima cosa faremo il modello.
Apri un nuovo documento 4px per 4px configurato per il web. Afferra lo strumento Pencil, imposta le dimensioni del pennello su 1px e dipingi quattro rettangoli come mostrato di seguito. Il rettangolo più scuro è # 05020a e il più leggero è # 251440 questo colore. Premi Comando + A per selezionare Tutto, quindi vai a Modifica> Definisci modello e chiamalo "Pioggia viola". Sì, ho fatto una maglietta con questo motivo negli anni Ottanta quando sono tornata alle elementari.
Seleziona la prima icona segnaposto. Nota come è attualmente un livello forma. Dobbiamo rasterizzare questo. Quindi vai su Livello> Rasterizza> Riempi il contenuto, che mantiene la nostra maschera vettoriale in posizione, ma rasterizza il riempimento. Si noti che il risultato è un livello rasterizzato con una maschera vettoriale applicata ad esso, rapido e semplice. Passa e fallo per ogni icona segnaposto.
Afferra lo strumento secchiello (G) e, nell'angolo in alto a sinistra, scegli Pattern dal menu a discesa, assicurati che sia selezionato il pattern "Purple Rain", quindi fai clic una volta su ogni icona segnaposto per applicare il pattern. Ora fai Control-clic sulla miniatura dell'icona Aurora e copia lo stile del livello, quindi incollalo su ogni icona dell'applicazione segnaposto. Inoltre, regola la spaziatura dei nomi delle applicazioni per creare spazio per gli stili.
Aggiustiamo anche il nostro pulsante segnaposto predefinito per l'app store sulla destra di questa sezione. Un modo semplice per far si che questo pulsante si mescoli meglio al nostro design è quello di cambiare il colore dello sfondo. Vai a Immagine> Regolazioni> Tonalità / Saturazione e applica le impostazioni mostrate di seguito o quelle di tua scelta.
Iniziamo con lo sfondo e i pulsanti. Per prima cosa applicheremo lo stile alla nostra ampia area di sfondo. Seleziona l'illustrazione dell'aurora e applica i seguenti stili di livello. Questo ci dà un punto culminante nella parte superiore e un tratto intorno all'area.
Ora applica gli stessi stili allo sfondo dell'area di prezzo in alto a destra, ma aggiungi anche gli stili mostrati di seguito. I colori usati per la sovrapposizione del gradiente viola sono campionati dal grafico aurora. I colori del gradiente passano dal viola (# 68448f) al viola più scuro (# 320580) e quindi tornano a una tonalità di metà viola (# 65428c).
Applica gli stessi stili di livello alla nostra intestazione principale "Light Up Your iPhone", come abbiamo fatto al punto 7. Puoi copiare e incollare lo stile di livello da lì. Applicare lo stesso stile Bevel and Emboss al testo del prezzo e all'intestazione secondaria, come applicato al testo di navigazione principale al punto 7. Potresti voler cambiare l'opacità della modalità di evidenziazione o della modalità ombreggiatura per l'ombreggiatura, sperimentare cosa sembra meglio per te. Inoltre, seleziona la regola orizzontale, che è una forma alta 1px, e cambia il suo colore in nero. Inoltre, applica le impostazioni mostrate di seguito.
Ora applica i seguenti stili di livello al nostro pulsante principale di chiamata all'azione. Abbiamo messo un'ombra esterna su questo in modo che si distingua maggiormente dallo sfondo. Ha un colore brillante, che attirerà l'attenzione. La sua collocazione attrae anche l'attenzione. La sovrapposizione del gradiente ha colori simili a quelli usati per lo sfondo del prezzo, ma ha solo due colori applicati, che vanno dal viola (# 68448f) al viola scuro (# 320580). Aggiungeremo una freccia in un momento solo per farla risaltare di più.
Ora prendi lo strumento Ellisse (U) e usalo per creare un livello forma come mostrato di seguito. Il colore non ha importanza perché gli stili lo copriranno comunque. Riorganizza il testo del pulsante per apparire equilibrato con l'elemento aggiunto. Useremo questa cerchia per inserire entro breve una freccia di download. Applica al pulsante i seguenti stili di livello (i colori nella sovrapposizione del gradiente vanno da # 9cc67e a # 3a4f66).
Ora creeremo la nostra freccia, la inseriremo in Photoshop e la modificheremo.
Apri Illustrator e crea un documento web. Attiva Visualizza> Mostra griglia e Visualizza> Blocca sulla griglia. Usa lo strumento Penna per disegnare una freccia utilizzando la griglia. Le dimensioni non contano. Ora ridimensionalo a una forma che ha le dimensioni della freccia più grande mostrata sotto. Ora vai su Effetto> Stile> Angoli tondi e applica con un raggio di 0,139 pollici. Ora copia la freccia e incolla come oggetto avanzato vettoriale in Photoshop. Nota: sto usando il nero sotto a scopo dimostrativo, ma la freccia dovrebbe essere bianca.
Ora applica gli stessi stili alla freccia come abbiamo fatto con il nostro logo nel passaggio 7 e ridimensiona per adattarlo allo spazio. Il risultato è mostrato nella seconda immagine qui sotto.
Ecco cosa abbiamo finora. La sezione superiore è bella. Ora passiamo al corpo successivo. Abbiamo la maggior parte del sito in stile ora. Sarà una navigazione tranquilla da qui.
Non ci sono troppi stili che devono essere applicati qui - solo alcuni. Iniziamo con i titoli. Vogliamo farli apparire rientranti evidenziando i bordi del carattere interno inferiore, uno stile spesso utilizzato nei siti Apple. Applica lo stile mostrato di seguito al testo del titolo "Aurora". Inoltre, applica lo stesso stile ai titoli "Screenshot" e "Caratteristiche". Con questi due titoli successivi, modifica l'Opacità al 40% (tutto il resto in questo stile di livello Ombra esterna è lo stesso).
Applica lo stesso stile di livello ai punti elenco sotto la colonna "Funzionalità", come applicato al titolo. I risultati finora sono mostrati di seguito.
Ora copia la regola orizzontale dalla sezione "promozione", cambia il colore in blu scuro (# 131828) e ridimensionalo per adattarlo all'area sopra il titolo "Screenshot". Nota come viene mantenuto lo stile.
Ora copia la stessa regola orizzontale e usane più copie nell'ultima colonna di questa sezione, come mostrato di seguito. Assicurati di eliminare le regole orizzontali senza stile esistenti.
Ora segui gli stessi passaggi per queste immagini segnaposto qui come hai fatto al punto 10. Applica gli stessi stili di livello e riempimento dello sfondo con il motivo "Pioggia viola". Questo è solo un modo rapido per rendere quest'area un bell'aspetto per la recensione dei clienti prima di ottenere le foto reali che verranno pubblicate in seguito. La sezione finale "corpo" è mostrata sotto.
Innanzitutto, applichiamo lo stesso stile di stile Bevel and Emboss ai nostri titoli qui come abbiamo fatto al testo nella nostra navigazione principale al punto 8. Ora trascina quattro copie della nostra regola orizzontale stilizzata verso il basso e ridimensiona secondo necessità, oppure applica gli stessi stili e colorare le linee orizzontali esistenti come abbiamo fatto a loro nella sezione "corpo".
Sostituisci le restanti regole orizzontali di questa sezione con trattini. A tale scopo è possibile utilizzare lo strumento testo e il tasto Dash. Ho usato Myriad Pro a 14pt per questo. Questo è qualcosa che verrà codificato in CSS, ma vogliamo essere sicuri di comunicarlo efficacemente nel design.
Applica gli stessi stili di livello ai nostri pulsanti come abbiamo fatto nella nostra navigazione principale. Basta copiare quegli stili di livello verso il basso. Assicurati di stilizzare anche il testo dei pulsanti. Ora sostituisci il nostro uccello twitter con una versione a colori, che puoi scaricare gratuitamente nel pacchetto Icon Practika da Smashing Magazine.
Applica i seguenti stili di livello allo sfondo della sezione "in basso" e il gioco è fatto!
Esistono molte soluzioni per siti Web creativi che puoi creare utilizzando solo una manciata di elementi scelti, un'interessante combinazione di colori, l'utilizzo di stili appropriati e l'attenzione ai sottili effetti di luce. L'immagine finale è sotto. Puoi vedere una versione più grande qui.
Accentsconagua