Cum să faci un aspect de pagină în Photoshop. Ceea ce nu ar trebui să uiți. Lucrezi cu pești, textele reale vor fi diferite

Înainte de a începe să proiectăm aspectul site-ului web, vom avea nevoie de o schiță care să o arate aspectși funcționalitate. Pentru schiță, am folosit doar tonuri de gri pentru a mă concentra în general pe „aspect” și pentru a nu mă deranja încă cu culorile. Drept urmare, puteți schimba rapid sau reface ceva în orice moment.

2. Creați un document

Aspectul site-ului va avea o lățime de 960 pixeli, așa că trebuie să creăm un document cu dimensiuni de 1200x1500 pixeli, cu o rezoluție de 72 pixeli/inch.

Am decis asupra lățimii, acum trebuie să desemnăm această zonă folosind . Prin apăsarea Tastele Ctrl+ A selectați întregul document.

Accesați Selectați și alegeți Transformați selecția. În bara de opțiuni din partea de sus, setați lățimea la 960, aceasta este zona de lucru a viitorului aspect.

Plasați ghidaje de-a lungul marginilor selecției.

Acum vom crea o umplutură între chenar Zona de lucruși o zonă pentru conținut care va fi adăugat ulterior. Asigurați-vă că aveți o selecție activă, apoi mergeți din nou la meniul Selectare > Transformare selecție (Selectare - Transformare zona selectată). Reduceți dimensiunea lățimii la 920 de pixeli. Aceasta înseamnă că va exista o indentare de 20 de pixeli pe ambele părți ale aspectului și un total de 40 de pixeli.

Să adăugăm încă două ghidaje verticale de-a lungul marginilor noii selecții.

3. Crearea unui antet de site

În partea de sus a aspectului, creați o selecție de 465 px înălțime.

Umpleți zona selectată cu o nuanță gri; puțin mai târziu îi vom aplica stiluri de straturi pentru a schimba culoarea.

Adăugați un gradient la antet folosind stilul Gradient Overlay. Gradientul va consta din două culori #0f201c și #002931.

Acesta este ceea ce ar trebui să obțineți:

Acum să adăugăm puțină iluminare la antet. Luați peria de la margini moi, cu un diametru de 600px, culoare - #19535a și pe un nou strat, faceți clic cu o pensulă în partea de sus în centrul antetului.

În partea de sus a antetului, creați o selecție de 110 pixeli.

Apăsând tasta Delete, ștergeți zona selectată.

Cu ajutor transformare liberă(Ctrl + T) răsturnează stratul de evidențiere pe verticală.

Asigurați-vă că lumina antetului este perfect centrată. Pentru a face acest lucru, activați straturile cu evidențiere și antet, selectați Mutare (V) din bara de instrumente. În partea de sus a barei de opțiuni, selectați Aliniați centrele orizontale.

După ce a creat strat nou, cu Instrumentul Creion (B) trageți o linie de 1 px pe lățimea întregului document. Culoare - #01bfd2.

Folosind o mască de gradient, netezește marginile liniei create. Luați Instrumentul Gradient (G) și ajustați-l ca în captura de ecran de mai jos:

Umpleți stratul creat cu un gradient.

4. Crearea unui model

Vom decora antetul aspectului cu un model în carouri. Folosind un creion de 2 pixeli, desenați două puncte situate în diagonală. Opriți temporar stratul de fundal făcând clic pe ochiul de lângă miniatura stratului de fundal. Apoi creați un model accesând meniul Editare și selectând Define Pattern.

Sub evidențiere creați un nou strat. Selectați zona în care doriți să aplicați modelul. Prin apăsarea Tastele Shift+ F5 completați antetul.

Rezultat:

Rămas de făcut tranzitie lina de la model la pălărie. După ce adăugați o mască la stratul de model, faceți o tranziție lină cu o perie moale alb cu opacitate 60%.

Vezi rezultatul:

5. Adăugarea unui logo

