"Gridet är ett hjälpsystem, men det är ingen garanti, utan har helt enkelt ett antal möjliga användningsområden, och varje designer kan hitta en lösning som passar hans eller hennes individuella stil. Men man måste lära sig att använda gallret. Det är en konst som kräver övning."

— Joseph Müller-Brockmann

Faktum är att själva användningen av ett rutnät relaterar till en av de äldsta och mest grundläggande principerna för design: inriktning. Vår hjärna vill förenkla allt och göra det mer begripligt. Det är därför vi försöker skapa ordning i saker som verkar kaotiska.

Naturligtvis, ju snabbare vi organiserar allt korrekt, desto snabbare kommer vår hjärna att kunna identifiera modellen och gå vidare. Rutnäten är så ordnade att de nästan inte kräver någon tolkning från vår sida. .

Tänk på de två sidlayouterna som visas i figuren nedan:

Även om båda dessa bilder bara är några få rektanglar, verkar uppsättningen överst i grunden bättre än den längst ner. Vi kan omedelbart känna igen mönstret, acceptera det och gå vidare. Bilden nedan orsakar visuellt obehag eftersom den inte har något tydligt mönster, ordning eller syfte och ser ut som en slumpmässig samling former.

Det bör noteras att desorganisering också kan vara vacker . I naturen finns det till exempel inga tydliga linjer. Maskor ser kalla och hårda ut, men kom ihåg att de är väldigt effektiva och effektiv metod Låt inte din fantasi fastna i strukturer.

Ta en titt på några av de mest populära webbplatserna med förstklassig design. Mest troligt använde de ett nät. Grids hjälper till att stabilisera strukturen på en webbsida och ger en logisk mall för en designer att skapa en webbplats.

Att använda ett rutnät betyder inte att din design kommer att ha en tråkig design. En bra designer bör känna till och kunna tillämpa de grundläggande reglerna för att använda ett rutnät, men det betyder inte att han inte kan bryta mot reglerna.

Enkelt uttryckt är ett rutnät uppdelningen av en layout med vertikala och/eller horisontella riktlinjer inklusive marginaler, utrymme och ett antal kolumner för att ge ett ramverk för att organisera innehåll.

Grids används traditionellt i tryckning, men används också ofta i webbdesign. Nätet är helt enkelt ett verktyg som hjälper till i designen.

När du börjar lära dig nya färdigheter inom ett visst område bör du först följa rekommendationerna. Att lära sig grunderna säkerställer att du kan tillämpa principerna effektivt. Det vill säga först - teori och sedan - praktik.

Det är värt att notera att det finns två sätt att skapa ett mallrutnät:

Metod #1: Skapa ditt eget rutnät

Det är många på olika sätt skapa ditt eget rutnät, men i slutändan har du rätt att välja det alternativ som passar dig bäst.

Du kan dela ett tomt dokument matematiskt och skapa ett jämnt eller udda antal kolumner att arbeta med. Ditt nätverk kan vara komplext eller enkelt, du kan använda tredjedelsreglerna eller det gyllene snittet, vilket du föredrar.

Kanske kan följande artiklar hjälpa dig med detta:

• How You Make A Grid (boka om engelska språket i .pdf-format)

Här är några exempel på nätverk skapade i Photoshop med hjälp av guider ( Visa>Ny guide):

Plugins för att skapa rutnät i Photoshop

5. Grid System Generator - generator av sådana populära rutnät som 960.gs, Golden Grid, 1Kb Grid, Simple Grid / ställ in nödvändiga parametrar och klicka på "GENERERA".

Grids för flytande/responsiva webbplatser

Responsiv webbdesign är mycket populär idag. Dess huvudprincip är användningen av ett gumminät. Du kan läsa mer om dem, men jag skulle vilja utöka den här samlingen lite och lägga till några fler resurser.

1. - adaptiv nätgenerator

2. Kalkylator för vätskenät - en tjänst som låter dig skapa ett gumminät. Ange parametrarna och få den färdiga koden.

Modulärt rutnät - e ett mönster, mönster, storlek eller proportion som upprepas flera gånger. Kom ihåg Eschers bilder. Ödlor, fiskar, fåglar i vissa verk - det här är modulen. Varje internetanvändare ser moduler i form av bakgrunder.

Det första alternativet för att använda moduler i design är detsamma som på Internet, det vill säga en bakgrundsbild. I en mängd olika former, både självständigt och i olika kombinationer. Och samma illustrationer av Escher.

