"Mreža je sustav pomoći, ali nije garancija, već jednostavno ima niz mogućih namjena, a svaki dizajner može pronaći rješenje koje odgovara njegovom ili njezinom individualnom stilu. Ali treba naučiti koristiti rešetku. Ona je umjetnost koja zahtijeva praksu."

— Joseph Müller-Brockmann

Zapravo, sama upotreba mreže povezana je s jednim od najstarijih i najosnovnijih načela dizajna: poravnanjem. Naš mozak želi sve pojednostaviti i učiniti razumljivijim. Zato se trudimo uvesti red u stvari koje se čine kaotičnim.

Naravno, što brže sve ispravno organiziramo, to će naš mozak brže moći prepoznati model i krenuti dalje. Mreže su tako uredne da ne zahtijevaju gotovo nikakvo tumačenje s naše strane. .

Razmotrite dva izgleda stranica prikazana na donjoj slici:

Iako su obje ove slike samo nekoliko pravokutnika, skup na vrhu čini se fundamentalno boljim od onog na dnu. Možemo odmah prepoznati obrazac, prihvatiti ga i krenuti dalje. Slika ispod uzrokuje vizualnu nelagodu jer nema jasan uzorak, poredak ili svrhu i izgleda kao nasumična zbirka oblika.

Valja napomenuti da neorganiziranost može biti i lijepa . U prirodi, na primjer, nema jasnih linija. Mrežice izgledaju hladno i tvrdo, ali zapamtite da su vrlo učinkovite i učinkovita metoda Ne dopustite da vam se mašta zaglavi u strukturama.

Pogledajte neke od najpopularnijih web stranica s vrhunskim dizajnom. Najvjerojatnije su koristili mrežicu. Mreže pomažu stabilizirati strukturu web-stranice i pružaju logičan predložak za dizajnera za izradu web-mjesta.

Korištenje mreže ne znači da će vaš dizajn biti dosadan. Dobar dizajner treba znati i moći primijeniti osnovna pravila korištenja mreže, ali to ne znači da ne može kršiti pravila.

Jednostavno rečeno, rešetka je podjela izgleda okomitim i/ili vodoravnim smjernicama uključujući margine, prostor i niz stupaca kako bi se pružio okvir za organiziranje sadržaja.

Mreže se tradicionalno koriste u tisku, ali se također često koriste u web dizajnu. Mrežica je jednostavno alat koji pomaže u dizajnu.

Kada počinjete s učenjem novih vještina u određenom području, prvo biste trebali slijediti preporuke. Učenje osnova osigurava da možete učinkovito primijeniti načela. Odnosno, prvo - teorija, a zatim - praksa.

Vrijedno je napomenuti da postoje dva načina za izradu rešetke predloška:

Metoda #1: Napravite vlastitu mrežu

Ima ih mnogo na razne načine kreirajte vlastitu mrežu, ali na kraju imate pravo odabrati opciju koja vam najviše odgovara.

Možete podijeliti prazan dokument matematički, stvarajući paran ili neparan broj stupaca za rad. Vaša mreža može biti složena ili jednostavna, možete koristiti pravila trećina ili zlatnog reza, što god želite.

Možda će vam sljedeći članci pomoći u tome:

• Kako napraviti mrežu (knjiga o Engleski jezik u .pdf formatu)

Evo nekoliko primjera mreža stvorenih u Photoshopu pomoću vodiča ( Pogled>Novi vodič):

Dodaci za izradu rešetki u Photoshopu

5. Grid System Generator - generator tako popularnih mreža kao što su 960.gs, Golden Grid, 1Kb Grid, Simple Grid / postavite potrebne parametre i kliknite “GENERATE”.

Mreže za fluidne/responzivne web stranice

Responzivni web dizajn danas je vrlo popularan. Njegovo glavno načelo je korištenje gumene mreže. Možete pročitati više o njima, ali ja bih želio malo proširiti ovu zbirku i dodati još nekoliko izvora.

1. - generator adaptivne mreže

2. Fluid grid calculator - usluga koja vam omogućuje izradu gumene mreže. Unesite parametre i dobit ćete gotov kod.

Modularna rešetka - e uzorak, uzorak, veličina ili omjer koji se ponavlja više puta. Sjetite se Escherovih slika. Gušteri, ribe, ptice u nekim djelima - to je modul. Svaki korisnik interneta vidi module u obliku pozadine.

Prva opcija za korištenje modula u dizajnu je ista kao na Internetu, odnosno pozadinska slika. U raznim oblicima, kako samostalno tako i u raznim kombinacijama. I iste ilustracije Eschera.

