Ce este Landing Page și ce mănâncă?
De ce pagina de destinație?
Pasul 1: Pregătirea
În crearea de destinație ne bazăm pe instrumentul System populare 960 Grid, care ne va ajuta să poziționeze corect graficele de pe spațiul de lucru, apoi să-l impună pe schema deja de la 960 de unități de sistem Grid. Următoarele fonturi au fost folosite în lucrare: Source Sans Pro, Nevis și Bebas Neue, dar puteți folosi fonturi la discreția dvs. Ca pictograme folosite set de icoane Impressionist, care în prezent este plătit.
Pentru muncă, va trebui să descărcați sistemul 960 Grid. După descărcare, dezarhivați-l într-un dosar și deschideți fișierul PSD cu 12 coloane numite 960_grid_12_col.psd. acesta este localizat în dosarul templates \ photoshop. În primul rând, trebuie să adăugăm un spațiu de lucru, așa că du-te la meniul Image> Canvas Size și setați Lățimea la 1200px și Înălțimea la 1330px.
Lăsați 245px mai sus pentru imaginea noastră principală din antetul paginii. Setați restul spațiului în gri (# f0f0f0) cu instrumentul Rectangle. Pur și simplu selectați această unealtă și desenați o zonă dreptunghiulară care acoperă întregul spațiu sub 245px prețuite. alocat la capac. Rețineți că atunci când creați un dreptunghi, trebuie să specificați culoarea dorită (# f0f0f0) din paletă.
Rezultatul ar trebui să pară așa:
Pasul 2: Imaginea din capac
Pasul 3: Bara de navigare
Folosind instrumentul Dreptunghi pentru a crea o înălțime dreptunghiulară zona 20px și lățime în întreaga zonă de lucru, și apoi se atașează la stratul de Opacitate primire 25% - astfel vom realiza stratul transluciditatea așa cum se arată în imaginea de mai jos.
Treceți la instrumentul de tip orizontal (T). În viitor, vom folosi fontul Source Sans Pro - un font complet gratuit pe care îl puteți spune cu ușurință de pe serverele Google.
În opțiuni, setați următorii parametri de stil:
Ca urmare, ar trebui să obțineți acest lucru:
Pasul 4: Panglica pentru logo-uri
Ca logou, puteți utiliza orice imagine raster sau vector sau puteți desena o formă utilizând Adobe Photoshop. Accesați meniul Vizualizare> Afișați> Ghiduri, astfel încât să activați liniile de marcare preinstalate în 960 Grid System. Dacă doriți să primiți panglică similare - Utilizați Pen Tool și pur și simplu cerc conturul dorit de-a lungul liniilor scribul, și apoi se adaugă un element de verde (# 79b02f) de culoare.
Acum, să oferim panglicii noastre câteva stiluri suplimentare pentru a face să pară o siglă completă. Să începem cu Shadow Inner with Opacity la 35%.
și adăugați Bevel și Emboss. Pentru modul Highlight, setați opacitatea la 0% (nu avem nevoie de un efect de evidențiere), în timp ce pentru modul Shading setați opacitatea la 15%. Observați cum arată în imagine:
După aceasta, adăugați o suprapunere cu gradient elementului. Setați opțiunea Mode Blend (Mod amestecare) pe Soft Light (Lumină moale). și Opacitate la 50%. Aceasta ar trebui să arate fereastra cu setările de efecte:
Acum puteți pune un text pe partea de sus a logo-ului nostru. Utilizați instrumentul Tip orizontal și scrieți caracterele sau textul de care aveți nevoie. În cazul nostru, acestea sunt literele "DM" în fontul Nevis font (Bold 36px) + Drop Shadow.
Pasul 5: Rubricile
Pentru proiectarea titlurilor a fost folosit fontul Source Sans Pro, selectat cu atenție. Antetul mai mare este făcut în dimensiunea fontului 24pt. mai mic - 18pt.
Iată cum au grijile anteturilor după ce au efectul Drop Shadow:
Pasul 6: Cercuri
Acum trebuie să adăugăm 3 cercuri la aterizarea noastră: 2 cercuri de aceeași mărime + una mai mare și conectați-le cu o linie în 5px. Pentru a face ca cercurile să folosească instrumentul Ellipse, iar linia va avea la dispoziție un instrument Line cu o grosime de 5 px.
Apoi, utilizați în mod aleator un font preferat și scrieți câteva inscripții cu aspecte cheie ale aterizării. În cel mai mare cerc, adăugați + 10pt la dimensiunea fontului.
Pasul 7: Butonul de chemare la acțiune
Deci, am ajuns în sfârșit la butonul de chemare la acțiune. Vom face acest lucru cu ajutorul instrumentului Rounded Rectangle Tool. Setați raza la 3px + culoare # 96c64f și desenați un element cu o lățime de 7px și o înălțime de 35px. apoi adăugați efectul elementului Drop Shadow:
Apoi, adăugați Inner Shadow c Distanța în 1px și Opacitate la 30%. Obținem următoarele:
Și din nou Bevel și Emboss pentru butoanele de apel pentru acțiune. Acest efect se descurcă perfect cu sarcina de a da volum elementelor, de aceea îl folosim aici. Dar, și cu ea, nu îndoiți prea mult pentru a face efectul abia vizibil, setați opțiunea Mode Highlight pentru a lăsa Opacitatea la 0%, iar pentru Shadow Mode - la 7%.
Apoi, adăugați efectul Gradient Overlay la elementul din modul de amestecare a luminii ușoare cu Opacity la 60%:
Acum trebuie să adăugăm puțin zgomot la butonul nostru. Există multe tehnici diferite, dar vom continua să folosim modele. Cum să-ți faci modelul personalizat?
- Creați un document nou de orice dimensiune
- Creați un strat nou și ștergeți fundalul implicit
- Accesați meniul Selectați> Toate
- Selectați Editați> Umplere pentru a umple întregul spațiu de lucru
- Apoi, deselectați Selectați> Deselectați
- Adăugați suficient zgomot vizibil cu următoarele acțiuni Filtru> Zgomot> Adăugați zgomot
- Din nou, selectați întregul spațiu de lucru: Selectați> Toate
- Accesați meniul Editați> Definiți modelul
Felicitări, ați creat propriul model de zgomot nou, pe care îl adăugăm acum butonului. Adăugați Suprapunerea modelului și selectați modelul nou creat.
Acum, dați-i drumului nostru cu durere îndelungată un efect și alegeți una dintre nuanțele verde pentru acest lucru. În partea de sus a butonului, efectul va fi abia vizibil datorită culorii de fundal, dar se va amplifica la părțile centrale și inferioare.
Apoi, trebuie să creați un element mic care va servi drept separator între pictogramă și textul de pe buton. Pentru a face acest lucru, creați o linie verticală de înălțime de 10px utilizând Instrumentul Linie. Adăugați la rând efectul GradientOverlay cu următorii parametri:
Utilizăm același font pe care l-am utilizat pentru titluri și scriem un apel la acțiune, de exemplu, inscripția Descărcați acum. Dați textului o culoare verde închis (# 4d7500) și atribuiți un efect Drop Shadow cu o culoare umbroasă albă (#ffffff) și o opacitate de 30%.
Apoi, adăugați orice vă place pictograma sau desenați-vă propriul. În cazul nostru, va fi o pictogramă de nor.
Pasul 8: Panglica de lângă buton
Utilizați aceeași tehnică cu care tragem o panglică pentru emblemă și reducem suplimentar opacitatea, astfel încât imaginea de fundal să fie văzută prin panglică. Acest lucru este de asemenea important pentru a nu distrage vizitatorul de principala chemare la acțiune. După ce panglica este gata, scrieți ceva, de exemplu "100% gratuit".
Pasul 9: Secțiunea principală de conținut
Putem spune că am terminat cu o pălărie. Acum trebuie să lucrăm prin secțiunea principală de conținut, care de cele mai multe ori prezintă principalele caracteristici și avantaje ale produsului.
Utilizați instrumentul Rectangle pentru a crea un element cu o lățime de 220px și o înălțime de 214px. Sub dreptunghiul rezultat, trageți un alt dreptunghi mic de 5px înălțime și o culoare verde deschis (# 91c04c). Utilizați seturi pregătite de pictograme și plasați pictograma selectată în centrul treimii superioare a dreptunghiului. Apoi, utilizați Horizontal Type Tool si Source Sans Pro fontul selectat gri (# 262626) pentru antet și o nuanță mai deschisă de gri pentru restul textului (# 9c9c9c). Duplicați elementul rezultat de trei ori, astfel încât în final aveți 4 elemente similare, înlocuiți pictogramele și titlurile copiilor. Ar trebui să ajungeți astfel:
Utilizați Nevis sau orice font doriți în dimensiunea Bold 18pt și scrieți câteva sugestii. Culoarea textului este aceeași cu cea pe care am folosit-o pentru Anteturi în pasul anterior, iar culoarea verde este culoarea dreptunghiurilor verzi pe care am făcut-o și în pasul anterior. Accentuați-vă pe expresia "Contactați-ne" - acesta va fi un link, fă-o subliniată.
Folosind aceeași culoare gri, scrieți câteva linii de text și plasați-o sub titlul nou creat. Luați pictograma pe care ați ales-o (în acest caz este pictograma pungă) și dați-i aceeași culoare verde pe care am folosit-o pentru alte pictograme verzi. Apoi, atribuiți efectul Drop Shadow cu culoarea verde și parametrii așa cum se arată în imaginea de mai jos:
Pasul 10: În continuare, subsolul. sau cum este acolo?
Utilizați instrumentul Rectangle pentru a crea un element cu înălțimea de 1200px și 280px. Culoarea este gri (# d0d0d0) - acesta va fi fondul nostru pentru subsol.
Utilizați instrumentul Tip orizontal și același font ca înainte pentru a scrie următorul titlu ca în imaginea următoare. Vom împărți subsolul nostru în 3 secțiuni și fiecare dintre ele va avea propriul titlu. După cum puteți vedea în imagine, titlul primului bloc citește "Mai multe despre noi". Adăugați efectul Drop Shadow cu setarea Opacitate la 50% și Distanță în 1px.
Utilizați același font pentru a scrie peștele text și pentru a da o nuanță mai deschisă (# 7a7a7a).
Utilizați instrumentul Linie pentru a crea o linie simplă gri, care va servi ca separator între secțiuni.
Următoarea secțiune va fi numită "Buletin informativ". Creați un câmp pentru introducerea unui e-mail utilizând Instrumentul rotunjit dreptunghi cu o rază de 3px. Dați fundalului o culoare foarte deschisă (# f5f5f5). Dați-i un efect de Shadow Drop subtil. Dați formei un efect subtil de strat 1pxStroke. Utilizați instrumentul tip orizontal (T) pentru a introduce text în formă. Adăugați câteva efecte la gustul dvs.: de exemplu Drop Shadow și 1pxStroke. Scrieți un pește text pentru câmpul de introducere.
Pasul 11: Finita la comedia
Articole similare
Trimiteți-le prietenilor: