Share
Affrontalo, c'è un'app per quasi tutto. Con le nuove app arriva l'innovazione nel modo in cui possiamo presentare i nostri prodotti mobili ai potenziali clienti. Apple ci ha benedetti con un marchio splendidamente lucido ed elegante che fondamentalmente crea grandi siti web per noi. Questo tutorial farà un ulteriore passo avanti, incorporando uno stile illustrativo sotto il gloss Apple, per riunire una pagina di destinazione unica nel suo genere.
Affrontalo, c'è un'app per quasi tutto. Con le nuove app arriva l'innovazione nel modo in cui possiamo presentare i nostri prodotti mobili ai potenziali clienti. Apple ci ha benedetti con un marchio splendidamente lucido ed elegante che fondamentalmente crea grandi siti web per noi. Questo tutorial farà un ulteriore passo avanti, incorporando uno stile illustrativo sotto il gloss Apple, per riunire una pagina di destinazione unica nel suo genere.
Forse sono vecchia scuola, ma adoro il sito che è fissato a 960px. È un numero tondo così bello, divisibile per 1, 2, 3, 4, 5, 6, 8, 10 che rende molto più facile lavorare con una pseudo-griglia. Questo tutorial non è diverso; quindi ho creato un nuovo documento 1000px per 1200px con linee guida che tracciano il centro per un modello 960px per 1200px.
Ora imposteremo le colonne che useremo per il resto del design. Ho scelto 3 colonne, con 40px di padding tra di loro. Le colonne da sinistra a destra sono 240 px, 390 px, 240 px.
Dal momento che desideriamo che il nostro design sembri seduto su una libreria, abbiamo bisogno di un certo tipo di carta da parati per sederci dietro.
Crea un nuovo livello e riempi l'intero livello con il bianco (Shift + F5). Successivamente, vai alle proprietà del tuo livello e sovrapponi il tuo motivo ornato (sto saltando la creazione del modello, come presumo che tutti già sappiano come farlo).
Dopo aver applicato lo stile di livello, il nostro documento dovrebbe essere simile a questo:
Creeremo un nuovo livello che copre l'intero documento e circa 140 px di altezza. Useremo la stessa tecnica del passaggio 2, anche se applicheremo una texture del legno invece della texture ornata. Ancora una volta, ci sono centinaia di siti che regalano trame di legno libere da royalty: Ricerca Google per trame di legno senza spigoli
Il risultato dovrebbe essere qualcosa del genere:
Rinominare questo livello "shelf".
Lo scaffale sembra un po 'piatto, quindi dobbiamo aggiungere un po' di profondità usando sfumature, ombre e luci. Aggiungi nuovi stili di livello per: Tratto, Sfalsa ombra e Sovrapposizione sfumatura come segue:
Potresti dire a te stesso che l'ombelico è piuttosto brutto in questo momento. Concordato; ma non sembrerà così duro una volta che avremo i libri di fronte ad esso. Ecco come dovrebbe apparire il tuo documento ora:
Successivamente, creeremo il bordo anteriore dello scaffale. Duplica (comando + J) il livello 'shelf' e rinominalo 'front of shelf'. Sposta il livello "frontale del ripiano" in modo che il fondo del livello "scaffale" si allinea alla parte superiore del livello "superiore del ripiano". Ritaglia 20 px dal fondo del livello "superiore del ripiano" in modo che le altezze siano variabili. Vogliamo dare l'illusione che la mensola sia più profonda di quanto la parte anteriore della mensola sia alta.
Successivamente, abbiamo bisogno di cambiare alcuni degli stili di livello per il livello 'top of shelf'. Per prima cosa, dobbiamo spostare il livello 'front of shelf' sotto il livello 'shelf' nella palette Livelli. Quindi invertiremo il gradiente (e abbasseremo l'opacità) poiché vogliamo che l'ombra sia in basso invece che in alto. In questo modo creeremo una sorgente di luce nell'angolo in alto a destra dello scaffale, proprio dove mostreremo i nostri libri e il nostro screenshot per iPhone.
Dopo aver applicato tutti gli stili di livello, la tua immagine dovrebbe assomigliare a questa:
Ora potremmo fermarci qui, ma penso che ci sia solo un piccolo dettaglio in più che manca sullo scaffale. Gli angoli sembrano ancora un po 'piatti, e vogliamo che abbia un sacco di profondità, quindi aggiungeremo alcune semplici linee di luce alte 1px per dargli quel tocco in più di profondità.
Crea la linea appena sotto il bordo del tratto 2px del livello 'shelf'. Quindi, puoi scegliere un colore da riempire (MAIUSC + F5) più leggero di tutte le venature del legno dello scaffale o semplicemente riempire di bianco e regolare l'opacità. Il risultato, ti darà quel tocco in più di profondità:
Riutilizzeremo il nostro modello in legno dalla creazione dello scaffale sopra per creare un tipo di "retro" nella nostra libreria. L'idea qui è di far sembrare che abbiamo impostato l'iPhone e i libri sulla parte superiore della libreria e abbiamo le nostre informazioni supplementari all'interno. Creeremo questo livello sotto i livelli degli scaffali nella pila.
Crea una selezione, un riempimento con il modello di legno (Maiusc + F5). Rinominare questo livello "back of shelf".
Poiché la nostra fonte di luce è diretta nell'angolo superiore in alto dello scaffale, abbiamo bisogno di rendere il retro un po 'più scuro per renderlo più simile a una mensola con profondità e meno come i pavimenti in legno. È facile farlo con gli stili di livello; Aggiungi uno stile di livello "Sovrapposizione colore" al livello "back of shelf" e imposta il colore su Nero. Regola l'opacità al 50% e ora dovresti vedere il legno più scuro per il retro della libreria.
Dopo una leggera regolazione con l'opacità del mio sfondo decorato, l'immagine dovrebbe apparire in questo modo:
Ora che abbiamo impostato tutto il documento, oltre a tutti i livelli di sfondo creati per il tema, procederemo alla creazione di tutti gli elementi che si troveranno sopra lo sfondo (tecnicamente, sullo sfondo).
Per il logo, ho scelto il font Rockwell (è la mia ossessione del recente) a 60px. Crea un nuovo livello di testo con il testo: "Leggi". Per ottenere quella sensazione di bolle, abbiamo bisogno di aggiungere alcuni stili di livello per il tratto, la sovrapposizione del gradiente, l'ombra interna, il bagliore esterno (quasi lo stile di ogni livello che è possibile aggiungere). Ecco le impostazioni:
Dopo aver applicato gli stili di livello, allinea il logo alla guida a destra. Dovrebbe assomigliare a qualcosa di simile a questo:
Ora abbiamo bisogno del nastro segnalibro per la "i". Inizieremo creando una nuova forma (che ho creato da zero con lo strumento Lazo poligonale). Riempi la tua selezione con qualsiasi colore. Dovrebbe essere lungo queste linee:
Dal momento che un solido segnalibro nero è estremamente brutto, dobbiamo aggiungere un po 'di lucentezza. Tutto ciò di cui abbiamo bisogno qui è una sfumatura di ombreggiatura, traccia e sfumatura per far risaltare il nastro:
Il tuo nastro segnalibro ora dovrebbe essere così:
Non resta che aggiungere la "i", che useremo lo stesso font (Rockwell) con testo bianco. Aggiungi una leggera ombra interna (70% Opacità, 90 gradi, Distanza: 1; Choke: 0; Dimensione: 1) e dovresti essere tutto pronto. Ho aggiunto anche uno schema al mio segnalibro, ma qui è fondamentalmente ciò che dovresti vedere:
Non preoccuparti; non è necessario crearli tutti da zero. La bellezza del web ora è che ci sono migliaia di opzioni per le illustrazioni di serie - il che ti farà risparmiare tempo alla fine. Ho trovato i libri su iStockphoto qui. Questi libri esatti non sono completamente critici per questo tutorial, quindi se preferisci, puoi sempre passare alla sezione successiva.
Se hai scelto di acquistare i libri, posizionali sulla tua immagine a metà della parte superiore del tuo scaffale:
I libri sono troppo piatti da soli, quindi aggiungeremo altre ombre di prospettiva (come abbiamo fatto con gli angoli degli scaffali) per farle sembrare come se fossero sullo scaffale. Per prima cosa, rinominare il nuovo livello con i libri in "libri".
Aggiungi un'ombra esterna al livello "libri" con le seguenti impostazioni: Opacità: 19%; Angolo: -90; Distanza: 10; Diffusione: 10; Formato: 15. Per il colore, scegli un marrone dal livello 'retro del ripiano'. Usiamo il marrone qui perché il nero sembra troppo e non corrisponde.
Per creare l'ombra sotto i libri, creeremo una nuova ellisse nera che copre l'intera larghezza dei libri che si trovano verticalmente. Ci occuperemo poi del libro pendente.
Rasterizza l'ellisse nera e vai a Filtro> Sfocatura> Sfocatura Gaussion. Utilizzare un raggio di 4,7 per ottenere lo spread desiderato. Imposta l'opacità dello strato di ellisse nero al 70% per ammorbidirlo un po '. Il risultato dovrebbe essere simile a questo:
Ripeti la stessa tecnica per il libro pendente, ma con un'ellisse molto più piccola. Dovrebbe assomigliare a qualcosa di simile a questo:
Nessuna pagina di destinazione per iPhone è completa senza un iPhone grande e lucido - e questo tutorial non fa eccezione. Ho usato il modello di iPhone da parte di persone fantastiche a teehan + lax per emulare sul dispositivo. Rimuovi i livelli che non desideri includere nel tuo iPhone e trascinalo sul tuo documento. Posizionalo leggermente in basso sul ripiano superiore per dare l'illusione che l'iPhone ti sia più vicino di quanto lo siano i libri. Vogliamo quel bel iPhone frontale e centrale.
Ovviamente questo è il posto in cui il tuo screenshot di eroe sarebbe passato alla tua app. Non aggiungerò nulla ai miei, ma sicuramente sei il benvenuto mentre segui il tutorial. Inoltre, utilizzeremo la stessa tecnica dal passaggio 6 per aggiungere un'ombra alla parte inferiore dell'iPhone. Il tuo output dovrebbe essere simile a:
Solo un ultimo elemento (uno dei più importanti) è l'adesivo del prezzo. Inizia creando un cerchio nell'angolo in alto a destra dell'iPhone. Rinomina questa cerchia a "price sticker":
Successivamente, applica i seguenti stili di livello per Ombra esterna, Smusso e rilievo, Sovrapposizione sfumatura e Tratto. Questo sarà uno stile di livello importante, poiché lo utilizzeremo più volte nel resto del sito per i pulsanti, ecc.
Questo crea qualcosa di completamente burroso:
Aggiungi del testo per il prezzo con un 1px dropshadow in cima e il nostro adesivo è fatto:
Finora, questo è ciò che abbiamo creato (sembra piuttosto buono, e soprattutto: molto unico):
Manca ancora il pulsante "Chiamata all'azione" per invitare le persone all'AppStore ad acquistare la nostra app. Creeremo quel testo come se fosse "cesellato" nella parte anteriore dello scaffale (con un font perfetto).
Quindi ecco qui: creare un nuovo testo; Ho usato: "La tua collezione di libri ti amerà per questo." Ho usato Gotham a 36px per ottenere l'aspetto desiderato. In quel testo, abbiamo bisogno di applicare due stili di livello per dargli quel look cesellato:
Il risultato desiderato, a seconda del carattere, dovrebbe essere qualcosa del genere:
Ora dobbiamo aggiungere il pulsante AppStore. Ho usato un'icona di iPhone da IconFinder.net per ricreare il pulsante "Disponibile nel AppStore".
Per creare il pulsante, crea un nuovo rettangolo arrotondato con raggio di 10px. Ho creato il mio rettangolo 240 px di larghezza per 74 px di altezza.
Poiché abbiamo già creato il nostro simpatico Style Layer per i pulsanti quando abbiamo creato l'adesivo del prezzo nel Passaggio 7, possiamo semplicemente copiare lo stile di livello da quell'adesivo e incollare lo stile di livello sul nostro nuovo layer di pulsanti. Per fare ciò, fai clic con il pulsante destro del mouse sul livello da cui desideri copiare lo stile di livello ed eligi "Copia stile livello" dal menu popup. Seleziona il livello a cui desideri applicare questo stile di livello e fai clic con il pulsante destro del mouse, quindi seleziona "Incolla stile livello". È facile.
Posiziona l'icona dell'iPhone che hai scaricato da IconFinder in cima al pulsante, dandogli gli stili di livello di:
Aggiungere il testo AppStore e riutilizzare lo stile di livello creato per l'icona di iPhone sul testo. Il tuo risultato dovrebbe essere simile a:
Questa è probabilmente la parte meno interessante del design, ma la più interessante per chiunque voglia acquistare la tua app. Crea una nuova intestazione, taglia il testo a 30px (ho usato di nuovo Rockwell) e inserisci il testo "Caratteristiche". Ricorda quelle guide che abbiamo creato all'inizio di questo tutorial? Li useremo ora per le nostre 3 colonne; quindi allinea il testo delle caratteristiche alla guida più a destra.
Applica alcuni stili di livello a questo testo:
Successivamente, crea un testo in corsivo sotto e aggiungi alcuni proiettili. Abbastanza facile, giusto?
Dobbiamo mostrare la nostra app. Lo screenshot del nostro iPhone non solo avrà immagini della nostra app, ma dovremmo anche mostrare immagini ingrandite della nostra app in modo che le persone sappiano esattamente cosa possono aspettarsi.
Innanzitutto, duplicheremo (Comando + J) il nostro livello di testo "Funzioni" dal passaggio 9. Modifica il testo per leggere "Screenshot" e spostalo in modo che sia posizionato nella colonna centrale.
Ora creeremo gli screenshot. Inizieremo creando il layer esterno. Inizia creando una nuova forma rettangolare arrotondata, 180 px per 180 px con un raggio di 10 px. Copia lo stile di livello dal testo cesellato nel passaggio 8 e incollalo sulla forma del rettangolo arrotondato. Duplica il livello (Comando + J) e distanziali uniformemente all'interno della colonna larga 390 px:
Ora creeremo un segnaposto per le immagini (ovviamente le sostituirai con gli screenshot della tua app in seguito). Crea un altro rettangolo arrotondato, ma questa volta con le impostazioni:
Duplica il livello e sposta il livello duplicato sopra l'altro screenshot inserire.
Aggiungi una sovrapposizione colore a entrambi questi livelli (con colore # f6f3eb) per il segnaposto.
Infine, dobbiamo aggiungere l'icona Zoom. Inizia disegnando un cerchio nell'angolo in alto a destra (come hai fatto per l'adesivo del prezzo). Il mio ha un diametro di circa 30px.
Incolla lo stesso stile di livello dall'etichetta del prezzo sulla nuova cerchia. Ho regolato i colori Sfumatura e Colore tratto per ottenere un aspetto leggermente diverso rispetto al verde.
Infine, dobbiamo aggiungere l'icona "Zoom". Sto usando l'icona dello zoom dal fantastico set di icone Glyphish. A
completa l'icona dello zoom, abbiamo solo bisogno di aggiungere una leggera ombra interna (1px circa) per dargli un po 'di profondità.
Duplica il gruppo di icone di zoom che hai creato e spostalo sull'altra miniatura. Come sei andato a implementare questo, sarebbe sicuramente bello fare un po '
zoom fresco su questi screenshot quando li hai cliccati. Forse per i miei primi Nets :).
Ultimo ma non meno importante per la sezione principale sono le testimonianze. Ho creato il fumetti da un rettangolo arrotondato e una forma personalizzata.
Inizieremo con il rettangolo arrotondato. Crea un nuovo rettangolo arrotondato con le impostazioni:
Ora scegli lo Strumento forme personalizzate e individua il fumetto per creare la coda:
Crea un fumetto sopra il rettangolo arrotondato, in modo che solo la coda non si sovrapponga.
Seleziona entrambi i livelli e uniscili insieme (Comando + E). Il risultato dovrebbe essere una forma alla quale possiamo applicare alcuni stili.
Ancora una volta, copiamo il nostro Stile di livello dall'etichetta del prezzo e incolliamo lo stile di livello sulla nostra bolla di testimonianze (ne faremo una trama di legno in un secondo). Lo facciamo perché desideriamo la maggior parte degli stili dall'adesivo, come gli stili di smussatura, ombreggiatura e pennellata, semplicemente giochiamo con la texture e i colori un po 'per dargli l'aspetto giusto. Riutilizzando stili di livello come questo, puoi mantenere i tuoi progetti coerenti e risparmiare un sacco di tempo senza dover ricreare gli stessi effetti più e più volte.
Per prima cosa cambieremo la Sovrapposizione sfumatura. Abbiamo bisogno che diventi da un colore a trasparente (dal momento che vorremmo che la venatura del legno fosse visibile da dietro). Ho scelto di far sfumare la sfumatura su un marrone molto scuro: # 292115.
Infine, eseguiremo un Sovrapposizione modello della trama del legno per farlo fondere più con lo sfondo.
Regola il colore del tratto in modo che sia marrone più scuro (non verde) e tutto è pronto!
Tutto quello che devi fare ora è aggiungere le tue entusiasmanti recensioni dei clienti, e hai una bolla testimonial unica nel suo genere. Duplica il gruppo di testimonianze
e spostalo subito sotto l'altro, e il gioco è fatto!
Inizieremo creando il contenitore circostante all'interno del quale verranno inseriti il testo e il modulo. Ho creato un rettangolo arrotondato, con un raggio di 40 px e una larghezza di 960 px (la larghezza della nostra pagina). Ho incollato lo stile di livello dal testo al punto 8 per dargli quella sensazione di inserimento. Come ho detto prima, tendo sempre a riutilizzare il più possibile gli stili di livello in quanto garantisce coerenza.
Ancora una volta mi sono diretto a IconFinder per trovare l'icona della posta - fortunatamente per noi
l'icona 64px per 64px era esattamente ciò di cui avevamo bisogno. Posiziona quell'icona nell'angolo a sinistra del nostro inserire bar: sarà l'ancora
per la newsletter e aiuta a bilanciare il pulsante Invia.
Successivamente, aggiungi "Vuoi le ultime notizie? Iscriviti alla mailing list." testo. Ho usato di nuovo il Gotham, ma con una dimensione leggermente più piccola a 24px. Rendere
il colore del testo # 161008 (dato che non vogliamo che risulti troppo accentuato) e aggiungi un'ombra di ombra 1 px marrone chiaro (ancora una volta creeremo quella profondità).
Wow! Siamo così vicini. Tutto quello che dobbiamo fare è aggiungere il modulo e-mail e il pulsante e avremo finito. Crea un altro rettangolo arrotondato, con un raggio di 20px
(metà di quello che è il rettangolo arrotondato esterno) e altezza di 40 px (in modo da non avere bordi diritti sui due lati).
Una cosa da notare è quanto coerente sia la spaziatura attorno al lato destro. Dimezzando il raggio interno, manteniamo un'imbottitura consistente tra il contenitore esterno e il contenitore interno.
Utilizzando gli stessi preset per il rettangolo arrotondato (raggio 20px, altezza 40px), crea un nuovo pulsante rettangolo arrotondato. Copia lo stile di livello dalle nostre icone di zoom dal punto 10 (il colore arancione rossastro). Incolla lo stile di livello sul tuo nuovo pulsante. Dovresti avere qualcosa di simile a questo:
Tutto quello che devi fare ora è aggiungere il testo "Invia" e il gioco è fatto!
Questo è tutto. Abbiamo creato una pagina di destinazione unica per iPhone; unire un nuovo stile illustrativo con l'iPhone lucido. Questo tutorial non è solo per un'applicazione di libri: è possibile cambiare i libri sullo scaffale per qualsiasi cosa (convertirlo in un tavolo per bevande). Spero ti sia piaciuto!
Accentsconagua