"Griddet er et hjelpesystem, men det er ingen garanti, men har rett og slett en rekke bruksmuligheter, og hver designer kan finne en løsning som passer til hans eller hennes individuelle stil. Men man må lære seg å bruke gitteret. Det er en kunst som krever øvelse."

— Joseph Müller-Brockmann

Faktisk er selve bruken av et rutenett knyttet til et av de eldste og mest grunnleggende prinsippene for design: justering. Hjernen vår ønsker å forenkle alt og gjøre det mer forståelig. Det er derfor vi prøver å bringe orden på ting som virker kaotiske.

Naturligvis, jo raskere vi organiserer alt riktig, jo raskere vil hjernen vår være i stand til å identifisere modellen og gå videre. Rutene er så ryddige at de nesten ikke krever tolkning fra vår side. .

Vurder de to sideoppsettene vist i figuren nedenfor:

Selv om begge disse bildene bare er noen få rektangler, virker settet øverst fundamentalt bedre enn det nederst. Vi kan umiddelbart gjenkjenne mønsteret, akseptere det og gå videre. Bildet nedenfor forårsaker visuelt ubehag fordi det ikke har noe klart mønster, rekkefølge eller formål og ser ut som en tilfeldig samling av former.

Det skal bemerkes at uorganisering også kan være vakkert . I naturen er det for eksempel ingen klare linjer. Masker ser kalde og harde ut, men husk at de er veldig effektive og effektiv metode ikke la fantasien henge seg fast i strukturer.

Ta en titt på noen av de mest populære nettstedene med førsteklasses design. Mest sannsynlig brukte de en mesh. Rutenett hjelper til med å stabilisere strukturen til en nettside og gir en logisk mal for en designer å lage et nettsted.

Å bruke et rutenett betyr ikke at designet ditt vil ha et kjedelig design. En god designer bør kjenne til og kunne bruke de grunnleggende reglene for bruk av et rutenett, men det betyr ikke at han ikke kan bryte reglene.

Enkelt sagt er et rutenett delingen av en layout etter vertikale og/eller horisontale retningslinjer inkludert marginer, plass og et antall kolonner for å gi et rammeverk for organisering av innhold.

Grids brukes tradisjonelt i trykking, men brukes også ofte i webdesign. Nettingen er rett og slett et verktøy som hjelper i designet.

Når du begynner å lære nye ferdigheter på et bestemt område, bør du først følge anbefalingene. Å lære det grunnleggende sikrer at du kan bruke prinsippene effektivt. Det vil si først - teori, og deretter - praksis.

Det er verdt å merke seg at det er to måter å lage et malrutenett på:

Metode #1: Lag ditt eget rutenett

Det er mange på ulike måter lag ditt eget rutenett, men til slutt har du rett til å velge det alternativet som passer deg best.

Du kan dele et tomt dokument matematisk, lage et partall eller oddetall kolonner å jobbe med. Nettverket ditt kan være komplekst eller enkelt, du kan bruke tredjedelsreglene eller det gylne snitt, avhengig av hva du foretrekker.

Kanskje vil følgende artikler hjelpe deg med dette:

• Hvordan du lager et rutenett (bok på engelske språk i .pdf-format)

Her er noen eksempler på nettverk opprettet i Photoshop ved hjelp av guider ( Vis > Ny guide):

Plugins for å lage rutenett i Photoshop

5. Grid System Generator - generator av slike populære rutenett som 960.gs, Golden Grid, 1Kb Grid, Simple Grid / still inn nødvendige parametere og klikk "GENERATE".

Rutenett for flytende/responsive nettsider

Responsivt webdesign er veldig populært i dag. Hovedprinsippet er bruken av et gumminett. Du kan lese mer om dem, men jeg vil gjerne utvide denne samlingen litt og legge til noen flere ressurser.

1. - adaptiv mesh generator

2. Fluid grid kalkulator - en tjeneste som lar deg lage et gumminett. Skriv inn parameterne og få den ferdige koden.

Modulært rutenett - f.eks et mønster, mønster, størrelse eller proporsjon som gjentas flere ganger. Husk Eschers bilder. Øgler, fisk, fugler i noen verk - dette er modulen. Hver Internett-bruker ser moduler i form av bakgrunner.

Det første alternativet for å bruke moduler i design er det samme som på Internett, det vil si et bakgrunnsbilde. I en rekke former, både uavhengig og i ulike kombinasjoner. Og de samme illustrasjonene av Escher.

Det andre alternativet, dimensjonalt, er veldig nært det tredje, proporsjonalt. I utgangspunktet er dette modulære rutenett for ulike typografiske typer trykte produkter.