Druga opcija, dimenzionalna, vrlo je blizu treće, proporcionalne. Uglavnom, radi se o modularnim rešetkama za različite tipografske vrste tiskanih proizvoda.

Treća opcija je teže percipirana, ali upravo je ona u osnovi svega dizajna, arhitekture i ostalog što su stvorili priroda i čovjek. Čovjek je oduvijek oblikovao okoliš, intuitivno vođen osjećajem za mjeru, odnosno odnose.

Fidija (tvorac Akropole) i Iktin (Partenon) također su pokazali poznavanje zakona zlatnog reza. Suština ovog zakona je da se manji segment odnosi na veći, kao što se veći odnosi na cijelu dužinu. Ne sjećam se da li se ovaj zakon uči u školi, ali u umjetničkim školama, umjetničkim i arhitektonskim institutima to je kao “Oče naš...” U jednom broju ova vrijednost je izražena kao 1,618..... algebarski izgleda kao : b=b:( a+b). Radi se o tome da je takav omjer koristan za oko zbog mentalnih i fizičkih karakteristika strukture oka, radnih frekvencija mozga i mnogih, mnogih... (Slika 4.2.)

Drugi aktivni element u izgradnji nekih vizualno povoljnih odnosa je kvadrat. Konstruiranjem od njega lako se mogu dobiti omjeri 1:2, 2:3, 3:4.

Slika 4.2.

Slika 4.3.

Za web, modularna konstrukcija stranica može se organizirati pomoću tablica. Kao modul možete uzeti omjer slike (kod 800x600 to je 4:3) (Slika 4.3.). Standardna veličina lista papira A4 također je modul u crtanju i tipografiji

Ogroman broj tipografskih mreža temelji se na formatu lista papira koji je uzet kao osnova za publikaciju. Dizajn mreže ovisi o sadržaju i namjeri projekta, kao i individualnom stilu pojedinog umjetnika. A ako se dizajn radi pomoću računala, tada proces postaje prilično brz, posebno u fazi implementacije. Većina grafičkih (uglavnom izdavačkih) programa ima ugrađene opcije za stvaranje modularne mreže, a gotovo svi imaju prilično velik skup predložaka modularne mreže pod uobičajenim nazivima "Knjižica", "Kalendar" itd.

Na slici 4.4. predstavili modularna mreža prve trake. Malo se razlikuje od opće modularne mreže u gornjem bloku. Za jasniju percepciju logotipa, trebalo ga je istaknuti s vrlo značajnim pauzama. Ali nema problema s čitanjem i isticanjem.

Slika 4.4.

Slika 4.5. Modularna mreža preostalih pruga

Kao što možete vidjeti, osim jasno definiranog gornjeg bloka, traka ima jasno definiran "podrum" - tako novinari nazivaju donji dio trake. Pomaže podijeliti informacije na stranici u tematske zone. Modulacijski krug pojasa vidljiv je u dva dijagrama u boji.

Modularna mreža nije uvijek tako ujednačena i simetrična. Može biti potpuno apstraktan, s proizvoljnim rasporedom elemenata, ali u svakom slučaju njegova je zadaća osigurati kontinuitet u izlaganju gradiva.

Module koriste arhitekti, dizajneri namještaja i proizvođači automobila, a njihov je modul vezan uz proporcije i dimenzije ljudskog tijela.

Slika 4.6.

U web dizajnu modularna mreža se koristi mnogo češće nego što se na prvi pogled čini. Ako koristite

za oblikovanje elemenata na stranici - već koristite modularnu mrežu, pogotovo ako ovu mrežu ponovite ne na jednoj stranici, već na nekoliko. Ponekad mreža može biti skrivena, ponekad može biti eksplicitna (kada koristite drugu boju kao pozadinu ćelije, različitu od glavne pozadine) (Slika 4.6.)

Treba dodati da je bit grida ista, osim što web grid može sadržavati dinamičke (promjenjive) parametre ćelija. Stranica može biti različite visine, što ovisi o količini teksta i slika na njoj, te se automatski proširiti (ili ne proširiti) ovisno o korištenoj razlučivosti monitora.

Veličine zaslona

S

Širina platna

Trebali biste izbjegavati tvrdo kodirane veličine zaslona, ​​ali ako postavite tvrdo kodirane veličine zaslona, ​​morate imati na umu da je postavljanje tvrdih parametara određeno veličinom platna.

Razlučivost zaslona
Veličine platna

