Тенденция на дизайна: Нарязан текст и типография

Пуристите казват, че никога не трябва да променяте типографията. Буквите трябва да се показват по предназначение на дизайнера на типа или трябва да изберете изцяло различен шрифт. Въпреки че това е най-вече вярно, изключението е в тенденцията за нарязан текст.

Изящният ефект прави елементите от типа да изглеждат като изрязани с прецизен инструмент и могат да добавят визуален интерес към логотипи, заглавия и прости текстови блокове. Нарязаните текстови ефекти могат да варират от супер фини (като например малко писмо, което липсва) до големи части на думите, които липсват напълно.

Нещото, което трябва да имате предвид, когато използвате нарязан текст, е, че думите винаги трябва да бъдат четими - какъв смисъл има в противен случай? - и трябва да обърнете голямо внимание, за да не се появят непреднамерени комбинации от букви или думи поради нарязване. Ето един поглед как да го накарате да работи за вас с някои примери за дизайни, които го правят добре.

Разгледайте елементи Envato

"Традиционен" филийка

Нарязаният текст включва почти слоест вид с един текстов елемент, като дума или малка група от думи, който е нарязан и припокрит на две равнини. Този ефект създава дълбочина и може да направи прост набор от знаци визуално интересен.

Resoluut използва този ефект в комбинация с амперсанд, за да привлече потребителите в центъра на дизайна. Нарязаният текст отразява съобщенията отдолу, че компанията се фокусира върху „дигитален дизайн с отношение“, тъй като нарязаният текст предава определена по-едрата вибрация, която прави право върху буквите.

Тази техника работи най-добре, когато наборите от символи са прости (първо помислете за шрифтове за серифи) и думите имат естествена точка на прекъсване, където могат да бъдат изрязани и да запазят четимост.

Текст и снимки на парче

Ефектът на наслояване не се ограничава до комбинация от шрифт и интервал. Дизайнерите могат също така да използват изображения и текст, за да създадат ефект на нарязан нарязан, като например горния пример от The Shift.

Комбинациите от наклонени срезове на единично изображение (също нарязано) с надпис привличат потребителя в дизайна.

Докато някои от думите са малко по-трудни за разграничаване в началото, има достатъчно време между анимациите, за да разберете съобщението с лекота.

Тази тенденция работи добре за дигиталните агенции и сайтовете за портфолио като начин за показване на модерен вид и усещане, както и за подчертаване на креативните котлети.

Филийка с анимация

Ефектът от нарязан текст може да се комбинира и с други модни дизайнерски елементи. Смесването на нарязване с анимация може да доведе до хубав визуален елемент.

В горния пример всеки от нарязаните текстови елементи всъщност е навигация. Потребителите могат да кликнат върху всеки елемент, но това, което е по-впечатляващо, е действието на курсора, който поставя нарязания текст отново заедно.

За логотипове

Нарязаният текст може да бъде забавен начин да създадете лого, когато единствените елементи, с които трябва да работите, са текст. Забавен логотип може да бъде повече от марка за разпознаване на марката; той също може да бъде силно графичен елемент за множество приложения, като дизайна на ризата по-горе.

Когато работите с нарязан текст, потърсете естествена форма и наклон за нарязване, така че да е интересно да се гледа, като същевременно поддържате лекота за четене.

Обърнете внимание на начина, по който нарязването създава бяло пространство. Дизайнът по-горе използва широк отрязък от допълнителна информация вътре в него. По-честото използване на нарязване често е тънка линия, но подходите (както можете да видите от примерите в тази публикация) могат да варират доста драстично.

Създайте интерактивност

Позволете на потребителите да режат собствен текст с интерактивна комбинация от текст и четка, като например примера по-горе. Въпреки че текстът не е точно нарязан сам по себе си, ефектът се създава в процеса на създаване на изкуството.

Всякакви инструменти, които позволяват на потребителите да променят дизайна, могат да доведат до по-дълго време на сайта поради интерактивния компонент.

Нарязани вертикални удари

Вертикалните филийки обикновено са по-къси, тъй като всеки разрез е част от една буква.

Докато повечето дизайнери изглежда използват тенденцията по същия начин с по-хоризонтално ориентиран филийка, разфасовките също могат да бъдат вертикални.

Вертикалните филийки обикновено са по-къси, тъй като всеки разрез е част от една буква. Номерът за това, че вертикалните филийки работят, е постоянството. Начинът, по който се правят разфасовки, трябва да имитират една друга, така че буквите да изглеждат като че ли вървят заедно. Този метод на нарязване трябва да изглежда така, сякаш е почти предвидена част от шрифта. (Не в примера по-горе, че срезовете са с еднаква ширина от буква на буква и същите букви имат еднакви филийки.)

Установете визуален поток

Изрязването почти създава усещане за неотложност при четене, така че да премествате през буквите и върху главния визуален екран на екрана.

Едно от последствията от нарязания текст - предназначен или не - е, че той създава визуален поток. Потребителското око ще следи посоката на среза и бялото пространство около него.

Вижте логотипа в примера по-горе. С резени в R и o в Robocath (плюс нормалната липсваща част на c) има очевидно насочено дърпане през екрана отляво надясно.

Издърпването е по-силно от това, което свързвате с нормалното четене (също отляво надясно), защото резените ви прокарват бързо през героите. Изрязването почти създава усещане за неотложност при четене, така че да премествате през буквите и върху главния визуален екран на екрана.

Добавете акцент към надписите

Последната - и вероятно най-убедителната - причина да се използва тенденцията за дизайн на нарязан текст, е да се добави акцент върху буквите или съобщението. Нарязването може да бъде почти всяка промяна на букви, където част от символа липсва в дизайна.

MJND, по-горе, използва повече от слоевия ефект, за да скрие, или нарязани форми на букви, за да помогне да се добави акцент към съобщението. Изображението може лесно да свърши всички комуникации тук, но този ефект помага да се върне потребителят към основните съобщения. Комбинацията е проста, ефективна и визуално интересна.

Учебни ресурси

Има няколко начина за създаване на нарязани текстови ефекти за проекти, в зависимост от това какво точно се опитвате да създадете. Най-популярните опции включват създаване на текстовия ефект на ръка с помощта на софтуер за редактиране или използване на CSS за създаване на ефекта за уеб проекти.

Ето ръководства за всяка от тези опции, така че можете да опитате да създадете модерен ефект нарязан текст:

• Видео: Как да създадете нарязан текст в Adobe Illustrator
• Изрежете текстовия фрагмент с помощта на CSS

заключение

Използването на тенденцията за нарязан текст може да бъде малко сложно, защото включва промяна на елементи от типа. Важно е четливостта да не бъде загубена или да загубите потребителите с този ефект.

Нарязаните текстови ефекти обаче могат да бъдат забавно решение и да помогнат за генериране на фокусна точка. Добавянето на докосване на анимацията може да ви помогне да преминете и на следващото ниво. (Много от примерите, включени в тази публикация, правят точно това; не забравяйте да посетите тези уебсайтове и да кликнете върху тях.)