Det tredje alternativet er vanskeligere å oppfatte, men det er nettopp dette som ligger til grunn for all design, arkitektur og andre ting skapt av naturen og mennesket. Mennesket har alltid formet omgivelsene, intuitivt styrt av en følelse av proporsjoner, det vil si relasjoner.

Phidias (skaperen av Akropolis) og Ictinus (Parthenon) demonstrerte også kunnskap om loven om det gylne snitt. Essensen av denne loven er at det mindre segmentet er relatert til det større, ettersom det større er til hele lengden. Jeg husker ikke om denne loven er studert på skolen, men på kunstskoler, kunst- og arkitektinstitutter er det som "Fader vår..." I ett tall er denne verdien uttrykt som 1,618..... algebraisk ser det ut som en :b=b:(a+b). Poenget er at et slikt forhold er gunstig for øyet på grunn av de mentale og fysiske egenskapene til øyets struktur, operasjonsfrekvensene til hjernen og mange, mange...(Figur 4.2.)

Det andre aktive elementet i å bygge noen visuelt gunstige relasjoner er torget. Ved å konstruere fra den er det enkelt å oppnå forhold 1:2, 2:3, 3:4.

Figur 4.2.

Figur 4.3.

For nettet kan modulær sidekonstruksjon organiseres ved hjelp av tabeller. Som en modul kan du ta skjermens sideforhold (ved 800x600 er dette 4:3) (Figur 4.3.). Standardstørrelsen på et ark A4 er også en modul i tegning og typografi

Det overveldende antallet typografiske rutenett er basert på formatet til et papirark, tatt som grunnlag for publikasjonen. Rutenettdesignet avhenger av innholdet og intensjonen til prosjektet, samt den individuelle stilen til en bestemt kunstner. Og hvis designet gjøres ved hjelp av en datamaskin, blir prosessen ganske rask, spesielt på implementeringsstadiet. De fleste grafiske (hovedsakelig publisering) programmer har innebygde alternativer for å lage et modulært rutenett, og nesten alle av dem har et ganske stort sett med modulære rutenettmaler under de ganske vanlige navnene "Heftet", "Kalender", etc.

I figur 4.4. presentert modulært rutenett av den første stripen. Det skiller seg litt fra det generelle modulære rutenettet i den øvre blokken. For en klarere oppfatning av logoen måtte den fremheves med svært betydelige pauser. Men det er ingen problemer med å lese og fremheve det.

Figur 4.4.

Figur 4.5. Modulært rutenett av gjenværende striper

Som du kan se, i tillegg til en klart definert øvre blokk, har stripen en klart definert "kjeller" - dette er det avisfolk kaller den nedre delen av stripen. Det hjelper å dele informasjonen på siden inn i tematiske soner. Båndmodulasjonskretsen er synlig i de to fargediagrammene.

Modulnettet er ikke alltid så jevnt og symmetrisk. Det kan være helt abstrakt, med vilkårlig plassering av elementer, men dens oppgave er uansett å sikre kontinuitet i presentasjonen av materiale.

Moduler brukes av arkitekter, møbeldesignere og bilutviklere deres modul er knyttet til proporsjonene og dimensjonene til menneskekroppen.

Figur 4.6.

I webdesign brukes det modulære rutenettet mye oftere enn det kan virke ved første øyekast. Hvis du bruker

for å danne elementer på siden - du bruker allerede et modulært rutenett, spesielt hvis du gjentar dette rutenettet ikke på én side, men på flere. Noen ganger kan rutenettet skjules, noen ganger kan det være eksplisitt (når du bruker en annen farge som bakgrunn for cellen, forskjellig fra hovedbakgrunnen) (Figur 4.6.)

Det bør legges til at essensen av rutenettet er det samme, bortsett fra at nettgitteret kan inneholde dynamiske (utskiftbare) celleparametere. Siden kan være forskjellig i høyden, som avhenger av mengden tekst og bilder på den, og automatisk utvides (eller ikke utvides) avhengig av skjermoppløsningen som brukes.

Skjermstørrelser

MED

Lerrets bredde

Du bør unngå hardkodede skjermstørrelser, men hvis du angir hardkodede skjermstørrelser, må du huske på at innstilling av harde parametere bestemmes av lerretsstørrelsen.

Skjermoppløsning
Lerretsstørrelser

Skjermstørrelsen kan bestemmes ved hjelp av enkle programmer (se laboratoriepraksis).

