В последние несколько лет мы стали свидетелями того, как рукописный текст и каллиграфия стали возрождаться в поп-культуре. Разумеется, что это отразилось и на веб-дизайне. Но что такого особенного в каллиграфии и почему веб-мастера используют её в своих проектах, даже несмотря на то что, как правило, на сайте применяется два обычных шрифта для контента? Что такого необычного для типографики скрывается за каллиграфией и леттерингом?
Чтобы во всем разобраться, давайте определим разницу между леттерингом и каллиграфией. Леттеринг – общий термин, применяемый к процессу создания текста и написаний. Даже чаще называют «рисованием» букв. Это может быть рисунок из букв, вышивка их, художественная обработка. Каллиграфия же – это не более чем стиль написания, создания некого текста. Хотя все же существует некоторый аргумент, четко разделяющий леттеринг и каллиграфию. Каллиграфия часто ассоциируется с единым движением, стилем, в котором создаются все буквы алфавита.
Фундаментальные знания
Использовать каллиграфический шрифт для заголовков, логотипов, небольших блоков контента – это просто, популярно и зачастую не требует того, чтобы веб-дизайнер задумывался о каллиграфии в целом. Но если все же углубиться в прошлое и немного изучить вопрос типов конструкций и написания, то можно более осознанно и творчески подойти к вопросу применения каллиграфии в проекте. Стилей самой каллиграфии очень много и все они разные, поэтому не лишним (как нам кажется) будет иметь возможность немного рассортировать такую информацию.
В 2012 году Chavelli Tsui (выпускник Cooper Type) сказал: «Чтобы сделать документы и блоги лучше с помощью рукописного текста, необходимо понимать формы букв и как они формируются. Почему некоторые части одной буквы толстые, а некоторые тонкие? Недостаточно знать историю написания. Необходимо знать инструменты, сформировавшие формы написания. Понимание форм букв имеет особое значение для творческих людей независимо от того, каким инструментом они пользуются, будь то карандаш, перо, кисть или кривая Безье». Набор инструментов для каллиграфии и леттеринга действительно впечатляющий. Тем более, что такое творчество не может базироваться только на работе в Photoshop.
Когда мы начинаем писать буквы, то знаем только фактический их вид, но не представляем, по сути, как может выглядеть написание каллиграфией. Например, строчная «g» может выглядеть по-разному. Дело в том, что, будучи пользователями, мы потребляем все очень быстро. То же относится и к рукописному вводу. Наша цель – передать информацию, а не привлечь внимание, отвлекая от логотипа, меню, разделов, иконок и прочего. Именно поэтому стоит обратить особое внимание на базовую архитектуру каллиграфических букв с тем, чтобы при использовании на сайте леттеринга или шрифта они не отвлекали посетителей от главного, чтобы подача информации была эффективной.
В каллиграфии проще изучать общие части между группами букв, что означает анализ порядка и направления штрихов, с помощью которых и формируется письмо. Комбинирование цели и средств написания дает возможность понять, должно ли быть у строчной «g» «ушко» и какого вида. Проведем аналогию. Вспомните засечки в некоторых шрифтах. Они способствуют удобочитаемости при малых размерах шрифта. Также и небольшие штрихи в каллиграфии – не только элементы красоты.
Использование каллиграфии
Как мы уже упоминали выше, одна из главных целей леттеринга и стиля – быстрая и эффективная передача информации. На логотипе можно «заковыристо» и витиевато написать от руки название компании, но смогут ли его прочесть пользователи? В результате нет никакого смысла в использовании каллиграфии, если каждую часть придется создавать вручную (леттеринг и изменение готовых букв). Именно поэтому в мире существует огромное количество готовых каллиграфических шрифтов с уникальными характерами, что и делает их эффективными в передаче информации и легкости визуального восприятия.
И все равно в теле страниц сайта, в общем потоке контента не часто можно увидеть рукописный текст. Дело в том, что в использовании большого количества каллиграфии нет смысла, ни экономического, ни художественного или ориентированного на пользователя. Тем более что в современности каллиграфией повседневно не пишут, а значит «сходить с ума» на сайтах тоже нет смысла. Но, как элемент оформления, каллиграфия прекрасна и незаменима.
Каллиграфия используется в заголовках, логотипах, названиях, создавая тем самым контраст между единообразными стандартизованными буквами и рукописными. Меньшее количество глифов требуется там, где глаза читателя смогут запутаться между несоответствиями форм и где наше подсознание ожидает видеть общие элементы. Например, если вы описываете виды услуг в столбик с иконками, то использовать несложную каллиграфию можно. Это выделит и акцентирует внимание посетителей. Но если вы рассказываете о компании, контактах или конкретно об услуге – каллиграфия более чем неуместна.
Если конструкция небольшая, тот же логотип, то возможностей для творчества больше. Идеи такому творчеству скрываются в плакатах и объявлениях начала ХХ века. В то время способности к рисованию и написанию открывали большие возможности для получения прибыли и нахождения работы. Вот, например, небольшое объявление, опубликованное в сентябре 1900 года в журнале The Penman.
Обратите внимание, что конструкция несложна, а информация представлена настолько просто, что сообщение быстро усваивается, написание сохраняет свою уникальность и творческий подход. При этом использованы сочетания разных стилей написания, которые позволяют проследить их происхождение из разных типов каллиграфии.
Дело в том, что, смотря на типографику, мы видим эхо систем каллиграфического письма, которые были постепенно разработаны более сотни, а то и тысячи лет назад. Если глубже ознакомиться с возникновением стилей, можно научиться понимать более обоснованные решения их сочетания, типах, характерах написания и строительства конструкции в целом.
Каллиграфия в веб-дизайне
Типографика – своего рода, одно из важнейших средств массой информации. И стиль её может очень многое сказать о рынке или целевой аудитории бизнеса, организации, об успешности, вызывать доверие посетителей или отталкивать их. Каллиграфия устраивает не каждый бизнес, но существуют варианты, когда она подходит более чем эффективно.
Сатоси Курода (кино-художник и арт-директор) использует каллиграфию на своем сайте в заголовках и названиях разделов, в меню. Также большими буквами оформлена и начальная станица.
Интерактивность – сочетание жёлтой каллиграфии на почти черном фоне придает сайту элегантность и изысканность. При этом стиль каллиграфии используется до безобразия простой, но выглядит воздушно и изящно, а также достаточно четко, чтобы была возможность прочитать витиеватые буковки.
Сайт публичного кафе Петухи (Publik Coffee Roasters) решил сочетать несколько разных типов каллиграфии. Один шрифт для логотипа, другой используется в заголовках на всем сайте. Стоит заметить, что основная информация все же остается написанной стандартным строгим шрифтом.
Веб-дизайнеры сайта кондитерской компании Lapa-Tuki решили использовать не привычную каллиграфию, а нечто среднее между стандартным и рукописным шрифтом. Чистый и читаемый – его можно видеть на всем сайте, но некоторая информация все же была написана обычным стилем.
Также представляют интерес проект Love Beets, Hublot Loves Football, Bernard Magrez (производитель французских вин), Pauline Osmont, Amazee Labs. Все они являются личными сайтами или сайтами компаний, но каллиграфия успешно использована и там, и там.
Photoshop
Работать с каллиграфией непросто. Если есть желание просто написать пару слов, то достаточно подобрать шрифт и не изменять контуры каждой буквы. Если же появляется желание изучить вопрос работы с каллиграфией глубже, обучиться леттерингу, то придется заниматься конструированием, рисованием от руки фломастерами и кисточками, изучать вопросы особенностей написания и сочетания разных по толщине линий, и многое иное. Мы не будем останавливаться сейчас на этом. Но кое-что мы вам покажем. Не слишком сложное, не слишком новое, но интересные сочетания эффектов и глифов, каллиграфии и шрифтов для заголовков, логотипов, названий.
Вариант 1. Мы нашли шрифт Boyarsky и набрали им словосочетание. Затем кликаем ПКМ по текстовому слою на панели слоев и выбираем преобразовать в кривые. С помощью Пера и зажатия кнопок Ctrl (передвинуть точку) и Alt (движение направляющих) мы меняем готовые контуры глифов на те, что нам более подходят и интересны. При необходимости создаем опорные точки или удаляем. Таким образом, можно на базе готового написания создать нечто новое и действительно уникальное.
Вариант сложен, ибо требуется ясно и четко представлять, что хочется видеть в итоге и уметь работать с контурами и Пером. Лучше будет, если образец будет готов на бумаге, чтобы редактировать контур отсканированного изображения было удобнее.
Вариант 2. Возьмем обычную стандартную жесткую кисточку и развернем её в настройках на 38-40 градусов, сделаем тоньше на 20%. Затем просто нарисуем письмена на чистом слое, вспоминая школьную программу и добавляя разные элементы. Дополнительно кисточку можно менять по положению и толщине.
Не сказать, что вариант проще. Дело в том, что каллиграфические письмена очень плавные и если у вас мало навыка писать с помощью мышки, то глифы получатся корявые, угловатые. Вариантом здесь может стать использование графического планшета, что позволит писать стилусом так же, как и ручкой, а значит, рукописный текст будет получаться плавным.
Вариант 3. В самом Photoshop есть готовые каллиграфические кисточки. И подбирая подходящие, также можно создавать письмена. Обратите внимание, что форма кистей при заготовленном размере уже создает при рисовании штрихи разной толщины.
Как в случае и с вариантом 2 рисовать будет сложно, если практики до этого было мало или не было вообще. Разумеется, куда проще нарисовать на бумаге, отсканировать и обработать. Или подобрать готовый шрифт.
Эффекты для рукописных букв
Но написание фразы или названия – это еще «полбеды». Иногда хочется оформить как-нибудь очень уж красиво. Выберем шрифт и напишем слово или букву. Изменим её по желанию через редактирование контуров или сразу переводим в смарт-объект. Мы немного её изменили, после чего смарт-объектом слой стал автоматически.
Подбираем красивое изображение в желаемой цветовой гамме. Это может быть все, что угодно. Открываем изображение в Photoshop и копируем его на новый слой нашей работы. Теперь: на панели слоев делаем его активным, а сами зажимаем Ctrl и кликаем по слою с буквой. Её контур-выделение появится поверх нашего арта.
Добавляем к слою с изображением маску и видим, как проявилась буковка. Теперь разъединяем (снимаем скрепочку) слой с изображением и маску и отключаем слой с буквой. Фон можно двигать и подобрать то, что более подходит по цветности.
Как только подобрали, кликаем ПКМ на маске и выбираем «Применить слой-маску». У нас создается растровый слой с одной буквой и текстурой.
Открываем Фильтр -> Пластика. И аккуратно с помощью инструмента Деформация размазываем фон буквы. Размер инструмента меняем стандартно квадратными скобками и при желании можно изменить форму или дорисовать завитки. Нажимаем Ок.
Вот такая буква и получилась. Некоторые скажут, что есть инструмент Палец. Его присмотреться, то его можно увидеть. Это те участки, где края и размытие получилось замыленным. Отличие от Пластики как раз и состоит в нем – в замыленности. Пластика позволяет преобразовывать элементы и оставлять их резкими и четкими. Палец же, независимо от выбора кисти в верхней панели настроек, все равно размывает края, делая букву не слишком-то красивой.
Таким образом, если Пластика получилась где-то неровной, то править его необходимо исключительно опять же в Пластике, а не Пальцем или кистью.
Выводы
Каллиграфия, как один из стилей написания, наверное, один из сложнейших. Её можно выучить, но без чувства создания, без художественного видения создать самостоятельно леттеринг не получится. Зато можно модифицировать шрифты и накладывать эффекты. Все зависит от того, что хочется создать. Если нужен обычный текст витиеватыми буковками, то достаточно подобрать шрифт и написать его. Если что-то креативное, то придется посочинять и «посходить с ума» в Photoshop.
Так или иначе, но каллиграфия в веб-дизайне используется и по сей день. Нельзя сказать часто или редко. Она специфична. Как специфичен и стрит-арт, и мелкий текст, и даже неоновые цвета. Но все они имеют свою долю в сфере веб-дизайна, а потому фантазировать в свободное время и пополнять копилку умений никогда не бывало лишним. Авось и пригодиться.