Paano Gumawa Ng Mga Modular Grid

Talaan ng mga Nilalaman:

Paano Gumawa Ng Mga Modular Grid
Paano Gumawa Ng Mga Modular Grid

Video: Paano Gumawa Ng Mga Modular Grid

Video: Paano Gumawa Ng Mga Modular Grid
Video: Learning Layout 5, Modular and Baseline Grid 2024, Mayo
Anonim

Maginhawa upang magamit ang mga modular grid kapag bumubuo ng isang disenyo o paglikha ng isang kumplikadong imahe. Nagsisilbi silang batayan ng komposisyon, hinahati ang sheet sa isang tinukoy na bilang ng mga patayo at pahalang na mga hakbang na may pareho o magkakaibang distansya.

Paano gumawa ng modular grids
Paano gumawa ng modular grids

Kailangan

Abode Photoshop program

Panuto

Hakbang 1

Ang lahat ng mga modernong graphic editor at programa sa disenyo ng web ay may built-in na modular grids. Kung nagtatrabaho ka sa Adobe Photoshop, i-on ang display ng grid para sa madaling pag-aayos ng mga object ng imahe at ang kanilang eksaktong pagkakalagay sa sheet. Upang magawa ito, pumunta sa I-edit ang item sa menu at ilipat ang mouse sa caption ng Kagustuhan. Sa lilitaw na menu, piliin ang item ng Mga Gabay, Grid & Slice (depende sa bersyon ng programa, ang item na ito ay maaaring may iba't ibang mga pangalan, piliin ang salitang Grid).

Hakbang 2

Sa bubukas na window ng mga setting, itakda ang mga parameter ng modular grid. Sa lugar ng Grid, piliin ang kulay ng mga linya na bumubuo sa mga item ng grid at ang spacing ng linya. I-click ang "OK", at suriin kung paano makakaapekto ang hitsura ng mga pagbabago sa hitsura ng imahe. Sa kapaligiran ng pag-unlad ng web ng Adobe DreamWeaver, ang grid ay kasama sa default sa layout ng pahina na iyong binuo.

Hakbang 3

Maaari kang magdagdag ng iba't ibang mga talahanayan (grid item) na may anumang hanay ng mga hilera at haligi gamit ang Ipasok ang item ng Talahanayan, pati na rin ang pagsingit ng mga bagong talahanayan sa mga cell, sa gayon paglikha ng isang kumplikadong network para sa mga elemento ng pagbuo ng pahina.

Hakbang 4

Maaari kang lumikha ng isang modular grid nang manu-mano gamit ang mga estilo ng CSS. Upang magawa ito, gamitin ang mga tool na #grid, Gridmaker, CSS Grid Builder, 1 KB CSS Grid, Gridr Buildrrr at iba pang mga module. Halimbawa, ang sumusunod na code snippet ay lumilikha ng isang grid ng apat na mga module ng isang naibigay na lapad:.page-layout {margin-right: -5px; }.layout-box {float: left; margin: 0 5px 5px 0; }.lb-1 {lapad: 779px; } / * 100% * /. Lb-2 {lapad: 583px; } / * 75% * /. Lb-3 {lapad: 387px; } / * 50% * /. Lb-4 {lapad: 191px; } / * 25% * /

Hakbang 5

Ang pagkakaroon ng isang modular grid ay ginagawang mas madali para sa parehong mga taga-disenyo ng baguhan at mga developer ng web, at may karanasan na mga masters sa larangan na ito. Ang mga proyektong nilikha batay sa isang modular grid ay madaling mai-edit at mailipat, na kung saan ay maginhawa para sa malalaking dami ng trabaho. Maaari mo ring ihinto ang trabaho sa anumang oras at magpatuloy sa paggamit ng nai-save na file.

Inirerekumendang: