Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Design & Illustration
  2. Adobe Illustrator

Как создать цветной шрифт при помощи Adobe Illustrator и Fontself Maker

by
Difficulty:IntermediateLength:LongLanguages:
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Russian (Pусский) translation by Anastassiya Abramenko (you can also view the original English article)

Final product image
What You'll Be Creating

Создание шрифтов стало таким быстрым, увлекательным и простым с Fontself – мощным расширением для Adobe Illustrator и Photoshop CC. В этом руководстве вы узнаете, как создать цветной шрифт. 

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

Помимо создания цветных шрифтов в Adobe Photoshop CC 2017/2018 и Adobe Illustrator CC 2018, вы можете использовать Fontself для создания стандартных бесцветных векторных шрифтов, которые можно применить в любом программном обеспечении, в том числе в старых версиях приложений Adobe CC apps, CS6, Microsoft Word и многих других.

fontself

Готовы попробовать? 

Тысячи творческих людей из Adobe, Google, Apple, Microsoft и других известных компаний уже используют Fontself.  Здорово, что это ПО на 100% независимое, т.к. было создано тремя увлечёнными разработчиками с целью дать нам удобный в использовании инструмент для создания шрифтов. И они это сделали!   

Давайте пройдём сквозь весь процесс создания и применения нашего собственного шрифта в Adobe Illustrator CC 2018 и Fontself Maker!

1. Как нарисовать букву А 

Шаг 1

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

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

Имейте в виду, что Fontself Maker работает с Adobe Illustrator CC 2015.3 и новее, но чтобы использовать цветные шрифты, вам понадобится версия CC 2018, поэтому не забудьте обновить ПО, если ещё не сделали этого! 

font sketch

Шаг 2

Начните с создания Нового документа нужного размера в Цветовом режиме RGB. Если вы выбрали другой Цветовой режим, все цвета будут переведены в  RGB, даже если определилось в CMYK или если документ в модели цветоделения CMYK.  Вы можете узнать больше о модели цветоделения в Fontself на их справочной странице.  

Давайте начнём с буквы А. Возьмите Инструмент «Многоугольник» (вы можете найти его в том же выпадающем меню, где и Инструмент «Прямоугольник» (М)) и кликните в любом месте Монтажной области. Установите количество Сторон на 3 и создайте треугольник. 

Удалите цвет Заливки и установите цвет Обводки на тёмно-фиолетовый на панели Цветов. Теперь на панели Обводки (Окно > Обводка) установите Толщину 2.5 и Углы на Скруглённые

Теперь можем удалить нижнюю часть фигуры, которая нам не нужна. Возьмите Инструмент «Прямое выделение» (А) и нажмите на нижний край треугольника. Нажмите клавишу Delete (или Backspace, если у вас Mac), чтобы удалить его.

use the polygon tool

Шаг 3

Выделите фигуру при помощи Инструмента «Выделение» (V) и нажмите Enter, чтобы открыть окно Перемещения. Установите значение Горизонтали на 25 пикселей и Вертикали – на 0 пикселей, затем нажмите «Копировать» для создания копии фигуры и сдвиньте её вправо.  

move the shape

Шаг 4

Выделив обе фигуры, возьмите Инструмент «Создание фигур» (Shift-M) и, удерживая Alt, кликните на правой части, чтобы её удалить. 

use the shape builder tool

Шаг 5

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

Сгруппируйте (Control-G) созданные элементы пера и дважды кликните на Инструменте «Зеркальное отражение» (О). Выберите Вертикальную ось и нажмите «Копировать» для отражения фигуры на противоположной стороне. 

use the reflect tool

Шаг 6

Возьмите Инструмент «Эллипс» (L) и, удерживая Shift, создайте круг 10 х 10 пикселей с тёмно-синей обводкой и бирюзовым цветом Заливки