Veličina zaslona može se odrediti pomoću jednostavnih programa (vidi laboratorijske vježbe).

Pogledajmo primjer modularne mreže i specificiranja dimenzija, organiziranih pomoću tablice

U HTML-u cijeli sadržaj tablice možete označiti oznakom . Tada je zaglavlje tablice označeno oznakom a zaključak s oznakom .Sve tri oznake su završne oznake i imaju atribute. Ćelije zaglavlja tablice koriste oznaku .

Međutim, najlakši način da ne ovisite o veličini platna je koristiti relativne veličine, odnosno postaviti veličine u %.

Izuzetno koristan članak o pravilima za izradu izgleda časopisa! Toplo preporučam čitanje.

Prije nego što govorimo o modularnoj mreži, shvatit ćemo što je modul.

Modul je višestruko ponavljajuća slika, veličina ili proporcija. – to je struktura (okvir, predložak) rasporeda grafičkih elemenata na stranicama. Osnova modularne rešetke je "modul", drugim riječima, glavni korak rešetke, koji je vizualno određen širinom i visinom ćelije (modularne jedinice). Ćelije su izgrađene pomoću okomitih stupaca i vodoravnih linija.

Velika većina tipografskih mreža temelji se na formatu lista papira koji je uzet kao osnova za publikaciju. Kao što razumijete, stupci i osnovna mreža stranica izrađuju se pomoću automatskih programskih naredbi. Mreža može biti vrlo raznolika, ovisno o namjeni publikacije i idejama dizajnera.

Mreža se izrađuje za cijeli namaz, a ne za svaku stranicu zasebno. To je učinjeno tako da se cijeli časopis percipira kao jedinstvena cjelina, a ne raspada se na desni i lijevi dio, a cijela publikacija ne izgleda kao vezivo različitih stranica. Obrnuta mreža može se sastojati od 2, 3, 4 itd. stupci jednake i nejednake širine.

Stupci jednake širine stvaraju se u prozoru za izradu dokumenta ili na ploči "Margine i stupci". Ako trebamo navesti 3 stupca, tada broj 3 upisujemo u odgovarajuće polje itd.

Ali što ako, prema našem planu, ne bi svi stupci trebali imati istu širinu? Na primjer, što ako su tekst i slike smješteni u 2 široka stupca, a informacije s objašnjenjem smještene su u bočni uski stupac?

U ovom slučaju, naša modularna mreža će biti izgrađena na temelju razno broj stupaca automatskog programa. Na primjer, ako postavimo 8 automatskih stupaca za stranicu, tada će 2 široka stupca koja smo planirali (za tekst i slike) zauzeti 3 automatska stupca, a uski bočni stupac bit će izgrađen na temelju 2 automatska stupca.

Osim raspodjele po stupcima, modularna mreža također koristi osnovna horizontalna ravnala. Uz njih su pričvršćeni redovi teksta i obrubi grafičkih elemenata za vizualno sređivanje i poravnavanje.

Naslovi može stati u jedan stupac ili se proširiti na nekoliko stupaca. Nije neuobičajeno da naslov bude jedini element cijele stranice. Sve ovisi o kreativnoj ideji i osobnim preferencijama dizajnera.

Na isti način, grafičke slike (fotografije ili ilustracije) mogu zauzimati jedan ili više stupaca ili mogu popuniti vijest. Prilično uobičajena tehnika je kada fotografija zauzima jedan dio rašira u cijelosti i lagano se proteže na drugi dio kako bi vizualno objedinila oba dijela.

-

Modularna mreža nije nužno izgrađena od okomitih linija. Ponekad dizajner odluči nagnuti rešetku ili joj čak dati originalni oblik. Ako želite ići dalje od uobičajenog, samo naprijed!
Samo pokušajte osigurati da se u potrazi za originalnošću vaš rad ne pretvori u Sizifov rad. Zamislite kako bi bilo postaviti 40-50 stranica s kosom ili kovrčavom mrežom...

-

Stoga, prije nego što postanete originalni, zapitajte se je li to doista potrebno i zašto? Ako je cijeli časopis izgrađen na nagnutoj, obrnutoj ili figuriranoj mreži, tada će takva originalnost najvjerojatnije iznenaditi čitatelja tek na prvih 5 stranica, a zatim će početi iritirati.

Zašto? Da, jer čitatelj, prije svega, želi mirno čitati i asimilirati zanimljiva informacija, i ne dajte se omesti nikakvim ekscesima dizajnerskog genija.

