Текст вдоль пути в иллюстраторе: Работа с Текстом по Контуру в Illustrator

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

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

Оглавление

Как отразить текст на контуре в Illustrator

Независимо от того, используете ли вы Adobe Illustrator CC или более раннюю версию Illustrator, путь представляет собой просто одну (или несколько!) прямых или изогнутых линий. Путь может быть открытым или закрытым, в зависимости от того, соединены ли конечные точки вместе.

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

1. Выберите Эллипс инструмент.

1. Удерживайте Сдвиг ключ и нарисуйте круг на холсте. Удерживая клавишу Shift, эллипс, который вы создадите, превратится в идеальный круг. Любой цвет обводки или заливки исчезнет, ​​как только вы добавите текст.

1. в Тип Инструмент всплывающее меню, выберите Введите инструмент «Путь».

1. в Окно меню, выберите «Текст» > «Абзац» > «По центру» чтобы центрировать текст, который вы собираетесь ввести. Ярлык Windows для панели «Абзац» Ctrl + Альт + Т. Пользователи Mac могут использовать Вариант + Команда + Т.

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

1. Выберите шрифт и размер символов в Характер вкладка на Тип панель или отобразить панель символов, выбрав Окна > Тип > Характер.

1. Введите нужный текст в верхней части круга.

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

1. Далее мы скопируем то, что у нас есть, и продублируем. Используя Прямой выбор инструмент на панели инструментов, выберите круг, а затем выберите Редактировать > Копировать или используйте сочетание клавиш Ctrl + С.

1. Затем вставьте то, что мы скопировали, перед тем, что уже находится на артборде. Сделайте это, выбрав Редактировать > Вставить впереди. В зависимости от того, какой шрифт вы использовали, вы можете заметить, что текст выглядит немного темнее, так как теперь на пути к тексту расположены две его копии. Более простой способ убедиться, что у вас есть две копии текста, — посмотреть в Слои панель. Вы должны увидеть две записи для вашего текста. Если вы хотите, вы можете переименовать один, чтобы указать, что это копия впереди.

1. в Слои панели отключите видимость нижнего слоя.

1. Выберите Тип Инструмент, выберите текст на контуре и введите новый текст — текст, который вы переместите в нижнюю часть контура круга.

1. Теперь самое интересное. Открыть Параметры пути диалоговое окно, выбрав Тип > Введите путь > Введите параметры пути. Для текстового эффекта выберите Радуга, а в Выровнять по пути раскрывающийся список, выберите Восходящий. Также проверьте Подбросить поле и выберите ХОРОШО кнопка. (Проверить Предварительный просмотр поле, чтобы получить расширенный вид.)

Примечание: Для параметров «Выровнять по пути» выбор «Базовая линия» поместит текст прямо на путь. Восходящий помещает текст за пределы круга. Спусковой механизм найдет текст внутри круга. Наконец, Центр поместит текст прямо в центр пути.

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

1. Затем снова включите видимость верхнего слоя текста.

Вот как вы добавляете и переворачиваете текст на пути в Adobe Illustrator.

Вставьте символ в свой дизайн

Простой способ добавить один или два дополнительных элемента к дизайну в Adobe Illustrator — вставить что-нибудь из панели «Символы». Выполните следующие действия, чтобы добавить условное обозначение к вашему дизайну.

1. Просмотрите панель «Символы», выбрав Окно > Символы.

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

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

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

И если вы начинаете использовать Adobe Indesign, вам стоит ознакомиться с нашими учебными пособиями по как связать текстовые поля или обтекание изображения текстом.

Категории

• команды от A до Z
• Android
• экосистема Apple
• Apple Tv
• ос Chrome
• Облачные вычисления
• Компьютерные советы
• Классные сайты
• Криптовалюта
• Наука о данных

Последний

• 5 приложений, которые родители могут использовать, чтобы шпионить за использованием Интернета детьми
• Как использовать Google Задачи — Руководство по началу работы
• Действительно ли сетевые фильтры работают?

Как изогнуть текст вокруг значка с помощью Adobe Illustrator CC

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

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

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

Я вернусь, чтобы сказать, я буду использовать «14». Другое дело, что мой… в последний раз, когда я использовал инструмент «Текст», я использовал центр. Так что у вас, вероятно, будет выравнивание по левому краю, так что оно может быть по центру. Давайте напечатаем что-нибудь… давайте напечатаем «Ты потрясающий». Три восклицательных знака!!! Итак, я выделю весь текст, выберу цвет заливки. Некоторые из настроек, которые вы, возможно, захотите сделать, с Черной стрелой — возьмите «Черную стрелу». Вот эта Type Line, там есть три красные линии. Есть также эти белые коробки. Не обращайте внимания на белые поля. Они делают странные вещи, когда начинают связывать текстовые поля. Это не то, что мы хотим в данном случае. Черная стрела, нажмите в фоновом режиме. Я собираюсь щелкнуть по нему, и эти красные палочки весьма полезны.

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

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

