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

Створимо кольоровий шрифт за допомогою Адобе Ілюстратор і 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.

Ukrainian (українська мова) translation by Mavka (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 pt і Кути на Округлені.

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

use the polygon tool

Крок 3

Виділіть фігуру за допомогою Виділення (V) і натисніть Enter, щоб відкрити вікно Перемістити. Встановіть значення Горизонтально на 25 px і Вертикально - на 0 px, потім натисніть Копіювати для створення копії фігури і посуньте її вправо.

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 px з темно-синім обведенням і бірюзовим кольором заливки.

Порада: використовуйте Інструмент Піпетка (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 px (пам'ятаєте про дотримання рівності з висотою першої літери).

Виділіть нижній край Інструментом Часткове виділення» (А) і видаліть його.

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

make a rectangle

Крок 3

Тепер створіть горизонтальну лінію за допомогою Інструменту Перо (Р) і перейдіть в Ефект> Деформувати і трансформувати> Зигзаг. Встановіть розмір на 10 px, Складки на 5 і Точки на Кути.

Натисніть ОК і перейдіть у Об'єкт> Розібрати вигляд, щоб застосувати ефект.

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

make a zigzag effect

Крок 4

Давайте створимо прямокутник близько 45 х 55 px і вирівняємо його по верхньому і лівому краях букви. Для цього виділіть вертикальну основу і створений прямокутник і клікніть на основі ще раз, щоб зробити її Ключовим об'єктом (ви побачите товсте виділення навколо неї).

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

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 px. Скопіюйте створене коло і Вставте його на передній план (Control-C> Control-F). Зменшіть розмір копії до 80 х 80 px.

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

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) в Адобе Ілюстратор і побачити, як це працює.

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

Якщо вам подобається малюнок шрифту Fiesta Color Font, який ми створили в цьому уроці, і ви хочете з ним поекспериментувати, можете взяти його тут, на 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.