Un logo este o parte integrantă a fiecărui site web. Pentru a-l crea, ia perie moale, setați culoarea la #19535a și desenați un loc în colțul din stânga sus.

Apoi scrieți textul pentru logo.

Aplicați-i următoarele efecte:

Suprapunere gradient:

6. Navigare

Creați un buton pentru categoria de navigare selectată utilizând Instrumentul Marquee dreptunghiular (M). Umpleți zona selectată cu orice culoare și reduceți valoarea de umplere la 0%.

7. Slider de conținut

Creați o zonă de selecție de 580x295 pixeli.

Umpleți zona selectată cu orice nuanță gri.

Așezați imaginea deasupra și atașați-o la stratul inferior.

Trebuie să adăugați o umbră la glisor. După ce ați creat un nou strat, luați pensula (B) cu o dimensiune de 400px și apăsați tasta F5 pentru a deschide fereastra de setări perie. Vedeți imaginea de mai jos pentru toate setările.

Setați culoarea la negru și desenați o pată.

Pentru a înmuia marginile, utilizați filtrul Gaussian Blur.

Creați o selecție pentru jumătatea inferioară a umbrei și ștergeți-o.

Așezați umbra în partea de sus a glisorului.

Mai întâi, micșorați puțin umbra și apoi centrați-o folosind funcția Aliniere centre orizontale.

Duplicați umbra și plasați o copie în partea de jos a glisorului.

Folosind Instrumentul Marquee dreptunghiular (M) de pe glisor, creați două butoane și umpleți-le cu negru.

Pentru stratul de butoane, reduceți opacitatea la 50%.

Folosind forme standard Photoshop, adăugați săgeți la butoane.

Creați o dungă în partea de jos a glisorului și umpleți-o cu negru.

Pentru dungă, reduceți opacitatea la 50%.

Aici puteți adăuga o descriere pentru proiectul dvs.

8. Text de bun venit

În stânga glisorului, introduceți textul de întâmpinare.

9. Terminarea antetului

Terminăm lucrările la antet. Și, în final, folosește o perie pentru a adăuga o umbră ușor vizibilă.

Lăsați o distanță de 1 pixel între umbră și titlu.

Creați un nou strat sub stratul antet. Aplică-i un gradient.

10. Butoane pentru glisor

Este timpul să adăugați butoane pentru a schimba slide-urile.

Aplicați un stil de strat la primul buton Umbra interioara pentru a-l face activ.

11. Separator de conținut

Chiar sub butoanele cursorului, trageți o linie de culoare gri deschis #aaaaaa, cu o lățime de 1 px.

După ce adăugați o mască la linie, faceți o tranziție lină la margini folosind un gradient. Am creat o linie de demarcație.

12. Adăugarea de conținut

Acum să adăugăm zone pentru partea de conținut. Acestea vor fi împărțite în 3 coloane cu indentare de 25 px.

Așezați ghidaje verticale la ambele capete ale difuzoarelor.

Pentru fiecare coloană, adăugați un titlu și o pictogramă adecvată. Sub titluri, adăugați conținut.

Folosind instrumentul dreptunghi rotunjit, creați butonul Citiți Mai mult. Asigurați-vă că modul Shape este selectat în bara de opțiuni.

Aplicați stilurile Gradient Overlay și Stroke la buton.

Duplicați butonul Citiți mai mult (Ctrl + J) de încă două ori și plasați-le în fiecare coloană de sub conținut.

Ca și înainte, trebuie să creați o linie de despărțire, plasând-o sub butoane. Mai jos, plasați dreptunghiuri gri și aplicați-le stilul Stroke.

Pune o imagine pe fiecare dreptunghi.

Creați umbre ca înainte și plasați-le sub zonele imaginii.

Sub fiecare imagine, plasați un titlu, conținut, un buton Citiți mai multe și o linie de despărțire.

Plasați pictograma Twitter mai jos în prima coloană.

Apoi postați pe Twitter.

