Share
În acest tutorial voi folosi Photoshop CS6 pentru a proiecta o pagină de portofoliu simplă, curată, cu trei coloane, cu o cronologie de trend. În acest proces ne vom uita la crearea de rețele personalizate cu orientări, tipografie de stil și joc cu culori și contrast pentru a obține estetica dorită. Fișierul PSD terminat va fi gata să se predea unui dezvoltator pentru codificare.
Pentru a vă urma, veți avea nevoie de următoarele active (disponibile în mod gratuit):
Începeți prin crearea unui nou document (Fișier> Nou ... ) folosind setările de mai jos.
Să stabilim niște ghiduri, astfel încât aspectul nostru să aibă suficient spațiu și să pară echilibrat. Mergi la Vizualizare> Ghid nou ... și setați următoarele linii directoare: verticală la 20px, 50px, 115px, 230px, 550px, 570px, 875px și 1180px și orizontală la 60px.
Bacsis: De asemenea, puteți utiliza pluginul GuideGuide Photoshop pentru a face acest proces și mai rapid.
Vom păstra documentul bine organizat încă de la început, așa că să creăm grupuri cu trei straturi numite Bara laterală din stânga, descrieri și Muncă. Lipirea acestei etichete Photoshop va păstra lucrurile organizate și va fi ușor de navigat sau editat. 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ă.
Bara laterală din stânga va servi drept zonă pentru un profil de utilizator, avatar, legături sociale și navigare primară. Să construim!
Selectează Instrumentul dreptunghiular (T), schimba culoarea primului la # 11171c și trageți un dreptunghi de 230x1320px în interiorul Bara laterală din stânga grup. Ar trebui să fie plasat în partea stângă a documentului între marginea documentului și cea de-a patra orientare verticală.
Creați un grup nou deasupra formei dreptunghiului creat anterior și denumiți-l Poză de profil. După aceea, alegeți Instrument de elipsă (U) și, ținând apăsată tasta Schimb , desenați un cerc de 100x100 pixeli și plasați-o chiar sub prima orientare orizontală. Ar trebui să fie centrată și cu a treia orientare verticală.
Acum, mergeți la uifaces.com și apucați unul dintre avatarele disponibile. În mod alternativ, găsiți pur și simplu fotografia dvs. și lipiți-o deasupra formei cercului recent creată. După aceea, țineți apăsată tasta Alt cheia și mouse-ul peste miniatură a stratului de fotografie până când vedeți o săgeată în jos. Când o vedeți, eliberați butonul și va crea o Mască de tăiere, obligați fotografia dvs. într-o formă circulară. Aliniați-o cu toate acestea, considerați potrivit, utilizând Mutați instrumentul (V).
Acum minimalizați Poză de profil făcând clic pe acea săgeată mică de lângă titlul grupului. După aceasta, schimbați culoarea în prim plan #FFFFFF și alegeți Instrument tip orizontal (T). Selectează Lato (Regular) font, setat dimensiunea la 16pt și scrie numele proprietarului portofoliului nostru. În cazul meu este complet fictiv Chris Johnson. Pune-l 25px sub imaginea de profil și asigurați-vă că este centrată cu cea de-a treia orientare verticală.
Acum avem nevoie de o scurtă descriere a portofoliului nostru, astfel încât vizitatorii să aibă imediat un sentiment despre ce este vorba. Vom folosi același instrument; tot ce trebuie să faceți este să micșorați dimensiunea fontului la 14pt și scrieți câteva scurte rânduri despre proprietarul portofoliului. Pentru a face acest lucru, arata bine organizat si echilibrat 20px inferior, astfel că are puțin spațiu să respire.
Bun. Acum, hai să plasăm câteva icoane de social media, facilitând conectarea cu proprietarul portofoliului. Creați un grup nou cu următorul titlu: Social Media. După aceea, mergeți la Iconfinder pentru a descărca icoane Dribbble, Twitter, Facebook și Google+ ca PNG. Trageți-le în documentul Photoshop și plasați-le în interiorul Social Media grup. Acum faceți clic dreapta pe pictograma Dribbble, selectați Opțiuni amestecate… și aplicați Suprapunere de culori opțiune. În loc de roșu implicit, setați culoarea albă.
Toate celelalte pictograme ar trebui să fie și albe, deci să aplicăm același stil straturilor celorlalte pictograme. Doar faceți clic dreapta pe Dribbble icon și selectați Stilul stratului de copiere. După aceea, țineți apăsată tasta CMD și selectați Stare de nervozitate, Facebook și Google+ straturi. Din nou, faceți clic dreapta pe unul dintre ele și selectați Lipiți stilul stratului. În cele din urmă, aliniați pictogramele astfel încât să existe a 10px spațiu pe fiecare parte și grupul este plasat 20px sub textul descrierii.
Să schimbăm culoarea primului la alb #FFFFFF, apoi alegeți Instrumentul de linie (U), a stabilit greutate la 1px și, ținând apăsată tasta Schimb , trageți o linie orizontală de la marginea din stânga a documentului la a patra orientare verticală. Mișcă-l 50px din icoane.
Pentru a face ca linia noastră să fie mai vizibil subtilă, să reducem stratul de linie Opacitate la 10%.
Să ne concentrăm acum pe navigația noastră, să creați un grup nou numit Navigare și plasați-o deasupra stratului dreptunghiului întunecat. După aceasta, alegeți o pictogramă de document din setul de pictograme Free Vector Icons din Chapps și trageți-l în documentul dvs. de portofoliu. Lovit T Cmd + pentru a redimensiona pictograma la 13x16px. După aceasta, faceți dublu clic pe numele stratului și îl redenumiți lui Icoana de lucru. Faceți dublu clic pe o miniatură de strat și modificați culoarea # d35136. Plasați pictograma 40px sub linia subtilă și 20px de la marginea din stânga, astfel încât se aliniază la prima orientare verticală.
Acum pentru unele elemente de navigație. Alegeți Instrument tip orizontal (T), alege Lato (Bold) font, setat dimensiunea la 14pt și scrieți următoarele: MUNCĂ. Plasați-o în fața celei de-a doua orientări orizontale și asigurați-vă că se aliniază vertical cu Icoana de lucru.
Modificați culoarea primului rând la # 424a51 și, folosind același instrument de text, scrieți câteva categorii pentru a merge la lucru, fiecare pornind de pe o nouă linie. Asigurați-vă că înălțimea liniei este setată la 24pt astfel că categoriile noastre sunt ușor de citit. Plasați stratul categoriilor 20px sub stratul de text creat anterior.
Trebuie să indicăm starea activă a linkului. Pentru categoria activă folosiți culoarea albă #FFFFFF, pur și simplu faceți clic pe text în timp ce Instrument tip orizontal (T) este încă selectată, evidențiați prima categorie și modificați culoarea.
Acum alegeți o pictogramă de utilizator din setul de pictograme utilizat anterior și redimensionați-o 16x16px utilizând T Cmd +. Dați clic de două ori pe miniatura de strat de pictograme și modificați culoarea # 27b599, redenumiți layerul la Icon utilizator astfel încât este mai ușor să gestionăm straturile noastre. Pune-l 30px sub ultima categorie pentru a da un spațiu negativ care va acționa ca un separator.
Schimbați culoarea primului la verde # 27b599 așa cum este folosit pentru Icon utilizator și alegeți Instrument tip orizontal (T). Selectează Lato (Bold) font, setați dimensiunea la 14pt si scrie DESPRE. Plasați această etichetă imediat după pictograma utilizatorului, așa cum ați făcut pentru secțiunea de mai sus. Apoi schimbați culoarea prim-planului # 424a51 și introduceți câteva titluri de link-uri pentru secțiunea "Despre".
Să creați ultima secțiune pe navigația noastră; A lua legatura. Alegeți pictograma de e-mail de la Icoane gratuite pentru vectori de la Chapps și redimensionați-l la 16x13px, după care schimbați culoarea # 088ecc și plasați-l în mod constant ca pictogramele înainte, 30px sub ultimul strat de text al Despre secțiune. După ce a intrat A LUA LEGATURA text, modificați culoarea primului # 424a51 și scrieți câteva titluri de link-uri pentru secțiune.
Trecând un bloc peste dreapta, să începem acum cu descrierile elementelor noastre de portofoliu.
Vom reduce la minimum utilizarea curentă Navigare și Bara laterală din stânga grupuri făcând clic pe săgețile mici de lângă nume de grup. Extindeți descrieri grup, schimbați culoarea primului # f7f7f7 și selectați Instrumentul dreptunghiular (T). După aceea, trageți o formă verticală dreptunghiulară între marginea lui Bara laterală din stânga și cea de-a cincea orientare verticală. Acest dreptunghi ar trebui să fie de 320x1320px.
Acum schimba culoarea primului rând la # e7e7e8 și alegeți Instrumentul de linie (U). Setați Greutatea la 1px și ținând apăsată tasta Schimb , trageți o linie verticală de sus în jos pe cea de-a cincea orientare verticală. Aceasta ar trebui să creeze o separare vizuală mai bună între descrieri secțiunea de grup și fundalul principal. Lovit Cmd +; pentru a ascunde / descoperi liniile directoare. În cele din urmă, redenumiți stratul de linie la V linie deci are sens mai târziu.
Vom desena o altă linie verticală, deci schimbați linia Greutate la 3px și trageți o altă linie în document (ținând apăsată tasta Schimb cheie pentru a menține o verticalitate perfectă). Faceți clic de două ori pe numele stratului pentru ao redenumi Cronologie. După aceea, deplasați linia 24px din dreapta Bara laterală din stânga margine și 30 de pixeli în jos de la partea de sus a documentului.
Schimbați culoarea primului plan pe roșul folosit anterior # d35136 și alegeți Instrument de elipsă (U). După aceea, țineți apăsată tasta Schimb cheie și desenați un cerc de 11x11 pixeli. Plasați-l cu 20 de pixeli la dreapta de la marginea Bara laterală din stânga și 20 de centimetri în jos de la partea de sus a documentului. Cercul nostru mic ar trebui să fie amplasat frumos pe partea superioară a liniei create recent.
Acum faceți clic dreapta pe stratul cerc creat recent și selectați Opțiuni amestecate… . Click pe Accident vascular cerebral. A stabilit mărimea la 3px, Poziţie la In afara și culoarea la # f7f7f7. Acest accident de culoare de fundal va crea efectul cercului nostru care plutește alături de o linie.
Schimbați culoarea primului rând la # 11171c și alegeți Instrument tip orizontal (T). Ca ususal, alegeți Lato (Bold) font, setați dimensiunea la 14pt și introduceți o dată pentru lucrare, de ex. "7 Nov 2013". Apoi, folosind Mutați instrumentul (V), mutați stratul de date 20px în dreapta cercului roșu și 20 de grade în jos de la partea de sus a documentului.
Ar fi trebuit, până acum, să fi observat un model în spațiul nostru. Este important să fii consecvent și să utilizezi distanțe ritmice pentru diferite elemente, astfel încât designul să pară echilibrat.
Schimbați culoarea primului rând la # 5e5e5e deci este ușor mai ușor decât atunci. Aceasta creează o ierarhie vizuală, ceea ce face citirea mult mai ușoară. Utilizați același lucru Instrument tip orizontal (T), lato font, dar de această dată schimba greutatea fontului la Regulat și introduceți câteva linii pentru o scurtă descriere a lucrării. Apoi, faceți o ruptură de linie lovind introduce de două ori și introduceți clientul și etichetele pentru lucrare, de exemplu:
Evidențiați "client" și "tag-uri" și setați greutatea fontului la Îndrăzneţ, astfel încât acestea vor diferi de descriere și vor fi percepute ca legături. În cele din urmă, asigurați-vă că înălțimea liniei este setată la 18pt astfel că liniile noastre au suficient spațiu pentru a respira.
Pentru a duplica funcțiile pe care tocmai le-am făcut, selectați stratul cerc roșu, data și descrierea. Apoi a lovit CMD + J, sau faceți clic dreapta și selectați Straturi duplicate ... , lovind O.K după aceea. Mutați conținutul duplicat cu câteva sute de pixeli sub original. Vom regla poziția acestui lucru mai târziu, deoarece va fi dependentă de înălțimea imaginii de lucru pe care o vom plasa lângă ea.
Secțiunea verticală finală a aspectului nostru este pentru piesele de portofoliu propriu-zis. Să construim!
Vom începe (ca de obicei) prin minimizarea utilizării actuale descrieri grup și deschiderea Muncă grup. Alegeți Instrumentul dreptunghiular (U) și trageți un dreptunghi de dimensiuni de 610x400px între cele șase și opt orientări verticale (culoarea nu contează de această dată, asigurați-vă că este vizibilă). Plasați-o cu 20 de pixeli sub partea de sus a documentului, astfel încât acesta să aibă 20 de pixeli în jur.
Acum, alegeți o imagine a muncii dvs., voi folosi captura de ecran PSD Template pentru Notebook pe care am conceput-o mai devreme. Trageți-l în fereastra documentului Photoshop și asigurați-vă că acesta este plasat deasupra stratului de formă dreptunghiulară creat anterior. Care tine pe loc ALT tastați mouse-ul peste numele stratului de ecran, până când vedeți o săgeată jos. Când o vedeți, eliberați cheia și va crea o Mască de tăiere astfel încât imaginea dvs. să fie vizibilă numai în zona dreptunghiului. În cele din urmă, a lovit T Cmd + și redimensionați imaginea după cum doriți să fie.
Selectați stratul de formă dreptunghiulară, duplicați-l și deplasați-l cu 20px sub prima imagine. Adăugați o altă imagine a lucrării dvs., așa cum am făcut-o odată cu cea de până acum. Pentru exemplul 2 de lucru am folosit fotografia Raindrops de pe unsplash.com. După aceasta, creați oa treia piesă de lucru și plasați-o cu 20px sub cea de-a doua. Pentru cea de-a treia imagine de lucru am folosit fotografia Skyline din NYC, din nou formând unsplash.com.
Acum trebuie să ne întoarcem și să ne asigurăm că totul este aliniat corespunzător. Deschideți descrieri grupați din nou și găsiți stratul cercului roșu, data și descrierea. Selectează-le pe toate CMD și mutați-le până când se aliniază cu partea de sus a celei de-a doua imagini de portofoliu. Duplicați aceste straturi dând clic pe CMD + J, sau faceți clic dreapta pe straturi și selectând Straturi duplicate ... . După aceea, plasați-le lângă cea de-a treia imagine de lucru și aliniați-o cu partea de sus a imaginii respective.
Minunat. Suntem aproape de final. Minimizați descrieri grup și deschide Muncă grup din nou. După aceea, alegeți pictograma de reîmprospătare din setul de pictograme și trageți-o în documentul dvs. de portofoliu. Lovit T Cmd + și redimensionați-l la 20x20px. Dați clic de două ori pe miniatura de strat de pictograme și modificați culoarea # a0a2a4. În cele din urmă, plasați-o cu 20 de pixeli sub imaginea de lucru.
Ultimul pas! Să creați un element dinamic care va apărea atunci când site-ul nostru este derulat în jos și serverul se încarcă mai mult de lucru. Alegeți Instrument tip orizontal (T), alege 14pt mărimea Lato (Bold) și introduceți textul Se incarca… . Puneți-l lângă pictograma de reîmprospătare și mutați-l cu 10px spre dreapta. După aceea, selectați ambele straturi, pictograma și textul și plasați-le în centrul orientării verticale a imaginii de lucru.
Deci, tu o ai. Am trecut prin crearea unui layout de site-uri de portofoliu, de la zero, într-o manieră organizată și eficientă. Fișierul pe care l-am construit este gata să îl predăm unui dezvoltator care îl poate desprinde, găsi toate elementele necesare și construiește pentru browser.
Sper că ați învățat ceva nou urmând acest tutorial. Dacă aveți întrebări sau aveți dificultăți, vă rugăm să nu ezitați să mă pingați în secțiunea de comentarii sau prin Twitter.
Accentsconagua