Совет: используйте Инструмент «Пипетка» (I) для выбора цвета заливки или обводки, либо других визуальных настроек и применяйте эти цвета к другим объектам. Вы можете перейти к настройкам Инструмента «Пипетка (I), дважды кликнув на панели Инструментов и затем выбрав параметры, которые вы хотите применить. 

add circles with the ellipse tool

Шаг 7

Скопируйте обводку, выделив её и перетащив на сторону, удерживая Alt. Используйте Инструмент «Перо» (P) для добавления опорной точки в середине линии. Затем примените Инструмент «Удалить опорную точку» (-), чтобы удалить верхнюю точку обводки. 

add another stroke

Шаг 8

Возьмите Инструмент «Перо» (P) или «Отрезок линии» (\) и, удерживая Shift, создайте горизонтальную линию поперёк буквы. Это будет перекладина буквы А. 

Скопируйте (Control-C > Control-F) обводку и перетащите её вниз. Сделайте её короче, сдвинув точки Инструментом «Прямое выделение» (А). 

add the bar of the letter

Шаг 9

Теперь Инструментом «Перо» (Р) создайте зигзагообразную линию в верхней части буквы, как показано на картинке ниже. 

Добавьте ещё несколько штрихов на обеих сторонах буквы, сделав её более детальной. 

create a zigzag

Шаг 10

Теперь, когда контуры буквы А готовы, давайте добавим цвет! Мы можем скопировать (Control-C > Control-B) букву и Спрятать копию на панели Слоёв, кликнув на маленькой иконке с глазом, на случай, если нам понадобятся эти контуры позже. 

Выделите видимую копию и перейдите в Объект > Быстрая заливка > Создать. 

make a live paint

Шаг 11

Теперь возьмите Инструмент «Быстрая заливка» (К) и проведите им по той области, которую хотите покрыть цветом. Как увидите красный контур, кликните на области, чтобы заполнить её. 

Продолжайте применять Инструмент «Быстрая заливка» (К) и выбирать новые цвета на панели Цветов для заполнения треугольников в верхней части буквы. 

use the live paint bucket

Шаг 12

Теперь перейдём в Объект > Быстрая заливка > Разобрать, чтобы превратить каждую цветную секцию в отдельный объект.  

expand the live paint

Шаг 13

Используйте Инструмент «Прямое выделение» (А), чтобы вытащить пару элементов, сделав композицию более динамичной. 

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

drag out the elements

2. Как сформировать букву В

Шаг 1

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

Активируйте Линейки (Control-R) и перетащите пару горизонтальных направляющих линий на Монтажную область, чтобы отметить высоту буквы А. Мы можем перейти в меню Направляющих линий через Вид > Направляющие. 

use the rulers and guides

Шаг 2

Давайте начнём с вертикальной основы буквы В. Инструментом «Прямоугольник» (М) создайте узкий прямоугольник приблизительно 30 х 120 пикселей (помните о соблюдении равенства с высотой первой буквы). 

Выделите нижний край Инструментом «Прямое выделение» (А) и удалите его. 

Добавьте несколько горизонтальных линий и присоедините пару бирюзовых кругов 10 х 10 пикселей к низу фигуры. Мы можем скопировать эти круги с нашей буквы А. 

make a rectangle

Шаг 3

Теперь создайте горизонтальную линию при помощи Инструмента «Перо» (Р) и перейдите в Эффект > Исказить и трансформировать > Зигзаг. Установите размер на 10 пикселей, Складки на 5 и Точки на Углы

Нажмите ОК и перейдите в Объект > Разобрать оформление, чтобы применить эффект. 

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

make a zigzag effect

Шаг 4

Давайте создадим прямоугольник около 45 х 55 пикселей и выровняем его по верхнему и левому краям буквы. Для этого выделите вертикальную основу и созданный прямоугольник и кликните на основе ещё раз, чтобы сделать её Ключевым объектом (вы увидите толстое выделение вокруг неё). 