Desenați un alt buton Mai multe Tweets.

Aplicați stilurile Gradient Overlay și Stroke la acest buton:

Scrieți textul Mai multe Tweets pe el.

13. Creați un subsol

În partea de jos a aspectului site-ului, creați o zonă selectată și completați-o gri.

Aplicați un stil Color Overlay la subsol.

În cele din urmă, plasați navigarea și drepturile de autor pe subsol.

Aspectul site-ului este gata!

Photoshop este un program extrem de popular în rândul designerilor web, chiar și un standard pentru mulți. Și când vine vorba de aspectul site-ului web, în ​​cele mai multe cazuri înseamnă un fișier .PSD.

Înainte de a crea direct aspectul, trebuie să decideți asupra structurii site-ului, să vă gândiți la navigare și să vă imaginați unde vor fi amplasate blocurile și elementele.

În ce constă layout-ul?

Marea majoritate a paginilor web constau din:

• Partea superioară (antet), în care logo-ul, sloganul, meniu de navigatie etc.;
• blocul principal în care este plasat conținutul;
• bară laterală (bară laterală);
• partea de jos (subsol), care stochează de obicei informații de sprijin, informații despre drepturile de autor, Link-uri utile etc.

Cum se creează?

Vino și gândește-te la structură. N-ar strica să-l desenezi pe o bucată de hârtie sau chiar în Photoshop.

fi atent la schema de culori- tonurile trebuie combinate și să corespundă temei și direcției site-ului. Textul ar trebui să fie ușor de citit și paginile ar trebui să se încarce rapid. Nu exagera cu decorațiunile elemente interactiveși fonturi rafinate - comoditatea este mai importantă decât designul strălucitor, deoarece utilizatorii vizitează site-urile nu pentru a se uita la ele, ci cu un scop prestabilit, iar cu cât resursa dvs. o poate rezolva mai repede, cu atât este mai apreciată.

Decideți dacă designul dvs. va fi extensibil sau fix. Un șablon de dimensiune fixă ​​arată la fel pe toate ecranele, în timp ce un șablon „de cauciuc”, care își schimbă dimensiunile, se adaptează dispozitivului. Dacă designul este „cauciuc”, atunci trebuie să decideți ce va umple fundalul site-ului.

Cu toate acestea, am creat aspectul acestei resurse web în, care face parte din (recomand cu căldură) și exemplu complex poti gasi in ea.

Aici, pentru a nu fi distras de detalii și de utilizarea instrumentelor deja studiate, voi lua în considerare un exemplu condiționat de aspect, o diagramă șablon, dar folosind algoritmul descris puteți lucra cu ușurință cu propriul aspect.

1. Creați un document pentru aspectul viitor. Nu uitați de mărime.
2. Delimitați aspectul folosind ghidaje desenate din rigle.

Pentru a activa rigle, fie apăsați combinația de taste Ctrl+R, fie executați comanda View -> Rulers din meniul principal al programului.

Pentru a trage un ghid orizontal, faceți clic pe rigla de sus cu butonul mouse-ului și, fără a o elibera, mutați indicatorul în jos până când ghidajul se află în poziția dorită. A scoate afară linie verticala, faceți același lucru, doar mutați indicatorul în dreapta riglei situate în stânga.

Ca rezultat, șablonul dvs. ar trebui să fie delimitat.

1. Desenați aspectul. Adăugați elemente grafice, linii, butoane și alte elemente. Totul aici este individual și ne-am uitat la instrumentele de lucru pe tot parcursul.

1. Adăugați puțină culoare dacă nu ați făcut-o deja. Amintiți-vă de armonia și moliciunea tonurilor. Cunoașterea interacțiunii om-mașină și a școlii de artă va fi doar un plus.

Cum să tăiați

