Share
Ce veți creaÎn acest tutorial voi folosi Photoshop CS6 pentru a crea o pagină de destinație simplă, curată, pentru o pornire fictivă de călătorie. În timpul acestui proces vom analiza crearea de rețele personalizate cu linii directoare, stiluri de stil, folosind o mulțime de spații albe și compunând conținutul site-ului nostru într-o manieră foarte curată și profesională. 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.
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 rețea, dar stabilirea unor orientări va asigura perfecțiunea pixelilor și va contribui la definirea lățimii site-ului nostru. Împărțiți pânza în două jumătăți vertical, pentru a crea o compoziție centrată. 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: verticale la 200px, 260px, 700px, 1140px și 1200px.
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 Header, Features, Social Proof, Final CTA și Footer. 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ă.
Antetul este foarte important pentru fiecare site, deoarece este prima ocazie pentru a convinge un nou vizitator că este benefic să rămâi pe site. Aici, noi, designerii, trebuie să folosim imagini izbitoare și un mesaj clar, cu unele acțiuni pe care vizitatorii să le poată lua.
Să modificăm mai întâi culoarea de fundal la ceva foarte ușor pentru ochi, în cazul meu am folosit gri deschis #ebebeb. După aceea, deschideți Antet grup și folosind Instrumentul dreptunghiular (U) trageți un dreptunghi de 1000 x 600 pixeli și plasați-l între orientările verticale. Apoi descărcați fotografia pentru bicicliști, trageți-o în documentul Photoshop și plasați-o deasupra stratului dreptunghiular. 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.
Acum trebuie să adăugăm un strat de culoare transparentă pentru a întuneca imaginea, astfel încât părțile de imagine luminoase să devină mai întunecate, iar textul alb va fi ușor de citit. Creați un strat nou deasupra imaginii și creați o mască de tăiere pentru aceasta. Apoi, umpleți stratul cu o culoare închisă și schimbați culoarea Opacitate în jur 20% astfel încât să putem vedea în mod clar imaginea.
Acum, să punem o simplă siglă bazată pe tipografie și să navigăm în partea de sus. Alegeți a Instrument tip orizontal (T) și scrieți-vă titlul de pornire pe partea stângă. Asigurați-vă că este lizibil și că are suficient spațiu în jurul acestuia. Logo-ul nostru este în colțul din stânga sus, deoarece aceasta este o convenție web comună și ceea ce mulți vizitatori se vor aștepta.
Am folosit-o Aller font pentru titlu și Open Sans pentru elementele de navigație.
Acum să jucăm cu mesajul principal. Ar trebui să limitați întotdeauna linia de legătură la una sau două propoziții și asigurați-vă că este scurt și ușor de citit. În cazul meu am folosit 32 pixeli Open Sans pentru a scrie mesajul principal, punând accentul pe "călătorești" făcându-l mai îndrăzneț.
A doua linie este mult mai mică, prin urmare, forțându-i să fie percepută ca fiind de importanță secundară, astfel încât oamenii să o citească după ce au terminat cu mesajul principal. Am desenat-o cu spații mai mari între litere, datorită caracterelor majuscule.
Observați unde plasez mesajele, gândiți întotdeauna la contrast și unde este mai bine să plasați copia dvs. ușor de citit de către cititor.
Creați un simplu apel la acțiune informând vizitatorii despre ce ar trebui să facă. În cazul meu, este un mesaj simplu care sugerează că vizitatorii se abonează la buletinul informativ. Am folosit-o 14px mărimea PT Serif (italic) font.
Să formăm un simplu formular de e-mail care permite vizitatorilor noștri să introducă adresa lor de e-mail și să se aboneze la listă. Creați un grup nou numit Formular de e-mail. Folosește Instrument rotunjit dreptunghiular (U) cu 3px raza pentru a crea un alb simplu (#FFFFFF) culoare.
Adăugați text de sugestie pentru ca utilizatorii să înțeleagă de unde să introducă e-mailurile lor și să creeze un buton de chemare la acțiune. Am folosit-o 13px Open Sans (Semibold) gri (#Bdbdbd)pentru textul de intrare și 13px Open Sans (Bold) alb (#FFFFFF) pentru textul butonului. Alegeți o culoare atrăgătoare pentru apelul principal la acțiune, astfel încât să se evidențieze și să încurajeze acțiunea.
În cazul meu am folosit verde (# 51a200) pentru apelul la acțiune principal. Alegeți a Instrumentul dreptunghiular (U) și trageți o formă dreptunghiulară plasată deasupra intrării albe. Apoi țineți apăsată tasta Alt cheia și mouse-ul peste dreptunghiul verde până când vedeți o pictogramă săgeată în jos, eliberați cheia și veți crea o Mască de tăiere.
Aceasta este partea principală a corpului chiar deasupra zonei de pliere. Dacă oamenii sunt interesați de ceea ce aveți de oferit, aceștia vor derula în jos pentru a vedea ce aveți în detaliu.
Reduceți grupul Header făcând clic pe săgeata mică de lângă numele grupului. Acum trebuie să creăm un fundal puțin diferit pentru zona corpului site-ului nostru. Am folosit Instrument rotunjit dreptunghiular (U) cu o rază de 5px și culoare albă #FFFFFF.
Plasați forma nou creată chiar deasupra stratului principal de fundal.
Extindeți grupul Caracteristici și începeți să tastați copia. În cazul meu, am adăugat linia principală de mesaje și două coloane de caracteristici cu un titlu și un scurt paragraf.
Când creați o copie angajată, asigurați-vă că este lizibilă și nu prea lungă. Utilizați diferite greutăți, dimensiuni și culori pentru a crea ierarhia vizuală. În cele din urmă, dar foarte important; utilizați o mulțime de spațiu liber. În cazul meu, am folosit Open Sans variante de font, gri închis # 545454 și gri deschis # a2a2a2 pentru copia mea.
Acum este momentul să proiectăm cea de-a doua zonă a corpului, care va ajuta vizitatorii site-ului să își facă mintea și să ia măsuri. Vom proiecta o zonă de probă socială care să prezinte câteva mărturii.
Mai întâi trebuie să separăm zona anterioară într-un mod subtil. Am folosit Instrumentul de linie (U) setat la 1px cu culoarea fiind gri deschis # e8e8e8.
Minimizați grupul Caracteristici și extindeți grupul de probă socială. Încă o dată, scrieți un titlu păstrând aceeași dimensiune pe care o utilizați înainte. Cheia designului curat este consecventa, asa ca odata ce ai folosit o culoare si o dimensiune inainte, ramai la acelea.
Pentru zona de probă socială am folosit două mărturii fictive de la oameni fictivi. Fontul folosit pentru citare este PT Serif iar restul este cel folosit anterior Open Sans cu variații diferite de mărime și greutate.
După cum puteți vedea, am lăsat un spațiu în fața numelor. Treceți la Inter-Faces pentru a obține niște avatare. După asta alegeți un Instrument de elipsă (U) și ținând jos Schimb cheie trage un cerc. În cele din urmă, copiați și inserați-vă avatarul deasupra stratului de cerc și mouse-ul deasupra stratului de avatar avariat Alt cheie, astfel încât să creați o Mască de tăiere.
Pentru a face lucrurile mai organizate, creați două grupuri în grupul de probă socială și plasați straturile mărturiilor în grupuri separate.
Potrivit GoodUI, trebuie să repetați apelul principal la acțiune, astfel încât oamenii care nu s-au gândit în primul rând să poată face acest lucru după ce au văzut mai mult din site-ul dvs..
Să separăm zona anterioară folosind aceeași linie. Găsiți stratul de linie și pur și simplu loviți CMD + J să o duplicați și apoi să o mutați sub mărturiile care lasă o mulțime de spațiu.
După aceea, scrieți titlul principal al secțiunii și subtitlul simplu, oferind mai multe informații sau îndrumări. După cum puteți vedea, am folosit aceleași fonturi de stil, greutate și dimensiune, așa cum se utilizează pentru secțiunile anterioare. Stick la un stil pentru toată copia ta.
Mergeți în grupul Header și găsiți grupul dvs. de formular, duplicat (CMD + J) și treceți la grupul Final CTA. Plasați-l sub mesaje și personalizați-l puțin, adăugând o lovitură verde în jurul câmpului de introducere.
Faceți clic pe butonul din dreapta al mouse-ului de pe stratul de intrare și selectați Opțiuni amestecate… după ce se aplică a Accident vascular cerebral după cum se arată mai jos. Culoarea pe care am folosit-o este # 51a200.
Am terminat cu grupul Final CTA, deci minimalizați-l și extindeți grupul Footer. În cele din urmă, introduceți câteva linkuri către paginile interne ale site-ului dvs. și puneți un text simplu de copyright pe o linie nouă. am folosit Open Sans (Semibold) font pentru link-uri.
Observați cum este plasat în afara fundalului corpului pentru ao deosebi de conținutul principal. Asigurați-vă că utilizați un spațiu consistent deasupra și dedesubtul copiei, astfel încât aceasta să pară echilibrată.
Și am terminat cu aspectul. Felicitări!În acest tutorial v-am urmărit procesul de creare a unei pagini de destinație a site-ului foarte simplu și curat, inclusiv câteva secțiuni cheie care vă permit să captați atenția vizitatorilor dvs., încurajând acțiunile viitoare.
Rezultatul este un aspect echilibrat și ușor, cu un accent puternic pe imaginile din zona de sus și pe tipografia curată în zona corpului. Dacă aveți întrebări sau gânduri, vă rugăm să ne anunțați în zona de comentarii!
Dacă sunteți nou în Design Landing Page Design, vă recomandăm un număr de tutoriale introductive care vă vor ajuta să vă îmbunătățiți noțiunile de bază:
.
Accentsconagua