Ali ako se originalna oznaka pojavljuje samo u jednom određenom odjeljku časopisa, to neće biti samo zanimljivo, već i prikladno, jer će odjeljku dati moderan i prepoznatljiv izgled.

Sve što nas okružuje ima svoje proporcije. Još kao dijete, crtić "38 papiga" naučio nas je da se sve može podijeliti na dijelove koji su jednaki jedni drugima (dužina boa constrictor sastojala se od 38 papiga). Također svi znamo da je visina čovjeka jednaka sedam njegovih glava, centimetar se sastoji od deset milimetara, metar se sastoji od sto centimetara, i tako dalje. Dakle, papiga iz crtića, ljudska glava, milimetar i centimetar su moduli.

Iz svega ovoga možemo shvatiti da je modul konvencionalna jedinica, korak u ritmu mreže. I sama mreža je sustav proporcija.

Kako će nam ova modularna mreža pomoći? Prvo, to će ubrzati rad, jer nećemo morati trošiti puno vremena pokušavajući skladno rasporediti sve elemente. Drugo, uz pomoć mreže možemo razumjeti koju točku trebamo koristiti i koje bi veličine svaki blok trebao biti. Općenito, modularni grid je okvir koji uvelike olakšava izradu web stranice.

Pogledajmo što su mreže.

1. Najjednostavniji tip je blok mreža. Odnosno, ona pravi grube oznake, dijeleći područje na blokove.

Blok rešetka

3. Modularna mreža ima ne samo okomitu, već i horizontalnu podjelu. Dakle, ono što se dobije na sjecištima linija je modul.

4. Postoji i hijerarhijska mreža u kojoj su blokovi postavljeni intuitivno i ne slijede nikakve obrasce.

Dakle, kako stvoriti modularnu mrežu.

1. Prvo, moramo razumjeti koju funkciju će naše web mjesto imati, identificirati njegovu strukturu i sastav stranica. Zatim određujemo koje će stranice biti najvažnije i s njima počinjemo raditi. Za njih ćemo napraviti popis funkcionalnosti i sortirati ga po prioritetu.

Moramo opisati svaki blok funkcionalnosti i detaljizirati ga do najsitnijih detalja. Rezultat bi trebao biti popis u kojem su blokovi i njihovi elementi navedeni po razini. Tako sada imamo zagonetke izlivene iz kutije, a preostaje nam samo da ih složimo u cjelovitu sliku.

3. Konstrukciju mreže započinjemo određivanjem dimenzija radno područje. Zatim moramo napraviti mrežu fonta. Da biste to učinili, odaberite visinu retka koja bi trebala biti ista za cijeli izgled. U elementima koji imaju veličinu fonta koja se razlikuje od veličine fonta glavnog teksta, razmak mora biti višekratnik naše visine retka.

Tako dobivamo osnovu naše buduće mreže. Cijeli tekst će počivati ​​na ovom temelju.

4. Sada moramo odlučiti koliko će naš modul biti širok. Ovdje možemo krenuti od širine bilo kojeg trajnog elementa. Ako imate zadatak postaviti identične elemente po širini stranice, onda sve postaje još lakše, jer već znate njegove dimenzije.

Radi praktičnosti, moramo odrediti koja će biti udaljenost između modula. Mora biti jednaka barem jednoj visini retka iz prethodnog odlomka.

Postoji jedno upozorenje - morate odabrati prave veličine modula, jer ako su prevelike, fleksibilnost mreže će nestati, a ako su male, mreža će se jednostavno izgubiti.

5. Horizontalnu podjelu vrlo je jednostavno izvesti. Njegova visina mora biti višekratnik visine naše linije. A koliko linija ćete umetnuti u jednu podjelu ovisi o vašoj skici.

Nedavno, radeći na drugoj lekciji za kolegij “Grafički dizajn. Osnove” (zakazano za početak siječnja), shvatio sam da se tema korištenja i izgradnje modularnih mreža rijetko obrađuje.

Ima dosta informacija o tome što je modularni grid i za što je potreban, ali vrlo malo o tome kako ga izgraditi i koja pravila slijediti. Stoga sam odlučio da će današnji post imati praktičan fokus i pokušati što jasnije pokriti ovu temu.

Dakle, modularna mreža je raspored za vaš rad, način da sistematizirate i poravnate elemente. To je okosnica kompozicijskog rješenja i služi kao sredstvo organiziranja ne samo komponente posao, ali i slobodan prostor.

Mreža nam može pomoći u rješavanju problema i biti dio rješenja. Najupečatljiviji primjer bio bi Windows sučelje telefon:

