Cum se construiește o rețea modulară în Photoshop, o limbă simplă despre crearea site-urilor web și a blogurilor

Grilă modulară este un bun "dispozitiv" suplimentar pentru alinierea și poziționarea elementelor plasate pe pagina web viitoare. Înainte de a lucra la aspectul paginii, întotdeauna fac o grilă modulară "personal" pentru fiecare proiect pe baza lățimii paginii viitoare.







Pe Internet, există multe servicii diferite pentru crearea de rețele modulare. Doar suficiente plug-in-uri pentru Photoshop, grație cărora puteți face astfel de rețele. Cu toate acestea, nu văd nici un sens în utilizarea acestora, deoarece această sarcină este rezolvată literal în două acțiuni.

Pentru a face acest lucru complet nu este dificil, dar disponibilitatea acestuia facilitează foarte mult lucrul la aspectul viitorului. Desigur, puteți utiliza grila standard a Photoshop la fel cum a fost atunci când a creat icoane pentru un blog. Dar acest lucru nu este întotdeauna convenabil, deoarece o astfel de rețea nu are decalaje între module ca module în sine, este un set de celule pătrate împărțite în părți egale.

Orientarea pe ea nu va fi foarte convenabilă, deoarece trebuie să numărați în mod constant distanța dintre elementele de proiectare și este puțin probabil să ajungeți la granițele celulelor rețelei.

Rețeaua modulară este lipsită de aceste neajunsuri și constă în module care sunt separate printr-un anumit pas unul față de celălalt, ceea ce face posibilă poziționarea elementelor în mod normal în timpul lucrului, fără a se gândi la distanța dintre ele.

Construirea unei rețele modulare în Photoshop

Și să începem să construim o rețea modulară. Mai întâi, creez un fișier în Photoshop egal cu lățimea părții viitoare a paginii cu conținut. În cazul meu, această lățime este de 1180 de pixeli, valoarea înălțimii în această etapă nu este importantă, deoarece o voi crește pe măsură ce lucrez pe pagină.

După crearea fișierului, trebuie să efectuați anumite calcule matematice. Am de gând să fac modulele pentru grilă egale cu 80 de pixeli, iar distanța dintre ele este egală cu 20 de pixeli, adăugând aceste valori, obținem 100 de pixeli. Împărțirea suplimentară, magistrala totală de 1180 de pixeli la 100 va primi numărul de module verticale de 12 bucăți.







Pentru a desena module puteți utiliza instrumentul Rectangle (1), setările pentru acest instrument sunt următoarele: ca umplere, voi selecta culoarea roșie (puteți selecta o culoare din panoul Swatches adăugat acolo atunci când alegeți culori pentru blog. ) ca mărimea figurii voi selecta valorile 80x80 pixeli (4).

Acum, voi desena o formă pe un nou strat (1), trebuie să aliniez acest strat cu cifra relativă la stratul de fundal spre stânga. Puteți face acest lucru utilizând instrumentele de aliniere a programului. În paleta de straturi, selectați ambele straturi de fundal, iar stratul cu dreptunghiul (2) cu instrumentul activ "Mutare" (3) utilizați butonul (4). Acum stratul cu dreptunghiul este aliniat de-a lungul marginii documentului.

Apoi, trebuie să faceți 11 duplicate ale stratului cu forma, pentru aceasta puteți folosi comanda rapidă de la tastatură (Ctrl + J). În paleta Straturi, selectați stratul cu dreptunghiul (1) și utilizați combinația (Ctrl + J) (2) de unsprezece ori.

În plus, este necesar să distribuiți în mod egal toate cifrele pe lățimea documentului. După ce faceți stratul superior cu forma activă (1) și stratul de fundal trebuie să îl deplasați la marginea dreaptă, este mai ușor să faceți acest lucru cu ajutorul tastei (2) din panoul parametrilor sculei al mișcării. Acum distribuesc uniform straturile cu dreptunghiuri. În panoul Straturi, cu tasta Shift apăsată, faceți clic pe ultimul și primul strat cu dreptunghiurile (3) și folosiți cheia (4) acum toate straturile sunt distribuite uniform pe document (5).

Am practic o plasă verticală cu module egale în lățime de 80 pixeli și decalaje între module de 20 de pixeli.

Sunt de acord, lucrul cu cincisprezece straturi ale grilei nu este în întregime convenabil, trebuie să lipiți toate straturile împreună, dar trebuie să păstrați capacitatea de a edita formele care alcătuiesc grila. Pentru a face acest lucru, fără a elimina selecția din straturile rețelei, faceți clic pe ele cu butonul drept al mouse-ului și selectați elementul (1). Ca rezultat, obțin un strat cu cincisprezece cifre (2).

Acum trebuie să dați acestui strat un "grid" de nume normal și să utilizați opțiunea "strat opacity" pentru a ușura formele astfel încât să puteți vedea straturile care se vor afla sub stratul cu grilă.

Lucrul pe grila este aproape completă. Rețeaua poate fi transformată de înălțimea documentului cu ajutorul unei combinații de taste (Ctrl + T).

În posturile viitoare, voi discuta cum să folosiți aceste evoluții în activitatea pe blog, iar subiectul următorului articol va fi problema optimizării imaginilor în format GIF. Apoi, vom lucra cu optimizarea formatelor jpg și png. Deoarece optimizarea corectă a imaginii este o parte integrantă a lucrului pe un site web sau pe un blog, optimizarea SEO corectă a imaginilor este un angajament al apariției lor în emiterea de motoare de căutare, atragând astfel noi vizitatori către resursele dvs.







Trimiteți-le prietenilor: