Share
In questo tutorial ti guiderò attraverso il processo di creazione di un'interfaccia semplice e festosa per un'app Web in Photoshop CC. Il concetto alla base dell'app è che gli utenti possono connettersi con Twitter e scrivere un desiderio di Natale su un tabellone pubblico, creando in effetti un'enorme cartolina natalizia. Guarderemo la tipografia stilistica, combinando una tavolozza di colori piatta e ottenendo una composizione pulita e spaziosa.
Per completare questo tutorial avrai bisogno delle seguenti risorse (liberamente disponibili):
Crea un nuovo documento (File> Nuovo ... ) usando le impostazioni mostrate sotto.
Non dimenticare di verificare che la risoluzione sia impostata su 72 pixel / pollice Impostiamo alcune guide in modo che il nostro layout sia centrato correttamente e la sezione principale (sopra la "piega") sia separata. Vai a Visualizza> Nuova guida ... e impostare le seguenti linee guida: verticale a 200px, 700px e 1200px, e orizzontale a 200px, 800px e 1590px.
Manterremo il nostro documento ben organizzato fin dall'inizio, quindi crea tre gruppi di livelli chiamati Intestazione, Corpo e footer. Attenersi a questa etichetta di Photoshop manterrà le cose organizzate e facili da navigare o modificare. Per creare gruppi vai a Livello> Nuovo> Gruppo ... e dare a ciascuno un titolo come detto. Per creare rapidamente un gruppo, fai clic sull'icona.
Dentro il Intestazione gruppo crea un nuovo gruppo e nominalo TOP BG. Successivamente, seleziona il Strumento rettangolo (T) e disegna a 1400x800px rettangolo. Dovrebbe essere posizionato nella parte superiore del documento nella prima linea guida orizzontale.
Scarica la foto del cielo notturno da unsplash.com (una risorsa brillante per immagini completamente libere al 100%) e posizionala sopra il rettangolo creato (puoi trascinare l'immagine direttamente dal browser nella finestra di Photoshop). Quindi, tieni premuto il tasto ALT tasto e mouse sulla parte inferiore del livello foto. Quando viene visualizzata la freccia, rilasciarla per creare una maschera di ritaglio. Una volta che hai finito con quel clic T CMD + e ridimensionare la foto per adattarla al rettangolo, tenendo premuto il tasto Cambio chiave per ridurlo in proporzione.
Ora fai clic con il pulsante destro del mouse sul livello foto (per visualizzare un menu di scelta rapida) e seleziona Opzioni di fusione… . Quindi, fare clic su Sovrapposizione colore e imposta il colore sul nero # 000000. Infine, riduci il Opacità a 40%.
Ora per un nuovo gruppo. Fare clic sulla piccola freccia accanto al TOP BG cartella per comprimerlo, quindi creare un nuovo gruppo chiamato Albero distintivo Oltre a questo.
Cambia il colore di primo piano in bianco #FFFFFF e selezionare il Strumento Poligono (U). Impostare il lati opzione a 6 e disegna a 128x146px forma. Assicurarsi che si trovi in posizione verticale.
Ora creeremo una forma ad albero di Natale. Cambia il colore di primo piano in # 42a747 e scegli il Strumento penna (P). Crea un nuovo livello sopra la forma del poligono e posiziona alcuni punti con lo strumento Penna per creare metà dell'albero. Tenere Cambio mentre così facendo vincolerai l'angolo dei percorsi, se necessario.
Dopo aver scollegato metà dell'albero, fare clic CMD + J per duplicare il livello. Quindi trasforma la forma (T CMD +) e cambia la larghezza in -100,00%, questo effettivamente capovolgerà la nostra forma attraverso l'asse verticale. Posiziona questa nuova forma accanto all'originale e fai doppio clic sulla miniatura del livello per cambiarne il colore con un verde più scuro # 38993d. Ora abbiamo una bella illustrazione piatta del nostro distintivo dell'albero di Natale.
Ci manca ancora il tronco dell'albero. Crea un nuovo livello e scegli il Strumento rettangolo (U). Imposta il colore di primo piano su marrone # 795000 e disegna a 10x11px rettangolo sotto il nostro albero di Natale.
Con il nostro badge Albero completo, fai clic sulla piccola freccia accanto al nome del gruppo per ridurlo al minimo, quindi occupa meno spazio nel pannello dei livelli. Successivamente, crea un nuovo gruppo chiamato copia, quindi cambia il colore di primo piano in bianco #FFFFFF e selezionare il Strumento di tipo orizzontale (T). Quindi, supponendo che tu abbia già installato il carattere sul tuo sistema, seleziona Klinic Slab. Scegli il Luce versione e impostare la dimensione in punti 62pt. Scrivi la copia come mostrato di seguito oppure crea la tua sequenza personale, posizionandola 50px sotto la prima linea guida orizzontale.
Usa la variante di carattere Light Italic per il 'Grazie' Cambia la dimensione del carattere in 42pt e scrivi "e augura ai tuoi amici un". Mettilo a posto 30px sotto il livello di testo precedente, assicurandosi che sia centrato.
Torna al Albero distintivo gruppo, espanderlo e tenere premuto CMD pulsante seleziona gli strati delle due metà dell'albero. Colpire CMD + J duplicarli. Quindi, rinomina il livello in albero di Natale e spostarlo nel copia gruppo. Fare clic due volte sulla sua miniatura e cambiare il colore in bianco #FFFFFF. Colpire T CMD + trasformare l'oggetto e tenere premuto il Cambio pulsante (per vincolare le proporzioni) ridimensionarlo a 32x27px , posizionandolo prima del livello di testo precedentemente creato.
Ora duplica il livello dell'albero di Natale facendo clic CMD + J e posizionalo subito dopo il livello del testo, mantenendo lo stesso spazio tra questi due livelli 20px. Quindi selezionare il Strumento di tipo orizzontale (T) di nuovo, mantenendo lo stesso font di prima e cambiando la variante del font da Luce a Libro. Digita il seguente testo "Buon Natale!".
È tempo di qualcosa di diverso. Seleziona il Strumento linea (U), impostato Peso a 3px (puoi trovare questa impostazione nella barra in alto) e tracciare una linea, tenendo premuto Cambio quindi è perfettamente dritto. Mettilo a posto 20px sotto il "Buon Natale!" testo. Duplica questa linea colpendo CMD + J, quindi spostalo 3px sotto il primo.
Questo è tutto per il gruppo Copia, quindi ridurlo a icona facendo clic sulla piccola freccia accanto al nome del gruppo. Crea un nuovo gruppo e nominalo Connettiti con Twitter, scegli il Strumento Rettangolo arrotondato (U), impostato Raggio a 99px e cambia il colore di primo piano con un rosso natalizio # cf2f32. Successivamente, disegna a 250x57px rettangolo e posizionarlo a 60 px al di sotto delle linee create in precedenza.
Fare clic con il pulsante destro del mouse sul livello forma per visualizzare il menu di scelta rapida e selezionare Opzioni di fusione… . Quindi modificare il Ictus, impostandolo su 2px. Cambia il colore con il rosso usato in precedenza # cf2f32 e impostare Dentro per il Posizione. Colpire ok.
Imposta il livello del pulsante Riempire a 0%.
Abbiamo bisogno di un testo per il nostro pulsante. Con il Strumento di tipo orizzontale (T) selezionato, scegliere Apri Sans Carattere (normale), impostare la dimensione su 18pt e usa lo stesso colore rosso di prima. Scrivi "Connetti con Twitter". Quindi, tieni premuto il tasto CMD Passare con il mouse sopra la miniatura del rettangolo di forma rettangolo creato in precedenza finché non si vede una nuova icona con i bordi tratteggiati. Quando lo vedi, fai clic su di esso per fare una selezione di quel livello. Quindi, seleziona il livello testo, premi V e allinearlo orizzontalmente e verticalmente usando gli strumenti di allineamento mostrati nello screenshot qui sotto.
Colpire CMD + D per deselezionare il pulsante. Riduci a icona il gruppo e trova il file Albero distintivo gruppo. Selezionalo e premi CMD + J per duplicarlo o fare clic con il tasto destro del mouse e selezionare Gruppo duplicato ... . Espandi il gruppo ed elimina tutto tranne le due metà dell'albero. Posiziona il nostro nuovo albero 50px sotto il pulsante.
Riduci al minimo il Intestazione raggruppa e apri il Corpo gruppo. Scegli il Strumento rettangolo (U), cambia il colore di primo piano in # e9e9e9 e disegna a 1400x790px rettangolo tra la prima e la seconda linea guida orizzontale. Fare doppio clic sul nome del livello e rinominarlo in BG.
Ora crea un nuovo gruppo chiamato Desiderio. Cambia il colore di primo piano in bianco #FFFFFF e scegli il Strumento Rettangolo arrotondato (U) con un Raggio di 5px . Disegna un rettangolo di 485x175px.
Ancora una volta, crea un nuovo livello, scegli il Rectange Tool (U) e tenendo premuto il Cambio tasto disegna a 30x30 px rettangolo. Colpire T CMD + e, tenendo premuto il tasto Cambio chiave, ruotare su 45.00 ° , posizionandolo 10px sopra il rettangolo arrotondato e 10px a destra dalla prima linea guida verticale.
Avendo creato due forme, tieni premuto il CMD chiave, selezionare entrambe le forme e andare a Livello> Unisci forme. Successivamente, fai clic con il pulsante destro del mouse sul nostro nuovo livello di forma unito e seleziona Opzioni di fusione… . Dai un'occhiata Ombra esterna, modificare Modalità di fusione a Normale, Opacità a 5%, Angolo 90 °, deselezionare il Luce globale opzione, impostare Distanza a 2px, diffusione e Taglia a 0. (Accidenti!)
Scegli il Strumento di tipo orizzontale (T), selezionare Apri Sans (Grassetto), impostare la dimensione su 13pt, cambia il colore di primo piano in grigio # a3a3a3 e scrivi l'ora e la data del nostro desiderio campione, ad es. 22:13 - 28 NOVEMBRE 2013.
Tempo per un avatar. Crea un nuovo gruppo chiamato PIC e posizionarlo sopra lo strato di forma arrotondata. Seleziona il Ellipse Tool (U) e, tenendo premuto Cambio chiave, disegna un cerchio di 90x90px. Dopo, spostalo 20px giù dall'alto e 20px a destra dalla prima linea guida verticale.
Ora vai su uifaces.com, un sito di stock avatar gratuito per le royalty (puoi anche aggiungere il tuo se vuoi supportarlo). Scegli un volto che senti attratto e copialo nei tuoi appunti. Successivamente, torna al documento di Photoshop e incollalo facendo clic CMD + V, assicurandoti che si trovi esattamente sopra il livello del cerchio.
Quindi tieni premuto ALT premere il tasto e il mouse sul livello dell'immagine incollata finché non si vede una freccia rivolta verso il basso. Quando lo vedi, fai clic su di esso per creare un Maschera di ritaglio. Quindi utilizzare il Sposta strumento (V) per posizionarlo al centro del cerchio e colpire T CMD + ridimensionarlo se necessario.
Riduci al minimo il PIC raggruppa e seleziona il Strumento di tipo orizzontale (T) di nuovo, imposta il colore di primo piano su # 2f2f2f, selezionare 26pt dimensioni Klinic Slab (Medio) carattere e scrivere il nome dell'autore. Mettilo a posto 30px dall'alto e 20px proprio dalla foto dell'autore.
Ancora una volta, cambia il colore di primo piano con il rosso usato in precedenza # cf2f32, cambia il carattere in Apri Sans (Semibold) 16 pt taglia e scrivi il nome utente dell'autore Twitter. Usiamo questo colore per differenziarlo dal testo in modo che sia percepito come un collegamento.
Cambia il colore di primo piano in grigio scuro # 878787, riduci la dimensione del carattere a 14pt, cambia il peso del carattere in Regolare e scrivi un messaggio simile a un tweet (desiderio). Assicurarsi che l'altezza della linea sia impostata su 21pt, per dare un po 'di respiro così il nostro desiderio è leggibile. Per farlo, vai su Finestra> Carattere e sul pannello dei caratteri imposta l'altezza della linea su 21pt.
Nostro Desiderio gruppo è fatto, quindi ridurlo al minimo, quindi utilizzare il Sposta strumento (V) spostalo 60px sotto l'area dell'intestazione. Duplica il Desiderio gruppo colpendo CMD + J o facendo clic con il tasto destro del mouse sul nome del gruppo e selezionando Gruppo duplicato ... . Sposta questo gruppo duplicato a destra in modo che il suo angolo sia allineato con l'ultima linea guida verticale. Cambia il nome, l'immagine avatar e lo desideri.
Ora duplica altri quattro Desiderio gruppi e posizionarli in due colonne. Uso 30px di spazio sotto e sopra. Per l'ultima riga, usa 50px dello spazio sotto i gruppi per mantenerlo coerente con la spaziatura nella parte superiore di Corpo gruppo. Cambia i nomi, i nomi utente, i desideri e gli avatar di Twitter per renderlo più naturale piuttosto che lasciare contenuti duplicati.
L'ultimo passaggio per l'area desideri è aggiungere alcuni collegamenti ipertestuali e hashtag (come questi sono i desideri di Twitter). Afferreremo il verde precedentemente utilizzato # 42a747 e Semibold peso del carattere per rendere link e hasthtag diversi e percepiti come cliccabili. Basta usare il Strumento di tipo orizzontale (T) per selezionare un hashtag o url, evidenziarlo, cambia il peso del font in Semibold e il colore al verde.
Spostandoci verso il basso nel layout della pagina, ora progettiamo l'area del piè di pagina.
Inizia riducendo al minimo il Corpo raggruppare ed espandere il footer gruppo. Imposta il colore di primo piano su # 727.272, scegli il Strumento di tipo orizzontale (T) e scegliere Klinic Slab (Medio) a 26pt . Dopo di ciò, scrivi quanto segue "Grazie alla tua famiglia, amici, follower". Per mantenerlo coerente, dargli abbastanza spazio bianco intorno e spostarlo 60px giù dal gruppo Corpo.
Crea un nuovo gruppo chiamato Casella dei messaggi, imposta il colore di primo piano a # f7f7f7 e scegli il Strumento Rettangolo arrotondato (U) con un raggio di 5px. Disegnare un 525x220px rettangolo, posizionandolo 30px sotto la voce.
Ora espandere il Corpo gruppo, trova il Desiderio raggruppa ed espandi anche questo, poi trova il PIC raggruppa e duplicalo colpendo CMD + J. Trascina il gruppo duplicato sul tuo Casella dei messaggi gruppo, posizionandolo sopra il livello di forma precedentemente creato. Ora riduci a icona tutti i gruppi aperti, seleziona la copia recente PIC raggruppa e ridimensionalo a 28x28px colpendo T CMD +.
Abbiamo bisogno di mostrare qualche identificazione, che sta postando il desiderio, quindi useremo il nome utente Twitter dell'utente. Imposta il colore di primo piano su # 878787, scegli il Strumento di tipo orizzontale (T) e scegliere Apri Sans (Semibold) presso 14pt. Scrivi quanto segue: "Connesso come @nomeutente".
Creiamo un pulsante di disconnessione, quindi se gli utenti vogliono cambiare il loro account o semplicemente disconnetterlo avranno la possibilità di farlo. Crea un nuovo gruppo chiamato Disconnect, imposta il colore di sfondo sul bianco #FFFFFF e scegli il Strumento rettangolo arrotondato (T) con un raggio di 99px . Disegnare un 90x24px rettangolo.
Cambia il colore di primo piano in grigio # 878787 e scegli il Strumento di tipo orizzontale (T). Scegliere Apri Sans (Grassetto) a 10pt e scrivi "Disconnect". Posizionalo al centro del pulsante.
Riduci al minimo il Disconnect gruppo, imposta il colore di primo piano su bianco #FFFFFF e scegli il Strumento linea (U), imposta il Peso a 1px e tieni premuto il tasto Cambio tasto tracciare una linea orizzontale attraverso la forma della finestra di messaggio. Mettilo a posto 10px giù dall'immagine.
Cambia il colore di primo piano in # b2b2b2 e scegli il Strumento di tipo orizzontale (T). Scegliere Apri Sans Carattere (normale), impostando la dimensione del carattere su 18pt e scrivi una copia di esempio.
Riduci al minimo il Casella dei messaggi raggruppare e crearne uno nuovo chiamato Grazie pulsante. Dopodiché, imposta il colore di primo piano su verde # 42a747 e scegli il Strumento Rettangolo arrotondato (U) con un raggio di 5px e disegna a 525x60px rettangolo di dimensioni Mettilo a posto 20px sotto la forma della finestra di messaggio.
Fare doppio clic sul livello forma o fare clic con il tasto destro e selezionare Opzioni di fusione… . Selezionare Ombra esterna e applicare le opzioni mostrate sotto, il codice colore per il verde utilizzato è # 349239.
Cambia il colore di primo piano in bianco #FFFFFF e scegli il Strumento di tipo orizzontale (T) con le seguenti impostazioni: Apri Sans (Grassetto) 18pt. Dopodiché scrivi "Post 'Grazie" e posiziona il testo al centro del pulsante.
Fantastico, abbiamo quasi finito! Adesso minimizza il Grazie pulsante raggruppare e crearne uno nuovo chiamato cinguettio. Cambia il colore di primo piano con il colore del marchio di Twitter # 00acee e scegli il Strumento Rettangolo arrotondato (U) con Raggio di 99px. Successivamente, disegna a 160x35px rettangolo e posizionarlo 30px sotto il pulsante verde e 10px a sinistra della guida centrale.
Cambia il colore di primo piano in bianco #FFFFFF e scegli il Strumento di tipo orizzontale (T) con le seguenti impostazioni: Apri Sans (Semibold) presso 12pt. Scrivi "TWEET THE LOVE" e posizionalo al centro del pulsante.
Riduci al minimo il cinguettio raggruppa e duplicalo colpendo CMD + J. Dopodiché, fai doppio clic sul nome del gruppo e rinominalo Facebook. Posizionalo sul lato opposto, modifica la dicitura, quindi cambia il colore del pulsante in # 3b5998.
Riduci al minimo il Facebook gruppo, cambia il colore di primo piano con # 878787, scegli il Strumento di tipo orizzontale (T) e scegliere Apri Sans (Semibold) presso 14 pt . Annota la tua riga di copyright e ... hai finito!
Così il gioco è fatto. Ti ho guidato attraverso la creazione di un layout del sito web, da zero, in modo organizzato ed efficiente.
Spero che tu abbia imparato qualcosa di nuovo seguendo questo tutorial. Se avete domande o avete difficoltà, non esitate a chiamarmi nella sezione commenti o tramite Twitter.
Accentsconagua