Откройте панель Выравнивания (Окно > Выравнивание) и нажмите на Горизонтальное выравнивание по левому краю и Вертикальное выравнивание по верху. 

align the shapes

Шаг 5

Давайте выделим верхний и нижний правые углы прямоугольника Инструментом «Прямое выделение» (А) и сделаем их скруглёнными, потянув круглые маркеры Динамических углов ближе к центру. Мы также можем изменить радиус Углов вручную на верхней панели управления. 

Совет: если не можете найти верхнюю панель управления после обновления Adobe Illustrator CC 2018, не беспокойтесь! Она всё ещё здесь, и вы можете включить её, перейдя в Окно > Рабочая среда > Классические основные сведения.   

Давайте удалим левый край фигуры. Выделите нижний левый угол Инструментом «Прямое выделение» (А) и нажмите Delete (клавиша Backspace в Mac).

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

Создайте дугу побольше для нижней части буквы В. 

make the corners rounded

Шаг 6

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

add details and strokes

Шаг 7

Давайте скопируем (Control-C > Control-B) букву и будем держать копию невидимой на случай, если она понадобится нам позже. 

Выделите видимую копию и перейдите в Объект > Быстрая заливка > Создать. Используйте Инструменты «Быстрая заливка» (К) и «Пипетка» (I) для выбора и применения цветов к элементам буквы В. 

Давайте завершим создание буквы. Перейдите в Объект > Быстрая заливка > Разобрать и примените Инструмент «Прямое выделение» (А), чтобы перетащить несколько цветных частей за пределы контура. 

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

apply colors with live paint bucket

3. Как нарисовать букву С

Шаг 1

Возьмите Инструмент «Эллипс» (L) и создайте основу буквы при помощи круга 115 х 115 пикселей. Скопируйте созданный круг и Вставьте его на передний план   (Control-C > Control-F). Уменьшите размер копии до 80 х 80 пикселей.  

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

make a circle for the base

Шаг 2

Возьмите Инструмент «Перо» (Р) и, удерживая Shift, создайте вертикальную линию поперёк кругов. Выделив линию, дважды кликните на Инструменте «Поворот» (R) и установите Угол на 12 градусов. Нажмите «Копировать», чтобы добавить повёрнутую копию линии.  

Теперь нажмите Control-D, чтобы повторить последнее действие и продолжайте нажимать, пока не получится 30 копий для заполнения круга.  

Давайте сгруппируем (Control-G) созданные лучи и спрячем на время. 

make a vertical line

Шаг 3

Теперь создадим силуэт буквы С. Инструментом «Добавить опорную точку» (+) добавьте две точки на правой стороне большого круга и две точки на маленьком круге, как показано на скриншоте ниже. 

Теперь нажмите Инструментом «Прямое выделение» (А) на отрезке дуги между созданными точками и удалите его. Повторите то же самое для обоих кругов. 

add points and delete segments

Шаг 4

Теперь сделаем видимыми спрятанные лучи и выделим все элементы буквы С. 

Возьмите Инструмент «Создание фигур» (Shift-M) и кликните на прямоугольниках, сформированных пересекающимися линиями. Не нажимайте на все прямоугольники, оставьте немного нетронутого пространства в низу фигуры.  

Теперь можем выделить ненужные части лучей в центре буквы С и удалить их. 

use the shape builder tool

Шаг 5

Давайте разобъём части лучей на левой стороне буквы С. 

Используйте Инструмент «Перо» (Р), чтобы добавить опорную точку где-нибудь в середине линии и удалите верхнюю точку Инструментом «Удалить опорную точку» (-). Таким образом мы отсоединили часть края буквы. 

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

break the lines

Шаг 6

Добавьте ещё дугообразных линий на внутреннюю часть буквы. Присоедините круги к кончикам больших дуг. 

Скопируйте созданные контуры и примените Быструю заливку и Инструмент «Быстрая заливка» (К) для добавления цветов. 