La oss se på et eksempel på et modulært rutenett og spesifisere dimensjoner, organisert ved hjelp av en tabell

I HTML kan du merke hele innholdet i en tabell med en tag . Deretter indikeres tabelloverskriften med taggen og konklusjonen med taggen .Alle tre taggene er avsluttende tagger og har attributter. Tabelloverskriftsceller bruker taggen .

Den enkleste måten å ikke være avhengig av størrelsen på lerretet er imidlertid å bruke relative størrelser, det vil si å sette størrelsene i %.

En ekstremt nyttig artikkel om reglene for å lage et magasinoppsett! Jeg anbefaler på det sterkeste å lese den.

Før vi snakker om det modulære rutenettet, la oss forstå hva en modul er.

Modul er et multippel repeterende bilde, størrelse eller proporsjon. – dette er strukturen (rammeverk, mal) for arrangementet av grafiske elementer på sidene. Grunnlaget for et modulært rutenett er "modulen", med andre ord, hovednetttrinnet, som visuelt bestemmes av cellens bredde og høyde (modulær enhet). Celler bygges ved hjelp av vertikale kolonner og horisontale linjer.

De aller fleste typografiske rutenett er basert på formatet til et papirark, tatt som grunnlag for publikasjonen. Som du forstår, opprettes kolonnene og det grunnleggende sidenettet ved hjelp av automatiske programkommandoer. Rutenettet kan være svært mangfoldig, avhengig av formålet med publikasjonen og designerens ideer.

Rutenettet opprettes for hele oppslaget, ikke for hver side separat. Dette gjøres for at hele magasinoppslaget skal oppfattes som en helhet, og ikke brytes opp i høyre og venstre deler, og hele publikasjonen ser ikke ut som en perm av forskjellige sider. Reverseringsnettet kan bestå av 2, 3, 4 osv. lik og ulik bredde kolonner.

Kolonner med lik bredde opprettes i dokumentopprettingsvinduet eller i panelet "Marger og kolonner". Hvis vi trenger å spesifisere 3 kolonner, skriver vi inn tallet 3 i det tilsvarende feltet, etc.

Men hva om, etter planen vår, ikke alle søyler skal ha samme bredde? Hva om for eksempel tekst og bilder er plassert i 2 brede kolonner, og forklarende informasjon er plassert i en smal sidekolonne?

I dette tilfellet vil vårt modulære nett bygges på grunnlaget Diverse antall automatiske programkolonner. For eksempel, hvis vi setter 8 automatiske kolonner for en side, så vil de 2 brede kolonnene vi har planlagt (for tekst og bilder) ta opp 3 automatiske kolonner, og den smale sidekolonnen bygges på grunnlag av 2 automatiske kolonner.

I tillegg til fordeling etter kolonner, bruker det modulære rutenettet også grunnleggende horisontale linjaler. Tekstlinjer og kanter til grafiske elementer er festet til dem for visuell bestilling og justering.

Overskrifter kan passe i én søyle eller strekke seg over flere søyler. Det er ikke uvanlig at tittelen er det eneste elementet for hele siden. Alt avhenger av den kreative ideen og personlige preferanser til designeren.

På samme måte kan grafiske bilder (bilder eller illustrasjoner) oppta en eller flere spalter, eller de kan fylle et nyhetsoppslag. En ganske vanlig teknikk er når et fotografi opptar en del av spredningen helt og strekker seg litt ut på den andre delen for å visuelt forene begge delene.

-

Et modulært rutenett er ikke nødvendigvis bygget av vinkelrette linjer. Noen ganger bestemmer designeren seg for å vippe rutenettet eller til og med gi det en original form. Hvis du vil gå utover det vanlige, fortsett!
Bare prøv å sikre at arbeidet ditt i jakten på originalitet ikke blir til sisyfisk arbeid. Tenk deg hvordan det ville være å legge ut 40-50 sider med et skråstilt eller krøllet rutenett...

-

Derfor, før du blir original, spør deg selv om dette virkelig er nødvendig og hvorfor? Hvis hele magasinet er bygget på et skråstilt, omvendt eller krøllet rutenett, vil en slik originalitet mest sannsynlig ikke overraske leseren lenger enn i løpet av de første 5 sidene, og da vil den begynne å irritere.

Hvorfor? Ja, fordi leseren først og fremst ønsker å lese og assimilere seg rolig interessant informasjon, og ikke bli distrahert av utskeielser av designerens genialitet.

Men hvis original markering vises i bare en spesifikk del av magasinet, vil det ikke bare være interessant, men også passende, siden det vil gi delen et stilig og gjenkjennelig utseende.

