Anglická verze
logolink

< Zpět na seznam lekcí

Vyváženost a soulad prvků v obraze

ostatni-gdmObsah lekce:

  • Specifikace dokumentu
  • Cesta k základnímu návrhu
  • Další varianty kombinací prvků prvního návrhu a jejich modifikace
  • Změna formátu strany aneb varianty na šířku
  • Změna formátu strany aneb varianty na šířku s poloviční výškou

Specifikace dokumentu

V této lekci se podíváme na proces návrhu jednoduchého dokumentu obsahujícího až dva nadpisy, krátký text a fotografii. Ukážeme si několik možností umístění jednotlivých grafických a textových prvků v dokumentu vzhledem k formátu výsledného dokumentu. Na následujících obrázcích budeme postupně sledovat proces návrhu dokumentu od první varianty až po výslednou. Výslednou variantu se následně pokusíme realizovat ve více variantách.

Prvním krokem tvorby dokumentu je vytvoření obsahu dokumentu a výběr fotografie, která textový obsah doplní. V našem případě jsme demonstrujeme celý proces na dokumentu o Japonsku. Textová část se bude skládat z:

  • hlavního nadpisu "Japan",
  • podnadpisu "Land Of Rising Sun" (volitelná položka)
  • odstavce textu s nadpisem Geography (nadpis Geography není pro další varianty návrhu povinný)

