Share
În acest tutorial Photoshop vom învăța cum să creați un layout web 2.0. Pe parcursul tutorialului vom aborda atât de multe tehnici Photoshop. Pare lung? asta pentru că este foarte detaliat. Vă asigur că veți găsi ușor să urmați și că ați terminat, doar încercați!
Pentru a păstra totul aliniat, vom folosi sistemul 960s Grid (Descărcați de aici) după descărcare deschideți fișierul "960_grid_24_col.psd".
Vom începe prin crearea stratului din fundal, faceți clic dreapta pe stratul "Fundal", apoi selectați Layer From Background. și o numiți "bg".
Întrucât vom folosi ghiduri atât de mult, trebuie să ne vedem pe conducătorii noștri. Pentru a face acest lucru mergeți la View> Rulers.
Trebuie să setăm frontierele inferioare pentru zona antetului, prin urmare vom trage un nou ghid orizontal după 100px. accesați Vizualizare> Ghid nou, Poziție: 100.
Să creăm antetul nostru. vom începe prin crearea unei selecții de 1020x100 pixeli. apoi faceți clic pe Shift + Backspace pentru ao umple (cu orice culoare doar pentru moment).
Dați-i o acoperire Gradient conform următoarei imagini:
Acum sunați acest strat: "header_bg".
Scrieți titlul site-ului Web cu următoarele setări:
Acum, adăugați o suprapunere Gradient la textul dvs. cu următoarele setări:
Pentru a alinia titlul site-ului Web cu fundalul antetului; Selectați stratul de titlu și stratul "header_bg" apoi faceți clic pe Aliniere centre verticale.
Scrieți textul de navigare cu următoarele setări:
Creați un dreptunghi rotunjit care va reprezenta un link mobil. ar trebui să fie de aproximativ 65x35px dimensiune - raza de 5px, (umpleți-o cu orice culoare pentru moment).
Dați-i o curbă Stroke and Gradient Overlay conform următoarei imagini:
Înainte de a trece la pasul următor, asigurați-vă că vă păstrați bine straturile, cum arată a mea!
Este timpul pentru a crea zona de desene sau modele prezentate. vom începe prin a stabili frontierele noastre inferioare prin adăugarea unui nou ghid orizontal după 430 de pixeli.
Creați o selecție de 1020x430px ca fundal pentru zona de desene sau modele prezentate. și umple-l cu orice culoare.
Apoi dați-i o acoperire cu gradient cu următoarele setări:
Acum să creăm efectul glazurii! creați o selecție de 1020x120px, umpleți-o cu orice culoare.
Apoi adăugați o suprapunere de gradient. utilizați imaginea de mai jos pentru referință.
Reduceți acum această opacitate la 40%
Să adăugăm niște atingeri! cu instrumentul Single Row Marquee, creați o selecție de 1px și o aliniați după cum urmează:
Setați culoarea prim-planului în # acd86e, apoi faceți clic pe Shift + Backspace pentru ao umple; asigurați-vă că utilizați culoarea primului ca opțiune de umplere.
Vă garantează că veți avea detalii detaliate despre pixeli
Am terminat crearea elementelor de fundal. asigurați-vă că le dați nume ideale, le organizați și le grupați împreună.
Să fim mai exacți! trageți două ghidaje noi conform imaginii următoare
Scrieți câteva cuvinte primite cu aceste setări:
Am scris personal: "Iată noua noastră lucrare. Oops Welcome!" ;) dar trebuie să subliniem cuvântul "Bine ai venit!" într-un fel. așa că, în principiu, vom da o suprapunere de gradient. urmați cu imaginea
Trageți acum două ghidaje orizontale noi conform imaginii următoare
Înainte de a ne spune la revedere la acest pas, asigurați-vă că organizați straturile de text.
Începeți prin a crea o selecție de 250 x 150 pixeli (umpleți-o cu orice culoare), acesta va fi titularul imaginii noastre.
Sunați acest strat "pic_holder" și încercați să îl aliniați ca imaginea de mai sus.
Și dă-i un Accident vascular cerebral
Să adăugăm o imagine a unui design recomandat, pentru a face acest lucru mergeți la File> Place și selectați o imagine. apelați stratul său "pic" și asigurați-vă că îl puneți chiar deasupra stratului "pic_holder".
Faceți clic dreapta pe stratul "pic" și alegeți Creare mască de tăiere.
Pentru a crea umbra noastră, vom începe prin duplicarea celor două straturi "pic" și "pic_holder".
În timp ce aveți cele două straturi duplicat selectate, mergeți la Edit> Free Transform și ajustați înălțimea la: -100.0%
În timp ce încă mai selectăm cele două straturi duplicate, faceți clic dreapta pe ele și alegeți Conversie la Obiect inteligent; numiți acest strat "umbra". și asigurați-vă că ați pus-o în partea de jos.
Selectați stratul "shadow", apoi faceți clic pe Adăugați masca strat (în partea de jos a panoului straturilor)
Alegeți instrumentul Gradient (G) și trageți un gradient liniar alb, negru, de jos în sus.
Ar trebui să aveți ceva de genul asta!
Trebuie să adăugăm o descriere imaginii noastre. așa că vom crea o selecție de 240x25 px și o vom umple cu această valoare de culoare: # 1a1919, Aceasta va funcționa ca fundal de descriere.
Scrieți o descriere cu următoarele setări de caractere:
Asigurați-vă că păstrați documentul ordonat!
Realizați o altă copie a imaginii de design prezentate și aliniați-o spre dreapta.
Vom face imaginea de centru un pic mai mare, deci face o selecție de 340x200px, aliniați-l după cum urmează și completați-l cu orice culoare.
Îi vom da și un Accident vascular cerebral. utilizați următoarea imagine pentru referință
Și iată ce avem!
Asigurați-vă că organizați-vă straturile și grupați-le. Eu personal am creat trei grupuri separate. iată cum arată
Să creăm butonul nostru de alunecare! vom începe prin crearea unei elipse de 50x50 pixeli folosind instrumentul Elliptical Marquee (M) și umplând-o cu orice culoare.
Acum, dați-i niște stiluri de straturi în funcție de imaginea următoare
Cu instrumentul Custom Shape Tool (U) creați o săgeată și dați-i următoarele stiluri de straturi
Ar trebui să aveți ceva de genul asta
Nu uitați să aliniați butonul în funcție de imaginea următoare
Faceți o altă copie a săgeții și aliniați-o spre dreapta
Să lucrăm în zona de conținut. începeți prin crearea unei selecții de 1020x815 pixeli
Faceți clic pe Shift + Backspace pentru a completa selecția cu această culoare: # e8e8e8
Cu ajutorul Instrumentului de marcaj cu un singur rând (M) creați o selecție de 1px, plasați-o ca imaginea următoare și umpleți-o cu alb (#ffffff).
Acum aveți detalii detaliate despre pixeli!
Trebuie să stabilim frontierele superioare în zona noastră de conținut. prin urmare, vom trage un nou ghid orizontal după 50px.
Descărcați acest set de pictograme: Set de bază - Pixel Mixer și locul acestora cum ar fi următoarele.
Glisați un nou ghid orizontal în partea de jos a pictogramei, lăsați 20px apoi trageți unul nou.
Acum scrieți câteva titluri cu aceste setări:
Trageți încă două ghidaje în funcție de imaginea următoare
Scrieți un text cu următoarele setări:
Trageți mai multe trei ghidaje în funcție de imaginea următoare
Este timpul să creați butonul "citiți mai mult". Cu instrumentul Rounded Rectangle (U), creați un dreptunghi de rază de 100x30px și 5px. și umple-l cu orice culoare doar pentru moment.
Dați acestui dreptunghi câteva stiluri de straturi. utilizați imaginea de mai jos pentru referință.
Cu instrumentul Ellipse (U) creați o elipsă de 15x15px și completați-o cu această valoare de culoare: # 4d4d4d.
Pentru a alinia corect, selectați stratul și stratul dreptunghiului, apoi faceți clic pe Aliniere centrale verticale, având în același timp selectarea ambelor straturi.
Introduceți "+", umpleți-l cu alb (#ffffff) și plasați-l astfel
Scrieți cuvântul "citiți mai mult" cu următoarele setări de caractere:
Dă-io umbră. utilizați imaginea de mai jos pentru referință
Pentru a crea o linie verticală de separare, Cu instrumentul de linie (U) creați două linii verticale lângă fiecare. și completați-le cu aceste valori: #ffffff - # b3b3b3.
Aliniați-vă linia ca imaginea următoare
Nu uitați să vă organizați straturile. aruncă o privire la a mea!
Faceți trei copii ale ceea ce am creat în cei doi pași anteriori. și au ceva de genul asta!
Să creăm separatorul nostru.
Trageți un nou ghid orizontal după 50 de pixeli
Cu instrumentul Elliptical Marquee (M) creați o selecție ca cea de mai jos.
Setați culoarea primului la negru (# 000000), apoi faceți clic pe Shift + Backspace pentru a completa selecția. apela acest strat "separator_bg".
Pentru a face ca aspectul să fie neclar, mergeți la Filter> Blur> Blur Gaussian - rază: 3px.
În timp ce selectați layerul "separator_bg" selectat, creați o selecție precum cea de mai jos, apoi apăsați ștergeți.
Dați clic pe pictograma Adăugați masca stratului. și setați editorul de gradienți la negru, alb, negru.
Cu instrumentul Gradient (G) trageți cu un gradient liniar în funcție de imaginea următoare.
Reduceți stratul de opacitate la 50%
Cu instrumentul de linie (U) creați două linii orizontale unul peste celălalt și plasați-le chiar deasupra separatorului.
Completați-le cu # b3b3b3 - #ffffff și adăugați aceeași mască a straturilor.
Vom începe să lucrăm la zona noastră de conținut inferioară, trăgând un nou ghid după 50px.
Adăugați un titlu cu următoarele setări de caractere:
Trageți două ghidaje orizontale noi conform imaginii următoare.
Scrieți un text cu următoarele setări de caractere:
Trageți un nou ghid după 160 de pixeli ca margine inferioară pentru zona de conținut.
Scrieți un alt titlu și text folosind aceleași setări de caractere pe care le-am utilizat în pasul anterior.
Introduceți un citativ pe tastatură, cu următoarele setări de caractere:
Și reduce opacitatea stratului său la 50%
Scrieți un cuvânt înțelept sau un citat al dvs. cu următoarele setări de caractere:
Pentru a crea o linie verticală de separare, creați două linii verticale unul lângă celălalt și completați-le cu următoarele valori: #ffffff - # b3b3b3.
Asigurați-vă că păstrați-vă stratul organizat, Iată cum le-am organizat.
Scrieți încă un titlu ca cel din stânga (Încercați să scrieți ceva care reprezintă echipa, de exemplu, am scris "Echipa noastră").
Utilizând instrumentul Rectangle (U), creați un dreptunghi de 90x90px și completați-l cu orice culoare. apelați acest strat "photo1_holder"
Acesta va funcționa ca titular pentru o fotografie a unui membru al echipei. Acum, dă-i un Accident vascular cerebral. Utilizați imaginea de mai jos pentru referință.
Plasați o fotografie a unui membru și apelați stratul său "photo1". Asigurați-vă că stratul "photo1" este chiar deasupra stratului "photo1_holder". apoi faceți clic dreapta pe layerul "photo1" și alegeți Creare mască de tăiere. Ar trebui să veniți cu ceva de genul de mai jos!
Scrieți un text despre membru utilizând următoarele setări de caractere:
Vom crea noi icoane de social media! Să începem cu Twitter, Introduceți litera "t" cu următoarele setări de caractere:
Apoi dați-i un accident vascular cerebral după imaginea următoare.
Să creați link-ul One! Introduceți cuvântul "în" cu următoarele setări de caractere:
Facebook!? Introduceți litera "f" cu următoarele setări de caractere:
Creați o altă copie a fotografiei membrilor. în timp ce selectați stratul de fotografie, mergeți la Layer> Layer de ajustare> Black & White.
Asigurați-vă că verificați "Utilizați stratul anterior pentru a crea o mască de tăiere"
Introduceți același text, literele social media pe care le-am scris înainte de a utiliza aceleași setări de caractere, dar le dați toată această valoare de culoare: # 505150.
Deci, în mod evident, membrul va arăta gri când nu este plutind!
Faceți două copii și aliniați-le astfel
Pentru a vă asigura că sunt bine aliniate, faceți patru grupuri separate fiecare dintre ele conținând conținutul unui membru și faceți clic pe Distribuie marginile din stânga în bara de control, în timp ce aveți cele patru grupuri selectate.
Mi-am organizat straturile, tu?
Înainte de a începe să lucrăm la zona de legături sociale media, trebuie să stabilim anumite frontiere, de aceea vom trage două ghidaje noi în funcție de imaginea următoare!
Creați o selecție de aproximativ 940x70 pixeli și aliniați-o ca în imaginea de mai jos.
Umpleți-l cu orice culoare și apoi dați-i o acoperire Gradient. utilizați imaginea de mai jos pentru referință.
Creați un dreptunghi de 70x45 pixeli. utilizați imaginea de mai jos pentru ao alinia și a le oferi anumite stiluri de straturi. apelați acest strat "tw_bg"
Ascundeți stratul "tw_bg" pentru a lucra liber.
Creați un alt dreptunghi de 10x43 px și mergeți la Edit> Transform Cale> Skew. ajustați aceste opțiuni în bara de control:
Apelați acest efect "layer" și faceți vizibil nou stratul "tw_bg".
Copiați stilul stratului din stratul "tw_bg" și lipiți-l în stratul "efect".
Scrieți litera "t" cu următoarele setări de caractere:
De asemenea, dați-i câteva stiluri de straturi în funcție de imaginea următoare.
Repetați pasul 20 pentru a crea un alt separator sau chiar pentru a-l copia. apoi plasați-l astfel:
Trebuie să tăiem partea dreaptă a dreptunghiului, eh !? pentru a face acest lucru selectați layerul "tw_bg" și faceți clic pe Add mask layer.
Faceți o selecție pe partea dreaptă (pe care trebuie să o tăiem) a dreptunghiului, setați culoarea primului la negru (# 000000), apoi faceți clic pe Shift + Backspace pentru ao umple.
Scrieți un text - care ar trebui să fie un Tweet - cu următoarele setări de caractere:
Pentru a alinia textul bine, în timp ce selectați stratul de text și stratul de bare verde, faceți clic pe Aliniere centre verticale.
Repetați pasul 27 pentru a crea ceva asemănător în imaginea de mai jos. De asemenea, creați un dreptunghi, umpleți-l cu # 334814 și reduceți stratul său Opacitate la 40%.
Dați dreptunghiului mare câteva stiluri de straturi în funcție de imaginea următoare
Acum, umpleți dreptunghiul înclinat cu o culoare mai închisă a acestei valori: # 2a6788
Scrieți litera "t" cu următoarele setări de caractere:
Și dă-i un Accident vascular cerebral. utilizați imaginea de mai jos pentru referință
Asigurați-vă că organizați straturile și grupați-le împreună.
Faceți o altă copie a pictogramei Twitter, modificați suprapunerea culorilor (pentru dreptunghiul mare) la: # 0080ab și umpleți dreptunghiul înclinat cu această valoare de culoare: # 00526d.
Scrieți cuvântul "in" cu următoarele setări de caractere:
Creați oa treia copie a pictogramei Twitter sau LinkedIn, modificați suprapunerea culorilor (pentru dreptunghiul mare) la: # 395796 și umpleți dreptunghiul oblic cu această valoare de culoare: # 263e6f.
Scrieți litera "f" cu următoarele setări de caractere:
Efectuați o copie ultima, modificați Suprapunerea culorilor (pentru dreptunghiul mare) la: # e8e8e8 și umpleți dreptunghiul înclinat cu această valoare de culoare: #cdcdcd.
Scrieți cuvântul "fr" cu următoarele setări de caractere:
Puneți fiecare dintre pictogramele într-un grup separat, iar în timp ce selectați cele patru dintre acestea, faceți clic pe Distribuie marginile din stânga .
Păstrează-l! doar subsolul din stânga. Creați o selecție de 1020x460px și completați-o cu orice culoare pentru moment.
Aplicați o suprapunere în gradient. utilizați imaginea de mai jos pentru referință.
Ar trebui să ai o umbră frumoasă!
cu instrumentul de marcaj pentru un singur rând (M) creați o selecție de 1px și completați-o cu alb (#ffffff).
Trageți două ghidaje orizontale noi conform imaginii următoare.
Scrieți un titlu cu următoarele setări de caractere:
Scrieți un subtitlu cu următoarele setări de caractere:
Folosind Instrumentul Linie (U) creați două linii orizontale unul peste altul și umpleți-le cu aceste valori de culoare: # 151515 - # 2f2f2f.
Aliniați-o astfel.
Trageți două ghidaje orizontale noi conform imaginii următoare.
Cu instrumentul Rounded Rectangle (U) creați două dreptunghiuri de rază de 210x25px - 5px, completați-le cu: # 141313 și le dați o Shadow Inner.
Scrieți un text în interiorul celor două dreptunghiuri cu următoarele setări de caractere:
Creați un alt dreptunghi precum cele de mai sus, dar de această dată înălțimea sa va fi: 110px. De asemenea, scrieți un text în interiorul acestuia cu aceleași setări de caractere de mai sus.
Faceți o copie a butonului pe care l-am creat la pasul 17. și aliniați-l ca în imaginea următoare
Scrieți un titlu ca cel din stânga.
Scrieți un text. utilizați imaginea de mai jos pentru referi
Accentsconagua