Share
In questo tutorial userò Photoshop CS6 per progettare una pagina di portfolio semplice, pulita, a tre colonne, con una timeline di tendenza. Durante questo processo vedremo la creazione di griglie personalizzate con linee guida, stili di tipografia e giochi con colori e contrasto per ottenere l'estetica che vogliamo. Il file PSD finito sarà pronto da consegnare a uno sviluppatore per la codifica.
Per poter seguire, avrai bisogno dei seguenti beni (disponibili gratuitamente):
Inizia creando un nuovo documento (File> Nuovo ... ) usando le impostazioni mostrate sotto.
Impostiamo alcune guide in modo che il nostro layout abbia spazio sufficiente e un aspetto equilibrato. Vai a Visualizza> Nuova guida ... e imposta le seguenti linee guida: verticale a 20px, 50px, 115px, 230px, 550px, 570px, 875px e 1180px, e orizzontale a 60px.
Mancia: È anche possibile utilizzare il plug-in GuideGuide Photoshop per rendere questo processo ancora più rapido.
Manterremo il nostro documento ben organizzato fin dall'inizio, quindi creiamo tre gruppi di livelli chiamati Barra laterale sinistra, descrizioni e Lavoro. 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.
La barra laterale a sinistra fungerà da area per un profilo utente, avatar, collegamenti social e navigazione primaria. Costruiamolo!
Seleziona il Strumento rettangolo (T), cambia il colore di primo piano in # 11171c e disegna un rettangolo di 230x1320px all'interno del Barra laterale sinistra gruppo. Dovrebbe essere posizionato a sinistra del documento tra il bordo del documento e la quarta linea guida verticale.
Crea un nuovo gruppo sopra la forma rettangolare creata in precedenza e nominalo Foto del profilo. Dopo, scegli il Ellipse Tool (U) e, tenendo premuto il tasto Cambio pulsante, disegna un cerchio di 100 x 100 pixel e posizionalo subito sotto la prima linea guida orizzontale. Dovrebbe essere centrato anche con la terza linea guida verticale.
Ora vai su uifaces.com e prendi uno degli avatar disponibili. In alternativa, trova semplicemente la tua foto e incollala sopra la forma del cerchio creata di recente. Quindi, tieni premuto il tasto alt premere il tasto e il mouse sulla miniatura del livello foto fino a quando non si vede una piccola freccia in giù. Quando lo vedi, rilascia il pulsante e creerà a Maschera di ritaglio, legare la tua foto a una forma circolare. Allinearlo come ritieni opportuno, usando il Sposta strumento (V).
Adesso minimizza il Foto del profilo raggruppa facendo clic sulla piccola freccia accanto al titolo del gruppo. Dopodiché, cambia il colore di primo piano con #FFFFFF e scegli il Strumento di tipo orizzontale (T). Seleziona il Lato (regolare) font, imposta dimensioni su 16 pt e scrivi il nome del proprietario del nostro portafoglio. Nel mio caso è completamente fittizio Chris Johnson. Mettilo a posto 25px sotto l'immagine del profilo e assicurarsi che sia centrato con la terza linea guida verticale.
Ora abbiamo bisogno di una breve descrizione per il nostro portfolio in modo che i visitatori capiscano immediatamente di cosa si tratta. Useremo lo stesso strumento; tutto quello che dobbiamo fare è ridurre la dimensione del carattere a 14pt e scrivi un breve paio di righe sul proprietario del portafoglio. Per farlo sembrare organizzato ed equilibrato posizionalo 20px più in basso quindi ha un po 'di spazio per respirare.
Buono. Ora posizioniamo alcune icone dei social media per semplificare la connessione con il proprietario del portfolio. Crea un nuovo gruppo con il seguente titolo: Social media. Successivamente, vai su Iconfinder per scaricare le icone Dribbble, Twitter, Facebook e Google+ come PNG. Trascinali sul documento di Photoshop e inseriscili all'interno Social media gruppo. Ora fai clic con il pulsante destro sull'icona Dribbble, seleziona Opzioni di fusione… e applicare il Sovrapposizione colore opzione. Invece del rosso predefinito, impostare il colore su bianco.
Anche tutte le altre icone dovrebbero essere bianche, quindi applichiamo lo stesso stile di livello al resto delle icone. Basta fare clic con il tasto destro del mouse su Dribbble icona livello e selezionare Copia stile livello. Quindi, tieni premuto il tasto CMD chiave e selezionare il cinguettio, Facebook e Google+ strati. Di nuovo, fai clic con il pulsante destro del mouse su uno di essi e seleziona Incolla stile layer. Infine, allinea le icone in modo che ci sia un 10px spazio su ciascun lato e il gruppo è posizionato 20px sotto il testo descrittivo.
Cambiamo il colore di primo piano in bianco #FFFFFF, quindi scegli il Strumento linea (U), impostato peso a 1px e, tenendo premuto il tasto Cambio tasto, traccia una linea orizzontale dal bordo sinistro del documento alla quarta linea guida verticale. Sposta 50px dalle icone.
Per rendere la nostra linea visivamente più sottile, riduciamo le linee del livello Opacità a 10%.
Concentriamoci ora sulla nostra navigazione, quindi crea un nuovo gruppo chiamato Navigazione e posizionarlo sopra il livello del rettangolo scuro. Quindi seleziona un'icona di documento dalle icone vettoriali gratuite dall'icona di Chapps e trascinala sul documento del portfolio. Colpire T CMD + ridimensionare l'icona a 13x16px. Dopodiché, fai doppio clic sul nome del livello e rinominalo Icona di lavoro. Fatto questo, fai doppio clic su una miniatura del livello e cambia il colore in # d35136. Posiziona l'icona 40px sotto la linea sottile e 20px dal bordo sinistro, quindi si allinea con la prima linea guida verticale.
Ora per alcuni elementi di navigazione. Scegli il Strumento di tipo orizzontale (T), scegli il Lato (grassetto) font, imposta dimensioni su 14pt e scrivi quanto segue: LAVORO. Posizionalo davanti alla seconda linea guida orizzontale e assicurati che si allinea verticalmente con Icona di lavoro.
Cambia il colore di primo piano in # 424a51 e, usando lo stesso strumento di testo, annota alcune categorie per andare sotto lavoro, ognuna che inizia su una nuova riga. Assicurarsi che l'altezza della linea sia impostata su 24pt quindi le nostre categorie sono facilmente leggibili. Posiziona il livello delle categorie 20px sotto il livello di testo precedentemente creato.
Dobbiamo indicare lo stato attivo del collegamento. Per la categoria attiva usa il bianco #FFFFFF, semplicemente clicca sul testo mentre Strumento di tipo orizzontale (T) è ancora selezionato, evidenzia la prima categoria e cambia il colore.
Ora seleziona un'icona utente dall'icona usata in precedenza e ridimensionala a 16x16px utilizzando T CMD +. Fare clic due volte sulla miniatura del livello dell'icona e cambiare il colore in # 27b599, rinominare il livello in Icona utente quindi è più facile gestire i nostri livelli. Mettilo a posto 30px sotto l'ultima categoria per dargli uno spazio negativo che fungerà da separatore.
Cambia il colore di primo piano in verde # 27b599 come usato per Icona utente e scegli il Strumento di tipo orizzontale (T). Seleziona il Lato (grassetto) font, imposta la dimensione su 14pt e scrivi DI. Metti questa etichetta subito dopo l'icona dell'utente, come hai fatto per la sezione sopra. Quindi cambia il colore di primo piano in # 424a51 e inserisci alcuni titoli di link per la sezione "about".
Creiamo ora l'ultima sezione sulla nostra navigazione; Contatto. Scegli l'icona della posta da Icone vettoriali gratis da Chapps e ridimensionalo a 16x13px, dopodiché cambia il suo colore in # 088ecc e posizionarlo coerentemente come le icone precedenti, 30px sotto l'ultimo livello di testo del Di sezione. Dopo essere entrato nel CONTATTO testo, cambia il colore di primo piano in # 424a51 e scrivere alcuni titoli di collegamento per la sezione.
Spostando un isolato a destra, iniziamo ora con le descrizioni degli articoli del nostro portfolio.
Ridurremo al minimo l'attuale utilizzo Navigazione e Barra laterale sinistra gruppi facendo clic sulle piccole frecce accanto ai nomi dei gruppi. Espandi il descrizioni gruppo, cambia il colore di primo piano con # f7f7f7 e selezionare il Strumento rettangolo (T). Successivamente, disegna una forma rettangolare rettangolare tra il bordo di Barra laterale sinistra e la quinta linea guida verticale. Questo rettangolo dovrebbe essere 320x1320px.
Adesso cambia il colore di primo piano con # e7e7e8 e scegli il Strumento linea (U). Imposta il peso su 1px e, tenendo premuto il tasto Cambio tasto, traccia una linea verticale dall'alto verso il basso sulla quinta linea guida verticale. Ciò dovrebbe creare una migliore separazione visiva tra il descrizioni sfondo della sezione di gruppo e lo sfondo principale. Colpire CMD +; per nascondere / mostrare le linee guida. Infine, rinomina il livello linea in Linea V quindi ha senso dopo.
Disegneremo un'altra linea verticale, quindi cambia la linea Peso a 3px e tracciare un'altra linea sul documento (tenendo premuto il tasto Cambio chiave per mantenere la verticalità perfetta). Fare doppio clic sul nome del livello per rinominarlo Sequenza temporale. Dopodiché sposta la linea a 24px direttamente dal Barra laterale sinistra bordo e 30 px in giù dalla parte superiore del documento.
Cambia il colore di primo piano con il rosso usato in precedenza # d35136 e scegli il Ellipse Tool (U). Quindi, tieni premuto il tasto Cambio chiave e disegna un cerchio di 11x11px. Posizionalo a 20px a destra dal bordo del Barra laterale sinistra area e 20px in giù dalla parte superiore del documento. Il nostro piccolo cerchio dovrebbe essere ben posizionato sulla parte superiore della linea creata di recente.
Ora fai clic con il pulsante destro del mouse sul livello cerchia creato di recente e seleziona Opzioni di fusione… . Clicca su Ictus. Impostato Taglia a 3px, Posizione a Al di fuori e colore a # f7f7f7. Questo tratto di colore di sfondo creerà l'effetto del nostro cerchio che galleggia accanto a una linea.
Cambia il colore di primo piano in # 11171c e scegli il Strumento di tipo orizzontale (T). Come ususivo, scegli il Lato (grassetto) font, imposta la dimensione su 14pt e inserisci una data per il lavoro, ad es. "7 nov 2013". Quindi, usando il Sposta strumento (V), sposta il livello di data 20px a destra del cerchio rosso e 20px in basso dalla parte superiore del documento.
A questo punto dovresti aver notato uno schema nella nostra spaziatura. È importante essere coerenti e utilizzare la spaziatura ritmica per elementi diversi in modo che il design appaia equilibrato.
Cambia il colore di primo piano in # 5e5e5e quindi è leggermente più leggero di allora. Questo crea una gerarchia visiva, rendendo la lettura molto più semplice. Usa lo stesso Strumento di tipo orizzontale (T), Lato font, ma questa volta cambia il peso del font in Regolare e inserisci alcune righe per una breve descrizione del lavoro. Quindi, effettua una interruzione di linea colpendo il accedere pulsante due volte e inserisci il client e i tag per il lavoro, ad esempio:
Evidenzia "client" e "tag" e imposta il peso del carattere su Grassetto, quindi saranno diversi dalla descrizione e saranno percepiti come collegamenti. Infine, assicurarsi che l'altezza della linea sia impostata su 18pt quindi le nostre linee hanno abbastanza spazio per respirare.
Per duplicare le funzioni che abbiamo appena creato, seleziona il cerchio rosso, la data e il livello di descrizione. Quindi colpisci CMD + J, oppure fare clic con il tasto destro e selezionare Livelli duplicati ... , colpire ok da allora in poi. Sposta i contenuti duplicati di un paio di centinaia di pixel sotto l'originale. Sistemeremo la posizione in seguito, poiché dipenderà dall'altezza dell'immagine di lavoro che posizioneremo accanto ad essa.
La sezione verticale finale del nostro layout è per i pezzi del portfolio stessi. Costruiamolo!
Inizieremo (come al solito) riducendo al minimo quello attualmente utilizzato descrizioni gruppo e aprendo il Lavoro gruppo. Scegli il Strumento rettangolo (U) e disegna un rettangolo di dimensioni 610x400px tra la sesta e l'ottava guida verticale (il colore non conta questa volta, ma assicurati che sia visibile). Posizionalo 20px sotto la parte superiore del documento in modo che abbia 20px di spazio tutto intorno.
Ora scegli un'immagine del tuo lavoro, utilizzerò lo screenshot del modello di PSD per notebook che ho progettato in precedenza. Trascinalo nella finestra del documento di Photoshop e assicurati che sia posizionato sopra il livello di forma rettangolo creato in precedenza. Tenendo premuto ALT tasto, posiziona il mouse sul nome del livello dello screenshot finché non vedi una piccola freccia in basso. Quando lo vedi, rilascia la chiave e creerà a Maschera di ritaglio quindi la tua immagine sarà visibile solo all'interno dell'area del rettangolo. Finalmente, colpisci T CMD + e ridimensiona l'immagine come vuoi che sia.
Seleziona il livello di forma rettangolare, duplicalo e spostalo di 20px sotto la prima immagine. Aggiungi un'altra immagine del tuo lavoro come facevamo prima. Per il secondo esempio di lavoro ho usato le foto delle gocce di pioggia da unsplash.com. Successivamente, crea un terzo lavoro e posizionalo a 20 px al di sotto del secondo. Per la terza immagine di lavoro ho utilizzato la foto Skyline di New York, di nuovo forma unsplash.com.
Ora dobbiamo tornare indietro e accertarci che tutto sia allineato correttamente. Apri il descrizioni raggruppa di nuovo e trova il cerchio rosso, i livelli di data e descrizione. Selezionali tutti in attesa CMD chiave e spostarli verso il basso fino a quando non si allineano con la parte superiore della seconda immagine del portfolio. Duplicare questi livelli facendo clic CMD + J, o facendo clic con il pulsante destro sui livelli e selezionando Livelli duplicati ... . Successivamente, posizionali accanto alla terza immagine di lavoro e allineati con la parte superiore dell'immagine.
Eccezionale. Siamo vicini alla fine. Riduci al minimo il descrizioni raggruppa e apri Lavoro gruppo di nuovo. Successivamente, seleziona l'icona di aggiornamento dall'insieme di icone e trascinala nel documento del portfolio. Colpire T CMD + e ridimensionalo a 20x20 px. Fare clic due volte sulla miniatura del livello dell'icona e cambiare il colore in # a0a2a4. Infine posizionalo a 20px sotto l'immagine di lavoro.
Ultimo passo! Creiamo un elemento dinamico che verrà visualizzato quando il nostro sito web viene fatto scorrere verso il basso e il server sta caricando più lavoro. Scegli il Strumento di tipo orizzontale (T), scegliere 14pt taglia Lato (grassetto) font e inserisci il testo Caricamento in corso… . Posizionalo accanto all'icona di aggiornamento e spostalo di 10 px a destra. Successivamente, seleziona entrambi i livelli, icona e testo e posizionali al centro della linea guida verticale dell'immagine di lavoro.
Così il gioco è fatto. Abbiamo camminato attraverso la creazione di un layout del sito web del portfolio, da zero, in modo organizzato ed efficiente. Il file che abbiamo creato è pronto per essere consegnato a uno sviluppatore che può separarlo, trovare tutti gli elementi necessari e creare per il browser.
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