Doplňkový text (http://en.wikipedia.org/wiki/Japan):

Japan is a country of over three thousand islands extending along the Pacific coast of Asia. The main islands, running from north to south, are Hokkaido, Honshu (the main island), Shikoku and Kyushu. The Ryukyu Islands, including Okinawa, are a chain of islands south of Kyushu. Together they are often known as the Japanese Archipelago.

Naším úkolem je umístit všechny požadované prvky do dokumentu zadané velikosti. Pro náš návrh budeme nejprve uvažovat formát papíru A4 na výšku.

Cesta k základnímu návrhu

Návrhy 1-2

Nejprve volíme nějaký pěkný bezpatkový font červené barvy (barva na japonské vlajce). Odstín červené vezmeme kapátkem z mostku na fotografii (mohli bychom samozřejmě vyjít z přesného odstínu červené barvy na japonské vlajce). Experimentujeme s velikostmi písma a mezerami mezi znaky.

japonsko japonsko

Návrhy 3-4

V následujících šesti návrzích experimentujeme s barvou a pozicí nápisu a kapitálkámi. Krátký nápis kapitálkami je výrazný a dobře čitelný.

japonsko japonsko

Návrhy 5-6

japonsko japonsko

Návrhy 7-8

japonsko japonsko

Návrhy 9-10

Zkoušíme i variantu, kdy text splývá s fotografií a snažíme se jeho čitelnost v obrázku zlepšit pomocí efektu bílého obrysu okolo písmen. Pro zdůraznění napisu vytváříme velkou iniciálu.

japonsko japonsko

Návrhy 11-12

Dále hledáme vhodný font tak, aby tvar iniciály co nejlépe splňoval naše představy a hodil se tvarem k našemu plakátu.

japonsko japonsko

Návrhy 13-14

Testujeme také akcidenční písmo a v souvislosti s ním zkoušíme i nepravidelné okraje obrázku pomocí masky vrstvy s fotografií a štetce.

japonsko japonsko

Návrhy 15-16

Nakonec však nacházíme vhodné a elegantní písmo a připojujeme řetězec "Land of the rising sun". Zkoušíme zarovnání vlevo a vpravo (jako lepší se pravděpodobně jeví zarovnání v pravo).

japonsko japonsko

Návrhy 17-18

Nakonec však zvětšujeme mezery mezi písmeny tak, aby nápis pokryl celou šířku nápisu "Japan" a byl tak pěkně zarovnán z obou stran. Přidáváme tenkou čáru jako grafický doplněk textu.

japonsko japonsko

Návrhy 19-20

V tomto kroku jsme vložili text (odstavcového typu). Na fotografii není text čitelný a tak přidáváme bílý obdélník jako pozadí.

japonsko japonsko

Návrhy 21-22

Zmenšujeme mezery mezi řádky a obdélník na pozadí. Zároveň lehce zvýšíme průhlednost obdélníku.

japonsko japonsko

Návrhy 23-24

Zde experimentujeme se ztučněním názvů v textu a k obdélníku i fotografii přidáváme tenký okraj v barvě hlavního nápisu Japan.

japonsko japonsko

Návrhy 25-26

P5id8v8me podnadpis "Geography" a pokoušíme se zlepšit čitelnost přidáním efektu vnější záře.

japonsko japonsko

Návrhy 27-28

Nakonec vkládáme podnadpis také do bílého obdélníku. Snížíme průhlednost obdélníku, abychom ještě zlepšili čitelnost textu. Tímto jsme došli k návrhu, který obsahuje vše potřebné a s nímž jsme spokojeni. Výsledný návrh si můžeme prohlédnout v plné velikosti: japonsko-12n-full.jpg.

japonsko japonsko

Další varianty kombinací prvků prvního návrhu a jejich modifikace

Návrhy 1-2

Velmi pěkně vypadá jemný červený gradient v nápisu. V prvním přápadě je však problém s jeho čitelností (pokud by se však jednalo například o obálku známého časopisu, tak by horší čitelnost často nevadila). Pouze malý podnadpis jsme podložili poloprůhledným pozadím, neboť byl opravdu problém tak malá písmena na fotografii přečíst. Dále jsme navrhli řešení čitelnosti hlavního nadpisu s použitím gradientu v masce, který zařídil, že fotografie přešla pomalu do bílé podkladové barvy pod nápisem.

japonsko japonsko

Návrhy 3-4

Další varianta obsahuje posun nadpisu do druhé třetiny výšky dokumentu a vytvoření přechodu v masce vrstvy s fotografií tak, aby fotografie postupně mizela doztracena. U druhého návrhu došlo ještě k zarovnání okrajů odstavcového textu tak, aby byly opticky shodné s okraji hlavního nápisu.

japonsko japonsko

Návrhy 5-6

Na prvním návrhu byla ještě zvětšena viditelnost horních dvou třetin fotografie, neboť byla zbytečně nevýrazná díky přechodu. Tím jsme dostali další pěknou variantu návrhu. V dalších krocích jsme experimentovali s rozmístěním prvků v dokumentu a účinkem těchto změn na celkový dojem z dokumentu. Varianta 6 používá obrázek jako doplňkovou informaci k textu a obrázek nám slouží spíše pro upoutání čtenářovi pozornosti a vtažení do článku.

japonsko japonsko

Návrhy 7-8

Varianta 7 obsahuje výrazně zmenšený obrázek a ten slouží jako pouhý vizuální odkaz na článek. Čtenář se v tomto dokumentu zabývá zejména článkem. Výrazný nadpis ve variantě 8 má za úkol upoutat čtenáře dříve nežli obrázek a text.

japonsko japonsko

Návrhy 9-10

Nejprve opět varianta s výrazným a dokonce otočeným nadpisem. Další variantě dominuje opět obrázek a nadpis. Čtenář čte tento dokument v pořadí obrázek, napis a text.

japonsko japonsko

Změna formátu strany aneb varianty na šířku

Návrh na šířku 1

Obrázek i text zabírají přibližně stejnou plochu a nadpis jasně dominuje. Celkově je kompozice prvků konzervativní a klidná.

japonsko

Návrh na šířku 2

V tomto případě je již důraz kladen na obrázek, i když nadpis je také poměrně výrazný a vrací čtenáře k textu.

japonsko

Návrh na šířku 3

Zde je důraz na text ještě posílen výraznou iniciálou, která nám rozloží pozornost rovnoměrně mezi text a fotografii.

japonsko

Návrh na šířku 4

Posun iniciály níž vytvořil v návrhu prostor a návrh tak působí elegantně, vzdušně a stále si zachovává pěkný důraz na text.

japonsko

Změna formátu strany aneb varianty na šířku s poloviční výškou

Následující návrhy A-D ilustrují přesun od dominantního textu k dominantní fotografii. Na prvním obrázku působí fotografie spíše doplňkově (jde nám především o textové sdělení), ale na posledním nám jde především o to, aby si pozorovatel všiml především fotografie a text ji pouze doplňuje.

Návrh A

japonsko

Návrh B

japonsko

Návrh C

japonsko

Návrh D

japonsko
webdesign, xhtml, css, php - Mgr. Michal Mikláš