Det andra alternativet, dimensionellt, är mycket nära det tredje, proportionellt. I grund och botten är dessa modulära rutnät för olika typografiska typer av tryckta produkter.

Det tredje alternativet är svårare att uppfatta, men det är just detta som ligger till grund för all design, arkitektur och annat skapat av naturen och människan. Människan har alltid format omgivningen, intuitivt styrd av en känsla för proportioner, det vill säga relationer.

Phidias (skaparen av Akropolis) och Ictinus (Parthenon) visade också kunskap om lagen om det gyllene snittet. Kärnan i denna lag är att det mindre segmentet är relaterat till det större, eftersom det större är till hela längden. Jag minns inte om denna lag studeras i skolan, men på konstskolor, konst- och arkitektinstitut är det som "Fader vår..." I ett tal uttrycks detta värde som 1,618..... algebraiskt ser det ut som en :b=b:(a+b). Poängen är att ett sådant förhållande är fördelaktigt för ögat på grund av de mentala och fysiska egenskaperna hos ögats struktur, hjärnans arbetsfrekvenser och många, många... (Figur 4.2.)

Det andra aktiva elementet i att bygga några visuellt gynnsamma relationer är torget. Genom att konstruera från den är det lätt att få förhållanden 1:2, 2:3, 3:4.

Figur 4.2.

Figur 4.3.

För webben kan modulär sidkonstruktion organiseras med hjälp av tabeller. Som en modul kan du ta skärmens bildförhållande (vid 800x600 är detta 4:3) (Figur 4.3.). Standardstorleken på ett pappersark A4 är också en modul i ritning och typografi

Det överväldigande antalet typografiska rutnät är baserade på formatet på ett pappersark, som ligger till grund för publikationen. Rutnätsdesignen beror på innehållet och syftet med projektet, såväl som den individuella stilen hos en viss konstnär. Och om designen görs med hjälp av en dator, blir processen ganska snabb, särskilt i implementeringsstadiet. De flesta grafiska (främst publicering) program har inbyggda alternativ för att skapa ett modulärt rutnät, och nästan alla av dem har en ganska stor uppsättning modulära rutnätsmallar under de ganska vanliga namnen "Booklet", "Calendar", etc.

I figur 4.4. presenteras modulära rutnät av den första remsan. Det skiljer sig något från det allmänna modulnätet i det övre blocket. För en tydligare uppfattning av logotypen var den tvungen att markeras med mycket betydande pauser. Men det är inga problem med att läsa och lyfta fram det.

Figur 4.4.

Figur 4.5. Modulärt rutnät av återstående ränder

Som du kan se, förutom ett tydligt definierat övre block, har remsan en tydligt definierad "källare" - detta är vad tidningsmän kallar den nedre delen av remsan. Det hjälper till att dela upp informationen på sidan i tematiska zoner. Bandmoduleringskretsen är synlig i de två färgdiagrammen.

Det modulära nätet är inte alltid så enhetligt och symmetriskt. Det kan vara helt abstrakt, med godtycklig placering av element, men dess uppgift är i alla fall att säkerställa kontinuitet i presentationen av material.

Moduler används av arkitekter, möbeldesigners och bilutvecklare, deras modul är knuten till den mänskliga kroppens proportioner och dimensioner.

Figur 4.6.

Inom webbdesign används det modulära rutnätet mycket oftare än det kan verka vid första anblicken. Om du använder

för att bilda element på sidan - du använder redan ett modulärt rutnät, speciellt om du upprepar detta rutnät inte på en sida, utan på flera. Ibland kan rutnätet döljas, ibland kan det vara explicit (när du använder en annan färg som bakgrund för cellen, annorlunda än huvudbakgrunden) (Figur 4.6.)

Det bör tilläggas att essensen av rutnätet är densamma, förutom att webbrutnätet kan innehålla dynamiska (föränderliga) cellparametrar. Sidan kan vara olika i höjd, vilket beror på mängden text och bilder på den, och automatiskt expandera (eller inte expandera) beroende på vilken bildskärmsupplösning som används.

Skärmstorlekar

MED

Canvas bredd

Du bör undvika hårdkodade skärmstorlekar, men om du ställer in hårdkodade skärmstorlekar måste du komma ihåg att inställning av hårda parametrar bestäms av arbetsytans storlek.

Skärmupplösning
Canvas storlekar

