Обводка текста в иллюстраторе: Как создать контурный текстовый эффект обводки в Illustrator

Adobe Illustrator для веб-дизайнера 9.3) «Оформление» (Appearance) — палитра и раздел палитры «Свойства»

Владимир Никишин Владимир Никишин

Блог

В Illustrator’е можно так же, как в Sketch’е и Figm’е применять к фигуре несколько заливок и обводок (обводки, кстати, могут быть градиентными). Делается это в палитре Appearance.

Содержание серии

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

1. Введение
   1. 💾 Файлы, монтажные области
   2. 🗓 Cлои
2. 🗜 Трансформация объектов
   1. Перемещение, выравнивание и распределение объектов
3. 🎼 Линии и сетки
4. ➰ Контуры
   1. 🖋 Перо и инструмент «Кривизна» (Curvature)
   2. 👱‍♀️ Правила красивых контуров
5. ✍️ Обводка
6. 🎨 Цвет, заливка
7. 🔶 Фигуры
8. 🔠 Текст
9. 🏰 Векторная графика: техники рисунка
   1. 💪 Shape Builder Tool (Создание фигур) — ⇧M
   2. ✏️ Рисование фигур линиями и инструментом быстрой заливки
   3. ❤️ «Оформление» (Appearance) — палитра и раздел палитры «Свойства»
   4. 📐 Направляющие и линейки
   5. 🚶🏻‍♂️ Переходы (Blend)
   6. 🎁 Перспектива
   7. 🎩 Cтили графики
   8. 🔣 Символы
   9. 🏀 Сетчатые объекты (meshes)
   10. 👩 Ресницы, брови, волосы
   11. 🖌 Кисти и ластик
   12. ☀️ Распределение объектов по кругу
10. 🦊 Советы и хитрости
11. 🛠 Инструменты+
12. ⌨️ Горячие клавиши
13. 🖨 Печать

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

Чтобы добавить фигуре новую заливку, обводку или эффект нужно выбрать соответствующий вариант в нижней панели палитры.

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

Или барельефы (множество заливок с параллельным контуром (Offset Path) и размытием по Гауссу)

Чтобы сдвинуть одну из обводок, надо выбрать ее в панели оформления. Выбрать внизу панели меню эффектов ➜ Distort & Transform ➜ Transform. Настроить смещение и сохранить.

В дальнейшем параметры смещения будут доступны в панели оформления.

Примеры добавления тексту обводки и объема.

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

🔵  Оформление можно копировать с помощью пипетки.

Только в настройках пипетке должен быть выбран пункт Appearance

🔵  Динамическая обводка и заливка редактируемого текста.

• Дважды кликнуть на строку Characters и удалить исходную заливку и обводку.
• Затем дважды щелкнуть на Type: No Appearance и добавить заливку и обводку из нижней строки панели.
• Затем можно сместить обводку с помощью Distort & Transform ➜ Transform, добавить тень и т. п.

🔵  Прямо из панели «Оформление» можно добавлять стили из меню Effects.

• Например, тень:
• Изометрическая перспектива фигуры, надписи:
  Effect ➜ 3D ➜ Rotate

🔵  Если к объекту применен какой-то эффект, при попытке добавить такой же AI предлагает альтернативу.

• Отредактировать существующий эффект, нажав на название в панели оформления.
• Либо добавить новый эффект.

🔵  Полезные эффекты.

• Distort & Transform ➜ Transform
• Stylize ➜ Feather
• SVG Filters ➜ AI_GaussianBlur_*
• Stylize ➜ Inner Glow
• Stylize ➜ Drop Shadow
• 3D ➜ Extrude & Bevel
• Distort & Transform ➜ Zig Zag
• Path ➜ Offset Path
• Stylize ➜ Outer Glow
• Warp ➜ Arc | Arch | Bulge | Flag
  • Для текста Warp можно открыть из контрольной панели. .. …и затем оттуда же редактировать деформацию.
  • Кнопками в левом углу панели, переключаясь между редактированием оболочки (envelop) и содержания.
  • Еще один способ исказить объект с помощью оболочки:
    Object ➜ Envelope Distort ➜ Make With Warp

  ⚠️ Однако из трех перечисленных способов добавления искажений в оболочке, наиболее удобный все-таки эффект — с ним проще менять параметры деформации и редактировать исходный объект.

  ⚠️ Следует отличать эффект Warp и инструмент Warp (см. Векторную графику)