Alt som omgir oss har sine egne proporsjoner. Selv som barn lærte tegneserien "38 papegøyer" oss at alt kan deles inn i deler som er lik hverandre (lengden på boa constrictor besto av 38 papegøyer). Vi vet også alle at en persons høyde er lik syv av hodet hans, en centimeter består av ti millimeter, en meter består av hundre centimeter, og så videre. Dermed er en tegneseriepapegøye, et menneskehode, en millimeter og en centimeter moduler.

Fra alt dette kan vi forstå at en modul er en konvensjonell enhet, et trinn i rutenettets rytme. Og selve rutenettet er et system av proporsjoner.

Hvordan vil dette modulære nettet hjelpe oss? For det første vil det fremskynde arbeidet, fordi vi ikke trenger å bruke mye tid på å prøve å ordne alle elementene harmonisk. For det andre kan vi ved hjelp av rutenettet forstå hvilket punkt vi må bruke og hvilken størrelse hver blokk skal ha. Generelt er et modulært rutenett et rammeverk som i stor grad letter byggingen av et nettsted.

La oss se på hva masker er.

1. Den enkleste typen er et blokknett. Det vil si at hun lager grove markeringer, og deler området inn i blokker.

Blokker rutenett

3. Modulnettet har ikke bare vertikal inndeling, men også horisontal inndeling. Dermed er det som oppnås ved skjæringspunktene mellom linjer modulen.

4. Det er også et hierarkisk rutenett, hvor blokkene er plassert intuitivt og ikke følger noen mønstre.

Så, hvordan lage et modulært rutenett.

1. Først må vi forstå hvilken funksjon nettstedet vårt må utføre, vi identifiserer strukturen og sammensetningen av sidene. Deretter bestemmer vi hvilke sider som vil være de viktigste, og arbeidet starter med dem. For dem vil vi lage en liste over funksjonalitet og sortere den etter prioritet.

Vi må beskrive hver blokk med funksjonalitet og detaljere den til minste detalj. Resultatet skal være en liste der blokkene og deres elementer er listet etter nivå. Dermed har vi nå puslespill tømt ut av esken, og alt vi trenger å gjøre er å sette dem sammen til et komplett bilde.

3. Vi begynner å konstruere nettet ved å bestemme dimensjonene arbeidsplass. Deretter må vi lage skriftrutenettet. For å gjøre dette, velg radhøyden, som skal være den samme for hele oppsettet. I elementer som har en skriftstørrelse som er forskjellig fra skriftstørrelsen til hovedteksten, må linjerommet være et multiplum av linjehøyden vår.

Dermed får vi grunnlaget for vårt fremtidige nett. Hele teksten vil hvile på dette grunnlaget.

4. Nå må vi bestemme hvor bred modulen vår skal være. Her kan vi starte fra bredden til ethvert permanent element. Hvis du har i oppgave å plassere noen identiske elementer på tvers av sidens bredde, blir alt enda enklere, fordi du allerede kjenner dimensjonene.

For enkelhets skyld må vi bestemme hva avstanden mellom modulene vil være. Den må være lik minst én linjehøyde fra forrige avsnitt.

Det er ett forbehold - du må velge de riktige modulstørrelsene, for hvis de er for store, vil fleksibiliteten til nettet forsvinne, og hvis de er små, vil nettet ganske enkelt gå tapt.

5. Horisontal deling er ganske enkelt å gjøre. Høyden må være et multiplum av høyden på linjen vår. Og hvor mange linjer du setter inn i en divisjon avhenger av skissen din.

For ikke lenge siden, mens jeg jobbet med en annen leksjon for kurset «Grafisk design. Grunnleggende» (planlagt utgivelse tidlig i januar), innså jeg at temaet bruk og bygging av modulære rutenett sjelden dekkes.

Det er ganske mye informasjon om hva et modulært nett er og hva det trengs til, men veldig lite om hvordan man bygger det og hvilke regler man skal følge. Derfor bestemte jeg meg for at dagens innlegg vil ha et praktisk fokus og prøve å dekke dette emnet så tydelig som mulig.

Så, et modulært rutenett er en layout for arbeidet ditt, en måte å systematisere og justere elementer. Det er ryggraden i komposisjonsløsningen og fungerer ikke bare som et middel til å organisere komponenter arbeid, men også ledig plass.

Rutenettet kan både hjelpe oss med å løse problemer og være en del av løsningen. Det mest slående eksemplet vil være windows grensesnitt telefon:

