Share
Urmați-mă pe măsură ce trece prin procesul de construire a unui portofoliu curat și modern de portofoliu de fotografie. Vom acoperi câteva terhniques de bază ale Photoshop-ului, inclusiv modul de lucru cu rețelele, transparența, designul icoanelor și alte subiecte interesante.
Vom proiecta șablonul nostru ca un arhitect care construiește o casă; de la pamant in sus. Fundația temei noastre este baza, așa că să pregătim tot ce avem nevoie pentru ea. Începeți prin a crea un nou document dimensiune 1420x850px ca în ecranul de mai jos.
Puteți să completați spațiul gol cu o fotografie de alegere sau cea pe care o veți găsi în descărcarea sursei (găsită inițial pe wallon.ru).
Pentru ca imaginea de fundal să nu atragă prea multă atenție de la restul interfeței, o vom observa cu un efect de model slab. Creați un document nou format 3x3px, selectați instrumentul creion (sau apăsați doar B) și desenați două linii paralele:
Acum trebuie să salvați acest model în arhiva noastră, accesând Edit> Define Pattern ... După ce ați făcut acest lucru, reveniți la documentul principal și aplicați modelul peste imagine. Veți găsi disponibil între celelalte modele din cadrul Layer> Layer Style> Overlay Pattern ...
Alegeți modelul pe care l-am creat mai devreme și setați opacitatea la 20%. Trebuie să păstrăm fișierul .psd organizat de la început, astfel încât să creați un nou dosar în secțiunea "Straturi" și să punem fotografia înăuntru (în cazul în care nu vedeți panoul Straturi, accesați fereastra> Straturi)
Multe teme de fotografie folosesc logouri minimaliste pentru a nu contrazice atmosfera fiecărei fotografii. Să designem acum un logo simplu, dar atrăgător. Am decis să sun pe șablon "Microfilm", așa că am scris "micro" folosind Aller Bold și "film" folosind Aller Regular, ambele la 40px.
Plasați textul undeva în documentul principal, acum să aplicăm anumite efecte logo-ului pentru ao face mai atractivă. Selectați stratul "micro" și mergeți la "Layer> Layer Style> Outer Glow".
După aplicarea unei străluciri exterioare, treceți la secțiunea Overlay Gradient și aplicați următorul efect.
Acum, să actualizăm stratul "film" și cu câteva efecte. Vom folosi același efect de strălucire exterioară așa cum este arătat mai sus, totuși, suprapunerea în gradient este diferită. Accesați Layer> Style Layer> Overlay Overlay.
Odată ce am terminat să creăm logo-ul, îl putem pune în sfârșit în locul lui. Unul dintre cele mai bune puncte pentru un logo este colțul din stânga sus al ecranului (utilizatorii sunt obișnuiți să-l găsească acolo, în special în țările de citire de la stânga la dreapta, de sus în jos). Am jucat cu el pentru o vreme până mi-a plăcut plasarea: creați două ghiduri noi utilizând View> New Guide ...
Creați un nou ghid orizontal folosind setările noi.
Utilizați ghidajele pentru orientarea și poziționarea siglei.
Nu uitați să creați un nou dosar și să plasați sigla în interiorul acestuia pentru a păstra totul curat.
Meniul nostru este un set de pătrate etichetate cu numere care se rostogolesc atunci când se ridică. Meniul va fi plasat pe verticală, astfel încât vom lăsa 260px în partea de sus și 260px în partea de jos a pânzei noastre, ceea ce ne oferă o zonă de lucru de 330px în înălțime. Să creați ghidurile necesare pentru a vă facilita procesul de proiectare Vizualizați> Ghid nou ...
Aș dori să vă dau un sfat suplimentar, în cazul în care nu știți cum să ascundeți temporar ghidajele apăsați CTRL + H. Deci, să creați prima noastră fila de meniu, selectați Instrumentul Rectangle (sau apăsați U) și în timp ce țineți butonul de schimbare creează un pătrat de 64x64 px. Pentru a vedea dimensiunea curentă a formei, bifați panoul de informații (Fereastră> Informații). După crearea primului pătrat, plasați-l în colțul ghidului pe care l-am creat mai devreme.
Selectați caseta dvs. pătrat și reduceți opacitatea până la 78%.
Folosind fontul Calibri (sau ceva silmilar), tastați "1" și setați dimensiunea la 29px. Modificați culoarea la # d0d0d0 și puneți-o în mijlocul filei din meniul pătrate. Păstrați șablonul organizat prin crearea unui folder specific pentru meniu.
Țineți ALT + SHIFT și glisați caseta de meniu în jos, lăsați o distanță de 1px. Urmați acest pas pentru a crea cinci file de meniu și a le schimba numele la numerele lor respective.
Partea finală a acestui pas este crearea unui efect de hover, selectați baza celei de-a doua (sau orice altă filă) și apăsați CTRL + T. Glisați caseta orizontal și extindeți lățimea la 270px. După mărirea formei, schimbați culoarea casetei la # e42b17.
Creați un nou ghid pentru a alinia corect textul meniului, utilizați setările de mai jos:
Selectați fontul Cicle (Gordita) și introduceți textul drop-down. Am scris "shortcodes" la 27px și am setat culoarea la # f4f4f4. Puneți textul în aceeași linie cu numărul și nu uitați să utilizați ghidajele ca linii de orientare.
Nu este nimic complicat în crearea fundalului acestui model, cu toate acestea, este foarte important să respectăm cu strictețe dimensiunea, deoarece acesta va reprezenta spațiul nostru de conținut. Nu avem nevoie de fundalul fotografiei pentru a ne distrage atenția din zona de conținut, de aceea o vom proiecta pentru a ocupa doar jumătate din pagină.
Luați instrumentul dreptunghi și creați o formă de dimensiune de 710x850 (jumătate din documentul nostru principal), umpleți-o cu negru și setați opacitatea la 78%.
În cele din urmă, suntem gata să începem călătoria pe pagina de conținut, a cărei structură depinde de modul în care ne aliniem conținutul. Acesta este motivul pentru care este foarte important pentru noi să creăm ghidurile necesare de la început, astfel încât să putem configura perfect conținutul nostru și să ne ușuram ochii cu farmecul simetriei. Să creăm ghizii folosind View> New Guide ...
Selectați instrumentul Elipse și creați un cerc de dimensiuni de 50x50 pixeli, poziționați-l la colțul ghidurilor noastre de conținut și aplicați câteva efecte de styling. Mai întâi setați opacitatea stratului la 85% și apoi treceți la Layer> Layer Style> Outer Glow.
Apoi treceți la secțiunea gradient și aplicați următorul efect:
Selectați Custom Shape Tool, alegeți o pictogramă care vă place, apoi în timp ce țineți apăsat butonul de deplasare aplicați-o în mijlocul cercului.
Să formalizăm forma personalizată cu un gradient simplu.
Afișați vizual un nou ghid în partea de jos a cercului pe care l-am creat mai devreme. Luând mijlocul cercului ca punct de orientare, introduceți un titlu aleatoriu. Actualizați setările de text; setați fontul Aller de 14px și mergeți la Layer> Layer Style> Outer Glow.
Apoi treceți la secțiunea Overlay Gradient și creați un nou efect.
Avem nevoie de trei coloane pentru postările din antetul nostru și, așa cum am spus mai devreme, este foarte important să acordăm atenție spațiului și să respectăm simetria. Am putea să facem niște ghiduri noi pentru a poziționa postările din antetul nostru după ce le-am terminat - urmați aceeași procedură ca și înainte Vizualizați> Ghid nou ...
Folosind fontul Sansation Normal cu dimensiunea de 14px, tastați un text aleatoriu. Când proiectez un șablon, vizitez de obicei un site web cu text fals. Introduceți conținutul în coloana "ghid" pe care am creat-o mai devreme.
Acum, să ne stilizăm textul prin aplicarea unui gradient personalizat, așa că mergeți la Layer> Layer Style> Gradient Overlay.
Selectați întreaga coloană și, în timp ce țineți apăsată tasta ALT + SHIFT, glisați-o în zona liberă pe care am creat-o din ghiduri, apoi repetați același pas pentru a crea coloana a treia.
Faceți câteva modificări generale textului și pictogramelor; nu uitați să structurați totul în dosare pentru a păstra documentul curat.
Partea finală a acestui pas este crearea unui separator care servește la împărțirea materialului nostru de conținut. Există multe moduri de ao crea, dar voi folosi una dintre cele mai simple metode. Selectați instrumentul de linie și desenați o formă dintr-o parte a marjei de ghidare în cealaltă.
Aplicați câteva efecte de styling liniei pentru ao face mai atractivă; accesați Layer> Layer Style> Drop Shadow.
Să mergem direct la subiect. Trebuie să creăm secțiunea de galerii și vom începe cu titlul. Creați o nouă orientare în același mod în care am făcut acest lucru înainte de Vizualizare> Ghid nou ...
Tastați "Showcase Galerie" sau orice alt titlu folosind fontul Aller și setați dimensiunea la 19px. Apoi plasați textul nostru în colțul ghidului pe care l-am creat mai devreme.
Vom folosi aceleași efecte de styling ca și în titlul conținutului nostru de top. Pentru aceasta, selectați efectele de text din caseta "Straturi" și trageți în "Prezentare Galerie".
Înainte de a continua să lucrați la secțiunea Galeria, să creați încă un ghid care va reprezenta marginea zonei galeriei.
Lăsați un spațiu mic sub titlul și tastați un text aleator utilizând Sansa (14px), dar nu uitați să nu treceți linia de graniță pe care am creat-o înapoi.
În același mod, am tras efectele titlului de conținut de top în titlul galeriei, trageți efectul de text de top în galeria.
Este momentul pentru cea mai importantă parte a secțiunii galeriei; crearea cadrelor de imagini. Există multe modalități eficiente de a proiecta acest lucru, dar acestea ar putea fi mai bine explicate într-un scenariu unde ați putea vedea fiecare parte a procesului. Acesta este motivul pentru care voi proiecta imaginile galeriei într-un mod mai primitiv.
Selectați Instrumentul rotunjit dreptunghi, setați raza la 10px și creați o dimensiune a dimensiunii de 327 x 145 pixeli.
Mergeți la Layer> Layer Style> Stroke și aplicați un grafic de 4 x color # b63f25, apoi poziționați imaginea între ghidaje.
Selectați din nou instrumentul rotund dreptunghi și creați o nouă formă de dimensiune 91x60px (rază 10px), după care aplicați un accident vascular cerebral de 2px.
Țineți ALT + SHIFT și trageți forma pe care am creat-o cu câteva momente în urmă, lăsați o distanță de 24px înainte de fiecare. Creați încă două cutii în acest fel și nu uitați să respectați linia de frontieră.
Înainte de a începe lucrul la secțiunea de știri, să creăm un separator vertical care va împărți aceste două secțiuni. Să începem prin crearea unui ghid Vizualizare> Ghid nou ...
Selectați Instrumentul Linie și creați o formă cu înălțimea de 325px, apoi plasați-o în poziția ghidului pe care l-am creat mai devreme.
Acum să stilizăm separatorul; accesați Layer> Layer Style> Drop Shadow.
În cele din urmă, putem continua cu crearea secțiunii de știri. Creați o nouă orientare, apoi selectați titlul "Galerie". În timp ce țineți ALT + SHIFT, trageți-l în colțul pe care l-am creat din ghiduri, după care îl redenumiți.
Selectați Instrumentul rotund dreptunghi și cu raza de 10px, creați o formă de 74x61px. Aplicați un curs de două pixeli și poziționați dreptunghiul nostru cu câțiva pixeli sub titlul principal.
Introduceți un text aleatoriu care constă din trei linii (nu treceți limitele liniei de frontieră) utilizând fontul Sansation cu dimensiunea de 12px și trageți efectele din textul galeriei.
Folosind același stil de text pe care l-am scris "scris de o persoană aleatorie la întâmplare", nu am folosit efecte originale, dar am aplicat niște suprapuneri de culoare simple.
Selectați stratul separator orizontal și duplicați-l, apoi redimensionați-l folosind CTRL + T la 292px și mutați-l sub postul de știri proaspăt creat.
Selectați-vă postarea împreună cu un separator și, în timp ce țineți ALT + SHIFT, trageți-le în jos pentru a crea încă două postări. Efectuați modificările necesare în text.
Luați din nou separatorul orizontal de sus și, în timp ce țineți apăsat ALT + SHIFT, glisați-l jos, sub secțiunea galerie și știri.
Bine ați venit la pasul final, puțin mai mult și am terminat cu șablonul de fotografie, așa că ajungeți direct la punct! Introduceți titlul zonei dvs. de citare utilizând același stil de text ca și în galerie și ultimele titluri de știri.
Să creăm o nouă orientare pentru ghilimele noastre.
Cu Arial, tastați simbolul marcajului de citare ("e;), setați mărimea la 204px, apoi aplicați următoarele efecte, poziționându-l de-a lungul orientării pe care am creat-o mai devreme.
Am introdus o cotație folosind fontul Aller Italic, mărimea de 18 pixeli și am aplicat același gradient ca în textul general din secțiunea galerie. Trageți efectele la fel cum am făcut de câteva ori înainte (nu uitați să respectați liniile de frontieră).
Partea finală a acestui pas este crearea unui buton "READ MORE". Selectați Instrumentul rotunjit dreptunghi și creați o formă de dimensiune de 182x36px cu raza de 10px, apoi aplicați un efect de gradient așa cum se arată mai jos.
Duplicați stratul și apoi extrageți-l cu un dreptunghi și aplicați același gradient pe care l-am folosit pentru ghilimele, apoi adăugați câteva mici detalii cum ar fi textul și săgeata.
Au fost efectuate! Vă mulțumim că ați verificat acest tutorial, sper că ați învățat ceva nou și că veți putea folosi unele dintre aceste tehnici în propriile proiecte. Dacă aveți nevoie de alte sfaturi, nu ezitați să lăsați comentarii sau întrebări și voi fi mai mult decât dispus să vă ajut.
Accentsconagua