Одно дело – работать над типографикой для того или иного проекта, и совсем другое – добавлять к этой самой типографике какие-либо художественные эффекты. Именно такое творчество способно быть интересным, захватывающим, но одновременно удручающим и утомительным для веб-дизайнеров. Клиенты зачастую требуют теней, тиснения, глянца, которые попросту угрожают разрушать всю созданную дизайнером красоту. Иногда попытки пояснения неприемлемости использования некоторых текстовых эффектов удаются. Но не всегда.
И именно поэтому в арсенале каждого веб-дизайнера существует небольшая коллекция универсальных типографических эффектов, что отлично подходят почти для каждого проекта, стиля, сочетания трендов. При этом они позволяют сделать так, чтобы и клиент оставался доволен и сайт выглядел безумно современным.
В этом материале мы и рассмотрим некоторые такие типографические эффекты, которые помогают и дизайн «оживить», и выглядят вполне себе брутально, и, главное, клиенты останутся довольны.
Особенности художественных эффектов типографики
Трюк всех эффектов типографики в том, что использоваться они должны под конкретную цель, а не ради того, чтобы было «для галочки». Хорошая типографика не нуждается «в помощи», в понимании, в дополнениях или пояснениях с помощью графики или цветов, кнопок и всякого разного. Если выбранный шрифт не способен отработать в одиночку, ему уже никакие эффекты не помогут. Вы только сделаете хуже. То же самое касается и использования двух шрифтов. Если они не подходят визуально друг к другу, то, как бы вы их не окрашивали, не ретушировали – все одно, общий текст будет не читабельным, не воспринимаемым сознанием пользователя.
Пример сочетания множественных эффектов с нашим знакомым волком. О нем отдельно уже в конце.
Лучшие, отличные, подходящие текстовые эффекты, это те, что незаметны простому обывателю. Или заметны, но обыватель понимает, что данный красивый текст имеет особое значение, и этот эффект его (значение) подчеркивает. Так какие это могут быть эффекты?
Тени
С учетом современных реалий лучшая тень это та, которую почти не видит даже дизайнер. Техника затемнения лучше срабатывает и смотрится хорошо тогда, когда помогает создать глубину между текстовым слоем и фоном, выступая в роли некоторой «прослойки». Для дизайнера, это, несомненно, использование именно эффекта тени в Photoshop, но пользователь не должен осознавать, что это именно тень. Поэтому обычно тень сильно размывают, создавая мягкий (soft) элемент, который способен отделить текстовой слой от фонового.
Независимо от того, в чем вы работаете, не создавайте тень для текста автоматически или со значениями по умолчанию. Такие вариации выглядят дилетантскими. Лучше уделите время и настройте параметры размаха тени, жесткости краев, градиентности от темного к светлому. Таким образом получится создавать эффект ретро-стиля, трехмерности, объемности, многослойности.
Для наглядности посмотрите на проекты rightwaysigns, Fully Decked Up, Meissl & Schadn, Luminato Festival, den Eelder, Friluftsland - Danish retail, где тень в большинстве случаев едва заметна, и то только на светлом фоне. При этом дизайн не кажется каким-то вычурным или устаревшим. Все очень строго, простенько, даже… «скучноватенько».
Яркость, цветность и неон
Добавьте к надписи интересные эффекты яркости, градиента, штриховки и придайте глубину. Насыщенность и «тяжеловесность» способны создать ретро-стилистику или нечто, подобное световым вывескам прошлого века. Эффект неона может восприниматься совсем иначе, если сочетается со штрихами, контурами. Таким образом, удается создать совсем иной дизайн сайта, придать ему совершенно иное чувство и характер. С одной стороны, будет казаться, что это ретро и дизайн немного устарел, с другой, наоборот, все будет буквально кричать о том, что это «современный неон».
Дизайны сайтов cyberpwnkrun, Benji Messmer, Toonami 2018, Urgent, Niika, Soirée Quinze Minutes, Neon Plus явное тому подтверждение. Более того, среди всех этих примеров можно увидеть использование неона не в чистом виде, с ореолом свечения, а своего рода «псевдонеон», что создавался с помощью ярких линий многослойной надписи (Benji Messmer). И этот эффект также выглядит весьма красиво и современно.
Текстурированние текста
Некоторые шрифты изначально создаются с винтажным или рукописным начертанием. Иногда такие шрифты дополнительно усовершенствуются, чтобы их было интересно использовать в веб-дизайне. Но в любом случае добавление текстуры в виде изображения внутри шрифта или элементов, созданных из надписей, может сделать дизайн немного более осязаемым. Текстура в данных случаях позволяет сделать надпись более выделяющейся, яркой, главной и притягательной.
Если посмотреть на проект tofinoresortandmarina, то можно увидеть текстурную первую часть заголовка, что обретает некий ретро-стиль и ощущение потертости временем. И вторую часть, что напоминает мазки акварелью, прозрачные и рукописные, будто писали кисточкой по бумаге.
Аналогично текстурность применялась и в проектах Belgium WW2, HASSYADAI Inc., LA Homelessness Challenge, Endless Stories, Xander Beer, и при этом, где-то она была добавлена специально, так как сама тематика имеет исторический аспект, а где-то не более, чем красивая стилизация.
Брендинг
Когда дело доходит до создания аккуратного текстового эффекта, естественным решением является брендинг (логотип). Бренды могут способствовать изменению или настройке шрифта, благодаря чему добавляется уникальный персональный символ для надписей, который становится запоминающимся. Да, к такому эффекту невозможно относиться легкомысленно и «напихивать» его в каждый маломальский дизайн. Но такой вариант может послужить хорошему и онлайн-маркетингу, и ребрендингу, и обновлению только дизайна сайта, и изменению некоторых надписей.
Изменение буквы или персонажа-символа бренда нужно делать осторожно и, по возможности, сообщать об этом клиентам и пользователям, чтобы вдруг им не почудилось, что той компании и сайта, которых они знали ранее – уже нет. Если более детально подходить к изменению букв, то желательно иметь контакт с типографом, создателем оригинального шрифта, чтобы результат действительно получился отличным. Не каждый дизайнер сможет хорошо самостоятельно изменить букву. Кроме того, применять такие буквы нужно очень ограниченное количество в пределах одного дизайна.
Отличными примерами могут стать brandmeyou, mend-seltzer, lumen-hub, botot, Arrels Restaurant, murmure. В большинстве случаев изменения типографики приходились либо на одну-две буквы в середине слова, либо на первую букву бренда. Но они оставались узнаваемыми, читабельными и при этом обретали новый вид, некоторую «свежесть».
Радуга цветов
Цветные шрифты – это шрифты, что уже имеют в своем начертании несколько цветов. Не только оттенков, но и цветов, и градиентов, текстур и даже прозрачность. Дизайнеры пользуются обычно либо готовыми шрифтами, как например, акварельный, или создают собственный, или же, как вариант, стараются применить отдельные эффекты. Вообще, о цветных шрифтах тема отдельная и мы о ней в будущем будем еще посвящать материал.
Особенность такого эффекта в том, что при использовании большого количества цветов, все они должны быть на поверхности надписи. Яркие, живые, насыщенные цвета модны в этом году и они не будут восприниматься пользователями, как некоторая аляповатость, по той причине, что за прошедшие полгода мы уже привыкли их видеть. Эти яркие цвета.
Главное – убедиться в том, что цвет используется таким образом, будто он именно здесь, и именно такой и нужен был всегда. Не стоит среди сиреневого фона размещать зелено-красно-желтую надпись. Как минимум, все сольется, и понять, где и что станет сложно. Контраст нужен. И да, если просто раскрасить шрифт Helvetica, то это будет не то же самое, что отдельный готовый шрифт Gilbert, например, или bungee (доступен онлайн), guru. Хотя, самостоятельным эффектом добиться похожести можно и пользователи не заметят особой разницы.
Увидеть использование эффекта многоцветности можно на bixacolor, Turó, Bikini Moon, Types of Type, Made by Few, kotobana.
Два слова перед…
Кроме того, следует помнить и о таком эффекте как двойная экспозиция (о ней мы уже говорили ни один раз), который позволяет и изображение представить, и в тоже время вырезать из него буквы, создавая, тем самым, некоторую надпись, заголовок, логотип. Также существуют вариации с добавлением анимации и интерактивности. И поскольку анимация в веб-дизайне вещь уже достаточно обыденная, то применимо к типографике существует только одно «но». Буквы должны читаться и значение слов должно быть понятным, поэтому скорость анимирования не должна быть высокой. Также буквы шрифта могут сочетаться с какими-то элементами, фигурами.
Иными словами, вариаций разнообразить шрифт и придать ему художественный эффект невероятно много, но существуют моменты, когда вообще никакие эффекты не требуются.
Целостность
При достаточном контрасте фона к форме букв, размеру и цвету, текстовые элементы и фон имеют естественное разделение. Не использовать эффекты может быть также сложно, как и их применение. Но чем больше вариаций контраста, тем лучше для чтения. Необходимо четко спланировать работу всех элементов дизайна, чтобы они создавали единое целое. Где-то жирный шрифт, где-то тёмное на светлом или сочетание светлых полутонов.
Например, университет Эссекса как раз и применил белый жирный шрифт на контрастном алом фоне. Аналогично, без эффектов сознаны Dreamsdesign, c-m-d, Gino Angelini Foods, Quantified Planet. Контраст фона и шрифта позволяют избежать долгой работы над спецэффектами. Но…
Вывод
Проблема с текстовыми эффектами заключается в том, что все «тенденции» приходят быстро и уходят, практически, моментально. Как, например, эффект длинной тени, который существовал некоторое время назад. Сейчас он неуместен, хотя иногда дизайнерам удается использовать его, и весьма интересно. Использование «тяжелых» художественных эффектов для типографики может привести к тому, что дизайн превратится в устаревший и «убогий». Поэтому стоит быть острожным. Отдыхать и смотреть свежим взглядом на то, что получается.
Помните, что тонкость работает в вашу пользу. Легкость и незатейливость. Любой эффект типографики должен быть воздушным визуально. Возможно, что цветные шрифты не подходят для дизайна ресторана, но подумайте о текстуре или двойной экспозиции. Откажитесь от анимации и неона. Но слегка размойте тень, приподнимая текст над фоном, создавая более четкие очертания (наш волк, как вариация).
Таким образом, и клиент будет доволен тем, что есть такие любимые им тень, тиснение и глянец; и вы будете знать, что создали современный дизайн, модный и даже с художественными эффектами.