For de som trenger en mer detaljert teoretisk del av spørsmålet er det mulighet for å bruke søket eller melde seg på kurset og motta et tilsvarende brev, hvor dette er beskrevet tilstrekkelig detaljert, og vi går direkte til praksis.

Først må vi bestemme hvorfor vi trenger et modulært nett. Lager vi et nettsted, eller designer et magasin, eller et bokomslag, eller noe annet? Avhengig av type aktivitet bør de viktigste strukturelle elementene identifiseres. Ofte bestemmes modulstørrelsen av ett av disse elementene, for eksempel en logo, menyposisjon på siden, etc. I layout minste størrelse bestemt av størrelsen som er lesbar i en bestemt situasjon.

For klarhetens skyld vil jeg gi et eksempel på et modulært rutenett i et trykt tidsskrift. Hvis vi legger ut et magasin, kan de strukturelle elementene være en tittel, undertittel, tekst og illustrasjoner. Vanligvis i magasiner er det forskjellige typer artikler hvor rollen til tekstdelen kan endres. I slike tilfeller, for å gjøre rutenettet mer fleksibelt, bruker jeg 5-7 moduler (horisontalt):

Kombinere moduler kan gjøres i nesten hvilket som helst format som er praktisk for deg:

Faktisk, jo mindre mesh-modulen er, jo mer fleksibel vil den være uten å miste proporsjonaliteten. Men mange synes det er upraktisk å jobbe med rutenett hvis størrelsen på modulen deres har en tendens til størrelsen på avstanden mellom modulene. Et slikt rutenett blender øynene og er lett å bli forvirret i, spesielt for en nybegynner:

Det kan være mange muligheter for å konstruere et modulært rutenett her begrenses du kun av kundens ønsker og fantasien. Ikke glem at modulære rutenett ikke trenger å være vertikale, de kan også bygges diagonalt, i en viss helningsvinkel, etc.

Når det gjelder nettsteder, anses det optimale antallet kolonner å være 12, 16 og 24, noe som skyldes særegenhetene ved nettstedsoppsett og bruken av rammefunksjoner. Jeg anser minimumshøyden på en modul for nettet til å være 20px, noe som skyldes den optimale skriftstørrelsen (12-14pt) og dens lesbarhet.

Nå er det på tide å snakke om den tekniske siden av saken.

Opprette et modulært rutenett i

• Den første og enkleste måten er å aktivere selve rutenettet grafisk redaktør(Ctrl+’) og, guidet av den, sett hjelpelinjene. Det vil ta lang tid og med stor sannsynlighet for feil.
• Installer spesielle plugins for Photoshop ( Guideguide , Modulært rutemønster , GridMaker 2).
• Last ned en ferdig mal fra en av de gratis rutenettgeneratorene, for eksempel 960.gs, Golden Grid, 1Kb Grid, Simple Grid. Still inn ønskede parametere og klikk "GENERATE".

Faktisk er det et ganske stort antall tjenester for å lage rutenett, inkludert for "gummi" nettsteder. De er veldig enkelt å finne ved å bruke søket, så jeg ser ingen vits i å liste dem alle opp i artikkelen. Slike tjenester er utmerkede hjelpere for nybegynnere.

Opprette et modulært rutenett i

I motsetning til Photoshop har InDesign sine egne modulære rutenettopprettingsverktøy. På menyen Oppsett du må velge et element Lag guider og skriv inn parameterne du trenger i dialogboksen:

Dette verktøyet har ganske fleksible innstillinger, så det vil ikke være vanskelig å lage ønsket struktur. Å lage et mesh gjøres best ved å bruke Hovedside, for ikke å gjenta prosedyren for hver side.

Opprette et modulært rutenett i

• Den første metoden (ligner på Photoshop) er å slå på rutenettet til selve grafikkredigeringsprogrammet og, ledet av det, sette hjelpelinjene. Det er også mulig å lage en hvilken som helst form til en guide, noe som vil hjelpe til med å organisere et skrå rutenett.
• nedlasting ferdige maler rutenett Hvor - søket vil fortelle deg. Du kan finne mange av dem på Internett.

Jeg håper temaet modulære rutenett har blitt nærmere og tydeligere for deg. Sørg for å øve på å bygge dem. Jeg forstår godt at dette er en veldig kjedelig aktivitet, men det er verdt det. Å bygge rutenett utvikler følelsen av proporsjoner og lar deg bedre se eventuelle unøyaktigheter i justeringen i fremtiden.

En verden av gratis programmer og nyttige tips
2024 whatsappss.ru

tittel
Meny	modul 1		Modul 2	modul 3	modul 4
	konklusjon