Насколько хорошо это будет выглядеть? Я просто собираюсь добавить больше текста, на самом деле. «Ты потрясающий, потому что ты — это ты». Прекрасно, Дэн. Ничего не мог придумать. Мне может понадобиться немного больше места. Я собираюсь сделать размер шрифта немного меньше. Ну вот. Итак, что я хочу сделать, так это получить эту строку. Я хочу сделать Stroke белым. Что-то вроде, не знаю, типа Доджеса. Крутая штука внизу. Я сделал свой Type довольно тонким, я сделал его белым. Я использую свой инструмент ширины. Дайте мне инструмент ширины. Где ты? Один здесь. Я просто собираюсь щелкнуть и перетащить, может быть, такой большой. Давай, инструмент ширины. Вот так. Здесь немного долго. Мы использовали инструмент ширины в нашем предыдущем уроке. Это то, что я пытаюсь сделать здесь. Ужасный. Следующее, что мы собираемся сделать, — это значок, подобный этому, где мы собираемся вводить текст на пути, это похоже на это. Ну очень похоже.

Итак, мы собираемся перестроить это, а потом я перестрою это, потому что оно мне не нравится, но тем не менее. Это работает следующим образом: на самом деле их должно быть два — я их разгруппирую. — на самом деле это должны быть два отдельных круга. На самом деле вы не можете рисовать сверху, затем нажать «возврат» и рисовать снизу. На самом деле это просто два круга, которые мы накладываем друг на друга, чтобы они выглядели как единое целое. Итак, первая хитрость. Итак, начнем с Эллипса. Возможно, вам придется удерживать инструмент «Прямоугольник», чтобы получить инструмент «Эллипс». Я собираюсь удерживать клавишу «Shift», пока я перетаскиваю его, чтобы получить идеальный круг. Неважно, какой у него Обводка, или какая у него Линия, или Заливка, потому что, когда мы щелкнем по нему инструментом, как здесь внизу, все это исчезнет.

Итак, что мы сделаем, так это скопируем и вставим его, так что у нас будет два из них для использования. Вот этот, я возьму ‘Type Tool’. Теперь этот инструмент «Текст» нельзя использовать таким же образом. Помните, мы можем пойти по краю. Вы должны фактически использовать официальный инструмент Type on a Path. Так что, удерживая нажатой кнопку «Текст», возьмите «Текст по контуру» и щелкните один раз посередине. Это как бы делает то, что мы хотим делать, как бы наоборот. Итак, если я сейчас наберу «Предотвращение». В зависимости от этого вам, возможно, придется выбрать центральную линию. Это своего рода дно, или то, что вы можете сделать, чтобы начать, это… Я уничтожаю. Я просто начну снизу, решать вам. Так что, если я нажму здесь внизу, это сделает немного больше того, что я хочу. — Предотвратить… Это все, чего я хочу. Вы можете перемещать его с помощью Черной стрелы.

Мы смотрели на это с этой линией внизу, помните центральную точку? Вот эта красная линия, я могу решить приклеить ее внизу. Это немного неудобно, вы можете видеть, как он немного прыгает, но вы можете перетаскивать его. В зависимости от того, как вы этого хотите. Еще одна вещь, которую вы можете сделать, это, как видите, я могу перетаскивать ее вверх и вниз. Это означает, что он находится на другой стороне текстового поля. Это действительно неудобно, не волнуйтесь. Я покажу вам более ручной способ сделать это через секунду, но я хочу, чтобы мой был там, и он идеален. Я собираюсь использовать шрифт, я собираюсь использовать ту лигу, которая у меня была раньше. Не в сценарии, «Все классы». «Лига Готика», я буду использовать «белый». И давайте посмотрим, как сделать нижнюю часть.

Вместо того, чтобы использовать это, я собираюсь скопировать и вставить это. А этот скажет: «Жестокость к дизайнерам». Итак, что мы хотим сделать, так это, когда он выбран, с «Черной стрелкой» здесь есть опция, в разделе «Тип» есть опция «Введите путь». И есть этот, который называется «Параметры ввода пути», нажмите на него. Включите предварительный просмотр, потому что вы хотите видеть, что вы делаете. «Флип» — один из них. Так что это пойдет ко дну, это в основном то, что мы хотим. Я нажму «ОК», и мы повернем его. Мы могли бы взять центральную точку и повернуть ее. Мы могли бы просто повернуть его как обычно. Вам решать.

