Share
Care este numărul unu lucru pe care doriți ca site-ul dvs. de portofoliu să facă? A iesi in evidenta! Astăzi, Paul J Noble ne va conduce prin crearea propriului site de portofoliu unic proiectat. El ne va arăta sfaturi și trucuri în Adobe Photoshop, precum și unele abordări inteligente pentru a ieși din pachetul de alte site-uri de portofoliu.
Gândiți-vă la portofoliul dvs. de site-ul dvs. este purtătorul de cuvânt online al potențialilor clienți. Dacă este făcută în mod corespunzător, ar trebui să spună oamenilor ce faceți, să vă arătați cea mai bună lucrare și să le oferiți ocazia de a intra în contact cu voi. Acestea sunt lucruri destul de evidente - deci care este diferența dintre un site de portofoliu obișnuit și unul cu adevărat remarcabil?
Cheia pentru un site eficient de portofoliu nu are doar proiecte mari - lasă o impresie de durată vizitatorilor. Sigur, acest lucru ar putea însemna să ai ilustrații incredibile dacă ești un designer grafic - dar pentru designeri web și dezvoltatori, adesea înseamnă că trebuie să împingi granițele UI / UX și codarea pentru a arăta punctele noastre cele mai puternice.
În acest tutorial, Paul J Noble ne va arăta cum a folosit câteva abordări simple, dar remarcabil de inovatoare ale UI / UX pe site-ul propriu, pentru a crea un portofoliu care să extindă așteptările utilizatorului folosind interactivitatea și efectele de iluminare subtile.
Hai să ne aruncăm!
Creați un document nou în Photoshop de 1400 x 900. Ultimul site HTML rendered va conține elemente "lichide" (adică scalabile), astfel încât trebuie să ținem cont de faptul că proiectul final nu va avea o dimensiune fixă.
Crearea unui fundal solid este o modalitate ușoară de a începe lucrurile. Pentru acest design vom folosi o culoare de bază
este suficient de întunecată pentru a accentua imaginile din prim plan, în timp ce compensa și negrul pur care poate apărea în imaginile folio. Vom folosi, de asemenea, includeți niște albastru pentru a crea o culoare neagră "rece" care se va integra cu elementele de interfață.
Selectați Layer> Layer New fill> Solid Color și asociați culoarea # 252a3b.
Pe măsură ce folosim un aspect scalabil, trebuie să definim lățimea orizontală minimă. Pentru cele mai multe site-uri comerciale acest lucru este de aproximativ 1000 de pixeli pentru a se potrivi utilizatorilor cu afișaje de rezoluție 1024x768. Cu toate acestea, pentru acest site vom viza o lățime minimă de 1100 pixeli.
În primul rând, asigurați-vă că unitățile de ghidare sunt setate la pixeli. Acest lucru poate fi setat accesând Preferences> Units & Guides.
Apoi, mergeți la Vizualizare> Ghid nou. Pe măsură ce vom pune conținutul nostru în centru și urmărim o lățime minimă totală de 1100 pixeli, ar trebui să plasăm ghidaje verticale la 150px și 1250px.
Dungarea diagonală subtilă va contribui la ridicarea designului creând o separare între elementele de portofoliu din prim-plan și fundalul texturat.
Pentru a realiza acest lucru vom aplica un strat de umplere a modelului. Cu toate acestea, mai întâi trebuie să creăm modelul.
Creați un nou document de 12x12 pixeli cu fundal transparent și adăugați un nou strat de umplere cu o umplutură neagră (# 000000).
Acum, adăugați un nou strat (Layer> New> Layer). Utilizând instrumentul cu creion cu o dimensiune a periei de 1px, desenați trei linii exact așa cum apar în imaginea de mai jos.
Opriți stratul de umplere și setați opacitatea stratului de linii la 6%. Pentru a salva acest model ca model, selectați Editare> Definiți modelul.
Revenind la panza originală, creați un nou strat cu textura selectând Layer> New Layer Layer> Pattern și selectați modelul definit anterior.
Acum, că am creat baza noastră, putem renunța la niște straturi plane care cuprind elementele majore ale site-ului
În primul rând, navigarea noastră. Deoarece acest site va fi proiectat astfel încât să nu aibă derulare verticală, putem poziționa navigația pentru alinierea la partea de jos a ecranului.
Creați un grup nou în paleta de straturi și etichetați acest grup "Navigare".
Apoi creați un nou strat folosind Instrumentul dreptunghi (U). Cu fereastra Info deschisă, desenați această formă astfel încât să fie 1400x61 (lățimea totală a ferestrei documentului și 61 de pixeli înălțime). Aliniați acest strat în partea de jos a ferestrei de document.
Acum, aplicați un gradient stratului făcând clic dreapta pe stratul de formă din paleta Straturi și selectând Opțiuni de amestecare, apoi verificând Suprapunerea cu Gradient (alternativ, selectați Strat> Strat de Strat> Suprapunere cu Gradient).
În editorul Graident, faceți clic pe selectorul de culori de fund pentru a deschide selectorul de culori. Pentru culoarea stângă (partea de jos a formei) utilizați # 2f313a. Pentru culoarea potrivită (partea superioară a formei) utilizați # 3c3f49.
Apoi, creați un nou strat și selectați această "evidențiere". Utilizând instrumentul Creion cu o perie 1px și culoare #ffffff, trageți o linie în timp ce mențineți deplasarea în partea de sus a formei dreptunghiului creată anterior. Apoi setați opacitatea acestui strat la 6%.
Creați un nou strat de text de 20 de pixeli din partea stângă a documentului și aliniați textul să fie centrat vertical pe stratul de dreptunghi de navigație.
În acest exemplu, fontul DIN Light a fost aplicat la 14px cu o urmărire slabă de 200. Pentru a crea o schimbare între două părți ale tipului de siglă se utilizează două culori. Pentru prima parte #dddddd și partea a doua, mai închisă # 737375.
Apoi, adăugați o umbră subțire pentru a crea aspectul textului inserat în fundal. Selectați Strat> Strat de Strat> Drop Shadow.
Deselectați "Utilizați lumina globală", schimbați direcția la -45 grade, setați dimensiunea la 0px, distanța 1px și opacitatea 30%.
Pentru butoanele principale de navigare vom folosi o formă dreptunghiulară rotunjită.
Creați un nou grup numit "butoane".
Creați o nouă formă rotunjită dreptunghiulară cu dimensiunile de 279x31 și decalate de 20 px din partea dreaptă a ferestrei documentului și centrată vertical în dreptunghiul de navigație.
Faceți clic dreapta pe stratul din paleta de straturi și selectați Opțiuni de amestecare. Verificați acoperirea cu gradient și utilizați valorile # 292c33 la # 43464f. Faceți clic pe OK, apoi bifați Bevel & Emboss.
Pentru Bevel & Emboss setați dimensiunea la 0px cu o direcție de 122 de grade. Apoi, setați opacitatea Evidențiere și Umbre la 10% pentru a crea un efect consistent, subtil de iluminare.
Adăugați etichete de text utilizând aceleași setări de fonturi care au fost aplicate pentru tipul de logo. Pe măsură ce etichetele de butoane sunt cuprinse într-un spațiu vertical mai mic, ar trebui să reducem dimensiunea la 12 px și să strângem urmărirea la 100. Utilizați aceleași culori ca și tipul de siglă, însă aplicați culoarea mai deschisă pentru eticheta de pagină activă.
Pentru a separa butoanele în timp ce păstrați aspectul luminos al navigației, trebuie să desenați două linii, fiecare lățime de 1px. Primul trebuie să fie negru (# 000000), iar celălalt alb (#FFFFFF). Setați opacitatea stratului alb la 6%, iar stratul negru la 12%. Duplicați aceste straturi făcând clic pe fiecare, apoi faceți clic dreapta pentru a selecta. Poziționați straturile duplicat cu distanțe coerente în interiorul navigației.
Aceste butoane au o funcție diferită de restul navei, astfel încât vom aplica un stil care sugerează acest lucru. Să inserăm aceste butoane pentru a completa navigația principală.
Mai întâi, creați un nou grup numit "social" și introduceți acest grup în grupul părinte "navigare".
Acum, folosind instrumentul Rounded Rectangle cu o rază de 4 px și ținând apăsată tasta Shift, creați o formă de aspect pătrat de 25x25 px. Vertical centrează acest lucru în navigare și poziționează forma 22 px la stânga de la butoanele principale de navigare.
Faceți clic dreapta pe forma creată și selectați Opțiuni de amestecare.
Adăugați o umbră de picătură. Pentru această umbră de picătură vom folosi albul (#FFFFFF) și vom seta modul de amestecare pentru a Lighten. Setați distanța până la 1px, răspândită la 0% și dimensiunea la 0px. Acest lucru va crea un efect al marginea inferioară aprinsă și, prin urmare, butonul fiind introdus.
Apoi, în timp ce sunteți încă în fereastra Layer Style, verificați umbra interioară. Utilizați negru (# 000000) cu opacitate la 39%, distanță 1px și dimensiune 4px.
În cele din urmă, selectați Color Overlay și utilizați # 353741. Acest lucru va aplatiza aspectul formei si va aduce contrastul cu fundalul.
Pentru pictogramele de social media vom lua o imagine existentă și vom urmări marginile folosind instrumentul stilou pentru a crea o cale (asigurați-vă că căsuțele sunt selectate în meniul Opțiuni instrument).
După ce ați creat o cale a pictogramei, utilizați Instrumentul de selecție a traseului și faceți clic dreapta pe calea pe care tocmai ați creat-o (asigurați-vă că calea este selectată în paleta Căi). Selectați Define Custom Shape? Salvați forma.
Acum putem folosi pictograma ca obiect vectorial scalabil. Cu ajutorul instrumentului Pen, schimbați Opțiuni la straturi de formă (elementul din stânga sus din bara de opțiuni) și selectați Custom Shape Tool, apoi selectați pictograma creată. Ținând tasta Shift, trageți obiectul astfel încât să se potrivească în interiorul plăcii cu pictograme.
Setați opacitatea pictogramelor la 20%.
Repetați acești pași pentru toate pictogramele sociale rămase.
În acest exemplu, vom afișa imagini folio care sunt de 640x480 px.
Așa cum am dori să centreze pe verticală imaginea recomandată în spațiul de deasupra navigației, trebuie să adăugăm mai multe ghiduri. Selectați Vizualizare> Ghid nou și adăugați ghidaje orizontale la 180px și 660px. Aceasta va poziționa imaginea vizualizată în mijlocul spațiului vertical de deasupra navigației.
De asemenea, vom avea nevoie de un text în partea stângă a imaginii recomandate, astfel că vom adăuga ghidaje verticale la 400px și 350px pentru a oferi margini pentru text și pentru a permite spațiu pentru navigare lângă imagine. În cele din urmă, adăugați ghidaje verticale la 1040px și 1070px pentru a defini marginea imaginii afișate și marginea dintre imaginea adiacentă.
Creați un nou grup numit "Proiecte". Apoi, utilizând instrumentul Rectangle, desenați un dreptunghi 640x480px care se aliniază la partea din stânga sus a ghidului vertical la 400px și în partea de sus a ghidului orizontal la 180px. Aceasta va servi drept substituent pentru imaginea noastră principală.
Faceți clic dreapta pe layer-ul creat și selectați Rasterize Layer.
Acum, ținând cheia Alt, faceți clic și trageți stratul pentru a crea un duplicat. Deplasați acest strat în partea dreaptă a stratului cu o margine de 30px pentru alinierea cu ghidul la 1070px și utilizarea aceleiași linii de bază.
Creați încă două duplicate și aliniați-le la partea de jos a fiecărei părți, cu o margine de 30px între fiecare.
Apoi, utilizând instrumentul Bucket Paint, umpleți fiecare dintre aceste forme cu culoarea # 252a3a.
Creați un nou grup denumit "Vignette" sub grupul "Navigare" și deasupra grupului "Proiecte".
Creați un nou strat și utilizați instrumentul Bucket Paint pentru a umple stratul utilizând culoarea primului rând # 0f1219.
Folosind instrumentul Ellipse, trageți un contur care se intersectează la colțurile principalelor ghidaje de imagini.
Acum, pentru a crea un efect de vignetat, va trebui să tăiem această secțiune în timp ce pătrundem marginea tăieturii. Pentru a realiza acest lucru vom folosi Selectați> Modificare> Feather. Puneți selecția cu 60 de pixeli și apoi decupați selecția stratului (Ctrl-x / Command-x).
Pe măsură ce vom prezenta lucrări, va trebui să plasăm câteva screenshot-uri pe locurile de substituție. Reveniți la grupul "Proiecte" și lipiți o captură de ecran în timp ce este selectat substituentul principal. Acest lucru va insera stratul deasupra substituentului. Apoi, faceți clic dreapta pe strat și selectați Creare mască de tăiere.
Lipiți alte trei capturi de ecran pe celelalte opțiuni.
Reduceți opacitatea pentru toate capturile de ecran, cu excepția ecranului centrat la 20%.
Pentru a adnota fiecare proiect, vom folosi trei straturi de text. Creați un grup nou deasupra grupului "vignette" pentru a găzdui aceste straturi.
Pentru prima, rubrica, vom folosi un font de lumină. În acest exemplu am folosit DIN Light, însă o altă tipătoare de tip similar poate funcționa bine. Cu ajutorul instrumentului Text trageți o casetă de text în ghidajele din partea stângă a imaginii principale și 40px sub ghidul de sus. Setați culoarea la #FFFFFF, urmăriți până la -25 pentru o spațiere mai strânsă a literelor și utilizați o dimensiune a fontului de 28px.
Vom adăuga, de asemenea, o linie pentru categoria și data proiectului. Setați dimensiunea la 14 pixeli, urmăriți până la 100, aplicați capacele de forță și aplicați culoarea # 338966 pentru a accentua această linie.
Apoi, pentru textul corpului, vom folosi un font de sistem cum ar fi Lucida Grande sau Lucida Sans Unicode la 12px cu culoarea # 8C8F95 și înălțimea liniei de 18px.
Pentru a naviga pe site-ul folio, vom permite controlul mouse-ului sau al tastaturii. O destinație de plasare intuitivă pentru butoanele direcționale de navigare este în funcție de funcția lor. De exemplu, butonul săgeată dreapta va merge în partea dreaptă a imaginii principale.
Pentru butoanele vom folosi forme translucide care pot schimba opacitatea pe hover sau click pe evenimente. Creați un grup nou numit "Butoane" care este deasupra grupului "Vignette".
Apoi, creați un document nou cu dimensiunile 37x37px. Utilizând instrumentul stilou, trageți o formă de șurub, cum este mai jos. Repetați procesul de la pasul 8, utilizând Instrumentul de selecție a traseului, dați clic dreapta pe formă și selectați Define Custom Shape. Salvați forma.
Revenind la panza principală, folosiți instrumentul Custom Shape pentru a insera forma creată anterior.
Apoi, selectați Editare> Transformare> Flip orizontal. Aceasta va indica săgeata spre dreapta. Clonați această formă și utilizați Editare> Transformare> Rotire 90 de grade în sensul acelor de ceasornic pentru a crea forma orientată în jos.
Poziționați fiecare dintre aceste forme în centrul părții direcționale a acestora. Permiteți marginea de 15px, astfel încât butoanele să poată suprapune imaginile adiacente și să reducă opacitatea la 12%.
Pentru a lăsa utilizatorul să știe unde se află în portofoliu în ansamblul său, vom rezuma proiectarea rețelei și vom folosi linii de înălțime diferită pentru a reprezenta coloane de imagini și un indicator pentru a stabili poziția actuală de vizualizare.
Creați un grup nou numit "Orientare" și plasați acest grup deasupra grupului "Vignette".
Cu ajutorul instrumentului Creion, selectați setul Perie pătrată din meniul derulant. Apoi, cu culoarea #FFFFFF și o grosime de 5px, trageți o linie pentru alinierea cu ghidul de limită din extrema stângă și înalt de 60px.
Clonați acest strat și poziționați acest 2px spre dreapta. Repetați acest lucru pentru până la 12 rânduri.
Setați opacitatea pentru toate straturile la 12%. O modalitate ușoară de a face acest lucru este setarea opacității pentru primul strat, apoi faceți clic dreapta pe strat și selectați Copy Layer Style. Apoi selectați toate straturile rămase și selectați Inserare stil strat.
Întindeți aceste straturi utilizând comanda Edit> Free Transform pentru a scurta / intensifica fiecare linie.
În cele din urmă, creați un nou strat și folosiți creionul din nou pentru a desena un marcator pe prima linie. Acesta este indicatorul nostru de poziție.
Deseori controlul tastaturii va oferi o experiență de navigare intuitivă. Cu toate acestea, trebuie să permitem utilizatorului să știe că tastatura poate controla navigația. Pentru a realiza acest lucru vom crea pictograme săgeți tastatură.
Creați un nou grup numit "Tastatură" și plasați-l deasupra grupului "Vignette".
Cu ajutorul instrumentului Formă dreptunghiulară, desenați o pătrată (țineți Shift) 20x20px cu o culoare # 262a34. Faceți clic dreapta pe stratul din paleta Straturi și selectați Opțiuni de amestecare. Verificați Accident vascular cerebral și aplicați un clic 1px în exterior cu culoarea # 32343f.
Apoi, folosind instrumentul stilou (asigurați-vă că stilul este setat la Default în bara de opțiuni) și cu culoarea #fff trageți o săgeată cu un punct ușor pătrat. Ajustați, dacă este necesar, instrumentul Direct Selection. Setați opacitatea la 20%
În paleta de straturi, selectați cele două straturi create. Faceți clic dreapta și selectați Duplicați straturile. Apoi, utilizând opțiunea de meniu Editare> Transformare, rotiți straturile duplicate la orientarea lor corectă. Repetați acest pas pentru a crea toate cele patru pictograme.
În regulă! Acum am terminat cu partea de proiectare a proiectului? ceea ce inseamna tot ce trebuie sa facem este codul folosind cateva coduri de baza HTML / CSS, jQuery si cateva trucuri suplimentare jQuery. Dacă cineva vrea să vadă cum a codificat Paul acest design, anunțați-ne în comentarii, pentru a le putea aranja!
Accentsconagua