И вновь типографика. Эта тема настолько горячая и непростая, что о ней можно и нужно говорить много. И дело даже вовсе не в том, что причина разговоров в понимании и поиске идей для правильного или красивого подбора шрифтов для какого-либо интернет-проекта. Просто стилистика и тренды постоянно меняются. Даже более того, меняются взгляды и мнения о том,  художественным должен быть шрифт или строгим. Иными словами, речь идет не о том, что меняются технические требования, а о том, насколько меняются взгляды и мнения касательно художественности типографики.

Таким образом, подчиняясь общим правилам и аксиомам по размеру букв, их овальности,  х-высоте и прочему, сами шрифты могут быть самого разного вида: от каллиграфических до декоративных и моноширинных. При этом визуально их сочетания будут смотреться невероятно красиво, будто дизайнеры использовали даже не отдельный готовый шрифт, а просто создали отдельное изображение, леттеринг.

Сегодня мы хотим уделить внимание именно декорированию шрифтов и интересным идеям того, как сочетать их или украсить в Photoshop. Возможно, материал получит продолжение, ибо идей декоративности очень много, а использования их еще больше.

Декорирование шрифта

Декоративные шрифты имеют сложную популярность в среде веб-дизайна. Дело в том, что, с одной стороны – выглядят они простенько, с другой – слишком уж творческими. Так или иначе, но такой шрифт использовать сложно и надо хорошо представлять, какой именно вид декоративности подойдет для конкретного проекта.

Например, дизайнеры detheme, tequila mockingbird, moetbius, .earls использовали совершенно разные по стилистике декоративные шрифты. Какие-то из них сами по себе красивые, а какие-то были созданы, как изображение, а как самостоятельный шрифт не существуют. Но, тем не менее, надписи выглядят красиво и не создается впечатления, что стиль веб-дизайна несовременен и уныл.

Леттеринг

Еще один красивый стиль для типографики – леттеринг. Заметьте, не каллиграфия, а именно леттеринг, который создается только для данного конкретного изображения надписи и все. То есть, если обычный шрифт представляет собой набор букв, написание которых осуществляется по правилам для данного набора, то в леттеринге, наоборот, художником рисуется по отдельности каждая буква. При этом каждая такая буква может иметь множественные линии, украшательства и быть совершенно не похожей на прочие буквы, что используются в общем изображении.

В веб-дизайне леттеринг в чистом виде используется редко для оформления контента. Чаще его можно видеть в логотипах или в качестве оформления домашней страницы. Дизайнеры  подменяют леттеринг на рукописный шрифт, который в большинстве тоже рисуется на бумаге, сканируется и обрабатывается или используется шрифт попросту похожий на рукописный.

Например, это goldfront., brancottestate, rilke, hiddensocksclub.

Slab serifs

Тонкие, строгие шрифты с засечками олицетворяют собой мощь и силу проекта, поэтому обычно их стараются смешивать с похожими шрифтами, а никак не с противоположными. Более того, смотрятся они излишне строго и даже могут навеять чувство тревоги. Тем не менее, в последние годы такие шрифты используется все чаще и даже немного украшаются.

Посмотрите на madeinthefuture, nitwinski, grkfresh. На каждом из них строгие, плотные и серьезные шрифты выглядят весьма интересно. Они придают даже больше читабельности контенту, чем какой-либо иной стиль.

Scripts

Каллиграфический шрифт или рукописный становится с каждым годом известнее. Он красив сам по себе вне зависимости от стилистики, он придает немного шарма и изящества веб-дизайну, он также хорошо сочетается со строгими и брусковыми шрифтами, тем самым создавая интересные декоративные решения. Для наглядности montagebook, johnfrieda, candyscupcakes.

Художественные приемы типографики

Но и кроме того, что разные виды шрифтов используются по отдельности, можно увидеть веб-дизайн, где разные стили смешиваются друг с другом. Например, рукописный со строгим с засечками (amandaconti), жирный брусковый обретает сам по себе глянцевый эффект и дополняется как обычным шрифтом, там и каллиграфическим (eco-rating).