Aspectul finit trebuie tăiat „în bucăți” pentru a-și utiliza elementele în designul site-ului, o parte din care va fi implementată prin HTML, o parte prin CSS și o parte prin imaginile în care va fi tăiat aspectul. Amintiți-vă acest lucru atunci când doriți să lăsați mai multe imagini cu un fundal alb, textul paginii sau nume de linkuri - trebuie să lăsați doar ceea ce va fi preluat din fișierele grafice și nu va fi implementat prin alte mijloace.

Deci, aspectul este gata și deschis. O vom tăia.

1. Opriți straturile cu elemente inutile aspect - text, butoane, formulare etc. Pentru a ascunde un strat, faceți clic pe ochiul din linia acestuia.

1. Ajustați ghidajele trase de la rigle la elementele structurale ale șantierului. În principiu, aspectul poate fi tăiat de-a lungul lor, dar în acest caz este posibil să nu iasă exact așa cum este necesar, așa că vom folosi un alt instrument.
2. Selectați instrumentul Imbricare. Se află pe paletă din grupul Frame.

1. Pentru a tăia o bucată din design, mutați indicatorul unde doriți să începeți și acționați ca și cum ați selecta o zonă dreptunghiulară. Porțiunea tăiată va fi numerotată. Culoarea albastra numere înseamnă că fragmentul este activ și poate fi editat. Părțile pe care programul se așteaptă să le tăiați sunt numerotate fundal gri. Fragmentul tăiat este evidențiat și are markeri, datorită cărora dimensiunea și poziția acestuia pot fi ajustate.

1. Faceți următoarea tăietură în același mod și așa mai departe până când lucrarea este finalizată.
2. Când totul este gata, salvați rezultatul. Pentru a face acest lucru, rulați comanda File -> Export -> Save for Web ( versiune veche), verificați setările (selectați formatul, calitatea etc.), faceți clic pe Salvare și specificați folderul în care va fi creat catalogul fișierelor grafice.

1. În directorul selectat, apare un folder cu imagini fisiere grafice, fiecare conținând o parte a aspectului.
2. Acum puteți salva butoane, pictograme și alte elemente ascunse anterior.

Aspectul este creat, tăiat și complet gata.

Să aruncăm o privire mai atentă asupra sarcinii pe care trebuie să o rezolvăm - crearea unui aspect al site-ului web în Photoshop.

Aceasta este sarcina de a crea un aspect pentru un site de informații, unul de cauciuc, a cărui lățime se va schimba dinamic.

Pentru un site de cauciuc, trebuie întotdeauna să definiți valorile de lățime superioară și inferioară în care se va întinde.

Valoarea minimă este astfel încât, în timpul amenajării, elementele individuale să nu se strecoare unele pe altele, distrugând structura site-ului, iar valoarea maximă este astfel încât site-ul să nu devină excesiv de larg. În acest caz, textul devine de asemenea ilizibil din cauza rândurilor prea lungi.

Se poate avea în vedere că, în timpul amenajării ulterioare, site-ul ar trebui să fie cauciucat în intervalul, de exemplu, de la 1200 la 1400px (astfel încât blocurile și coloanele de text să fie elastice).

De ce veți avea nevoie pentru a finaliza această lecție?

• Photoshop - editor grafică raster, care este de obicei folosit la crearea machetelor.
• Seturi de pictograme. Îl poți găsi online un numar mare de seturi gratuite icoane
• Câteva imagini mici pentru a completa conținutul.
• Generator de prostii de la Yandex (referats.yandex.ru). Vom avea nevoie de el pentru a ne umple aspectul cu text (ca un „pește”).
• Fonturi. Exemplul folosește un font non-standard - Arsenal. Este disponibil pentru descărcare pe site-ul web fontsquirrel cu multe alte fonturi chirilice.

Asadar, haideti sa începem.

Să creăm document nou, transparent, dimensiune 1400 x 2000 (Apăsați ctrl+N și completați câmpurile din fereastra care se deschide).

desen nou

Deschideți un panou cu straturi corespunzătoare documentului creat. Redenumiți singurul strat existent în fundal(făcând dublu clic pe numele stratului).