03 июл 2021

Illustrator

Комментарии

11. Превращение символов в контуры и их расщепление.

В программах верстки и графики шрифт может подвергаться всевозможным трансформациям, однако изменить часть рисунка буквы они не позволяют. Шрифт создается в специальных программах. К ним относятся, например, такие редакторы, как программа FontLab российских программистов под руководством Ю. Ярмолы или программа Fontographer фирмы Macromedia . С их помощью любой шрифт может быть отредактирован, доработан и сохранен в общепринятом формате. Будучи инсталлированным в операционную систему, он становится доступен всем прикладным программам. Вместе с тем, в практике дизайнера постоянно возникает необходимость «доработать» одну-две буквы, чтобы придать определенное своеобразие логотипу или какому-либо заголовку. Поэтому в программе предусмотрена возможность с помощью команды Create Outlines (Преобразовать в контуры) меню Туре (Текст) выделенный шрифтовой объект конвертировать в совокупность контуров, которые сохраняют все внешние параметры (толщины и цвета) и позволяют обращаться с ними как с обычными векторными объектами. Кстати, так довольно часто и поступают при создании логотипа. Сначала подбирается подходящий существующий шрифт, набирается название фирмы, используются всевозможные параметры форматирования (например, важнейший этап — кернирование), а затем шрифт конвертируется в кривые, с которыми и производится окончательная доводка до оригинального дизайнерского уровня.

Неизбежная потеря при этом заключается в невозможности форматировать и редактировать этот блок как текст (из «текста» он превратился в «картинку»). Поэтому нельзя конвертировать одну букву или слово, входящие в обширный текст. Для этого необходимо создать отдельный текстовый блок только из этой буквы или только из этого слова. Другой неизбежной утратой является исключение механизма хинтования (hinting), который обеспечивает особые способы растеризации шрифта мелких кеглей для внешних устройств с низким разрешением, в частности для экрана монитора. Для того чтобы конвертировать шрифтовой объект в кривые, его необходимо только выделить с помощью инструмента Selection (Выделение), a затем выполнить команду Create Outlines (Преобразовать в контуры) меню Туре (Текст), которая из любой буквы создаст отдельный векторный объект. Следует обратить внимание, что в некоторых случаях потребуется работа с составными контурами (compound path), чтобы сохранить вид букв, состоящих из нескольких контуров, например «В». Для удобства работы предусмотрен вариант просмотра (Outline), временно отменена заливка и контур (толщина обводки). Если нужно упростить составной контур в простой (object – compound path).

Пример: РЭТО – преобразование символов букв в контуры , разгруппировать совокупность букв общего контура на составляющие в линию, а затем размещают текст вокруг основных контуров.

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

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

Все операции со слоями (создание, удаление, фиксирование и прочие) осуществляются с помощью палитры Layers (Слои) , которая открывается командой Show Layers (Показать слои) меню Window

Кроме того, палитра Layers (Слои) используется для выделения и удаления объектов и их групп, фиксирования и сокрытия их а также присвоения параметров.

следующие условия работы со слоями, группами и объектами:

можно создавать произвольное число слоев, групп и объектов;

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

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

Щелчок на кнопке Create New Layer (Создать новый слой) в нижней части палитры создает новый слой с именем и параметрами, принятыми по умолчанию. Слой располагается над активным слоем или группой.

Упорядочение объектов:

• Чтобы переместить объект на верхнюю или нижнюю позицию в группе или слое, выделите объект, который нужно переместить, и выберите команду «Object» > «Arrange» > «Bring to forward» или «Object» > «Arrange» > «Send Backward».

• Чтобы переместить объект на один объект вперед или на один объект назад в стеке, выделите объект, который нужно переместить, и выберите команду «Object» > «Arrange» > «Bring to Front» или «Object» > «Arrange» > «Send to Back».