Но сам по себе шрифт и текст на холсте выглядят скучно, строго. Порой так хочется или нужно по тематике придать немного художественности: легкой и ненавязчивой (мы не говорим о тяжёлом 3D-эффекте). Тогда и появляются интересные решения, как на 3on Web Agency, Juste Debout, Baku City Circuit, Okkapi Agency (смотреть лучше самостоятельно, анимация превосходна), Bear Grylls.

Можно приводить еще много примеров, но смысл сводится к тому, что каким бы декоративным шрифт не был бы сам по себе, его можно интересным образом украсить, сочетать с другим по стилю, его также можно изменить. При этом аляповатости или безвкусицы навряд ли получится сделать, ибо даже если у дизайнера маловато фантазии, он будет видеть, что у него получается, а что нет, что лично ему нравится, а что начинает вызывать неприязнь.

Приемы Photoshop

Вот и подошли к торту.

По сути, создавать художественное оформление для шрифтовой пары не так и сложно, если представлять, как и что должно получиться в итоге. Например, частенько можно видеть, как текст становится частью сюжетного изображения, оплетая собой объекты и одновременно с этим переплетаются с другим шрифтом. Да, делается это с помощью масок, но и не только.

Для самого простого примера мы выбираем город, точнее, небоскребы. Наш текст будет оплетать небоскребы, проходить за зданиями и перед ними, но также он будет парить, а легкие и витиеватые элементы, уподобляясь лозе, оплетут всю композицию, оставляя при этом строгую стилистику художественного произведения.  Поэтому стилистику шрифта также нужно продумать. Для такого изображения, например, шрифты готические или с засечками будут не слишком хорошо выглядеть. Нужно что-то более строгое и каллиграфическое. Почему? Город, улицы, реклама… а как обычно выглядят неоновые вывески, что являются неотъемлемым атрибутом мегаполисов? Именно, рукописный стиль. Такие вот небольшие подсказки по ассоциациям и соответствию стилистике.

Открываем Photoshop и создаем новый чистый слой

И создаем два слоя с текстом, например, «город будущего» и «уже не за горами». При этом для первого текста шрифт можно выбрать более строгий, стилистически подходящий для городской тематики. Но вторую фразу можно написать рукописным стилем. Обратите внимание, что обычный арт-рукописный шрифт не подойдет, по той причине, что ему оплетать нечем. Нет у него дополнительных элементов, завиточков, окружностей и прочего.

 

После того как подобрали стили, переходим в «Свободное трансформирование» (Ctrl+T) и изменяем размер надписей, ширину, высоту так, как уже конкретно хочется и нужно именно вам.

По общему размеру они должны быть на весь размер нашего холста и одинаковой длины, дабы создать действительно красивое переплетение. Что касается цветов, то они выбираются не только разными, но и контрастными по отношению друг к другу. Например, мы выбрали чуть голубой и морской волны.

Теперь слой с рукописный текстом переместите в начало списка слоев, расположите поверх слоя с надписью «город» и, выбрав Свободное трансформирование, разверните ненамного текст, таким образом, чтобы элементы рукописного проходили сквозь строгие буквы нижнего слоя. Представьте себе, как это могло бы быть, если бы  один текст оплетал бы собой другой.

Назовем слой с рукописным текстом – Слой 1 и второй слой – Слой 2.

К Слою 1 добавим Маску, затем зажмем Ctrl и кликнем по Слою 2. Текст «город будущего» выделится, но, не снимая выделения, переходим на маску и нажимаем Alt+Backspace, чтобы наше выделение залилось черным цветом.  Снимаем выделение Ctrl+D. Таким образом, несмотря на то, что Слой 1 является первым, само его изображение оказалось за Слоем 2.

Увеличиваем все изображение и двигаем его в начало. Выбираем инструмент Кисть небольшого размера твердую с белым цветом. Находясь на активном слое-маске начинаем прокрашивать те детали и части текста, которые нам бы хотелось, чтобы были видимыми. То есть, те детали, что должны быть по задумке на переднем плане, мы и прокрашиваем по маске.

Некоторые буквы уместно прорисовать полностью, а некоторые просто созданы для того, чтобы обвить что-то собой.

