Как создавать собственные шрифты: 7 шагов и 3 примера из практики

Давайте смотреть правде в глаза; есть шрифты, которые мы, дизайнеры, любим ненавидеть. На самом деле, слово «ненависть» может быть недостаточно сильным. Плеть? Проклинать? Чума? Экскременты? Я слышал, что каждый из них оскорблял неодушевленные буквы, цифры и символы, которые мы используем для передачи идей, и я полностью это понимаю. Я видел (и совершал) такие ужасные преступления, что даже самый диковинный офисный бюллетень был бы смущен.

Но что, если я скажу вам, что самые ненавистные шрифты нашего поколения на самом деле могут быть лучшими друзьями дизайнеров брендов? Что, если я покажу вам, как превратить тусклые буквы в сочные логотипы, которые понравятся клиентам (и за которые они будут платить хорошие деньги)? Готовы ли вы радикально изменить свой взгляд на шрифт и открыть для себя бесконечно расширяющуюся вселенную творческих возможностей? Готовы сделать свой собственный шрифт?

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

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

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

Наконец-то крутой и непоколебимо казуальный типографский преступник, не нуждающийся в представлении — единственный, единственный, Comic Sans .

Из этой маловероятной группы я научу вас видеть сокровище там, где другие кричат ​​«мусор!» и создавать собственные логотипы самого высокого уровня.

Простой и надежный процесс

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

Рекомендуемая настройка

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

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

Джокерман — от грубого к классному

Джокерман — это Джим Керри среди шрифтов: никогда не утонченный, громкий под любым углом, но при этом странно привлекательный для масс. Это нелепо и чрезмерно, и это именно тот шрифт, для которого был создан этот урок. Дурацкие шрифты, такие как Jokerman, битком набиты любопытными элементами дизайна, но им не хватает сдержанности, необходимой для стильного логотипа. Как дизайнеры, мы должны проявлять здравый смысл, а это часто означает отказ от деталей ради более четкой коммуникации.

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

1. Обзор шрифта

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

2. Идеи

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

3. Искажение шрифта

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

4. Эскиз исправления

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

5. Эскиз уточнения

Это последний этап наброска и уточнения в Photoshop. Уберите все, что не работает, и заполните буквы, чтобы вы могли лучше понять форму и соотношение пробелов между буквами.

6. Векторная трассировка

Поместите свой уточняющий эскиз в Illustrator, вытащите инструмент «Перо» и осторожно кликните по пути к красивым кривым Безье.

7. Последние штрихи

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

Папирус — тонкая трансформация

Признание: Мне нравится Папирус, и мне все равно, кто знает. Серьезно, не все шрифты, которые нам, дизайнерам, нравится ругать, на самом деле так уж плохи. Злоупотребление? Может быть. Китч? Хорошо, да. Но только потому, что шрифт заставляет кого-то почувствовать, что его незрелый дизайнерский документ имеет достоинство, не означает, что он плохой. Вот как я отношусь к Папирусу. Это похоже на классическую рубашку, которую я купил в Old Navy: она хорошо сидит и делает меня презентабельным для особых случаев.

Тем не менее, у моей классической рубашки нет преднамеренно потертых краев. Итак, давайте посмотрим, сможем ли мы сохранить красивые части форм букв Papyrus, сделав общий вид более современным.

1. Обзор шрифта

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

2. Идеи

Достаньте планшет Wacom и быстро набросайте несколько композиционных идей. Не переусердствуйте с этим шагом. Это как рисовать свое имя в блокноте.

3. Искажение шрифта

Как и в случае с Джокерменом, масштабируйте, растягивайте, наклоняйте и сдавливайте каждую букву поверх созданного вами эскиза идеи. Будет грязно, но не волнуйтесь!

4. Эскиз коррекции

Из всех шагов этот может показаться самым сложным, но не подчеркивайте его.

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

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

5. Эскиз уточнения

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

6. Векторная трассировка

Поместите уточняющий эскиз в Illustrator и начните векторную трассировку с помощью инструмента «Перо».

7. Последние штрихи

Закончив векторную трассировку, оживите свой логотип, добавив такие детали, как цвета, тени, блики и контуры.

Comic Sans — Как погладить мятую рубашку

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

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

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

1. Обзор шрифта

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

2. Идеи

Идеи — это время, чтобы высвободить свою рискованную художественную сторону. Вы можете безжалостно отредактировать себя позже, а пока рискуйте.

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

3. Искажение шрифта

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

Введите слово, растрируйте шрифт и исказите эти буквы до чертиков.

4. Эскиз коррекции

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

5. Эскиз уточнения

Долгое время я переходил непосредственно от шага « Корректирующий набросок » в Photoshop к « Векторной трассировке» в Illustrator. Но когда я впервые увидел свои векторные буквы заполненными, они всегда выглядели немного странно.

Этот шаг уточнения — отличный способ убедиться, что ваши буквы расположены правильно. В конце концов, формы, образованные между буквами, так же важны, как и сами буквы.

6. Векторная трассировка

При использовании инструмента «Перо» можно легко отключить мозг. Вы начинаете указывать, щелкать и перетаскивать маркеры и перестаете искать способы улучшить свой дизайн.

Не делай этого! Когда вы рисуете от руки, вы постоянно принимаете решения и исправления за доли секунды. Вы должны использовать инструмент Pen аналогичным образом.

7. Последние штрихи

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

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

Возможность нежелательных вещей

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

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

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

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

• • •

Дальнейшее чтение в блоге Toptal Design:

• UX электронной коммерции — обзор лучших практик (с инфографикой)
• Важность ориентированного на человека дизайна в дизайне продукта
• Лучшие портфолио дизайнеров UX — вдохновляющие тематические исследования и примеры
• Эвристические принципы для мобильных интерфейсов
• Упреждающий дизайн: как создать волшебный пользовательский опыт