Share
In questo tutorial utilizzeremo Adobe Photoshop per progettare un'interfaccia web elegante che può essere utilizzata per qualsiasi sito web di app per dispositivi mobili. Copriremo una serie di tecniche tra cui forme, trame, maschere, icone personalizzate, tipografia e molto altro che può essere facilmente adattato e applicato ai tuoi progetti web.
Tutorial ripubblicatoOgni poche settimane, rivisitiamo alcuni dei post preferiti del nostro lettore da tutta la cronologia del sito. Questo tutorial è stato pubblicato per la prima volta nel gennaio del 2011.
Questo tutorial è basato sul design scuro e pulito del sito Web per Leaflet, un'app per iPhone progettata per gli editori di marketplace Envato. Eric Alli di Trilab Media ha aiutato a progettare e codificare il sito, quindi ci guiderà attraverso il tutorial passo passo. Se stai cercando di utilizzare un design simile per i tuoi progetti o semplicemente vuoi vedere come è stato realizzato, ci sono un sacco di trucchi e tecniche eccellenti in questo tutorial che sarai in grado di cogliere. Godere!
Iniziamo creando un nuovo documento Photoshop selezionando File> Nuovo.
Imposta la larghezza e l'altezza del canvas su 1100 px, la risoluzione su 72 e il contenuto dello sfondo su White.
Successivamente, dobbiamo creare due guide che fungano da contenitore per la nostra pagina.
Seleziona Visualizza> Nuova guida ...
Per la prima guida, imposta Orientamento su Verticale e Posizione su 70 px.
Per la seconda guida, selezionare Visualizza> Nuova guida ... di nuovo e creare un'altra guida verticale con la Posizione impostata su 1030 px.
Dovremmo ora disporre di uno spazio delineato di 960 px di larghezza per la nostra pagina.
Il prossimo passo è lo sfondo. Seleziona lo strumento Secchiello (G) e imposta il tuo campione di colore in primo piano su "1e1e1e". Quindi, fai clic su un punto qualsiasi dell'area di disegno per applicare il colore al nostro livello Sfondo.
Aggiungiamo anche un po 'di texture al nostro background selezionando Filtro> Rumore> Aggiungi disturbo ...
Impostare l'importo su 2,5 e fare clic su OK.
Ora creeremo un riflettore che ti aiuterà a concentrarti sulla parte superiore della nostra pagina.
Seleziona lo strumento pennello (B) e modifica il diametro master a 400 px e imposta la durezza sullo 0%.
Crea un nuovo livello selezionando Livello> Nuovo> Livello ... e assegnagli il nome di "Spotlight".
Cambia il tuo campione di colore in primo piano con "FFFFFF" (bianco) e crea un cerchio vicino alla parte superiore della tela usando lo strumento Pennello.
Per aiutare a fondere il riflettore sullo sfondo, aggiungi un po 'di rumore al livello Spotlight selezionando Filtro> Aggiungi disturbo ...
Impostare il valore su 20, selezionare Monocromatico e fare clic su OK.
Per appianare i nostri riflettori, seleziona Filtro> Sfocatura> Sfocatura gaussiana ...
Impostare il Raggio su 50.0 e fare clic su OK.
Infine, imposta Opacity sul livello Spotlight a circa il 25%.
Ora aggiungeremo la nostra grafica del telefono. Per questo tutorial userò la grafica dell'iPhone dell'eccellente PSD Vector iPhone 4 di Psdtuts + che può essere scaricata gratuitamente qui. Inoltre, tieni presente che puoi utilizzare qualsiasi grafica del telefono adatta alle tue esigenze particolari (Android, Blackberry, ecc.).
Una volta scaricato, apri il PSD in Photoshop. Espandi la cartella "Telefoni" nel pannello Livelli, fai clic destro sulla cartella "FRONT" e seleziona Duplica gruppo ... Qui, dai al gruppo un nome riconoscibile (ho usato "iPhone"), imposta la destinazione su "Depliant" (o qualunque cosa sia hai chiamato il tuo PSD per questo tutorial) e fai clic su OK. Al termine, chiudi questo PSD.
Posiziona il nostro primo iPhone toccando la guida sinistra e circa 100 px dalla parte superiore della tela.
Questo è anche un buon momento per personalizzare lo screenshot nell'iPhone.
Un modo semplice per farlo è espandere la cartella "iPhone" nel pannello dei livelli, quindi fare clic sulla cartella "SCHERMO CONTENUTO". Ora seleziona File> Inserisci, scegli lo screenshot dal browser, quindi fai clic su Inserisci.
Trascina il tuo layer posizionato sull'iPhone e ridimensionalo per adattarlo allo schermo. Al termine, fai clic su Invio per salvare le modifiche.
Duplica il gruppo "iPhone" selezionando Livello> Duplica gruppo ... chiamalo "iPhone 2" e fai clic su OK nella finestra di dialogo.
Seleziona Modifica> Trasforma> Scala ed espandi l'iPhone duplicato alla larghezza e all'altezza del 107,0%. Posiziona questo iPhone intorno a 50 px dalla parte superiore e 200 px dalla guida a sinistra.
Ripeti il passaggio sopra menzionato per sostituire lo screenshot nella cartella "iPhone 2".
Il tocco finale per i nostri iPhone è quello di creare un riflesso di loro. Iniziamo selezionando entrambi i gruppi di iPhone ("iPhone" e "iPhone 2"), quindi seleziona Livello> Duplica livelli ... e fai clic su OK. Quindi seleziona Livello> Unisci livelli.
Quindi abbiamo bisogno di capovolgere i nostri iPhones. Seleziona Modifica> Trasforma> Rifletti verticalmente, quindi posiziona il livello capovolto direttamente sotto l'iPhone originale.
Aggiungi una maschera di livello facendo clic sull'icona Maschera di livello nel pannello Livelli.
Seleziona lo strumento sfumatura (G) e scegli un campione da nero a bianco. Disegna una linea dall'alto verso il basso sugli iPhone capovolti con un'altezza di circa 50px.
Infine, abbassa l'opacità del livello al 30%.
Il prossimo passo è aggiungere i dettagli principali della nostra app alla destra dei nostri telefoni. Prima di iniziare, aggiungiamo un'altra guida per mantenere le cose allineate. Seleziona Visualizza> Nuova guida ... seleziona "Verticale" per l'orientamento e 550 px per la posizione.
A circa 100px dalla parte superiore della nostra tela, aggiungeremo il nostro logo. Sto usando un logo che ho realizzato in precedenza, puoi semplicemente utilizzare il testo o inserire il tuo logo qui.
Sotto il logo, aggiungeremo un paragrafo di testo per la descrizione della nostra app. Selezionare lo strumento di tipo orizzontale (T) e tracciare un rettangolo tra la guida centrale e la guida destra. Imposta le impostazioni dei caratteri come segue:
Successivamente creeremo un pulsante per i visitatori per acquistare la nostra app. Utilizzando lo strumento Rettangolo arrotondato (U), disegna un rettangolo di 240x75 px con un raggio di 4 pixel. Allinearlo in modo che il lato sinistro del pulsante tocchi la guida centrale ed è 45 px al di sotto del testo.
Ora applicheremo alcuni stili di livello. Fai doppio clic sul lato destro del livello nel pannello Livelli e utilizza l'immagine sotto per riferimento.
Per aggiungere l'icona Apple, disegna una piccola casella di testo all'interno del pulsante usando lo Strumento testo orizzontale (T), quindi copia e incolla questo simbolo: nella casella di testo e imposta le impostazioni dei caratteri come segue:
Infine, modifica l'opacità su questo livello al 30%.
Crea un'altra casella di testo a destra e aggiungi 2 righe di testo (ad es. "Scarica ora su App Store"). Applica le seguenti impostazioni di carattere:
Aggiungi uno stile di livello a questo testo usando l'immagine seguente come riferimento:
Successivamente, aggiungeremo un separatore alla destra del testo che abbiamo appena aggiunto. Seleziona lo strumento Linea (U) e mentre tieni premuto il tasto MAIUSC, traccia una linea da 1px dalla parte superiore del pulsante in basso, quindi cambia il colore della linea in "FFFFFF" (bianco).
Cambia l'opacità di questa linea al 15% e duplicala selezionando Livello> Duplica livello ... e fai clic su OK. Cambia il colore di questa linea duplicata in # 000000 (nero) e modifica l'opacità al 10%. Quindi, sposta la linea duplicata 1px a sinistra.
L'ultimo elemento da aggiungere a questo pulsante è un'icona che indica il download. Inizia selezionando lo strumento Ellisse (U) e creando un cerchio di 25px di diametro.
Quindi, aggiungi i seguenti stili di livello:
Infine, prendi lo Strumento forma personalizzata (U) e scegli una forma a freccia (sto usando una forma predefinita chiamata "Freccia 9"). Crea una piccola freccia 10px in larghezza all'interno del cerchio e cambia il colore in "FFFFFF" (bianco).
Adesso crea una piccola scatola per mostrare il prezzo della nostra app. Seleziona lo strumento Rettangolo arrotondato (U), imposta il Raggio su 4px e crea un rettangolo che si sovrappone al nostro pulsante di download ed è 52px in altezza e una larghezza maggiore di 100px.
Cambia il colore di questa casella in "2B2B2B" e spostalo sotto il pulsante di download nel pannello Livelli.
Successivamente, aggiungi uno stile tratto tratto a questa casella con le seguenti impostazioni:
Ora possiamo aggiungere le informazioni sul prezzo reale. Per questo creeremo due caselle di testo separate poiché il contenuto all'interno richiede uno stile diverso.
Per la prima casella di testo, aggiungi del testo (ho usato "SOLO") e applica le seguenti impostazioni di carattere:
Per la seconda casella di testo, aggiungi il tuo prezzo (ho usato "$ 1,99") e applica le seguenti impostazioni di carattere:
Passando alla parte inferiore della nostra pagina, dobbiamo creare una separazione. Per questo, useremo la tecnica a due linee che abbiamo applicato in precedenza sul pulsante di download per dare al separatore un aspetto "incassato".
Seleziona lo strumento Linea (U) e mentre tieni premuto il tasto MAIUSC, traccia una linea da 1px dalla guida sinistra alla guida destra, quindi cambia il colore della linea in "000000" (nero).
Cambia l'opacità di questa linea all'80% e duplicala selezionando Livello> Duplica livello ... e fai clic su OK. Cambia il colore di questa linea duplicata in "FFFFFF" (bianco) e modifica l'opacità al 10%. Quindi sposta la linea duplicata 1px verso il basso in modo che sia sotto la linea nera.
Nella sezione seguente, il separatore di righe che abbiamo appena creato, aggiungeremo due colonne, per gli screenshot e un elenco di funzionalità.
Iniziando con gli screenshot, inizia importando il tuo primo screenshot selezionando File> Inserisci. Scegli il nostro screenshot dal browser di file e fai clic su Luogo. Ridimensiona lo screenshot all'80% di larghezza e altezza, quindi sposta lo screenshot vicino alla guida a sinistra e fai clic su Invio.
Seleziona il livello nel pannello Livelli e fai clic due volte sul pulsante "Aggiungi maschera" per aggiungere una maschera vettoriale.
Ora seleziona lo strumento Rettangolo arrotondato (U) e cambia il raggio a 6px e crea un rettangolo sullo screenshot con la dimensione di 175x120px.
Infine, aggiungeremo uno stile tratto tratto con le seguenti impostazioni:
Ripeti i passaggi precedenti per tutti gli screenshot e dai loro 35px di spazio tra loro.
Per separare i nostri screenshot dalle funzioni, disegna una linea da 1px dalla cima del primo screenshot alla fine dell'ultimo screenshot che è di circa 55px dagli screenshot.
Cambia il colore della linea in "FFFFFF" (bianco) e imposta la sua opacità al 5%.
Aggiungiamo un titolo che descriverà le nostre caratteristiche (ho usato "Caratteristiche opuscolo"). Posiziona il testo 55 px dalla linea di separazione sinistra e usa le seguenti impostazioni di carattere:
Ora creiamo il nostro elenco di funzionalità e posizioniamolo sotto il titolo. Crea una casella di testo e aggiungi cinque o sei linee di funzionalità e assegna loro le seguenti impostazioni di carattere:
Ripeti i passaggi precedenti per aggiungere i requisiti dell'app.
Per far risaltare la nostra lista di funzionalità, creiamo alcuni semplici proiettili personalizzati.
Inizia spostando l'elenco delle funzionalità casella di testo 25px a destra.
Ora seleziona lo strumento Ellisse (U) e crea un cerchio di 9 px di diametro a sinistra della prima feature. Cambia il colore del cerchio in "bce086".
Aggiungi il seguente stile di livello alla cerchia:
Ora dobbiamo duplicare i nostri proiettili e allinearli a ciascuna funzione. Inizia duplicando il livello cerchio selezionando il livello, quindi facendo clic su Livello> Duplica livello ...
Successivamente, sposta il livello duplicato di 28px (la quantità di Leading applicata all'elenco delle caratteristiche). Ripeti i passaggi precedenti tre volte.
Passando alla parte footer della nostra pagina, applicheremo ancora una volta la tecnica a due linee applicata in precedenza Passaggio 9 aggiungere un po 'di separazione.
Ora possiamo aggiungere alcuni link utili alla nostra area footer. Per prima cosa dobbiamo creare quattro caselle di testo, affiancate, che terranno i nostri collegamenti.
Inizia creando una casella di testo che è di circa 160x40px. Aggiungi del testo e ripeti 3 volte. Ecco alcuni esempi di testo che è possibile utilizzare:
Utilizzare quanto segue per le impostazioni dei caratteri:
Come puoi notare le nostre scatole sono irregolari e non allineate correttamente, non ti preoccupare, lo sistemeremo nel prossimo passaggio.
Per correggere i nostri problemi di allineamento, inizia posizionando le quattro caselle di testo che abbiamo creato sopra in una cartella e chiamala "Piè di pagina".
Innanzitutto, posiziona la prima casella di testo 55 px dalla guida sinistra e l'ultima casella di testo tocca la guida destra.
Ora seleziona i quattro livelli di testo nella cartella Piè di pagina e prendi lo strumento Sposta (V). Fare clic sul pulsante Allinea centri verticali, quindi fare clic sul pulsante Distribuisci centri orizzontali dalla barra degli strumenti Sposta.
Ora possiamo aggiungere alcune icone personalizzate per accentuare i nostri collegamenti.
Seleziona lo strumento Ellisse (U) e crea un cerchio di 36px di diametro accanto alla nostra prima casella di testo. Cambia il colore di questo cerchio in "FFFFFF" (bianco).
Ora seleziona Livello> Rasterizza> Livello.
Il prossimo passo è aggiungere la nostra icona a questa cerchia. Per la prima icona, sto usando la "t" di Twitter che ho scaricato gratuitamente qui.
Una volta scaricato, seleziona File> Inserisci in Photoshop per importare l'icona nel nostro documento. Una volta importati, ridimensiona l'icona al 28% di larghezza e altezza, posizionala sopra la nostra cerchia, quindi fai clic su Invio.
Quindi, fai clic con il pulsante destro sulla miniatura dell'icona Twitter nel pannello Livelli e fai clic su Seleziona pixel.
Ora seleziona il livello cerchio nel pannello Livelli, quindi seleziona Modifica> Cancella.
Elimina l'icona Twitter importata selezionandola nel pannello Livelli e fai clic o trascinala sull'icona del Cestino.
Infine, abbassa l'opacità sul livello del cerchio al 15%.
Per il resto delle icone mostrate sopra, ripeti i passaggi Passaggio 18 utilizzando altre icone o forme personalizzate in Photoshop.
Per aggiungere un tocco finale ai nostri collegamenti a piè di pagina, diamo loro un tocco di colore per farli risaltare.
Usando lo Strumento Testo Orizzontale (T) evidenzia una parte del testo in ogni casella di testo e cambia il suo colore in "83b546".
È tutto! Spero che ti sia piaciuto questo tutorial e ho trovato alcune tecniche utili che puoi adattare / applicare al tuo prossimo progetto.
Accentsconagua