Одна из вещей, которую нам, возможно, придется изменить, это то, что этот парень как бы сидит на базовой линии. Это будет считаться базовой линией, где бы ни находилась буква. Этот здесь находится внутри, а этот снаружи. Таким образом, они будут выглядеть немного по-другому. Итак, что мы сделаем, так это выстроим их в линию. И давайте как бы настроим их обоих на самом деле. Итак, я выбрал этот нижний, и давайте перейдем к «Тип». «Введите по пути». «Параметры ввода по пути» и «Вкл. предварительный просмотр». Что вы можете искать, так это то, где он выравнивается с путем. Базовая линия — это то, где она находится. Едем в «Центр». Если мы сделаем центр для них обоих, он будет бежать прямо к линии. То же самое с этим здесь, «Введите путь», «Введите параметры пути». И мы сделаем центр для вас, а также. Где ты? «Исходный уровень», «Центр».

Эти другие… Базовый уровень по умолчанию. Ascender и Descender — это просто когда у нас есть, скажем, Type здесь, и у нас есть это, тогда они упоминаются как Ascender и Descender. Восходящий — это все, что появляется наверху. Посмотрите вот на эту штуку, она называется X-height, чтобы вы знали. Здесь все строчные буквы выстраиваются вверху. Все, что выше этого, называется Восходящим. Итак, это Асцендент, эта маленькая точка является Асцендентом. Десцендеры — это вещи, которые появляются ниже базовой линии, они опускаются. Итак, это основная топография. По сути, вы не хотели этого знать, верно? Вы просто хотели знать, как это сделать. Мы в основном сделали это. Итак, вы выравниваете центр, вы выравниваете центр. Если ваши не щелкают, они должны просто щелкать легко. Если это не так, перейдите в «Просмотр» и убедитесь, что в Smart Guides установлен этот флажок. Если это не так, нажмите на него. И теперь мы просто собираемся построить центральную часть.

На самом деле, давайте посмотрим еще на одну вещь. Я собираюсь нажать на них обоих. Я собираюсь пойти в «Тип». Можете ли вы сделать и то, и другое одновременно? Вы можете. Итак, введите параметры пути, убедитесь, что предварительный просмотр включен. Теперь «Эффект», есть два типа, которые вы, вероятно, будете использовать, Радуга или Перекос. По сути, Skew будет, я не знаю, это зависит от того, что вы пытаетесь сделать. Я чувствую, что это похоже на запуск кубка по американскому футболу. Мне не очень нравится то, что мы делаем, вам может понравиться. Итак, это то, что вы можете использовать, Rainbow, Skew Gravity. Гравитация немного другая. Это означает, что время шрифта истекает. Так что внизу он будет тоньше, чем вверху, в то время как Радуга будет одинакового размера с обеих сторон, вверху и внизу, и просто немного приблизится к низу. Это зависит от вас, что вы хотите сделать. Вы можете не увидеть большой разницы, не беспокойтесь об этом.

Эти другие, Rainbow, Skew, еще не использованы. Вам может понравиться это, Радуга, Лента или Лестница. Я еще не использовал эти. Я собираюсь вернуться к «Rainbow» и просто поиграть со своим «Spacing». Я собираюсь подняться немного? Ну не так высоко. Я не знаю, как я достиг такого высокого уровня. Переходим к «0». Хотя это довольно круто, я понятия не имею, как они это делают. Вы можете видеть, если я подниму его, это как бы расширит Spacing. Возможно, вам придется делать это отдельно, потому что это по-разному влияет на оба из них. Итак, вы… Скажем, я хочу 10 баллов за самый низкий балл, вот на что я смотрю. И этому верхнему здесь нужно что-то другое, «Тип». «Введите по пути». А этот выглядит так, как будто ему нужно. .. Включите предварительный просмотр. Это затягивает. Итак, что мы хотим сделать, это «-10». Потрясающий! Итак, у меня есть оба этих парня, давайте выстроим их в ряд. Центры. Центр там.