Иногда возможны варианты лишних кусочков. Тогда удобно выбрать Перо и выделить такой кусочек. Затем кликаем ПКМ по контуру и выбираем «Залить контур», черным цветом.  Удаляем оставшийся контур. Это гораздо удобнее, чем выбирать размер кисточки, переключаться на белый цвет и прокрашивать детали Слоя 2. 

 

Кроме того, суть прорисовки не только в том, чтобы создать оплетение, но и чтобы любой человек без труда мог при беглом взгляде прочитать то, что написано и не задумываться, какая же буква скрывается.

По факту весь художественный эффект завершён, но давайте взглянем, как это можно использовать на фотографиях для оформления дизайна сайта. Мы подобрали обычную фотографию города, специально контрастную для нашего текста для наглядности. Но сам текст, разумеется, может иметь совсем иные цвета на ваш вкус.

Объединяем наши текстовые слои в группу, а фоновому слою даем название «город». Для группы временно уменьшаем непрозрачность на 50%, чтобы слой с городом был виден и подбираем наилучшее расположение по вертикали. Можно также использовать для группы Свободное трансформирование и увеличить или уменьшить размер надписи. Двигая текст, таким образом, можно увидеть новые идеи для художественного оформления, поскольку переплетение двух надписей слишком простое и несложное само по себе.

Теперь…

Например, пусть небоскреб будет виден. Добавляем маску к группе текстовых слоев, выбираем Перо, обводим контур небоскреба и, кликая ПКМ по контуру, заливаем черным. Вроде все ОК, но вот незадача.

 

Хорошо бы, чтобы текст еще и читался. Выбираем нужный текстовой слой из группы, кликаем по нему с зажатым Ctrl и видим выделение. Переходим на слой-маску к группе, выбираем кисточку с черным цветом и по выделению прорисовываем детали. В случае, если нужны элементы букв другого слоя, то аналогично также делаем выделение и по общей маске проходимся кисточкой. Такой способ проще и быстрее, чем выбирать удаление и добавление выделения и прочее.

Замысловато, но наш текст все еще имеет слишком неподходящий вид для конкретного фона и вся композиция для использования в веб-дизайне еще не готова. Поэтому выбираем каждый текстовой слой по отдельности, дважды кликаем по нему и в открывшемся окне наложения выбираем «Наложение цвета» и остальное под настроение. Что касается цветов, то поскольку фотография создана в коричневых оттенках, то добавление даже красного или синего превратит все произведение в аляповатость. Остановимся на таких же бежевых тонах.

 

Заключение

Художественные эффекты в типографике не так часто используются веб-мастерами в силу самых разных причин. Для одних – это слишком вычурно и не отвечает трендам, для других – сложно и утомительно в создании, для третьих – нет требований со стороны заказчика/клиента. С другой стороны, использование художественной типографики предполагает, что и весь сайт, как минимум, будет кое-где, но иметь отдельные элементы аналогичного оформления. Например, первые буквы заголовка окажутся переплетенные или уголок фонового изображения будет украшен стилизованной буквицей.

Также можно видеть и  иные по стилю веб-дизайны, когда начальная страница оформляется до безобразия художественно, а внутренние страницы минималистичны, скромны, плоски и безумно трендово могут выглядеть. Почему именно так? Начальная страница сайта, домашняя, загрузочная – как обложка для книги. Как часто обложки для книг создаются привлекательно красивыми? А как часто на страницах существует интересный именно для нас текст? Вкусы разные у всех, да, но если подумать об этом обобщенно?…

С веб-дизайном то же самое. Начальные страницы создаются всегда привлекательными и красивыми. Поэтому у кого-то на сайтах красивые каллиграфические надписи, логотипы в ретро-гранж-стиле, художественные сочетания, анимация или даже мини-игры. Но что касается типографики, то творить красоту для нее гораздо сложнее. Здесь мало обойтись наложениями и смешиванием слоев, добавлением фильтров и прочего.

А то касается тематики или уместности использования «художественности», то... красивые элементы уместны всегда. Другое дело подобрать подходящее для темы, для общей наполненности контента. А по сути,  и интернет-магазин можно украсить... не всегда же создавать логотипы и заголовки с обычными строгими жирными шрифтами в стиле Arial.