Za one kojima je potreban detaljniji teorijski dio pitanja, postoji mogućnost korištenja pretraživanja ili pretplate na tečaj i primanja odgovarajućeg pisma, gdje je to dovoljno detaljno opisano, a mi prelazimo izravno na praksu.

Prvo moramo odlučiti zašto nam je potrebna modularna mreža. Izrađujemo li web stranicu, ili dizajn časopisa, ili naslovnicu knjige, ili nešto treće? Ovisno o vrsti aktivnosti, treba identificirati glavne strukturne elemente. Često je veličina modula određena jednim od ovih elemenata, na primjer logotipom, položajem izbornika na stranici itd. U rasporedu minimalna veličina određena veličinom koja je čitljiva u određenoj situaciji.

Radi jasnoće, dat ću primjer modularne mreže tiskanog časopisa. Ako izlažemo časopis, tada strukturni elementi mogu biti naslov, podnaslov, tekst i ilustracije. Obično ih ima u časopisima različiti tipovičlanci u kojima se uloga tekstualnog dijela može promijeniti. U takvim slučajevima, kako bih mrežu učinio fleksibilnijom, koristim 5-7 modula (vodoravno):

Kombiniranje modula može se obaviti u gotovo bilo kojem formatu koji vam odgovara:

Zapravo, što je mrežni modul manji, to će biti fleksibilniji bez gubitka proporcionalnosti. Ali mnogi smatraju da je nezgodno raditi s rešetkama ako veličina njihovog modula teži veličini udaljenosti između modula. Takva mreža zasljepljuje oči i lako se zbuniti, posebno za početnike:

Postoji mnogo opcija za izradu modularne rešetke, ovdje ste ograničeni samo željama kupca i vašom maštom. Ne zaboravite da modularne rešetke ne moraju biti okomite, mogu se graditi i dijagonalno, pod određenim kutom nagiba itd.

U slučaju web stranica, smatra se da je optimalan broj stupaca 12, 16 i 24, što je zbog osobitosti izgleda web stranice i korištenja mogućnosti okvira. Smatram da je minimalna visina modula za web 20px, što je zbog optimalne veličine fonta (12-14pt) i njegove čitljivosti.

Sada je vrijeme da razgovaramo o tehničkoj strani problema.

Stvaranje modularne mreže u

• Prvi i najlakši način je omogućiti samu mrežu grafički urednik(Ctrl+’) i vodeći se njime postavite vodilice. Trajat će dugo i s velikom vjerojatnošću pogrešaka.
• Instalirajte posebne dodatke za Photoshop ( GuideGuide , Modularni rešetkasti uzorak , GridMaker 2).
• Preuzmite gotov predložak s jednog od besplatnih generatora mreža, kao što su 960.gs, Golden Grid, 1Kb Grid, Simple Grid. Postavite željene parametre i kliknite na “GENERATE”.

Zapravo, postoji prilično velik broj usluga za stvaranje mreža, uključujući i "gumene" stranice. Pretragom se mogu pronaći vrlo jednostavno, tako da nema smisla navoditi ih sve u članku. Takve usluge su odlični pomagači za početnike.

Stvaranje modularne mreže u

Za razliku od Photoshopa, InDesign ima vlastite alate za izradu modularne mreže. Na jelovniku Raspored trebate odabrati stavku Stvorite vodiče i u dijaloški okvir unesite potrebne parametre:

Ovaj alat ima prilično fleksibilne postavke, tako da stvaranje željene strukture neće biti teško. Stvaranje mreže najbolje je učiniti pomoću Glavna stranica, kako ne biste ponavljali postupak za svaku stranicu.

Stvaranje modularne mreže u

• Prva metoda (slično Photoshopu) je da uključite grid samog grafičkog uređivača i vodeći se njime postavite vodilice. Također je moguće napraviti bilo koji oblik vodiča, što će pomoći u organiziranju nagnute mreže.
• preuzimanje datoteka gotove šablone rešetke Gdje - pretraga će vam reći. Možete ih pronaći puno na internetu.

Nadam se da vam je tema modularnih rešetki postala bliža i jasnija. Obavezno vježbajte njihovu izgradnju. Savršeno dobro razumijem da je ovo vrlo zamorna aktivnost, ali isplati se. Izrada rešetki razvija vaš osjećaj za mjeru i omogućuje vam da bolje vidite sve netočnosti poravnanja u budućnosti.

Svijet besplatnih programa i korisnih savjeta
2024 whatsappss.ru

titula
Jelovnik	modul1		Modul 2	modul3	modul4
	zaključak