Nestranný jazyk. V InDesignu 2022 (verze 17.0) a novějších nahrazujeme nezahrnutý jazyk, abychom odráželi základní hodnoty inkluzivity společnosti Adobe. Jakýkoli odkaz na hlavní stránku je v našich článcích nápovědy pro angličtinu, dánštinu, maďarštinu, španělštinu, italštinu, brazilskou portugalštinu, portugalštinu a japonštinu nahrazen odkazem na nadřazenou stránku..
Obsah
- Použití mřížek
- Nastavení základní mřížky
- Nastavení mřížky dokumentů
- Zobrazení a skrytí mřížek
- Přichyťte objekty k mřížce
- Přichyťte objekty k mřížce dokumentu
- Základní mřížka
- Sloupcová mřížka
- Designová mřížka
- Samostatně o základní mřížce (základní mřížce)
- Použití mřížky při přenosu rozvržení do rozvržení
- Užitečné odkazy:
Použití mřížek
Existují dva typy netisknutelných mřížek: základní mřížka pro zarovnání textových sloupců a mřížka dokumentů k zarovnání objektů. Na obrazovce mřížka účaří připomíná linkovanou stránku poznámkového bloku a mřížka dokumentu připomíná milimetrový papír. Oba typy mřížek lze přizpůsobit.
Při zobrazení na obrazovce jsou viditelné následující vlastnosti mřížek.
Mřížka účaří pokrývá všechny dvojstránky a mřížka dokumentu pokrývá celé kreslicí plátno.
Na každé dvojstránce se objeví mřížka účaří a dokumentu; nelze je propojit se šablonami.
Mřížka dokumentu se může objevit nad nebo pod všemi vodítky, vrstvami a objekty, ale nelze ji propojit s vrstvami.
Nastavení základní mřížky
Nastavení mřížky účaří pro celý dokument se provádí v dialogovém okně Nastavení mřížky.
V dialogovém okně Volby textového rámečku můžete upravit účaří pro rámeček (viz Změna vlastností textových rámečků).
Zvolte Úpravy > Předvolby > Mřížky (Windows) nebo InDesign > Předvolby > Mřížky (Mac OS).
Vyberte základní barvu sítě z nabídky Barva. Z této nabídky můžete také vybrat „Vlastní“.
V parametru “Relativní” určete polohu začátku mřížky – horní okraj stránky nebo horní okraj.
Do pole Start zadejte hodnotu, o kterou chcete odsadit mřížku vzhledem k hornímu okraji stránky nebo hornímu okraji stránky (v závislosti na možnosti, kterou vyberete z nabídky Relativní). Pokud máte potíže se zarovnáním svislého pravítka k této mřížce, zkuste začít s hodnotou nula.
Do pole Každý řádek zadejte hodnotu mezery mezi čarami mřížky. Ve většině případů bude tato hodnota odpovídat prokladu hlavního textu, takže řádky textu lze snadno zarovnat k této mřížce.
A. První čára mřížky B. Mezery mezi čarami mřížky
Do pole Zobrazit v měřítku od zadejte hodnotu, která odpovídá minimálnímu měřítku, ve kterém se bude mřížka zobrazovat. Aby se zabránilo zobrazení příliš husté mřížky, měla by být tato hodnota dostatečně velká.
Mřížka účaří v měřítku menším (vlevo) a větším (vpravo), než je zadané minimální měřítko.
Klepněte na tlačítko OK.
Příkaz Přichytit na vodítka řídí nejen přichycení k vodíkům, ale také k mřížce účaří.
Nastavení mřížky dokumentů
Zvolte Úpravy > Předvolby > Mřížky (Windows) nebo InDesign > Předvolby > Mřížky (Mac OS).
Vyberte barvu mřížky dokumentu z nabídky Barva. Z této nabídky můžete také vybrat „Vlastní“.
Chcete-li nastavit rozestup vodorovné mřížky, určete hodnotu v poli Každý řádek ve skupině Vodorovná a poté zadejte hodnotu pro Vnitřní dělení mezi sousedními čarami mřížky.
Chcete-li nastavit rozestup svislé mřížky, zadejte hodnotu do pole Každý řádek ve skupině Svislý a poté zadejte hodnotu pro Vnitřní dělení mezi sousedními čarami mřížky.
Proveďte jednu z následujících akcí a klikněte na OK:
Chcete-li umístit mřížku účaří a mřížku dokumentu pod jiné objekty, zaškrtněte políčko Mřížky na pozadí.
Chcete-li umístit mřížku účaří a mřížku dokumentu nad jiné objekty, zrušte zaškrtnutí políčka Mřížky pozadí.
Chcete-li umístit vodítka pod jiné objekty, klepněte pravým tlačítkem (Windows) nebo se stisknutou klávesou Ctrl (Mac OS) na prázdnou oblast v okně dokumentu a poté z kontextové nabídky zvolte Vodítka vzadu.
Zobrazení a skrytí mřížek
Chcete-li základní mřížku zobrazit nebo skrýt, zvolte Zobrazení > Mřížky a vodítka > Zobrazit/skrýt základní mřížku.
Chcete-li zobrazit nebo skrýt mřížku dokumentu, zvolte Zobrazení > Mřížky a vodítka > Zobrazit/skrýt mřížku dokumentu.
Přichyťte objekty k mřížce
Pokud je povoleno uchopení, objekt přesunutý do zóny uchopení mřížky se přichytí k mřížce.
Přichyťte objekty k mřížce dokumentu
Zvolte Zobrazení > Mřížky a vodítka a ujistěte se, že je zaškrtnuto políčko Přichytit k mřížce dokumentu. V opačném případě jej nainstalujte.
Příkaz Přichytit na vodítka řídí nejen přichycení k vodíkům, ale také k mřížce účaří.
Chcete-li nastavit oblast přichycení, zvolte Úpravy > Předvolby > Vodítka a pracovní plocha (Windows) nebo InDesign > Předvolby > Vodítka a pracovní plocha (Mac OS), zadejte hodnotu do pole Aktivní místo a klepněte na OK. Hodnota v poli Hot Zone se vždy zadává v pixelech.
Chcete-li přichytit objekt k mřížce, přetáhněte jej směrem k mřížce, dokud nebude jedna nebo více hran v oblasti přichycení.
Shromáždili jsme nejčastější témata související s mřížkou v responzivním designu, abychom pojem jako takový „vybrousili“ a systematizovali praktické znalosti: jak nastavit mřížku v rozložení návrhu, jaké parametry použít pro výpočty, jaké vlastnosti adaptivní prostředí vzít v úvahu a jakým detailům věnovat pozornost.
Účelem mřížky není pouze zachování estetiky, ale také udržení kontroly nad vývojovým procesem, díky čemuž je samotný proces flexibilní pro návrháře i vývojáře. Mřížka je jako dobře zabalený batoh, který předáte vývojáři, aby jej mohl používat s lehkostí a porozuměním vaší vizi projektu.
Před vytvořením mřížky musíte „prozkoumat pracovní pole“ – udělat hrubé rozvržení stránky, najít omezení a kritické oblasti, které se určitě projeví ve fázi detailního návrhu. To pomáhá redukovat abstraktní chápání úkolu na konkrétní cíle. Poté můžete začít nastavovat pracovní mřížku v rozvržení. K tomu je potřeba vytvořit strukturu tří typů mřížek − základní, sloupovitý и design.
Základní mřížka
Základní mřížka je svými vlastnostmi a účelem podobná milimetrovému papíru. Je potřeba vytvořit vhodné prostředí, které vám umožní přesunout malé detaily rozvržení bez přemýšlení nebo starostí o zajištění toho, aby všechny vzdálenosti mezi prvky byly stejné a jednotné.
Rozteč mřížky závisí na takových atomárních nedělitelných částicích, jako je přepínač, zaškrtávací políčko, základní písmo a výška řádku, minimální vzdálenost mezi viditelnými bloky obsahu, například mezi fotografiemi v galerii nebo kartami produktů.
Základní mřížka by měla být kombinována s mřížkou sloupců. Výchozí nastavení Photoshopu nabízí návrháři mřížku s krokem 10 px, což odpovídá posunutí objektu pomocí klávesové zkratky shift, ale neodpovídá ani velikosti písma, ani logice konstrukce sloupců a odsazení. 10 px je celé číslo, ale nic víc. V nastavení mřížky pro mobilní platformy lze 4 nebo 8 px považovat za dobrý krok. Zde by krok mřížky měl zapadat rovnoměrně do výšky řádku hlavního textu a neměl by být příliš malý.
Sloupcová mřížka
U vstupních stránek, webů se strukturou karet, portfolií a galerií dobře funguje gumová adaptace. U velkých agregátorů a klasifikovaných zdrojů s velkým počtem formulářů, vstupních polí a malých ovládacích prvků způsobuje gumové škálování potíže. Je obtížné ovládat a často deformuje prvky a ničí strukturu: klíčová data z prvního rolování se ztratí (například reklama), prvky se posunou na další řádek, integrita textových bloků je zničena, formuláře se příliš rozšiřují a uživatel je nucen posouvat stránku příliš dlouho.
V responzivním designu musíte zachovat strukturu rozvržení a úhlednou prezentaci informací pro všechna rozlišení, takže rozvržení by měla být vytvořena pro všechny kontrolní body. Sloupce mřížky zároveň zůstávají statické a přidávají se s rostoucí šířkou obrazovky a prvky mění svou polohu podle rytmu sloupců a přechodových bodů, zarážky. Ty lze brát jako 640, 768, 960, 1024, 1280 a 1440. A pro každé rozlišení obrazovky bude odpovídající jiný počet sloupců.
Kolik sloupců mám vybrat pro mřížku?
Mřížka sloupců je zodpovědná za horizontální rytmus, a aby k tomu došlo, musíte zvolit poměr šířky sloupce a odsazení, který vám umožní snadno změnit polohu větších bloků. To je možné, když je několik sloupců umístěno ve velkém bloku, například 3-4. Okrajem je v tomto případě vzdušné pole, do kterého by neměly být umístěny prvky. To je důležité v tom smyslu odsazení není další vodítko, který lze použít k zarovnání prvků.
Při výběru počtu sloupců je tedy třeba mít na paměti, kolik obdélníkových modulů bude na stránce použito. K dispozici bude například galerie šesti fotografií s textovými popisy, dvěma velkými grafikami a třemi odstavci textu. Potom by počet sloupců měl být násobkem 2, 3 a 6. Postačí číslo 12. Rozdělením pracovní plochy 960 px na 12 sloupců s šířkou odsazení 10, 12, 16, 15 a 20 px šířka sloupce 60, 64, 65, 68, 70 px. Výsledkem bude několik možností mřížky, například mřížka s 12 sloupci s šířkou sloupce 64 px a okrajem 16 px.
Proč je společný počet 12 sloupců? Všechny moderní monitory pracují v rozlišení od minimálně 1024×768. Rozdělení pracovní plochy 960 px na 12 sloupců je nejvhodnější, protože je dobře rozděleno do sloupců a odsazení, které jsou násobky 2. Na základě toho si můžete zvolit počet sloupců pro jiná rozlišení – 10 sloupců pro 768 px, 16 sloupců pro 1280 px a 20 sloupců pro 1440 px a více. Sloupce se v podstatě přidávají nebo odečítají pro každé rozlišení.
Pokud vycházíme z úkolu sestavit mřížku pro bannerovou reklamu, pak musíme najít optimální odsazení a šířku sloupce na základě rozdělení šířky banneru na 300 a 240 px. Ze všech možností rozdělení by byly vhodné (odpovídající) velikosti 10, 12, 15, 20. Bannerová reklama jako taková prochází většinou webů, skoro jako pruh MHD, a my na to máme malý vliv. Sloupce ale můžete spočítat jinak a banneru umožnit mírně přesahovat jeden sloupec na pravém okraji, ale pak bude samotná mřížka postavena na jiných modulech (například na produktových kartách nebo videoklipech). V tomto případě byste se ve fázi návrhu rozvržení měli zamyslet nad tím, kde na stránce bude pevná pozice bannerů a jaké prvky by tyto bannery měly doprovázet, abyste společně vytvořili modul, který se řídí mřížkou.
Designová mřížka
Designér musí vytvořit rozložení, které bude brát v úvahu nejen bannerovou reklamu, ale i další stejně významné prvky a typy obsahu: vertikální filmové plakáty, hranaté obaly hudby, velké fotografie, videa, články o deseti v jedné řadě atd. na. Rozložení se může skládat ze dvou úzkých sloupců po stranách a jednoho širokého uprostřed. Může sestávat z identických sloupců s širokým odsazením, nebo se může skládat dokonce z „plovoucích“ sloupců (někdy ze dvou, někdy z pěti), ale tak, aby to bylo viditelné kvůli opakování rozložení materiálů a investici. “méně do více.”
Malý citát z rady Artema Gorbunova o kotevních objektech
Dobrá silná mřížka je postavena na pravoúhlých modulech. Kompozice je úspěšná, pokud vše, co nakreslíte, lze ohraničit proporcionálními obdélníky a vejdou se na stránku, aniž by se navzájem překrývaly a sledovaly horizontální a vertikální rytmus.
Co to přesně znamená v praxi? Příkladem z fyzického světa je modulární mřížka ve stěně s otvory Kerf Wall, na které lze v libovolném pořadí uspořádat zásuvky a police. Na takovou zeď můžete dokonce zavěsit kolo – hlavní věc je, že se předměty navzájem neruší, jinak spadnou. Totéž platí pro silnou síť.
Samostatně o základní mřížce (základní mřížce)
Uživatelé InDesignu znají koncept vertikálního rytmu. V nastavení si mohli nastavit výšku řádku pro vodorovnou mřížku a podle ní pracovat. Ale pro designéra je vertikální rytmus „optickým konceptem“, pro jehož výpočet neexistují přesné parametry, protože je vytvořen pečlivým studiem každého textového bloku, řádků a odsazení. Ve webovém designu jsou všechny tyto jemnosti obtížně realizovatelné. Nestačí jednoduše upravit proklad všech písem na stejnou výšku řádku – to povede k tomu, že se řádky ve velkých odstavcích slepí k sobě a v malých odstavcích se budou od sebe vzdalovat.
K vytvoření vertikálního rytmu pomocí CSS používají vývojáři opticky pohodlnou výšku řádku základního písma a proklad všech textů, násobek této výšky. Text sledující tento vertikální rytmus vypadá dobře na jedné stránce článku, kde je hodně vzduchu a slepené textové řádky větších velikostí písma nejsou tak nápadné.
Příklad vertikálního rytmu na WebTuts+:
Naopak, není to nejlepší způsob, jak aplikovat vertikální rytmus na všechny texty na stránce, když je mnoho textů různých velikostí. Typickým příkladem je nástroj Vertical Rhythm Calculator.
Artem Gorbunov ve své radě pro práci s řádkováním v blocích s různou velikostí textu říká, že mřížka účaří je spíše škodlivá a že je lepší upravit výšku řádků a odsazení textu ručně. Proklad textu by měl být zvolen v závislosti na formátu (modul, slab, textový blok). Pokud jsou řádky v textovém bloku krátké, lze proklad zmenšit. Pokud je textový blok dostatečně široký a řádky v něm jsou dlouhé, pak by měl být proklad zvětšen, jinak text ztratí čitelnost.
Výška řádku by měla být zvolena podle vztahů v rámci každého odstavce textu: délka řádku určuje odsazení, odsazení nadpisu závisí na odsazení a vše dohromady závisí na vnějším levém a pravém okraji, což by mělo být větší než vnitřní odsazení podle vnitřního a vnějšího pravidla a teorie blízkosti.
Existuje mnoho frameworků, CSS mřížek a mnoho z nich navrhuje vytvořit výšky řádků, které jsou asi jedenapůlkrát větší než velikost písma, a všechny ostatní řádky textu vejít do výsledného řádku. Například UnitGridSystem. Někteří navrhují definovat číslo intervalu a nastavit intriku pro všechny texty tak, aby byla násobkem tohoto čísla. V tomto případě však budete muset některá písma opustit. Nástroj Grilover je dobrým kompromisem. Od ostatních se liší tím, že upravuje nejen výšku řádku základního písma, ale také kompenzuje slepování/roztahování řádků pomocí parametru Scale factor.
Použití mřížky při přenosu rozvržení do rozvržení
Je užitečné přenést mřížku návrhářům rozvržení jako samostatnou specifikaci. Na hlavní džíp můžete nejen připevnit přídavný džíp s mřížkou, ale také si na něj zapsat hlavní rozměry – například rozteč, odsazení, šířku sloupce, velikosti písma. Pak bude shoda mezi vaším rozložením a rozložením přesnější a kontrola nad vývojem a synchronizací se zvýší na obou stranách. Stejně jako existují nezávislé pixely (dp) v mobilních rozhraních, tak na webu jsou to jednotky rem. Můžete vytvářet značky v pixelech nebo psát klíčové prvky a vzdálenosti v rem. Je vhodné, když krok vaší mřížky a rem jsou násobky stejného čísla. Pokud je například rozestup mřížky 8 px, základní písmo je 16 px a rem je 16 px, pak velikosti a vzdálenosti prvků v násobku 4 budou na mřížce a budou mít celočíselnou hodnotu v rem. To vám umožní okamžitě vidět vzdálenosti mezi prvky v krocích na mřížce. Takové integrální hodnoty lze získat vizuálně bez zdlouhavých výpočtů, pokud použijete Rem Calculator.
Užitečné odkazy:
O vzoru rozpoznávání textu a vertikálním rytmu na Smash Magazine
Více o mřížce na teehan+lax
Grilover a Typecast
Články a příklady mřížek na The Grid System
Příkladem hledání kompozice pro návrhovou mřížku pomocí modulů je Gridfier.