Пример: в лаб раб. Рэто изменение плана расположения внутренних подконтуров с помощью команды»Object» > «Arrange» > «Bring to Front

Эффект Тень:

Одной из наиболее полезных функций в графических программах является автоматическое создание тени объектов, текста или изображений.Выберите объект, Выполните команды Effects\Stylize\Drop Shadow (Эффект\Стили\ Тень).,Выбераем режим наложения для тени в списке Mode (Режим)Установливаем значение Opacity (Непрозрачность),Установливаем смещения X Offset (Сдвиг по оси X) и Y Offset (Сдвиг по оси Y),Выбераем значение Blur (Размывка) для задания размытости краев тени ,выбираем из список Color (Цвет)цвет тени, Щелкните по кнопке ОК, чтобы добавить тень.

Растушевка:

Команда Feather (Растушевка) меню Effect/Stylize (Эффект/Стилизация) обеспечивает смягчение перехода между объектами, которые располагаются друг над другом. Этот эффект можно применять как к векторным, так и к шрифтовым объектам.

В поле Feather Width (Ширина растушевки) установите ширину

Создание объема так же с помощью радиального градиента.

Также использование Effect>Stylize>Inner Glow (Эффект>Стилизация>Внутренне свечение) и внешнего Cвечения (Effect>Stylize>Outer Glow)

13. Использование трассировки по внешней и внутренней границам обводки контура в меню OBJECT\Path\Outline stroke при работе в про­грамме Adobe Illustrator.

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

Команда Outline Stroke (Преобразовать границы обводки) меню Object | Path (Объект | Контур) служит для трассировки контура, имеющего толщину, и замены его на замкнутые объекты, в точности повторяющие внешний и внутренний периметры обводки.

Для осуществления трассировки достаточно выделить нужный объект и выполнить команду Outline Stroke (Определить границы обводки), новый объект помещается на месте исходного и выделяется.

Открываем палитру Stroke, ели она была закрыта (Window > Stroke или [Ctrl] + F10), и задаем необходимые параметры обводки: способ обхода углов Miter Join, после чего настраиваем толщину обводки Weight. Обводку в виде Stroke нужно преобразовать в кривую без обводки. Для этого выполняем команду Object > Path > Outline Stroke. Затем разгруппируем все объекты, выделим сами объекты, без обводки, и поместим их на передний план (Object > Arrange > Bring to Front или [Ctrl] + [Shift]).

Пример: Например, есть у тебя условное яблоко с зеленой заливкой и обводкой толщиной 2 пункта. Оно маленькое, а тебе его надо распечатать на баннере размером 3*2 метра. Если обводку не превратить в заливку, она так и останется толщиной два пункта при растягивании, а если превратить, она будет увеличиваться пропорционально самому яблоку. Или ты нарисовала некий замкнутый контур (то же яблоко), а потом тебе показалось, что линии одинаковой толщины будут смотреться слишком тупо и непрофессионально, тогда ты превращаешь пресловутую обводку и перемещаешь точки полученной заливки так, как тебе вздумается.

Как добавить линию обводки вокруг текста или фигур в Illustrator

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

Для начала давайте сделаем это с Type. Итак, «Type Tool», я собираюсь добавить «Living Spree». Если ваше отслеживание отличается от моего, я выберу все. Помните, мы можем удерживать клавишу «Alt» и нажимать «стрелку вверх». Это на ПК, это «Опция» и «стрелка вверх» на Mac. Сделай его красивым, а потом я сделаю его красивым и большим.

Следующее, что я хочу сделать, это придать ему белую заливку и обводку. Так что, если я даю ему Stroke таким образом, это нормально, но когда я начинаю отслеживать его, я удерживаю клавишу «Alt» на ПК или клавишу «Option» на Mac и просто начинаю . Видите ли, когда он начинает перекрываться, он делает это. Вам это может понравиться, это круто. Но скажем, я просто хочу, чтобы он бегал снаружи, для этого мы и пришли сюда. Все, что нам нужно сделать, это открыть «Панель внешнего вида». Он находится в разделе «Окно», «Внешний вид» или вы можете щелкнуть пунктирную линию здесь. На данный момент очередь вокруг настоящих персонажей внутри. Итак, я дважды щелкаю символы, есть Stroke, это не то место, где я хочу, я собираюсь его удалить. Или можно просто удалить, или вообще не ставить.