Skärmstorleken kan bestämmas med enkla program (se laboratoriepraxis).

Låt oss titta på ett exempel på ett modulärt rutnät och specificera dimensioner, organiserat med hjälp av en tabell

I HTML kan du markera hela innehållet i en tabell med en tagg . Sedan indikeras tabellhuvudet med taggen och slutsatsen med taggen .Alla tre taggar är avslutande taggar och har attribut. Tabellrubrikceller använder taggen .

Det enklaste sättet att inte vara beroende av storleken på duken är dock att använda relativa storlekar, det vill säga ställa in storlekarna i %.

En extremt användbar artikel om reglerna för att skapa en tidningslayout! Jag rekommenderar starkt att läsa den.

Innan vi pratar om det modulära nätet, låt oss förstå vad en modul är.

Modulär en multipel repeterande bild, storlek eller proportion. – detta är strukturen (ram, mall) för arrangemanget av grafiska element på sidor. Grunden för ett modulärt rutnät är "modulen", med andra ord, huvudnätsteget, som visuellt bestäms av cellens bredd och höjd (modulär enhet). Celler byggs med vertikala kolumner och horisontella linjer.

De allra flesta typografiska rutnät är baserade på formatet på ett pappersark, som ligger till grund för publiceringen. Som du förstår skapas kolumnerna och det grundläggande sidrutnätet med hjälp av automatiska programkommandon. Rutnätet kan vara mycket varierande, beroende på syftet med publikationen och designerns idéer.

Rutnätet skapas för hela uppslaget, inte för varje sida separat. Detta görs för att hela tidningsuppslaget ska uppfattas som en helhet och inte delas upp i höger och vänster delar, och hela publikationen ser inte ut som en pärm av olika sidor. Reverseringsnätet kan bestå av 2, 3, 4 osv. kolumner med lika och ojämn bredd.

Kolumner med samma bredd skapas i fönstret för att skapa dokument eller i panelen "Margins and Columns". Om vi ​​behöver ange 3 kolumner, anger vi siffran 3 i motsvarande fält, etc.

Men vad händer om, enligt vår plan, inte alla kolumner ska ha samma bredd? Till exempel, vad händer om text och bilder placeras i 2 breda kolumner och förklarande information placeras i en smal sidospalt?

I det här fallet kommer vårt modulära nät att byggas på basen diverse antal automatiska programkolumner. Till exempel, om vi ställer in 8 automatiska kolumner för en sida, kommer de 2 breda kolumnerna vi har planerat (för text och bilder) att ta upp 3 automatiska kolumner, och den smala sidospalten kommer att byggas på basis av 2 automatiska kolumner.

Förutom fördelning efter kolumner använder det modulära nätet också grundläggande horisontella linjaler. Rader med text och ramar av grafiska element är fästa på dem för visuell ordning och justering.

Rubriker kan passa i en kolumn eller sträcka sig över flera kolumner. Det är inte ovanligt att titeln är det enda elementet för hela sidan. Allt beror på designerns kreativa idé och personliga preferenser.

På samma sätt kan grafiska bilder (foton eller illustrationer) uppta en eller flera kolumner, eller så kan de fylla ett nyhetsuppslag. En ganska vanlig teknik är när ett fotografi upptar en del av spridningen helt och sträcker sig något över den andra delen för att visuellt förena båda delarna.

-

Ett modulärt rutnät är inte nödvändigtvis byggt av vinkelräta linjer. Ibland bestämmer designern sig för att luta gallret eller till och med ge det en original form. Om du vill gå utöver det vanliga, fortsätt!
Försök bara att se till att ditt arbete i jakten på originalitet inte förvandlas till sisyfeiskt arbete. Föreställ dig hur det skulle vara att lägga ut 40-50 sidor med ett lutande eller krulligt rutnät...

-

Därför, innan du blir original, fråga dig själv om detta verkligen är nödvändigt och varför? Om hela tidningen är byggd på ett lutande, inverterat eller lockigt rutnät, kommer en sådan originalitet troligen att överraska läsaren inte längre än under de första 5 sidorna, och sedan kommer den att börja irritera.

Varför? Ja, för att läsaren först och främst vill lugnt läsa och tillgodogöra sig Intressant information, och inte distraheras av några överdrifter av designerns genialitet.

Men om den ursprungliga markeringen endast visas i en specifik sektion av tidningen, kommer det inte bara att vara intressant, utan också lämpligt, eftersom det kommer att ge avsnittet ett snyggt och igenkännbart utseende.