Pe bara de instrumente, selectați culoarea prim-plan violet, apăsați tastele shift+F5și umpleți fundalul viitorului aspect cu această culoare.

Creăm o structură de foldere corespunzătoare părților aspectului. Ordinea vă va permite să navigați mai bine și să nu vă confundați în straturi. Trebuie să creați următoarele foldere - antet, meniu, conținut, subsol. (Apăsați combinația ctrl+fși indicați numele folderului corespunzător).

Toate proces ulterior Crearea unui aspect poate fi împărțită în mai multe etape.

Marcarea aspectului cu ghiduri

Ghizii sunt foarte instrument la îndemână, care vă permite să marcați dimensiunile elementelor și indentărilor individuale cu o precizie de un pixel, drept urmare aspectul dvs. va avea un aspect îngrijit.

Ghidurile sunt linii colorate, verticale și orizontale, plasate la diviziunea corespunzătoare a riglei (de exemplu, un ghidaj orizontal de 100 px marchează distanța de 100 px pe o riglă verticală etc.).

Sunt două moduri rapide creați ghiduri. Mai faimos este tragerea de pe riglă, dar mai convenabil după părerea mea este să introduceți poziția exactă a ghidajelor de la tastatură folosind caseta de dialog.

În acest scop folosesc combinația de taste rapide ctrl+shift+;(tastele rapide trebuie configurate)

Creați ghidaje orizontale de 140px, 180px, 200px, 574px, 900px, 1450px, 1510px, 1610px și ghidaje verticale de 100px, 110px, 130px, 1270px, 1290px, 130px.

Aspectul va arăta ca în imagine. Acestea sunt liniile care delimitează blocurile principale.

Desenarea blocurilor principale

Accesați folderul corespunzător antetului site-ului. Alegeți culoarea principală #3e0b1b.

Desenați un dreptunghi de 140 px înălțime, până la primul ghidaj orizontal, asigurându-vă că tipul de desen este sub formă de strat în parametrii instrumentului. Să numim acest strat Substratul.

suport de pălărie

Acum să trecem la folderul meniu. Meniul nostru va avea o lățime fixă ​​de 750 px, doar 5 articole de 150 px fiecare. În consecință, trebuie să desenați ghidaje verticale de 350px, 1100px, 500px, 650px, 800px, 950px.

Să alegem culoarea primului plan #7652a5 și să desenăm primul punct. Acum să facem dreptunghiul rezultat ușor înclinat. Clic ctrl+T. În parametrii de mai sus, selectați panta -10. Faceți clic pe caseta de selectare pentru a aplica modificările.

Tot ce rămâne este să aplicați stiluri articolului rezultat. Dacă faceți dublu clic pe strat Paragraf, se va deschide o fereastră cu setări de stil.Aplică stilul Inner Shadow cu setări ca în imagine.

Vom înmulți punctele rămase prin copierea primului. Veți obține așa ceva.

Să comutăm la folderul Conținut în straturi. Să schimbăm culoarea principală în #c3b4d8 . Desenați un dreptunghi corespunzător paginii.

Apoi mai sus desenăm un alt dreptunghi cu culoare, până la ghidajul orizontal de 574px. Să numim stratul Începutul paginiiși aplică-i un stil Umbră așa cum se arată mai jos.

Trecerea la instrument Liniaîn bara de instrumente pentru a desena un separator de pagină (de-a lungul ghidajului orizontal de 900px, între ghidajele verticale de 130px și 1270px). Culoare #fff.