Итак, давайте щелкнем по нему и снова щелкнем «Черной стрелкой». Персонажи как бы спрятаны в этой маленькой группе. У нас есть эта внешняя группа, к которой мы можем это применить. Вот где происходит настоящее волшебство. Если я нажму на это, вы увидите, что оно снова обходит наши символы, но посмотрите на это, если я перетащу его вниз, и за пределами символов, чуть ниже него, оно обойдёт снаружи. Круто, да? Просто возьмите это и проверните. Вам не нужно останавливаться на одном. Я могу щелкнуть по этому, что дублирует его, и я могу получить еще один, который… где те цвета, которые я использую? Вот такой цвет. Просто убедитесь, что он немного больше.

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

Единственное, с чем вы можете столкнуться, это, видите ли, что-то странное происходит на краю из-за формы. Stroke здесь может нуждаться в некоторой корректировке. Возможно, вы захотите поиграть с Capping. Вероятно, в данном случае это Cornering. Возможно, вам придется перейти на «Round Join», просто посмотрите. Введите его, или вам, возможно, придется присоединиться в зависимости от того, что вы хотите найти. Даже тире. Так вот как поместить его вокруг текста и вокруг изображений.

Вы заметили, когда я расстегнул перед тем, как я расстегнул слишком много и избавился от крутой Обводки, которая была вокруг меня снаружи. Это нормально. Одна из вещей, с которой вы можете столкнуться, это то, что мы сделали это ранее в предыдущем уроке, и, возможно, вы хотите украсть его, поэтому вы берете инструмент «Пипетка». Вы говорите: «Дай мне вот это, я хочу этого парня». Дело в том, что порядок слоев здесь играет большое значение. Это Обводка, а Заливка здесь далеко внизу. мы собираемся убедиться, что заливка находится вверху. Мы собираемся дать ему заливку белого цвета. Так что порядок слоев с заливками, возможно, вам потребуется внести некоторые коррективы. 

Хорошо, вот как можно добавить Обводку вокруг текста и графики. Ладно, переходим к следующему видео.

Как преобразовать текст в один штрих в иллюстраторе

спросил 9 лет, 11 месяцев назад

Изменено 1 год, 1 месяц назад

Просмотрено 99к раз

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

• Adobe-illustrator

1

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

• Сначала растрируйте текст ( Object > Rasterize )
• Следующая трассировка изображения ( Объект > Трассировка изображения > Создать )
• Установите Paths , Corners и Noise на 100 и ниже Создайте , выберите только Paths .
• Возиться со значением для штрихов . Я считаю, что 100 подходит мне ближе всего.

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

1

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

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

3

Найдите однострочный шрифт или что-то подобное. Несколько лет назад я наткнулся на приложение для шрифтов с одним штрихом (лазерная гравировка или что-то в этом роде). Единственные, которые я видел, были разработаны для определенного программного обеспечения и имели проблемы в Illustrator. Но, iirc, вы можете преобразовать в контуры, и все в порядке. Извините, я не могу вспомнить, где я их нашел (и есть ли у меня вообще копии).

1

Я знаю, что это старый вопрос, но это первое, что приходит в Google, когда вы ищете «текст иллюстратора одним штрихом», поэтому я подумал, что отвечу.

Во всяком случае, довольно простой способ сделать это — использовать штрихи. Сначала преобразуйте текст в контуры, используя Type > Create Outlines , как и раньше. Затем установите цвет обводки на что-то отличное от цвета текста и увеличивайте размер обводки, пока не получите желаемую толщину. Далее используйте Object > Path > Outline Stroke и разгруппируйте и удалите внешние области.

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

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

2

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

У меня есть хороший способ сделать это:

наброски ударов Текст

Объект > Rasterize

Image Trace > PRESET - Line Art - View - Outlines

Exprand

4434434 1

Чтобы сделать шрифт обведенным и включить штрихи, я делаю следующее:

1. введите нужный шрифт с штрихом, кернингом и т.