Allt som omger oss har sina egna proportioner. Redan som barn lärde den tecknade filmen "38 papegojor" oss att allt kan delas upp i delar lika med varandra (längden på boa constrictor bestod av 38 papegojor). Vi vet också alla att en persons höjd är lika med sju av hans huvuden, en centimeter består av tio millimeter, en meter består av hundra centimeter och så vidare. Således är en tecknad papegoja, ett människohuvud, en millimeter och en centimeter moduler.

Av allt detta kan vi förstå att en modul är en konventionell enhet, ett steg i rutnätets rytm. Och själva rutnätet är ett system av proportioner.

Hur kommer detta modulära nät att hjälpa oss? För det första kommer det att påskynda arbetet, eftersom vi inte behöver spendera mycket tid på att försöka ordna alla element harmoniskt. För det andra kan vi med hjälp av rutnätet förstå vilken punkt vi behöver använda och vilken storlek varje block ska ha. I allmänhet är ett modulärt rutnät ett ramverk som i hög grad underlättar konstruktionen av en webbplats.

Låt oss titta på vad maskor är.

1. Den enklaste typen är ett blocknät. Det vill säga, hon gör grova markeringar och delar upp området i block.

Block rutnät

3. Det modulära gallret har inte bara vertikal uppdelning, utan även horisontell uppdelning. Det som erhålls vid skärningspunkterna mellan linjer är alltså modulen.

4. Det finns också ett hierarkiskt rutnät, där blocken placeras intuitivt och inte följer några mönster.

Så, hur man skapar ett modulärt rutnät.

1. Först måste vi förstå vilken funktion vår webbplats kommer att ha att utföra, vi identifierar dess struktur och sammansättning av sidor. Sedan avgör vi vilka sidor som kommer att vara de viktigaste, och arbetet börjar med dem. För dem kommer vi att skapa en lista över funktionalitet och sortera den efter prioritet.

Vi måste beskriva varje funktionsblock och detaljera det till minsta detalj. Resultatet bör vara en lista där blocken och deras element är listade efter nivå. Således har vi nu pussel hällda ur lådan, och allt vi behöver göra är att sätta ihop dem till en komplett bild.

3. Vi börjar konstruera nätet genom att bestämma dimensionerna arbetsyta. Därefter måste vi göra teckensnittsrutnätet. För att göra detta, välj radhöjden, som ska vara densamma för hela layouten. I element som har en teckenstorlek som skiljer sig från teckenstorleken för huvudtexten måste radutrymmet vara en multipel av vår radhöjd.

Därmed får vi grunden för vår framtida mesh. Hela texten kommer att vila på denna grund.

4. Nu måste vi bestämma hur bred vår modul ska vara. Här kan vi utgå från bredden på vilket permanent element som helst. Om du har till uppgift att placera några identiska element tvärs över sidans bredd, blir allt ännu enklare, eftersom du redan vet dess dimensioner.

För enkelhetens skull måste vi bestämma vad avståndet mellan modulerna kommer att vara. Den måste vara lika med minst en radhöjd från föregående stycke.

Det finns en varning - du måste välja rätt modulstorlekar, för om de är för stora kommer nätets flexibilitet att försvinna, och om de är små kommer nätet helt enkelt att gå förlorat.

5. Horisontell uppdelning är ganska enkelt att göra. Dess höjd måste vara en multipel av höjden på vår linje. Och hur många rader du infogar i en division beror på din skiss.

För inte så länge sedan, när jag jobbade på en annan lektion för kursen "Grafisk design. Basics” (som planeras att släppas i början av januari), insåg jag att ämnet att använda och bygga modulära rutnät sällan tas upp.

Det finns ganska mycket information om vad ett modulnät är och vad det behövs för, men väldigt lite om hur man bygger det och vilka regler man ska följa. Därför bestämde jag mig för att dagens inlägg kommer att ha ett praktiskt fokus och försöka täcka detta ämne så tydligt som möjligt.

Så, ett modulärt rutnät är en layout för ditt arbete, ett sätt att systematisera och anpassa element. Det är ryggraden i den sammansatta lösningen och fungerar inte bara som ett sätt att organisera komponenter arbete, men också ledigt utrymme.

Rutnätet kan både hjälpa oss att lösa problem och vara en del av lösningen. Det mest slående exemplet skulle vara windows gränssnitt telefon:

