Design Trend: Plátky textu a typografie

Puristé říkají, že byste nikdy neměli měnit typografii. Nápisy by se měly objevit tak, jak to navrhl typový designér, nebo byste měli vybrat úplně jiné písmo. I když je to většinou pravda, výjimkou je trend řezaného textu.

Šikovný efekt způsobuje, že elementy typu vypadají, jako by byly řezány přesným nástrojem, a mohou přidat vizuální zájem k logotypům, titulkům a jednoduchým textovým blokům. Efekty krájeného textu se mohou lišit od velmi jemných (například malých písmen, které chybí) až po hlavní části slov zcela chybí.

Při používání krájeného textu je třeba mít na paměti, že slova musí být vždy čitelná - v čem je jinak? - a měli byste věnovat zvýšenou pozornost tomu, aby se neúmyslné kombinace písmen nebo slov neobjevily kvůli krájení. Zde je pohled na to, jak to udělat pro vás, s několika příklady návrhů, které to dokážou dobře.

Prozkoumejte prvky Envato

„Tradiční“ plátek

Řezaný text zahrnuje téměř vrstvený vzhled s jedním textovým prvkem, jako je slovo nebo malá skupina slov, který je oříznut a překrýván na dvou rovinách. Tento efekt vytváří hloubku a může učinit jednoduchou sadu znaků vizuálně zajímavou.

Resoluut používá tento efekt v kombinaci s ampersandem k tomu, aby přitáhl uživatele do středu návrhu. Řezaný text odráží zprávy pod tím, že se společnost zaměřuje na „digitální design s přístupem“, protože nakrájený text nepřináší určitou ostřejší vibraci, že se přímo napisuje.

Tato technika funguje nejlépe, když jsou znakové sady jednoduché (nejprve si rozmyslete písmo bez patek) a slova mají přirozený bod zlomu, kde je lze vyjmout a zachovat čitelnost.

Slice Text and Photos

Efekt vrstvení není omezen na kombinaci písma a prostoru. Návrháři mohou také použít obrázky a text, aby také vytvořili skvělý efekt nakrájený na plátky, jako je například výše uvedený příklad z The Shift.

Šikmé kombinace řezů jednoho obrazu (také nakrájeného na plátky) s nápisy vtáhnou uživatele do návrhu.

Zatímco některá slova jsou zpočátku trochu náročnější, mezi animacemi je dost času na to, aby se zpráva snadno objevila.

Tento trend funguje dobře pro digitální agentury a weby s portfoliem jako způsob, jak předvést moderní vzhled a dojem a zvýraznit kreativní kotlety.

Plátek se animací

Efekt krájeného textu lze kombinovat také s dalšími trendy designovými prvky. Smíchání krájení s animací může mít za následek pěkný vizuální prvek.

Ve výše uvedeném příkladu je každý prvek textového řezu ve skutečnosti navigací. Uživatelé mohou kliknout na kterýkoli prvek, ale mnohem působivější je akce vznášení, která dá krájený text zpět dohromady.

Pro logotypy

Řezaný text může být zábavným způsobem, jak vytvořit logo, když jediným prvkem, s kterým musíte pracovat, je text. Zábavný logotyp může být více než známkou pro rozpoznávání značky; to může také být velmi grafický prvek pro vícenásobná použití, takový jak design košile, nahoře.

Při práci s řezaným textem hledejte přirozený tvar a sklon pro krájení, aby bylo zajímavé se na něj dívat při zachování snadného čtení.

Věnujte pozornost tomu, jak krájení vytváří prázdné místo. Výše uvedený návrh používá v sobě širokou škálu dalších informací. Častější použití krájení je často tenká čára, ale přístupy (jak vidíte z příkladů v tomto příspěvku) se mohou docela výrazně lišit.

Vytvořte interaktivitu

Umožněte uživatelům rozřezat svůj vlastní text interaktivní kombinací textu a štětce, jako je například výše uvedený příklad. I když text není přesně nakrájen na sebe, efekt je vytvořen v uměleckém procesu.

Jakékoli nástroje, které umožňují uživatelům změnit design, mohou mít za následek delší dobu na webu kvůli interaktivní součásti.

Plátky svislých tahů

Svislé řezy bývají kratší, protože každý řez je součástí jediného písmene.

Zatímco se zdá, že většina návrhářů používá trend stejným způsobem s horizontálně orientovaným řezem, řezy mohou být také vertikální.

Svislé řezy bývají kratší, protože každý řez je součástí jediného písmene. Trik, jak svislé řezy fungovat, je konzistence. Způsob, jakým jsou škrty prováděny, by se měl navzájem napodobovat tak, aby písmena vypadala, jako by spolu šly. Tento způsob krájení by měl vypadat, jako by byl téměř zamýšlenou součástí písma. (Ne ve výše uvedeném příkladu, že řezy mají stejnou šířku od písmene po písmeno a stejná písmena mají stejné řezy.)

Vytvořte vizuální tok

Řezy téměř vytvářejí pocit čtení naléhavosti, takže můžete zip přes písmena a přes hlavní vizuální na obrazovce.

Jedním z důsledků krájeného textu - zamýšleného či nikoli - je to, že vytváří vizuální tok. Oko uživatelů bude sledovat směr řezu a bílého prostoru kolem něj.

Podívejte se na logotyp ve výše uvedeném příkladu. S plátky v R a O's v Robocathu (plus normální chybějící část c) je zřejmá směrová tažnost přes obrazovku zleva doprava.

Tah je silnější než to, co spojujete s běžným čtením (také zleva doprava), protože řezy vás rychle posouvají znaky. Řezy téměř vytvářejí pocit čtení naléhavosti, takže můžete zip přes písmena a přes hlavní vizuální na obrazovce.

Přidat důraz na nápisy

Posledním - a možná nejpřesvědčivějším - důvodem pro použití trendu designu krájeného textu je zdůraznit písmo nebo zprávu. Krájení může být téměř jakákoli změna písmen, kde část znaku v designu chybí.

MJND, výše, používá více efektů vrstvení ke skrytí nebo řezání tvarů dopisů, což pomáhá zvýraznit zprávu. Obrázek by zde mohl snadno komunikovat, ale tento efekt pomůže přivést uživatele zpět k hlavním zprávám. Tato kombinace je jednoduchá, efektivní a vizuálně zajímavá.

Učební zdroje

Existuje několik způsobů, jak vytvořit řezané textové efekty pro projekty, v závislosti na přesně to, co se pokoušíte vytvořit. Mezi nejoblíbenější možnosti patří ruční vytvoření textového efektu pomocí editačního softwaru nebo použití CSS k vytvoření efektu pro webové projekty.

Zde jsou návody pro každou z těchto možností, takže můžete zkusit vytvořit trendový textový efekt na plátky:

• Video: Jak vytvořit řezaný text v aplikaci Adobe Illustrator
• Vyjmout úryvek textového efektu pomocí CSS

Závěr

Použití trendu krájeného textu může být trochu složitější, protože zahrnuje změny prvků typu. Je důležité, aby nedošlo ke ztrátě čitelnosti, nebo byste mohli ztratit uživatele s tímto účinkem.

Efekty krájeného textu však mohou být zábavným řešením a mohou pomoci vytvořit ohnisko. Přidání doteku animace může také pomoci přejít na další úroveň. (Mnoho příkladů obsažených v tomto příspěvku to jen dělá; nezapomeňte tyto webové stránky navštívit a kliknout na ně.)