add more details and colors

Шаг 7

Перейдите в Объект > Быстрая заливка > Разобрать фигуру и вытащите несколько цветных прямоугольников. Отличная работа! Наша третья буква закончена! 

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

expand the live paint

4. Как создать цветной шрифт в Fontself

Шаг 1

Теперь интересная часть! Т.к. у нас всё готово, мы можем, наконец, создать шрифт в Fontself Maker!

Для начала откройте панель Слоёв и поместите все буквы в алфавитном порядке слева направо. Fontself  автоматически определит нужные буквы, если вы расположите их в правильном порядке.  


Мы можем переименовать нижнюю направляющую линию, установив её как базовую. 

rearrange the letters

Шаг 2

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

align the letters to the baseline

Шаг 3

Перейдите в Окно > Расширения и запустите Fontself Maker. Загрузится небольшое окно расширения, размер которого вы можете изменить, потянув его нижние углы.  У расширения простой и понятный интерфейс, который можно легко перетаскивать, с появляющимися подсказками и онлайн-помощником, к которому можно обратиться с вопросами. 

open fontself maker

Шаг 4

Теперь выделим наш алфавит и перетащим его в окно Fontself. Здесь есть несколько вариантов, из которых можно выбрать.  Если у вас готовы все буквы, вы можете перетащить их в область ‘A-Z’.  Fontself  автоматически расположит их в правильном порядке, придав каждой букве нужное имя. 

Либо, если у вас ещё не все буквы готовы, поместите курсор мыши на поле «Любая буква (партия)» и отпустите кнопку мыши для загрузки букв. 

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

add characters to fontself

Шаг 5

Мне нравится, что Fontself значительно упрощает всё – когда мы распределили и выровняли наши буквы, программа расположит их в правильном порядке, используя информацию с панели Слоёв. Убедитесь, что вы перетащили всё вместе, включая линию основы.  

Если вам нужно больше контроля над направляющими линиями, и вы хотите добавить надстрочный и подстрочный элементы, можно сделать и это!  Добавьте ещё две направляющие линии, переименуйте их в «надстрочный» и «подстрочный» на панели Слоёв, затем перетащите их в Fontself вместе с алфавитом. Вуаля! 

Вы можете узнать больше об использовании направляющих в Fontself здесь.  

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

Кликнув на маленькую иконку с шестерёнкой справа, вы можете изменить размер шрифта, выравнивание и фоновый цвет. 

Мы можем также растянуть окно предварительного просмотра букв, нажав на маленькую иконку с диагональными стрелками в левом верхнем углу каждого отсека предпросмотра (обведённого на скриншоте ниже) или дважды кликнув на глифе. 

Fontself maker settings

Шаг 6

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

glyph settings

Шаг 7

Когда нас устроит внешний вид букв, добавим другие символы и пунктуацию! Для этого выделите элементы на Монтажной области и нажмите на кнопку «Партия» в окне «Главная страница» Fontself. Ваши символы будут добавлены и размещены в нужном порядке. 

add punctuation

Шаг 8

Теперь взглянем на некоторые расширенные настройки, важные в создании любого шрифта. Найдите и нажмите на кнопку «Расширенный» в окне Главного экрана Fontself.

Здесь мы можем изменить Интервал, Кернинг и некоторые другие параметры для придания шрифту сбалансированного и единообразного вида. 

advanced settings of Fontself

Шаг 9

Начнём с Интервала

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

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

adjust spacing in fontself


Шаг 10

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

edit spacing in fontself

Шаг 11

После выбора плотности текста и его общего вида пора изменить кернинг-пары, нажав на кнопку «Кернинг». 