För den som behöver en mer detaljerad teoretisk del av frågan finns möjlighet att använda sökningen eller prenumerera på kursen och få ett motsvarande brev, där detta beskrivs tillräckligt utförligt och vi går direkt till praktiken.

Först måste vi bestämma varför vi behöver ett modulärt nät. Gör vi en hemsida, eller designar vi en tidning, eller ett bokomslag eller något annat? Beroende på typen av verksamhet bör de viktigaste strukturella delarna identifieras. Ofta bestäms modulstorleken av något av dessa element, till exempel en logotyp, menyposition på sajten, etc. I layout minsta storlek bestäms av storleken som är läsbar i en viss situation.

För tydlighetens skull kommer jag att ge ett exempel på ett modulärt rutnät i en tryckt tidskrift. Om vi ​​lägger ut en tidning kan de strukturella delarna vara en titel, underrubrik, text och illustrationer. Oftast finns det i tidningar olika typer artiklar där textdelens roll kan ändras. I sådana fall, för att göra nätet mer flexibelt, använder jag 5-7 moduler (horisontellt):

Att kombinera moduler kan göras i nästan vilket format som helst som är bekvämt för dig:

Faktum är att ju mindre nätmodulen är, desto mer flexibel blir den utan att förlora proportionaliteten. Men många tycker att det är obekvämt att arbeta med rutnät om storleken på deras modul tenderar till storleken på avståndet mellan modulerna. Ett sådant rutnät bländar ögonen och är lätt att bli förvirrad i, särskilt för en nybörjare:

Det kan finnas många alternativ för att bygga ett modulärt nät, här begränsas du endast av kundens önskemål och din fantasi. Glöm inte att modulära galler inte behöver vara vertikala; de kan också byggas diagonalt, i en viss lutningsvinkel, etc.

När det gäller webbplatser anses det optimala antalet kolumner vara 12, 16 och 24, vilket beror på särdragen med webbplatslayout och användningen av ramfunktioner. Jag anser att minimihöjden på en modul för webben är 20px, vilket beror på den optimala teckenstorleken (12-14pt) och dess läsbarhet.

Nu är det dags att prata om den tekniska sidan av frågan.

Skapa ett modulärt rutnät i

• Det första och enklaste sättet är att aktivera själva rutnätet grafisk redaktör(Ctrl+’) och, med hjälp av den, ställ in stödlinjerna. Det kommer att ta lång tid och med stor sannolikhet för fel.
• Installera speciella plugins för Photoshop ( Guideguide , Modulärt rutmönster , GridMaker 2).
• Ladda ner en färdig mall från en av de kostnadsfria rutnätsgeneratorerna, såsom 960.gs, Golden Grid, 1Kb Grid, Simple Grid. Ställ in önskade parametrar och klicka på "GENERERA".

Faktum är att det finns ett ganska stort antal tjänster för att skapa rutnät, inklusive för "gummi" webbplatser. De kan lätt hittas med hjälp av sökningen, så jag ser ingen mening med att lista dem alla i artikeln. Sådana tjänster är utmärkta hjälpare för nybörjare.

Skapa ett modulärt rutnät i

Till skillnad från Photoshop har InDesign sina egna modulära rutnätsskapande verktyg. På menyn Layout du måste välja ett objekt Skapa guider och ange de parametrar du behöver i dialogrutan:

Det här verktyget har ganska flexibla inställningar, så att skapa den önskade strukturen kommer inte att vara svårt. Att skapa ett nät görs bäst med hjälp av Master Page, för att inte upprepa proceduren för varje sida.

Skapa ett modulärt rutnät i

• Den första metoden (liknande Photoshop) är att aktivera rutnätet för själva grafikredigeraren och, guidad av den, ställa in guiderna. Det är också möjligt att göra vilken form som helst till en guide, vilket hjälper till att organisera ett lutande rutnät.
• Ladda ner färdiga mallar rutnät Var - sökningen kommer att berätta. Du kan hitta många av dem på Internet.

Jag hoppas att ämnet modulära nät har blivit närmare och tydligare för dig. Se till att träna på att bygga dem. Jag förstår mycket väl att det här är en väldigt tråkig aktivitet, men det är det värt. Att bygga rutnät utvecklar din känsla för proportioner och gör att du bättre kan se eventuella justeringar i framtiden.

En värld av gratis program och användbara tips
2024 whatsappss.ru

titel
meny	modul1		Modul 2	modul 3	modul4
	slutsats