Share
În acest tutorial vom trece printr-o extensie gratuită Photoshop numită Velositey. Velositey (actualmente la versiunea 2) oferă modele comune de structură pentru a construi prototipuri de design web în Photoshop.
"Petreceți mai mult timp perfecționând detaliile și stilul și mai puțin timp pe toate lucrurile plictisitoare" - Velositey
Înainte de a ne pune mâinile pe Velositey, să examinăm mai întâi câteva modele comune de aspect găsite în multe site-uri în aceste zile.
Dacă aruncăm o privire la trei dintre cele mai populare teme WordPress din ThemeForest (Avada, Enfold și Salient), veți observa că împărtășesc câteva caracteristici comune.
În primul rând, pe ecrane mari, au un navigator cu imaginea logo-ului stabilit în stânga și navigația spre dreapta. Mai jos de bara de navigare vom întâlni de obicei o imagine de erou împreună cu câteva butoane afișate printr-o prezentare animată. După zonele de antet izbitoare, găsim adesea coloane sau un fel de structură bazată pe rețea.
De vreme ce acest tip de aspect este atât de obișnuit în sălbăticie, s-ar putea să vă găsiți adesea construind ceva similar. Prototyping layouts familiare din timp și din nou poate deveni, prin urmare, o sarcină repetitivă.
În acest tutorial vom trece prin trăsăturile lui Velositey și vom învăța cum să le folosim pentru a automatiza sarcinile comune, în cele din urmă accelerarea fluxului nostru de prototipuri. În plus, vom învăța cum să folosim caracteristicile native ale Photoshop pentru a personaliza și a adăuga niște clopote și fluiere spre prototipul nostru.
Fără să mai vorbim, să începem!
Cerința minimă de a rula Velositey este Adobe Photoshop CC 2014 / CS6. De asemenea, asigurați-vă că aveți instalat Adobe Extensions Manager. Cu cei prezenți, descărcați Velositey (va trebui să plătiți printr-un mesaj Tweet sau Facebook) și îl instalați prin Adobe Extension Manager.
Lansați Photoshop și navigați la Fereastră> Extensie> Velositey pentru a dezvălui panoul Velositey.
Panoul VelositeyPentru a începe, vom crea un layout gol.
În primul rând, trebuie să creați un nou document necompletat prin [+] Șablon nou butonul din panoul Velositey.
Acest document nou generat va veni cu o linie de ghiduri cu lățimea de 1170px cu jgheab de 30px. Acesta este un aranjament convenabil dacă intenționați să utilizați Bootstrap ca fundație a site-ului dvs. de rețea.
Unul dintre lucrurile inițiale pe care le veți vedea sub [+] Șablon nou butonul este o serie de file, dintre care primul este pentru anteturi. Voi opta pentru modelul 10 din antet. Faceți clic pe acesta, apoi Velositey va genera instantaneu antetul și îl va pune în document.
Antet opțiune în panoul VelositeyÎn cazul nostru, ne dă un antet cu logo-ul stabilit în stânga și navigația spre dreapta. În nativul Photoshop Strat panou, veți găsi, de asemenea, că straturile sunt structurate și numite în mod corespunzător în cadrul Antet grup.
Formatul gol al antetului și structura stratului acestuia în straturi panou.Notă: dacă mai târziu optați pentru o altă opțiune de antet, Velositey va înlocui primul exemplu.
În ciuda dezavantajelor, mulți oameni încă mai doresc un slider pe site-ul lor. Adăugarea unei zone de cursor este la fel de ușoară ca zona antetului; Velositey oferă un set de modele de culori gata de adăugat prin apăsarea unui buton.
Opțiunile tiparului de dispunere a cursorului.Aici am optat pentru ultimul model de glisor care ne dă un cursor care conține o rubrică, un conținut fals și două butoane.
Zona Slider, cu straturi corespunzătoare .După cum puteți vedea mai sus, veți găsi un nou grup, cursor, adăugat în cadrul Strat panou în cazul în care toate straturile glisante rezidă.
Adăugarea zonei de conținut este la fel de simplă. Navigați la a treia filă din panoul Velositey și veți găsi câteva opțiuni de conținut.
Șabloane de structură a conținutuluiAm optat pentru cel de-al treilea stil, oferindu-ne conținutul prezentat în trei coloane, fiecare coloană cuprinzând o rubrică, un substituent de imagine și un conținut inactiv.
Zona de conținut cu straturile saleA Modul, în acest caz, este un bloc de conținut independent. Depinde de noi să definim conținutul și pentru ce este folosit. Spre deosebire de anteturile Header, Slider și Content, putem adăuga mai multe module într-un singur document. Aici am adăugat al doilea model de modul:
Modele de modeleCel de-al doilea tip de modul ne oferă un înlocuitor de imagine (care se întinde peste grila de documente), o rubrică și câteva linii de text fals.
Modulul adăugat cu straturileUltima secțiune a site-ului nostru va fi, în mod previzibil, subsolul. Pentru subsoluri, încă o dată, Velositey ne dă un șir de modele presetate de alegere:
Primul model de subsol ne oferă următoarea structură de subsol:
În această etapă, am finalizat adăugarea tuturor secțiunilor site-urilor necesare - de la antet la subsol - cu doar câteva clicuri. Pentru a aranja fiecare secțiune în mod corespunzător, poate doriți să adăugați câteva spații verticale între ele:
Acum avem layout-ul de bază în loc, este timpul să-l personalizăm. Trebuie să modificăm câteva lucruri pentru a face prototipul prezentabil.
Regula de bază atunci când vine vorba de personalizarea documentelor Photoshop este de a lăsa straturile intacte ori de câte ori este posibil. Fiecare strat trebuie personalizat fără a distruge forma sau proprietățile sale inițiale. Acest lucru ne face să folosim câteva caracteristici Photoshop cum ar fi:
În plus, prefer să folosesc cantitatea minimă de straturi posibila.
În cazul nostru, Obiecte inteligente sunt utile pentru includerea imaginii logo-ului.
Pentru început, selectați stratul denumit siglă în cadrul Antet grup (în prezent, un strat de formă rectangulară). Apoi, faceți clic dreapta și selectați Conversia la obiectul inteligent opțiune.
siglă stratul este acum a Obiect inteligent.
Pentru a plasa logo-ul nostru în acest strat, faceți clic dreapta pe siglă și selectați Editați conținutul opțiune.
Acest lucru ne va conduce la un nou document în fereastra Photoshop. În această filă, setați stratul de formă dreptunghiular invizibil, apoi trageți-și aruncați imaginea logo-ului în filă, alinierea logo-ului la stânga. Pe măsură ce salvați fișierul, modificările ar trebui să se reflecte în index.psd.
Logo-ul este plasat printr-un obiect inteligentAcum o să convertim siglă strat, care este acum a Obiect inteligent, intr-o Obiect inteligent conectat. Acest lucru stochează în mod eficient logo-ul nostru ca fișier extern. Pentru a face acest lucru, faceți clic dreapta pe strat și selectați Conversia la Linked ... opțiune.
Photoshop vă va solicita să salvați Obiect inteligent fişier, .PSB. Salveaza Obiect inteligent a logo-ului într-o organizație tipică, așa cum ați proceda la organizarea imaginilor site-ului web. În acest caz, l-aș salva într-un folder numit / imagini.
"Păstrați fotografii stoc / pictograme într-un dosar aproape de PSD, nu într-un director desktop numit" Chestii diverse "- Photoshop Etichetă
Pe măsură ce lucrăm acum cu obiecte inteligente, să folosim din nou logo-ul în subsolul nostru. Mergeți la Subsol grupați și găsiți siglă strat. Faceți clic dreapta pe strat și selectați Înlocuiți conținutul ... .
Navigați la dosarul în care ați salvat imaginea .PSB fișier al siglei, selectați fișierul și apăsați pe Loc buton. Ar trebui să aveți acum sigla în subsolul paginii.
Repetați acești pași pentru a plasa imagini în celelalte secțiuni; Conținut, Slider și Modul. Odată ce acest lucru este făcut, ar trebui să aveți un rezultat similar cu cel de mai jos:
Adăugarea unui efect de strat va fi, probabil, cunoscut fiecăruia dintre dvs. care a folosit Photoshop pentru o vreme. Efectele stratului vor aplica unul sau mai multe efecte cum ar fi culoarea, gradientul, umbra etc. pe un strat. În cazul nostru, o vom folosi pentru a fixa o nouă culoare a logo-ului și pentru a adăuga un gradient.
Începeți prin selectarea opțiunii siglă strat în cadrul Antet grup. Apoi selectați fx pictograma în cadrul Strat panoului, unde se găsesc opțiunile de efect. Selectați Suprapunere de culori ... , și setați culoarea albă.
Repetați acest pas pentru a personaliza fiecare culoare de legătură de navigare, culoarea pictogramei din secțiunea de conținut și culoarea butonului din cursor. În plus, adăugați un efect de gradient la imaginea cursorului pentru a oferi un contrast mai mare între antet și glisor, făcând mai ușor de citit logo-ul și navigația.
Straturi de ajustare ne permite să personalizăm tonul stratului (cum ar fi Luminozitatea și contrastul) într-un mod nedistructiv. În cazul nostru, putem folosi un strat de ajustare pentru a transforma icoanele modulului alb-negru.
Mai întâi, selectați recipient strat în cadrul Modul grup. Faceți clic dreapta și selectați Editați conținutul ... opțiune. Apoi, faceți clic pe Nou Strat De Ajustare și selectați Alb-negru ... opțiune. Și voila!
Ultimul lucru pe care trebuie să-l faceți este să reorganizați titlurile și textul în locurile de conținut ale conținutului. Cu ceea ce facem, aici este, prototipul nostru finit:
Bine, am construit cu succes un prototip de design pentru o pagină web. Am folosit Velositey, permițându-ne să generăm rapid aspectul gol. Mai mult, am personalizat straturile cu culori, gradienți și ajustări într-un mod nedistructiv, menținându-le forma intactă și permițând editări viitoare.
Aveți alte sfaturi și trucuri pentru utilizarea Velositey? Spuneți-ne în comentariile!
Accentsconagua