Кернинг – это процесс настройки интервала между определёнными парами символов для достижения визуально привлекательного результата.  В пропорциональных шрифтах с верхним регистром часто случается такое, что буквы в некоторых обычных комбинациях (таких как VA или AW) выглядят слишком далёкими друг от друга.  В этом случае нам нужно найти такие пары и настроить интервал между ними вручную, создав кернинг-пары. В Fontself есть и такая функция!  Более того, в ней уже есть некоторые обычные кернинг-пары в окне Предпросмотра, так что вы можете видеть результат сразу. 

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

make kerning pairs

Шаг 12

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

adjust kerning pairs

Шаг 13

Следующее важное изменение, которое вы можете захотеть внести в свой шрифт – и в Fontself это возможно – это использование диграфов

Диграф – это объединение двух или более букв в один символ. К примеру, в простых комбинациях ‘tt’, ‘fi’, и ‘ff’ мы можем захотеть изменить некоторые элементы букв, такие как поперечные линии, чтобы они лучше смотрелись вместе.  Более того, работая с цветными шрифтами, мы можем использовать диграфы более творчески, делая необычными некоторые слова или наименования, добавляя к ним новые элементы, такие как частички, цветы или росчерки.  В этом случае, вся композиция может быть использована как символ или диграф.  

use of ligatures in fontself

Предположим, мы хотим объединить две буквы вместе в ‘TT’, чтобы создать для них единую перекладину. После создания новой буквы выделите её на Монтажной области.  Затем откройте окно Fontself и напечатайте ‘TT’ в текстовой области наверху, затем нажмите на кнопку «Создать диграф» рядом с ней.  

add ligatures in fontself

Шаг 12

После нажатия на кнопку Fontself спросит, какой вид диграфа вы хотите создать. Позже вы сможете найти как Стандартные диграфы, так и Произвольные диграфы на панели «OpenType» (Окно > OpenType) в  Adobe Illustrator и увидеть, как это работает.  

types of ligatures in fontself

Шаг 13

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

К примеру, здесь вы можете видеть слово ‘COLORS’ со слегка изменённой буквой О. Вот как мы это делаем. После того, как создадите альтернативную версию буквы, выделите её на Монтажной области и добавьте в Fontself.  Программа спросит, хотите ли вы Заменить существующую букву О на альтернативный глиф. Нажмите на кнопку «Заменить» - готово!   

add alternates in fontself

Шаг 14

Теперь, когда мы добавили все буквы в Fontself, настроили интервал и кернинг и установили диграфы и альтернативные варианты, пора дать имя нашему детищу! 

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

name your font and add info

Шаг 15

Наконец, пора опробовать наш первый цветной шрифт! Я в предвкушении! 

Для начала мы можем протестировать его прямо в Adobe Illustrator, нажав на кнопку «Установить» в верхней части окна Главной страницы Fontself. Теперь можете выбрать свой шрифт на панели Символа в Adobe Illustrator (Окно > Символ) и напечатать что-нибудь! 

install your font and test it

Шаг 16

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

export your opentype font

Поздравляю! Наш цветной шрифт готов! 

Отличная работа! Теперь можем использовать наш цветной шрифт в Adobe Photoshop CC 2017/2018 и Adobe Illustrator CC 2018!  Процесс настройки и внедрения шрифта при помощи Fontself Maker был весёлым и простым, что я даже не заметила, как мы прошли все шаги, которые обычно вызывают у меня скуку.  

Надеюсь, вам, так же как и мне, нравится создавать символы в Adobe Illustrator и превращать их в цветной шрифт в Fontself. Без колебаний изучайте его и не забудьте поделиться своими результатами в комментариях ниже или в социальных сетях с тегом #fontself!

Color Font in Fontself

Если вам нравится рисунок шрифта, который мы создали в этом руководстве, и вы хотите с ним поэкспериментировать, можете взять его здесь, на Envato Elements! В архиве вы также найдёте векторные файлы со всеми символами для создания своего шрифта или для того, чтобы испытать его функции в Fontself Maker. Наслаждайтесь!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.