Share
Cosa starai creandoIn questo tutorial ti guiderò attraverso il processo di creazione di un portfolio basato su Instagram semplice e pulito. Useremo alcune immagini sorprendenti, una tavolozza di colori pulita e caratteri tipografici levigati. Iniziamo creando una versione web e poi ti mostrerò come adattarlo rapidamente alla visualizzazione mobile.
Per poter seguire, avrai bisogno dei seguenti beni (disponibili gratuitamente):
Inizia creando un nuovo documento Photoshop (File> Nuovo ... ) usando le impostazioni mostrate sotto. Sei libero di usare una tela di qualsiasi dimensione tu preferisca - il web non ha una larghezza fissa, dopotutto.
Assicurati che la risoluzione sia impostata su 72 pixel / polliceImpostiamo alcune guide in modo che il nostro layout abbia spazio sufficiente e un aspetto equilibrato. Non utilizzo sempre una griglia, ma l'impostazione di alcune linee guida garantirà l'accuratezza e contribuirà a definire la larghezza del nostro sito web. Vai a Visualizza> Nuova guida ... e impostare alcune linee guida. Di solito scelgo 1000px come larghezza del sito web e aggiungo alcune linee guida dagli angoli in modo che abbia spazio per respirare.
Nota: Linee guida utilizzate per questo tutorial: verticale a 100px, 600px e 1100px.
Mancia: È anche possibile utilizzare il plug-in GuideGuide Photoshop per rendere questo processo ancora più rapido.
Seguendo l'etichetta di Photoshop manterremo le cose organizzate e facili da navigare e modificare. Creiamo tre gruppi di livelli denominati Intestazione, Foto e Contatto. 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.
L'area di intestazione o "above the fold" (ovunque sia in questi giorni) svolge un ruolo molto importante nel coinvolgere gli utenti e assicurare che i visitatori rimangano sul sito web. Per questo portfolio userò uno scatto di alcune bellissime montagne e un semplice messaggio per ritrarre l'avventura e la sfida.
Facciamo prima creare uno sfondo del blog. Dentro il Intestazione gruppo disegna qualsiasi forma di rettangolo di colore usando il Strumento rettangolo (U). Nel mio caso ho disegnato rettangoli di dimensioni 1200x600px e l'ho posizionato nella parte superiore del documento.
Ora scarica la foto di Mountains, trascinala nel documento di Photoshop e posizionala sopra il livello di rettangolo. Rinominare il livello dell'immagine in qualcosa che puoi riconoscere in seguito, nel mio caso ho usato IMG. Dopo di ciò, tieni premuto il tasto alt tasto e mouse sul livello foto fino a quando non vedi una piccola freccia rivolta verso il basso, quindi rilasciala. Hai appena creato un Maschera di ritaglio.
Ora colpisci T CMD + e ridimensiona la foto in base alle tue esigenze.
Mancia: tenere premuto Cambio chiave per trasformare proporzionalmente.
Apportiamo alcune modifiche alla nostra immagine in modo che appaia più vivida e memorabile. Crea un nuovo livello, chiamalo Shadow e crea a Maschera di ritaglio come abbiamo fatto per l'immagine delle montagne. Quindi scegli il Strumento sfumatura (G) e imposta i colori sfumati per passare dal nero # 000000 a trasparente, tenendo premuto il tasto Maiusc trascina dalla parte inferiore dell'immagine posizionata verso il centro di esso. Infine riduci lo strato sfumato Opacità a 60%.
Di solito uso questa tecnica per scurire le immagini luminose e posizionare il testo bianco sopra.
Aggiungiamo altri colori alla nostra intestazione per renderlo ancora più fantastico. Crea un nuovo livello, chiamalo Gradiente e ancora una volta scegli il Strumento sfumatura (G). Successivamente, imposta i colori del gradiente per passare dal viola # 37056b al rosa # ff01fc (o altri colori desiderati) e trascina dall'angolo in alto a sinistra dell'immagine all'angolo in basso a destra. Infine, riduci il livello del gradiente Opacità a 20%.
È tempo di inserire un logo per il nostro portfolio. Scegli il Strumento di tipo orizzontale (T) e inserisci il nome del tuo portfolio, che si tratti del tuo nome o nickname. Per questo tutorial ho usato uno stile molto elegante Kaushan Script 21px dimensione carattere Posiziona il tuo nuovo logo nell'angolo in alto a sinistra del tuo sito web accanto alla prima linea guida verticale. Spingilo 50px per dargli abbastanza spazio negativo in modo che appaia pulito e professionale.
Aggiungeremo alcune icone dei social media in modo che le persone possano seguire te e il tuo lavoro. Trascina le icone di Facebook, Twitter e Instagram da Iconfinder nel tuo documento Photoshop, rinomina i livelli in modo che siano rapidamente riconoscibili e posizionali in alto a destra accanto all'ultima linea guida verticale. Successivamente, fai clic con il pulsante destro del mouse su uno dei livelli delle icone, quindi seleziona Opzioni di fusione… e applicare il Colore copertura opzione con il colore bianco #ffffff. Fai lo stesso con il resto delle icone.
Assicurati di lasciare spazio sufficiente ai lati e allinea le icone orizzontalmente con il tuo logo.
Finiamo la nostra area Header. Abbiamo una bella immagine e un sacco di spazio. Mettiamo un semplice messaggio di introduzione in modo che i visitatori possano capire di cosa tratta questo sito.
Scegli il Strumento di tipo orizzontale (T) e usando 36px taglia Lato (nero) font inserisci un paio di parole. Nel mio caso uso "CIAO! SONO JONATHAN". Subito dopo, su una nuova riga e un font più piccolo, inserisci più cose su di te o sul tuo lavoro che i visitatori potrebbero trovare interessanti. Per questo tutorial che ho usato 16px taglia Lato (Regolare)
Amo viaggiare in tutto il mondo e progettare cose bellissime.
Assicurati che l'altezza della linea sia sufficientemente ampia in modo che il testo abbia spazio per respirare. Infine, posiziona il testo nel mezzo dell'area Header.
In questa area pubblicheremo foto da Instagram per mostrare alcuni esempi di lavoro, dimostrando quanto sia abile e rilevante l'artista o il designer.
Iniziamo a cambiare lo sfondo per quest'area. Riduci a icona il gruppo di intestazione facendo clic su una piccola freccia accanto al nome del gruppo e apri il gruppo Foto. Dopo, scegli il Strumento rettangolo (U) e disegna un rettangolo leggermente grigio. Nel mio caso ho usato #eeeeeeper il colore e disegnato a1200x880px rettangolo.
Ora aggiungiamo una riga che descrive il lavoro. Questo può essere semplicemente "Ultimi lavori" o nel mio caso "ULTIME FOTO". Il testo dovrebbe essere leggibile, per questo motivo ho usato il grigio # 9b9b9b e il carattere è Lato (grassetto) 12px taglia. Si noti che la spaziatura tra lettere è piuttosto sostanziale (270) che viene utilizzato solo per stilizzare il titolo dell'area e non funzionerebbe per il testo normale. Ancora una volta dai il tuo spazio al titolo e spostalo dall'immagine per 80px.
Grande! Siamo finalmente pronti ad aggiungere alcune foto interessanti al nostro portfolio. Crea un nuovo gruppo chiamato Foto. Dopodiché è necessario decidere quante immagini si desidera visualizzare in una riga. Ho deciso di andare con quattro, quindi ho bisogno di fare alcuni calcoli prima di determinare i pixel.
La larghezza del nostro sito è di 1000px, quindi la dividerò per 4 dandomi 250px per ogni immagine, ma dobbiamo anche lasciare una spaziatura sui lati, diciamo 20px grondaia tra le immagini. Quindi la larghezza dell'immagine finale sarà (1000px-60px) / 4 = 235px.
Scegli il Strumento rettangolo (U) e, tenendo premuto il tasto Maiusc, disegna un rettangolo di dimensioni 235x235 px. Successivamente seleziona un'immagine dal tuo feed di Instagram o prendine una da unsplash.com o getrefe.tumblr.com, trascinala nel documento di Photoshop e posizionala sopra il rettangolo. Quindi, tenendo premuto il tasto Alt, creare a Maschera di ritaglio e usando T CMD + ridimensiona l'immagine e posizionala come desideri.
Ora dobbiamo aggiungere il numero di "Mi piace" (per agire come una prova sociale) e una breve descrizione. Crea un nuovo livello e chiamalo Ombra, posizionalo sopra l'immagine e assicurati di creare un Maschera di ritaglio anche per questo. Dopo ciò, usando il Pendenza Strumento (G) applica un gradiente passando dal nero al trasparente come usato in precedenza in questo tutorial. Alla fine riduci la sua Opacità a 60%.
Scegli il Strumento di tipo orizzontale (T) e inserisci un numero di Mi piace. Ho usato 13px taglia Montserrat carattere e sinistra 15px spazio a sinistra e in basso per dare abbastanza spazio per respirare ma non per sopraffare l'immagine.
Ora scegli il Strumento rettangolo (U) e disegna una forma rettangolare bianca sotto la foto. Quindi prendi il Strumento di tipo orizzontale (T) e scrivi una breve descrizione della foto che useresti su Instagram, inclusi gli hashtag e anche una data di registrazione su una nuova riga. Il font che ho usato per questo tutorial è Montserrat 12px dimensione in grigio # 808080.
Nota: assicurati di essere coerente con la spaziatura, se hai usato 15px sui lati per il numero di Mi piace fai lo stesso con la descrizione.
Abbiamo finito con l'elemento fotografico e ora è il momento di aggiungere altre foto al nostro portfolio. Riduci a icona il gruppo Foto e duplicalo colpendo CMD + J o facendo clic con il tasto destro del mouse sul nome del gruppo e selezionando Gruppo duplicato ... dopo di ciò duplicare tutte le foto che si desidera avere e organizzarle in una griglia. Nel mio esempio che ho 20px per spaziatura e immagini diverse da unsplash.com e getrefe.tumblr.com.
In questa area inseriremo un semplice messaggio e contatteremo "call to action" oltre a informazioni generiche sul copyright.
Riduci a icona il gruppo di foto facendo clic su una piccola freccia accanto al nome del gruppo e apri il gruppo di contatti. Dopo di che prendi il Strumento di tipo orizzontale (T) e usando un tipo abbastanza grande inserisci un titolo per la sezione, nel mio caso è "GET IN TOUCH". Dagli un sacco di spazio in alto e aggiungi una breve descrizione per sollecitare l'azione da parte dell'utente. Ho usato # 565d64 per il colore e 36px taglia Lato (nero) carattere per il titolo e 16px Lato (Regolare) per la descrizione.
Ora abbiamo bisogno di un pulsante di invito all'azione che gli utenti faranno clic per eseguire l'azione desiderata. Per questo tutorial usiamo un semplice pulsante di contatto. Ho usato il Strumento rettangolo (U), disegnato una forma semplice e posto il testo sopra di esso. Assicurati di usare molto spazio sopra il pulsante in modo che appaia equilibrato e pulito.
Infine, inseriamo una riga di copyright generica nella parte inferiore del nostro portafoglio. Prima di farlo, scegli il Strumento linea (U) e disegna un grigio tenue # e0e0e0 orizzontale 1px allineare il documento lasciando in giro 90px di spazio in fondo. Subito dopo posiziona la tua linea di copyright. In questo caso ho usato 12px taglia Lato (grassetto) carattere con spaziatura delle lettere di 270 e grigio scuro # 9b9b9b.
Ed eccoti qui, tutto fatto con la versione web del portfolio! Ora ti mostrerò come è possibile trasformare rapidamente la versione web per il cellulare in modo da poter visualizzare il sito Web reattivo.
Creiamo un nuovo documento e impostiamo le dimensioni 320x2100px. Crea tre linee guida verticali a 20px, 150px e 300px per guidarci, lasciando un po 'di spazio ai lati. Dopo di che seleziona tutti i gruppi nel nostro documento versione web, trascinali tutti in una nuova scheda documento fino a quando il nuovo documento non compare e rilascia i gruppi lì.
Ora apri il gruppo di intestazione, trova il nostro logo e usa il Mossa Strumento (V) spostalo verso destra finché non sarà visibile nel nostro nuovo layout stretto. Lasciatelo vicino alla prima linea guida verticale. Poi trova le icone sociali e spostale a sinistra.
Ora è il momento di adattare il messaggio principale. Scegli il Strumento di tipo orizzontale (T), rompere la riga descrittiva e ridurre il carattere del messaggio principale per adattarlo tra la prima e la terza linea guida verticale. Regola le opzioni di altezza della linea e sei a posto.
Apri il gruppo Foto e sposta il titolo "ULTIME FOTO" in quanto non abbiamo bisogno di molto spazio sulla visualizzazione mobile. Quindi trova il gruppo Foto e spostalo tra le linee guida verticali. Quindi apri il gruppo, fai clic sulla forma del rettangolo dello sfondo della descrizione, colpito T CMD + e ridimensionalo per essere 280px in larghezza. Fai lo stesso con il rettangolo fotografico. Infine, disponi le foto in una colonna e ridimensionale per adattarle alle linee guida.
La nostra sezione Foto è diventata più lunga rispetto alla versione web, quindi sono necessari degli aggiustamenti di sfondo. Trova il livello di sfondo Foto e premi T CMD + per ridimensionarlo, renderlo più alto e lasciare uno spazio nella parte inferiore della sezione.
Infine, abbiamo bisogno di riorganizzare la nostra sezione di contatto in modo che il messaggio rientri tra le nostre linee guida stabilite ed è ben allineato. Apri il gruppo Contatto e usa il Strumento di tipo orizzontale (T) rompere le linee dei messaggi di contatto per renderle idonee tra le nostre linee guida. Assicurati di ridurre lo spazio sopra e sotto gli elementi poiché non abbiamo bisogno di molto spazio bianco per la visualizzazione mobile. Inoltre, riduci l'altezza della linea per il messaggio in modo che appaia pulito e professionale.
L'ultima cosa è rompere la linea del copyright in due righe in modo che rientri tra le linee guida.
Completa visualizzazione mobile.Questo è tutto. Abbiamo finito con le versioni web e mobile del nostro nuovo portfolio basato su Instagram. Spero che tu abbia imparato qualcosa di nuovo e che le abilità che hai acquisito ti aiuteranno a costruire cose incredibili in futuro.
Mi piacerebbe sentire il tuo feedback e vedere i risultati di questo tutorial!
Accentsconagua