Tot ce rămâne este să creezi un strat subsol. În dosar, desenați un dreptunghi de aceeași nuanță ca pălăria (#3e0b1b).

După toate manipulările, aspectul va arăta astfel.

Suntem atenți la detalii

Să începem cu numele și logo-ul. Adăugați ghidaje suplimentare: orizontal 70px și vertical 750px.

Selectați instrumentul Text, setați fontul Arsenal în parametri, dimensiune 30px. Faceți clic cu mouse-ul în centru, în locul unde va fi amplasat textul și scrieți numele (dosarul Header este selectat în straturi în acest moment). Acum facem fontul Verdana 24px și scriem sloganul mai jos (un alt site). Copiați designul logo-ului în Photoshop (pur și simplu trageți-l cu mouse-ul din folderul în care se află).

Aplicați un strat Shadow la straturile logo-ului, titlului și sloganului (vezi figura).

Copiați pictogramele în folderul meniu și plasați-le pe elemente.

Scriem numele articolelor în font Arsenal italic 24px, nuanță #fff.

Acum să completăm top parte pagini (dosar).

Să desenăm ghiduri unde vor fi amplasate indentările, numele și blocurile. Orizontală - 220px, 150px, 260px, 320px, 350px, 380px, 390px, 480px, 550px. Verticală -470px, 510px, 880px, 920px. Arata cam asa.

Copiați pictogramele care vor fi în fața textului.

Comutați la Text, scrieți numele cu fontul #444 Arsenal 24px. Desenați patru blocuri gri (nuanța #), apelați straturile bloc1, bloc2, bloc3, bloc4.

Să adăugăm încă 4 ghiduri care setează indentările pentru bara de căutare în blocul 1 - 270px, 310px (orizontal) și 130px, 450px (vertical).

Să-l desenăm ca dreptunghi #fff. Introduceți textul Găsiți...

Mai jos este un alt bloc. ÎN în acest caz,, va fi o listă scrisă cu font Verdana 18px.

În blocul din dreapta instrumentul Text desenați un dreptunghi (faceți clic pe butonul din stanga mouse-ul și trageți), ținând cont de indentările marcate de ghidaje 940px și 1270px pe verticală și 280px pe orizontală. Rezultatul va fi o zonă de text delimitată de linii punctate; este convenabil de utilizat pentru texte mari. Am pus acolo o listă de etichete.

Să marchem blocul central în care va fi amplasată lista ultimele intrări(poza+titlu+categorie). În acest scop, creați un folder în straturi numite Intrări recente.

Folosind ghidajele, marcați marginile din stânga, dreapta, sus, jos 20px. Titlul este în font Arsenal 24px, culoare #8f0814 și este la 10px distanță de categoria de articole, care este marcată cu linii. Distanța verticală dintre postările individuale cu imagini este de asemenea de 20px. Textul este de 120 px de la marginea stângă, plus o umplutură de 10 px.

Copiam imagini pre-preparate, arbitrare și le adaptăm la dimensiunile necesare.

Marcam partea de mijloc a paginii - în partea de sus va exista o indentație de 20 px pentru tot conținutul.

În dreapta este o listă de articole cu imagini. Distanța dintre imagini este de 30px, lățimea imaginilor este de 100px, spațiul până la textul din dreapta este de 10px. Fonturile sunt aceleași ca în blocul Postări recente.

În stânga este un articol cu ​​o imagine mare și rezumat, care va ocupa spațiul dintre ghidajele de 130 și 880 de pixeli. Imagine de la 130 px până la 430 px (lățime 300 px). Antet Arsenal 24px #444. Textul articolului este Verdana 14px, aceeași culoare. Titlul este indentat 10px. Din partea de jos până la separator există aceeași indentare de 10 px.

În partea de jos a paginii, sub separator, inserați bucata mare folosind text câmp de text. L-am luat din rezumatele Yandex pe care le-am menționat mai sus. Parametri font -Verdana, 14px, #444.

Adăugați un ghid în mijlocul subsolului (1560px orizontal), inserați și centrați textul cu dreptul de autor de-a lungul acestuia.

Așa arată aspectul final.

Asta e tot, mulțumesc pentru atenție.

Niranth; Traducere: Slutskaya Svetlana

Crearea de layout-uri web atractive și funcționale este o parte integrantă a vieții unui designer web. În această lecție Photoshop vom crea aspect profesional site de la zero. În timpul lecției veți învăța câteva trucuri utile atunci când creați un design.

Resurse pentru lecție:

1. Set de pictograme (wefunction.com)
   Set de pictograme alternativ
2. Pictograma Twitter (iconeden.com)
3. Font Bebas (dafont.com)

Pasul 1. Machetă

Înainte de a începe să creăm un aspect al site-ului web, trebuie să creăm un plan de schiță al aspectului viitor, care va arăta funcționalitatea și aspectul aproximativ al acestuia.

Pasul 2. Creați un document.

Vom crea un aspect al site-ului web cu o lățime de 960 de pixeli. Pentru a face acest lucru, creați un document nou cu o dimensiune de 1200x1500 pixeli. Rezolutie 72 pixeli.

Deoarece aspectul site-ului va avea o lățime de 960 de pixeli, trebuie să definim această zonă adăugând ghiduri. Selectați întregul document ( Ctrl+A).

Accesați meniul Selectare - Transformare selecție(Selectați > Transformați selecția). În bara de proprietăți din partea de sus a ecranului, setați lățimea la 960 de pixeli. Aceasta va fi zona de lucru a aspectului.

Setați ghidajele exact de-a lungul limitelor selecției.

Trebuie să creăm o marjă între marginile zonei de lucru de aspect și zona de conținut pe care o vom adăuga mai târziu. Cu documentul selectat activ, mergeți din nou la meniu Selecție - Transformă selecția(Selectați > Transformați selecția). Reduceți lățimea selecției la 920 de pixeli. Aceasta înseamnă că vor exista 20 de pixeli de umplutură pe fiecare parte a aspectului, pentru un total de 40 de pixeli.

Stabiliți linii directoare de-a lungul noii selecții:

Pasul 3. Creați antetul site-ului.

Să trecem la crearea antetului site-ului. Creați o selecție înaltă de 465 px în partea de sus a aspectului.

Completați selecția cu gri și apoi utilizați Stiluri de straturi pentru a aplica culori și degrade.

Adăugați la antet umplere cu gradient prin stilul stratului Suprapunere cu gradient(Suprapunere gradient). Creați un gradient de două culori.

Acum antetul va arăta astfel:

Acum trebuie să adăugați iluminare la antet. Creați un nou strat ( Ctrl + Alt + Shift + N)și selectați o perie moale cu o dimensiune de 600 de pixeli. Selectați culoarea #19535a și folosiți pensula pentru a face clic o dată pe centrul de sus al antetului.

Creați o selecție de 110 px în antet.

Apăsați tasta Șterge pentru a șterge partea selectată.

Întoarceți stratul de evidențiere pe verticală (Ctrl+T).

Trebuie să vă asigurați că punctul luminos de pe capac este exact în centru. Pentru a face acest lucru, faceți straturile cu antetul și evidențiați activ și selectați instrumentul In miscare(Instrumentul de mutare) (V). În bara de proprietăți din partea de sus a ecranului, faceți clic pe butonul Aliniați centrele orizontale.

Creați un nou strat (Shift + Ctrl + N)și desenați cu instrumentul Creion(Instrument creion) un punct, cu dimensiunea de 1 pixel. Pentru desen folosiți culoarea #01bfd2.

Să netezim marginile acestui strat folosind o mască de gradient. Selectați un instrument Gradient(Instrument Gradient) și creați un gradient așa cum se arată mai jos:

Aplicați un nou strat cu o mască și umpleți-l cu gradientul pe care tocmai l-ați creat.

Pasul 4. Creați un model

Acum să creăm un model simplu pe care îl vom adăuga la antet. Instrument Creion(Instrument creion) cu o dimensiune de 2 pixeli, desenați două puncte, așa cum se arată în figură. Opriți vizibilitatea stratului de fundal pentru un timp (faceți clic pe pictograma ochiului de lângă stratul de fundal) și creați un model (Editare - Definiți model)(Editare > Definire model):

Creați un nou strat (Shift + Ctrl + N)și plasați-l sub stratul de evidențiere. Selectați zona în care doriți să aplicați modelul și deschideți fereastra Completati(Umplere) (Shift + F5). Faceți clic pe OK.

După adăugarea texturii, antetul arată astfel:

Faceți o tranziție lină de la model la antet: adăugați o mască la stratul de model și utilizați o perie albă moale (#ffffff) cu opacitate 60% pentru a picta peste mască.

Rezultat:

Pasul 5. Adăugați un logo

Să trecem la adăugarea unui logo. Selectați o perie moale cu culoarea #19535a și pictați o pată.

Scrie textul:

Adăugați un stil de strat la stratul de logo Umbră(Umbra).

Pasul 6: Navigare

Adăugați text de navigare.

Desenați un buton de navigare folosind Instrumentul Marquee dreptunghiular. Completați selecția cu orice culoare și reduceți parametrul Fill la zero.

Adăugați un stil stratului de butoane Suprapunere cu gradient(Suprapunere gradient).

Pasul 7: Slider de conținut

Creați o selecție de 580x295 pixeli.

Completați selecția cu orice nuanță de gri.

Pune o imagine. Decupați-l cu stratul pe care l-ați creat mai devreme.

Acum să adăugăm un efect la glisor. Creați un nou strat (Shift + Ctrl + N), Selectați Perie(Brush Tool) cu un diametru de 400 pixeli. Deschideți paleta Pensule (F5) și setați parametrii afișați în captură de ecran:

Selectați culoarea neagră (#000000) și desenați un punct:

Aplicați un filtru pentru a înmuia marginile estompare gaussiană(Neclaritate Gaussiană).

Selectați jumătatea inferioară a umbrei și ștergeți (Șterge).

Plasați stratul de umbră deasupra glisorului:

Strângeți stratul de umbră de mânerul din mijloc (Ctrl + T), apoi centrați din nou stratul de umbră: selectați ambele straturi și faceți clic pe butonul din panoul de proprietăți Alinierea centrelor pe orizontală(Aliniați centrele orizontale).

Duplicați stratul de umbră (Ctrl + J)și plasați duplicatul pe marginea de jos a glisorului.

Desenați butoanele pe glisor folosind instrumentul Cort dreptunghiular(Instrumentul Marqee dreptunghiular ) . Umpleți butoanele cu negru (#000000).

Reduceți opacitatea stratului de buton la 50%.

Adăugați o formă de săgeată la butoanele glisante:

În partea de jos a glisorului, trageți o dungă și umpleți-o cu negru (#000000).

Reduceți opacitatea stratului de dungi la 50%.

Adăugați o descriere a proiectului dvs. în această bară:

Pasul 8. Adăugați un text de salut

Scrieți un text de salut:

Pasul 9. Finalizarea antetului site-ului

Aproape am terminat de lucrat la antetul site-ului. Adăugați o umbră subtilă folosind instrumentul Perie(Unealta perie).

Lăsați un spațiu de 1 pixel între umbră și titlu.

Creați un nou strat sub stratul antet (Shift + Ctrl + N)și aplică-i un gradient.

Pasul 10. Adăugați butoane pentru glisor

Desenați butoanele de schimbare a diapozitivelor.

Adăugați un stil de strat la un buton Umbra interioara(Umbra interioară) și apoi duplicați stratul de buton cantitatea necesară o singura data (Ctrl + J).

Pasul 12. Creați un separator de conținut

Utilizați instrumentul Creion și desenați o linie gri deschis (#aaaaaa) cu lățime de 1 pixel.

Adăugați o mască la stratul de linie și utilizați un gradient pentru a crea o tranziție lină la margini.

Pasul 13. Adăugați conținut

Este timpul să adăugați zone pentru conținut. Zona de conținut va fi împărțită în 3 coloane la distanță egală. Va exista o indentare de 25 de pixeli între fiecare coloană.