Сейчас я просто нарисую этот кусочек в центре. Итак, теперь вы, вероятно, можете перейти к следующему уроку, потому что я просто собираюсь рисовать в первую очередь на Type. ‘Проверенный’. Я собираюсь использовать «Отслеживание». Это немного его раскроет. Можно выбрать другой шрифт для этого, размер шрифта, извините. Вот и все, «сертифицировано». Вы… Цвет заливки, «белый». Линия вокруг снаружи. Я собираюсь использовать «Прямоугольник», у него будет «нет» заливки и будет «Обводка». Одна вещь, которую мы еще не сделали, это… так что я ничего не выберу. Инструмент «Прямоугольник» есть. У меня есть заливка и обводка. Они в неправильном положении, верно? Вы можете использовать эту двойную стрелку здесь, чтобы сказать: я хочу, чтобы белый цвет был в обводке, а я хочу, чтобы отсутствие заливки было в заливке. Имеет ли это смысл? Смотри. Просто как-то перепутал их. Итак, теперь это должно сработать.

Я возьму их всех и отцентрирую. Так что я буду использовать свою «Черную стрелу». Это, наверное, нужно немного придумать. Теперь я достаточно доволен этим. Я не. В этой верхней части должно быть больше пробелов. Но в любом случае, теперь мы чувствуем эту вещь. Итак, что я хотел бы, чтобы вы сделали, это попрактиковаться. Возможно, вы попрактиковались с этим и последовали за ним, но я бы хотел, чтобы вы прошли через… У меня есть для вас текст, чтобы создать свой собственный вид сертификационного штампа. Это в ваших «Файлах упражнений», есть упражнение под названием «Тип по пути». Вы думаете, что это была фиктивная ассоциация, но существует ассоциация по предотвращению ожирения домашних животных. Если вы извращенная организация… Я не издеваюсь, просто кажется, что это весело. Если вы заинтересованы в этом, вот веб-сайт, но в основном я просто хочу, чтобы вы использовали его. Превратите это в замкнутый круг, вроде этого, используя Type on the Path. Вы можете делать все, что вам нравится. Просто нравится это видеть. Итак, как проект, я бы хотел, чтобы вы это сделали, а затем разместили проект в комментариях в разделе «Проект». Я бы хотел посмотреть, что у тебя выйдет.

Итак, это мы для Type on the Path. Мы собираемся перейти к следующему видео. Ладно, увидимся там.

новый код — Размещение текста по кругу с помощью SVG

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

Прогулка по пути

Для размещения текста на пути в SVG требуются три компонента:

1. A , который должен иметь идентификатор и находиться в разделе документа SVG.
2. Элемент .
3. Некоторые символы внутри элемента , внутри элемента . Этот должен ссылаться на идентификатор из <путь>

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

Преобразование круга в путь

Есть два известных мне метода преобразования круга SVG в путь:

1. В Adobe Illustrator или других векторных редакторах есть несколько возможностей: перемещение любой отдельной точки на фигуре, даже незначительное, превратит круг в контур, как и удаление точки из фигуры; в качестве альтернативы используйте Object / Compound Path / Make на круге.
2. Если вам удобнее работать с самим SVG, вы можете использовать этот изящный небольшой инструмент преобразования JavaScript, который берет атрибуты круга SVG и превращает их в эквивалентные данные пути.

Прикрепление текста

Полный SVG для логотипа выше (за исключением центральной «звезды» и анимации; чтобы увидеть это и многое другое, посетите демонстрацию CodePen):

 
  
    <текст dy="70" textLength="1200">
        
            Красный острый перец чили
        
    
 

Следует отметить лишь несколько моментов:

1. Очевидно, что текст должен быть достаточно большим, чтобы его можно было прочитать, что, в свою очередь, будет зависеть от того, насколько он велик по отношению к размеру пути .
2. Текст всегда будет начинаться в определенной точке кругового пути, хотя это можно настроить (см. ниже).
3. Если текст выходит за начальную точку, он фактически «съедает свой собственный хвост», а любые лишние символы в конце становятся невидимыми.
4. Текст оформлен с помощью типографского CSS, с которым вы, вероятно, уже знакомы; единственное отличие состоит в селекторе
   , цвете заливки , атрибуте dy и атрибуте атрибут textLength (обсуждается ниже).
5. textLength — в данном случае по существу окружность круга — используется в качестве альтернативы между буквами для Firefox, в котором есть ошибка в отношении последнего, когда речь идет о SVG.

Установка начальной точки

Текст начнется с того места, которое SVG воспринимает как «начальную точку» пути. Эту начальную точку можно изменить несколькими способами:

• Обычно проще всего повернуть путь в желаемую ориентацию, которая будет нести текст вместе с ним:

  Обратите внимание, что координаты преобразования SVG — последние два числа в преобразовании — относятся к элементу viewBox , , а не .

  Кроме того, вы можете повернуть круг в приложении для редактирования векторов перед его экспортом.

