Share
Stabilirea unei rețele de referință pentru modelele bazate pe Photoshop este un prim pas indispensabil în orice proiect nou al unui site web. O grilă de bază va stabili spațierea consistentă între elementele paginii dvs., creând un ritm armonios pe toată pagina. În plus, în timpul fazei de dezvoltare, utilizarea unui cadru CSS cu o rețea de bază compatibilă poate face traducerea designului în cod mult mai ușor.
Într-un tutorial recent pe Webdesign Tuts +, Amir ne-a arătat cum să creăm un script flexibil pentru grilă pentru Photoshop, pentru a face lucrul de mângâiere în afara setării ghidurilor pentru aspectul dvs. Într-un mod similar, vom folosi o extensie Photoshop care va face toate ridicările grele pentru noi - o opțiune excelentă, mai ales dacă crearea propriului dvs. script personalizat este puțin prea ambițios pentru nevoile dvs..
Vă voi conduce prin fiecare pas necesar pentru a stabili o grilă de referință orizontală și verticală în Photoshop care este flexibilă, personalizabilă și moartă ușor de completat în mai puțin de zece minute.
În tutorialul de astăzi, voi folosi o extensie gratuită de la Cameron McEfee numită - în mod corespunzător - GuideGuide. Mergeți la http://www.guideguide.me pentru a descărca pluginul.
Selectați versiunea care se potrivește cu Photoshop (CS4 +) și salvați-o într-o locație adecvată de pe hard disk.
Notă: Utilizatorii OSX cu Photoshop CS5 vor trebui să instaleze pachetul Adobe Extension Manager.
Asigurați-vă că Photoshop-ul este închis, deschideți Adobe Extension Manager.
Dând clic pe linkul "Instalare" din meniul de sus, navigați la extensia extras GuideGuide și faceți clic pe "Deschidere". După acceptarea termenilor și condițiilor, GuideGuide va fi gata să fie accesat data viitoare când deschideți Photoshop.
Activați Photoshop și, din meniul fișierului 'Window', selectați 'Extensions → GuideGuide'.
Extensia GuideGuide va apărea acum în spațiul de lucru. Nu vă faceți griji prea multe despre câmpul de intrare încă, vom fi săpat în extensie în scurt timp.
Vom păstra lucrurile foarte simplu astăzi și vom replica grila de 960px utilizată de sistemul 960 Grid (deși ești binevenit să abordi grila folosind măsurătorile pe care le găsești mai ușor). Dacă ne îndreptăm spre site, grila pe care o vom replica este prezentată în limba engleză, pe pagina principală:
Pentru a reformula acest lucru, ceea ce vom crea astăzi este o pânză largă de 960 pixeli, cu 12 coloane egale și cu dimensiuni egale. Cu o margine de 10px pe fiecare parte a pânzei, vom rămâne cu un jgheab de 20px între fiecare coloană.
Înainte de a continua, știu ce ați putea spune: "De ce nu descărcați doar șablonul Photoshop de pe site?". Ce vă voi arăta cum să creați astăzi este complet personalizabil pentru orice proiect și orice cadru CSS, indiferent de cantitatea de coloane, lățimea panzei sau jgheaburi. Folosim doar un exemplu simplu pentru a demonstra tehnicile.
În Photoshop, selectați Fișier → Nou și creați un document nou cu o lățime de 960 pixeli lățime de 1050 de pixeli.
Asigurați-vă că indicatorii dvs. sunt afișați (Vedere → Ruler) trageți două ghidaje pe marginile panzei.
Deschiderea extensiei GuideGuide, veți observa un număr de câmpuri de intrare și elemente de meniu care ne vor permite să definim grilă de bază orizontală după cum urmează (puteți, de asemenea, treceți deasupra fiecărei pictograme pentru o descriere.)
Introduceți valorile după cum urmează și faceți clic pe butonul GuideGuide:
Odată ce ați trimis valorile, Photoshop va afișa automat toate ghidurile pentru rețea:
Notă: Folosind GhidGuide fără o selecție, vor fi făcute automat ghidaje pe toată pânza. Dacă doriți doar ghiduri pe o porțiune a documentului (de exemplu, o bară de navigare), creați o selecție cu instrumentul Marquee (M) înainte de a utiliza extensia.
În prezent, avem o grilă orizontală de referință perfect utilizabilă. Pentru a face lucrurile mai ușoare pentru noi înșine, vom adăuga acum un ajutor vizual pentru a ne spune ce este o coloană și ce este un jgheab - ceva care poate fi dificil de diferențiat atunci când este mărite direct pe document.
Creați un nou strat (Ctrl + Shift + N) și desenați o selecție a lățimii și înălțimii primei coloane. Presare Ctrl + BkSpace, completați selecția cu # ff0084. De asemenea, sunteți binevenit să utilizați instrumentul de formă pentru acest lucru, dar asigurați-vă că pixelii sunt selectați cu precizie.
Apoi, creați 12 versiuni totale ale stratului apăsând Ctrl + J De 11 ori. Selectând cel mai înalt strat, glisați coloana în poziția a douăsprezecea coloană cu ajutorul instrumentului de mutare (V).
Apoi, selectați toate cele douăsprezece straturi (Ctrl + clic) și distribuiți coloanele selectând Distribuie centre orizontale pictograma de sub instrumentul Mutare (V) (alternativ, Strat → Aliniere → Centre orizontale)
În cele din urmă, curățați documentul selectând toate straturile coloanelor și îmbinându-le împreună (Ctrl + E). Redenumiți stratul "Orizontal Baseline" și formați opacitatea până la 10%.
Acum că am stabilit o linie de bază orizontală, este timpul să ne îndreptăm spre linia de bază verticală. Nu vom trece astăzi în teoria liniilor de bază verticale, dar dacă doriți să aflați mai multe, puteți citi despre setarea tipului de web la o grilă de bază.
Astăzi, vom stabili linia de bază verticală pe baza unei dimensiuni de caractere corporale de 14 pixeli. Pentru a stabili o înălțime de 1,5 linii și pentru a ne oferi o mulțime de flexibilitate, linia noastră de bază va fi de 7px (adică trei unități de bază egale cu 21 de pixeli).
Vă voi arăta două metode pentru a realiza acest lucru - nu ezitați să utilizați oricare dintre dvs. vă vorbește și fluxul dvs. de lucru!
Pentru a începe, vom folosi încă o dată Ghidul. Deschideți extensia, introduceți următoarea valoare și apăsați butonul GuideGuide:
Odată trimis, Photoshop va face toate ghidurile pentru linia noastră de bază verticală:
În acest moment, cititorul mai inteligent va fi dat seama că această metodă este posibilă numai pentru că am creat înălțimea documentului într-un multiplu perfect de 7px (1050px). Dacă nu am făcut acest pas inițial, GuideGuide ar face cât mai multe ghiduri de 7px posibil și să lase restul în partea de jos a documentului.
Și în acel pas simplu, am creat o linie de bază perfect funcțională. Singura problemă este că acest document este acum foarte ocupat. De asemenea, dacă aveți obiceiul de a utiliza ghiduri în desenele dvs., această metodă poate deveni rapid confuză, dezordonată și inutilizabilă.
Dacă această metodă nu vă lăudărește, puteți elimina ghidajele orizontale (Ctrl + Alt + Z) și să creați o linie de bază alternativă utilizând o rețea de pixeli.
Pentru metoda noastră alternativă, deschideți panoul de preferințe al rețelei Photoshop (Editare → Preferințe → Grile, ghidaje și felii). Introduceți următoarele valori pentru grila pixelilor:
Acum, revenind la documentul dvs., puteți activa și dezactiva vizibilitatea rețelei (Ctrl + '), unde fiecare linie orizontală a rețelei vă stabilește linia de bază verticală - după cum puteți vedea aici cu un zoom de 600% aplicat.
Lucrul cel mai bun pe această metodă este că am separat liniile de bază orizontale și verticale, permițându-vă să vă comutați cu ușurință vizibilitatea lor, în funcție de ce parte a proiectului pe care lucrați.
Indiferent de metoda pe care o preferi (ghiduri sau straturi de grilă), pasul final este de a crea un ajutor vizual pentru linia de bază verticală în același mod pe care l-am făcut pentru linia de bază orizontală (dar vom folosi o altă metodă).
Creați un nou document 1px x 7px cu fundal transparent:
Utilizând instrumentul Marquee (M), setați stilul la Marime fixa, și dimensiunile la 1px x 1px. Creați o selecție în partea de jos a documentului (veți dori să faceți zoom în măsura în care puteți merge aici (Z)) și completați-l cu # 00ff12 (Ctrl + Bkspace).
Apoi, definiți acest document ca model (Editare → Definire model). Denumiți-o '7px Vertical Baseline'.
Întoarceți-vă la documentul principal. Creați un nou strat (Ctrl + Shift + N), selectați întreaga pânză (Ctrl + A) și apăsați Ctrl + Bkspace pentru a completa selecția. Din meniurile derulante, selectați "Model" pentru tipul de umplere și "Linia de bază" 7px nou creată pentru model.
Redenumiți stratul la "Baseline Baseline" și formați opacitatea până la aproximativ 30%.
Deși elementele nu se vor acoperi niciunuia dintre ajutoarele vizuale, indiferent de metoda pe care ați utilizat-o pentru linia de bază verticală (ghiduri sau straturi de rețea) în etapele anterioare, stratul vizual nou nou creat va fi perfect aliniat la linia de bază - întregul design.
Și cu asta, ați creat o rețea perfectă de pixeli, cu straturi vizuale la îndemână pentru următorul proiect. Singurul lucru pe care trebuie sa-l faci este sa dai design-ului tau o camera de respiratie.
Deschideți dialogul Canvas Size (Imagine → Dimensiunea canvasului) și modificați lățimea la 1400 de pixeli.
Rezultatul final:
Dacă ați reușit să faceți asta, o treabă bună! Acum aveți toate tehnicile necesare pentru a vă crea propriile grile de bază personalizate în Photoshop.
Singurul sfat pe care l-aș oferi e că, deși GuideGuide face o treabă bună de a manevra toate matematica necesară, trebuie să lucreze în cadrul limitelor Photoshop-ului, și anume că ghidurile pot fi plasate doar pe un pixel plin. Dacă grila dvs. solicită măsurători sub pixeli, ghidajele vor fi redate cât mai aproape posibil, pozițiile lor fiind rotunjite până la cel mai apropiat pixel plin. Având în vedere acest lucru, o mică planificare de la început poate evita o mulțime de dureri de cap de un pixel mai târziu în proiect.
Ca o notă de despărțire, puteți folosi GhidGuide pentru mult mai mult decât linii de bază; experiment folosind-o pentru a stabili grilaje pentru tot felul de componente de proiectare de la rame de imagini la meniuri!
Vă mulțumim din nou și nu uitați să vă abonați și să lăsați un comentariu de mai jos - ne-ar plăcea să vă auzim gândurile!
Accentsconagua