Share
Ce veți creaÎn acest tutorial vă voi îndruma prin procesul de creare a unui portofoliu simplu și curat bazat pe Instagram. Vom folosi imaginile izbitoare, o paletă de culori curată și caracterele netede. Vom începe prin crearea unei versiuni web și apoi vă vom arăta cum să o adaptați rapid pentru vizualizarea pe mobil.
Pentru a vă urma, veți avea nevoie de următoarele active (disponibile în mod gratuit):
Începeți prin crearea unui nou document Photoshop (Fișier> Nou ... ) folosind setările de mai jos. Aveți libertatea de a utiliza o pânză de dimensiuni pe care o preferați - web-ul nu are lățime fixă, la urma urmei.
Asigurați-vă că rezoluția este setată la 72 pixeli / inchSă stabilim niște ghiduri, astfel încât aspectul nostru să aibă suficient spațiu și să pară echilibrat. Nu folosesc întotdeauna o grilă, dar stabilirea unor linii directoare va asigura unitate și va contribui la definirea lățimii site-ului nostru. Mergi la Vizualizare> Ghid nou ... și stabiliți câteva linii directoare. De obicei, aleg 1000px ca lățime de site și adaugă niște linii directoare din colțuri, așa că are spațiu pentru a respira.
Notă: Linii directoare utilizate pentru acest tutorial: vertical la 100px, 600px și 1100px.
Bacsis: De asemenea, puteți utiliza pluginul GuideGuide Photoshop pentru a face acest proces și mai rapid.
Prin lipirea etichetei Photoshop vom păstra lucrurile organizate și ușor de navigat și editat. Să creați trei grupuri de straturi numite Antet, Fotografii și Contact. Pentru a crea grupuri, mergeți la Layer> Nou> Grup ... și dați fiecăruia un titlu așa cum este menționat. Pentru crearea rapidă a unui grup, faceți clic pe pictogramă.
Antetul sau spațiul "deasupra ori" (oriunde este în aceste zile) joacă un rol foarte important în a-și implica utilizatorii și de a se asigura că vizitatorii rămân pe site. Pentru acest portofoliu, voi folosi o imagine a unor munți frumoși și mesaje simple pentru a ilustra aventura și provocările.
Să creați mai întâi fundalul blogului. În interiorul Antet grupul trage orice formă de dreptunghi de culoare folosind Instrumentul dreptunghiular (U). În cazul meu, am desenat un dreptunghi de dimensiune de 1200x600px și l-am așezat în partea de sus a documentului.
Acum descarcati poza Mountains, trageti-o in documentul Photoshop si plasati-o deasupra stratului dreptunghiular. Redenumiți stratul imaginii la ceva ce puteți recunoaște mai târziu, în cazul meu am folosit IMG. După aceea, țineți apăsată tasta Alt cheia și mouse-ul peste stratul de fotografie până când vedeți o mică săgeată îndreptată în jos, apoi eliberați-o. Tocmai ați creat o Mască de tăiere.
Acum lovit T Cmd + și redimensionați fotografia pentru a se potrivi nevoilor dvs..
Bacsis: țineți-vă jos Schimb cheie pentru a transforma proporțional.
Să facem unele ajustări ale imaginii noastre, astfel încât să pară mai vii și mai memorabile. Creați un nou strat, numiți-l pe Shadow și creați-l Mască de tăiere așa cum am făcut pentru imaginea munților. Apoi alegeți Instrument de gradient (G) și setați culori gradient pentru a trece de la negru # 000000 la transparent, ținând apăsată tasta Shift din partea de jos a imaginii plasate în jurul acesteia. În cele din urmă, reduceți stratul de gradient Opacitate la 60%.
De obicei, folosesc această tehnică pentru a întuneca imaginile luminoase și pentru a plasa un text alb pe partea de sus.
Să adăugăm mai multe culori la antetul nostru pentru a face chiar mai minunat. Creați un nou strat, numiți Gradient și alegeți din nou Instrument de gradient (G). După aceea, setați culorile gradientului pentru a trece de la purpuriu # 37056b la roz # ff01fc (sau orice alte culori doriți) și trageți din colțul din stânga sus al imaginii în colțul din dreapta jos. În cele din urmă, reduceți stratul de gradient Opacitate la 20%.
Este timpul să plasăm un logo pentru portofoliul nostru. Alegeți Instrument tip orizontal (T) și introduceți numele portofoliului dvs., indiferent dacă este numele dvs. sau pseudonimul. Pentru acest tutorial am folosit un foarte elegant Kaushan Script 21px dimensiunea fontului. Plasați noul dvs. logo în colțul din stânga sus al site-ului dvs. lângă prima orientare verticală. Împingeți-l în jos cu 50 de pixeli pentru a da suficient spațiu negativ, astfel încât să pară curat și profesional.
Vom adăuga câteva pictograme de social media, astfel încât oamenii să vă poată urmări pe tine și pe munca ta. Trageți pictogramele Facebook, Twitter și Instagram de la Iconfinder la documentul Photoshop, redenumiți straturile astfel încât acestea să fie ușor de recunoscut și plasați-le în partea dreaptă sus de lângă ultima orientare verticală. După aceea, faceți clic pe butonul din dreapta al mouse-ului pe unul dintre straturile de pictograme, selectați Opțiuni amestecate… și aplicați Culoare Acoperire cu culoarea albă #FFFFFF. Faceți același lucru cu restul pictogramelor.
Asigurați-vă că permiteți suficient spațiu lateral și aliniați pictogramele orizontal cu sigla.
Să terminăm zona noastră pentru Header. Avem o imagine frumoasă și o mulțime de spațiu. Să punem un mesaj de introducere simplu, astfel încât vizitatorii să poată înțelege ce înseamnă acest site web.
Alege Instrument tip orizontal (T) și utilizarea 36px mărimea Lato (negru) font introduceți câteva cuvinte. În cazul meu folosesc "HELLO! I'm JONATHAN". Imediat după aceea, pe o linie nouă și cu un font mai mic, introduceți mai multe lucruri despre dvs. sau despre munca pe care vizitatorii le pot găsi interesante. Pentru acest tutorial am folosit 16px mărimea lato (Regulat)
Îmi place să călătoresc în toată lumea și să proiectez lucruri frumoase.
Asigurați-vă că înălțimea liniei este suficient de mare încât textul dvs. are spațiu pentru a respira. În cele din urmă, plasați textul în mijlocul zonei Header.
În acest domeniu vom plasa fotografii de la Instagram pentru a arăta câteva exemple de lucru, demonstrând cât de priceput și relevant este artistul sau designerul.
Să modificăm mai întâi fundalul pentru această zonă. Minimizați grupul Header făcând clic pe o săgeată mică de lângă numele grupului și deschizând grupul Fotografii. După aceea, alegeți Instrumentul dreptunghiular (U) și trageți un dreptunghi ușor gri. În cazul meu am folosit-o #eeeeeepentru culoarea și trasată a1200x880px dreptunghi.
Acum, să adăugăm o linie care descrie lucrarea. Aceasta poate fi pur și simplu "Ultima lucrare" sau în cazul meu "CELE MAI URMĂTOARE". Textul trebuie citit, din acest motiv am folosit gri # 9b9b9b și fontul este Lato (Bold) 12px mărimea. Rețineți că distanța dintre litere este destul de substanțială (270) care este folosit doar pentru a stiliza titlul zonei și nu ar funcționa pentru textul obișnuit. Încă o dată dați titlul suficient spațiului și mutați-l din imagine 80px.
Grozav! Suntem în sfârșit gata să adăugăm câteva poze interesante în portofoliul nostru. Creați un grup nou numit Foto. După aceasta, trebuie să decideți câte imagini doriți să afișați într-un rând. Am decis să merg cu patru, așa că trebuie să fac niște matematici înainte de a determina pixelii.
Lățimea site-ului nostru este de 1000 pixeli, așadar o voi împărți cu 4, oferindu-mi 250 de pixeli pentru fiecare imagine, dar trebuie să lăsăm și niște spații pe laturi, să zicem un jgheab de 20 pixeli între imagini. Deci, lățimea finală a imaginii va fi (1000px-60px) / 4 = 235px.
Alegeți Instrumentul dreptunghiular (U) și, ținând apăsată tasta Shift, desenați un dreptunghi de dimensiune de 235x235px. După aceea, alegeți o imagine din feedul Instagram sau apucați-o de pe unsplash.com sau getrefe.tumblr.com, glisați-o în documentul Photoshop și plasați-o deasupra dreptunghiului. Apoi, ținând apăsată tasta Alt, creați o Mască de tăiere și utilizarea T Cmd + redimensionați imaginea și plasați-o așa cum doriți.
Acum trebuie să adăugăm numărul de "plăceri" (pentru a acționa ca o dovadă socială) și o scurtă descriere. Creați un nou strat și denumiți-l pe Shadow, plasați-l deasupra imaginii și asigurați-vă că creați un Mască de tăiere pentru ea, de asemenea. Apoi, folosind Gradient Instrument (G) aplicați un gradient care merge de la negru la transparent așa cum este folosit mai devreme în acest tutorial. În cele din urmă, reduceți-l Opacitate la 60%.
Alegeți Instrument tip orizontal (T) și introduceți un număr de aprecieri. Am folosit-o 13px mărimea Montserrat font și stânga 15px spațiu în stânga și în jos pentru a oferi spațiu suficient pentru a respira, dar nu pentru a copleși imaginea.
Acum alegeți Instrumentul dreptunghiular (U) și trageți o formă de dreptunghi alb sub fotografie. Apoi apucă Instrument tip orizontal (T) și scrieți o scurtă descriere a fotografiei pe care ați folosi-o pe Instagram, inclusiv hashtags și o dată de postare pe o linie nouă. Fontul pe care l-am folosit pentru acest tutorial este Montserrat 12px dimensiune în gri # 808080.
Notă: asigurați-vă că sunteți în concordanță cu spațierea dvs., dacă ați folosit 15px în lateral pentru numărul de favoriți face același lucru cu descrierea.
Am terminat cu articolul de fotografie și acum este momentul să adăugăm mai multe fotografii în portofoliul nostru. Minimizați grupul Foto și duplicați-l lovind CMD + J sau făcând clic pe butonul din dreapta al mouse-ului pe numele grupului și selectând Grup duplicat ... după care duplicați cât mai multe fotografii pe care le doriți și le organizați într-o rețea. În exemplul meu am 20px pentru distanțe și imagini diferite de la unsplash.com și getrefe.tumblr.com.
În acest domeniu, vom pune un mesaj simplu și vom contacta "apel la acțiune", precum și informații generice privind drepturile de autor.
Minimizați grupul de fotografii făcând clic pe o săgeată mică de lângă numele grupului și deschizând grupul de contacte. După aceea alegeți Instrument tip orizontal (T) și folosind un tip destul de mare introduceți un titlu pentru secțiune, în cazul meu este "GET IN TOUCH". Dați-i o mulțime de spațiu în partea superioară și adăugați o scurtă descriere pentru a solicita o acțiune din partea utilizatorului. Am folosit-o # 565d64 pentru culoarea și 36px mărimea Lato (negru) font pentru titlu și 16px lato (Regulat) pentru descriere.
Acum avem nevoie de un buton de apel pentru acțiune pe care utilizatorii îl vor face clic pentru a efectua acțiunea dorită. Pentru acest tutorial, să folosim un simplu buton de contact. Am folosit-o Instrumentul dreptunghiular (U), a tras o formă simplă și a plasat text pe partea de sus a acesteia. Asigurați-vă că utilizați o mulțime de spațiu deasupra butonului astfel încât să pară echilibrat și curat.
În cele din urmă, să punem o linie generală de drepturi de autor în partea de jos a portofoliului nostru. Înainte de a face acest lucru, alegeți Instrumentul de linie (U) și desenează un gri subtil # e0e0e0 orizontală 1px line în jurul documentului lăsând în jur 90px de spațiu în partea de jos. Imediat după acest loc, linia dvs. de drepturi de autor. În acest caz, am folosit 12px mărimea Lato (Bold) font cu spațierea literelor 270 și gri închis # 9b9b9b.
Iată-te aici, toate făcute cu versiunea web a portofoliului! Acum vă voi arăta cum puteți transforma rapid versiunea web pentru telefonul mobil astfel încât să puteți vizualiza site-ul receptiv.
Să creăm un document nou și să setăm dimensiunile 320x2100px. Creați trei orientări verticale la 20px, 150px și 300px pentru a ne ghida, lăsând un spațiu în lateral. După aceea, selectați toate grupurile din documentul nostru de versiune web, trageți-le pe toate într-o nouă filă document până când noul document apare și eliberează grupurile acolo.
Acum deschideți grupul Header, găsiți logo-ul nostru și folosiți Mișcare Instrument (V) mutați-l spre dreapta până când este vizibil în noul nostru aspect îngust. Lăsați-l lângă prima orientare verticală. După aceea găsiți icoanele sociale și le mutați în stânga.
Acum este timpul să adaptați mesajul principal. Alegeți Instrument tip orizontal (T), întrerupeți linia de descriere și reduceți fontul principal al mesajului pentru a se potrivi între prima și a treia linii directoare. Reglați opțiunile de înălțime a liniei și sunteți bine să mergeți.
Deschideți grupul Fotografii și deplasați-vă în sus titlul "CELE MAI URMĂTOARE", deoarece nu avem nevoie de spațiu atât de mare în vizualizarea mobilă. După aceea, găsiți grupul Foto și mutați-l între orientările verticale. Apoi deschideți grupul, faceți clic pe descrierea dreptunghiului de fundal descriere, apăsați T Cmd + și redimensionați-o să fie 280 pixeli în lățime. Faceți același lucru cu dreptunghiul fotografiei. În cele din urmă, aranjați fotografiile într-o coloană și redimensionați-le pentru a se încadra între liniile directoare.
Fotografia noastră a devenit mai lungă decât pe versiunea web, deci sunt necesare ajustări de fond. Găsiți stratul de fundal Fotografii și apăsați T Cmd + să-l redimensionați, să-l faceți mai înalt și să lăsați niște spațiu în partea de jos a secțiunii.
În cele din urmă trebuie să rearanjăm secțiunea noastră de contact astfel încât mesajul să se potrivească între liniile noastre stabilite și să fie bine aliniat. Deschideți grupul Contact și utilizați Instrument tip orizontal (T) întrerupeți liniile de mesaje de contact pentru a le face să se potrivească între liniile noastre de orientare. Asigurați-vă că reduceți spațiul deasupra și dedesubtul elementelor, deoarece nu avem nevoie de mult spațiu alb pentru vizualizarea mobilă. De asemenea, reduceți înălțimea liniei pentru mesaj, astfel încât să pară curată și profesională.
Ultimul lucru este să rupă linia drepturilor de autor în două rânduri, astfel încât aceasta să se încadreze și în linii directoare.
Vizualizare mobilă completă.Asta e. Am terminat versiunile web și mobile ale noului portofoliu bazat pe Instagram. Sper că ați învățat ceva nou și că abilitățile pe care le-ați câștigat vă vor ajuta să construiți câteva lucruri uimitoare în viitor.
Mi-ar plăcea să vă aud feedback-ul și să vedeți rezultatele acestui tutorial!
Accentsconagua