• Если текст начинается слишком «рано» на круге, но есть место для перемещения в конце, используйте startOffset . Значение этого атрибута определяет «начальную точку» текста и измеряется в процентах, при этом 0% — значение по умолчанию, а 100% (т.е. «начало» в самом конце пути) — максимально возможное значение. Как и прежде, текст, выходящий за конечную точку пути, фактически исчезнет.

  Может быть сложно определить «начальную точку» на замкнутой форме. Один из простых способов сделать это в Illustrator — временно применить обводку к контуру и включить end наконечник стрелки на панели Stroke (обратите внимание, что вам, возможно, придется включить Show Options в правом верхнем углу панели, чтобы отобразить параметры стрелки). Стрелка укажет на начальную точку.

• Добавьте к элементу значение атрибута dx (или x ), которое будет перемещать текст по пути на значение атрибута (это значение интерпретируется как пиксели, на дефолт). Обратите внимание, что dx в настоящее время лучше всего работает с Firefox, поэтому я рекомендую именно этот вариант.

   <текст дх="50">
      
          Красный острый перец чили
      
   

  Отрицательные значения для x или dx сделают начальные буквы текста невидимыми.

  Вы также можете установить новую начальную точку с помощью инструмента «Ножницы» в Illustrator: щелкнув в любом месте пути, вы установите его в качестве новой начальной точки. Это также откроет путь, сделав код фигуры немного длиннее.

  Размещение текста SVG на одном круговом пути с разными направлениями пути: по часовой стрелке (слева) и против часовой стрелки (справа)

  Обратный курс

  Текст будет двигаться в направлении, указанном способом рисования контура. В SVG есть две возможные интерпретации:

  1. Круг, который проходит по часовой стрелке , будет иметь оснований букв, установленных на вне пути: то есть буквы будут «обращены наружу»
  2. Круг, который интерпретируется как «против часовой стрелки», будет иметь оснований букв, установленных на внутри контура: то есть буквы будут «обращены внутрь».
  Параметр обратного пути для составного пути в Adobe Illustrator

  Самый простой способ изменить направление пути в Adobe Illustrator — убедиться, что это составной путь ( Object / Compound Path / Make ), а затем использовать Обратное направление пути в атрибутах (опять же, вам, возможно, придется использовать Показать параметры в правом верхнем углу, чтобы увидеть эти элементы управления).

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

  Инверсия пути не устраняет потенциальную проблему появления текста по часовой стрелке снаружи, в то время как текст против часовой стрелки появляется внутри пути. Самый простой способ исправить это — использовать атрибут dy для перемещения текста «вверх» или «вниз» относительно пути. Например:

   <текст dy="50">
          
          Красный острый перец чили
          
   

  В результате по часовой стрелке текст перемещается на внутрь . Вы также можете использовать отрицательное значение для перемещения текста наружу .

  Альтернативные кривые

  Текст, прочитанный в противоположных направлениях на той же кривой , довольно часто встречается в дизайне логотипов. Наиболее известная айдентика, использующая эту технику, — это, вероятно, вездесущий логотип Starbucks Coffee.

  Логотип Starbucks CoffeeStarbucksCoffee

  Есть два способа добиться этого результата в SVG:

  1. Использовать копию тот же путь , но перевернул в направлении с новым id в качестве ссылки для другого текстового элемента. (Вам нужно будет переместить символы, используя атрибут dy )
  2. Предполагая, что оба текстовых фрагмента имеют одинаковый размер: используйте другой путь , который касается верхних нижних символов. Это станет основой для верхнего текста. (Возможно, вам все еще придется изменить направление одного пути).

  В приведенном выше примере я использовал второй метод. Код без центрального рисунка русалки или звезд:

  Связанные стили:

   текст {
      семейство шрифтов: Santana-Black, без засечек;
      заполнить: #fff;
      преобразование текста: верхний регистр;
      размер шрифта: 32px;
  }
  . coffee { межбуквенный интервал: 6px; } 

  Вы можете увидеть фактические пути, используемые для текста, перетащив их из раздел и применение атрибута stroke и stroke-width в версии CodePen.

  Заключение

  Существует несколько причин, по которым вы можете захотеть разместить текст на пути:

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

  Если вам не нужны эти качества — или вы можете построить им альтернативы — тогда может быть проще разбить текст на пути и экспортировать результат в виде «замороженного» SVG.

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

  Нравится этот кусок? Я приглашаю вас подписаться на меня на twitter.