Как применить градиент к тексту в иллюстраторе

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

Share this.

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

Используя инструмент «Текст» (Т) пишем любой текст с которым будем работать.

Удаляем обводку и заливку в нашем тексте.

В панели оформления создаем новую заливку два раза.

Выбираем нижнюю заливку и переходим в панель эффектов. Эффекты > Контур > Создать параллельный контур. Устанавливаем настройки на свое усмотрение.

Выбираем нижнюю заливку и применяем к ней градиент.

Помимо обводки мы так же можем применить градиент и к самому тексту.

Share this.

Как в Иллюстраторе сделать градиент

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

Gradient Tool

Как и в Фотошопе за градиент отвечает старый добрый Gradient Tool. Подозреваю, вы уже нарисовали квадратик и спешите выбрать инструмент градиента, чтобы провести им по прямоугольнику и задать градиент так, как это происходит в Фотошопе. Не спешите. Градиент в Иллюстраторе немного иначе. Вначале градиент нужно «задать», а затем настроить. Выберите инструмент Gradient Tool и кликните один раз по объекту.

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

Правый хвостик полоски градиента позволяет вращать и изменять длину полоски. Левый хвостик, как и вся остальная поверхность, позволяет перемещать градиент в пространстве.

Как изменить цвет градиента в Иллюстраторе?

Когда я открыл Иллюстратор в первый раз и попытался задать объекту градиент я не смог это сделать самостоятельно. Ответ пришлось искать в интернете, а на дворе стоял 2005 год. Сегодня с градиентами в иллюстраторе все значительно проще.

Сделайте двойной клик по якорю с цветом на полоске градиента. В выпадающем меню выбирайте любой цвет.

В выпадающей панели 2 вкладки: Color и Swatches. Во вкладке Color мы мешаем цвет на основе цветовой модели в которой работаем на данный момент. Во вкладке Swatches выбираем цвет из сохраненных палитр.

Если на панели Color перед вами лишь черно белая полоска, то это потому что в панели работает цветовая модель Grayscale. Чтобы изменить её на другую, кликните по верхней правой иконке панели, и из меню выберите другую цветовую модель, CMYK, RGB или HSB

Как добавить цвета в градиент?

Как сделать градиент сложнее? Это просто. Выберите инструмент Gradient Tool. Задайте объекту градиент и подведите курсор к полоске градиента. Когда курсор превратится в указатель с плюсиком (+) кликните. Это добавит на полоску градиента дополнительный цвет. Далее вы можете задать якорю свой цвет способом описанным выше.

Панель градиента Gradient

Странно если бы у Иллюстратора не было специальной панели для работы с градиентом. Такая панель есть и чтобы открыть её зайдите в Windows > Gradient. В Верхней части этой панели располагается превью градиента в виде иконки и выпадающее меню разновидностей градиентов. Разновидностей всего две: градиент линейный, и градиент шарообразный (Linear и Radial)

Иконка превью отображает общий вид градиента. Градиент из превью можно перетащить мышкой на любой объект. Это ещё один способ присвоения градиента.

Превью можно перетащить и на панель Swatches. В этом случае градиент будет сохранен в панели Swatches.

Рядом с превью небольшая стрелочка. В выпадающем меню находится список всех градиентов добавленных в панель Swatches. Например, если в панели Swatches нет ни одного градиента, то выпадающее меню пустое. Если это так, то в этом же меню кликните по иконке дискеты. Она сохраняет настроенный градиент на панель Swatches. Сделайте это и у вас появится первый градиент.

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

• Reverse Gradient — разворачивает градиент наоборот.
• Angle — изменяет угол градиента
• Aspect Ratio — изменяет сжимает шарообразный градиент. Это значение не работает с линейным градиентом.

В нижней части панели градиентов находится сама полоска градиента, её узелки и значения. Полоска работает так же как полоска градиента на объекте. Узелки с цветом можно добавить щелкнув по полоске и удалить, «стянув» их с полоски. Цвет узелка можно выбрать двойным кликом по узелку. Кроме того остались в силе и старые методы: цвет узелка можно настроить перетянув на него из панели Swatches образец с цветом, выделить конкретный узелок и настроить цвет на панели Color.

• Оpasity — степень невидимости конкретного узелка с цветом.
• Location — расположение узелка на полоске градиента. Полоска градиента имеет 100 условных пунктов, где 0 — левый конец полоски а 100 — правый.

Овальный градиент

В Иллюстраторе всего две разновидности градиента. Линейный и овальный (Linear, Radial). Овальный градиент настраивается на панели градиента о которой речь шла выше и формально он ни чем не отличается от линейного градиента, не считая, конечно, того что направлен из центра во все стороны.

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

Окружность черного цвета позволяет сжимать овальный градиент, превращая его в супер овал или в маленькую галактику. Эта же настройка отображена на панели Gradients как Aspect Ratio. Однако это ещё не все. Наведите курсор на центральную часть градиента пока курсор не превратится в черную стрелку с звездочкой. Теперь перетяните градиент в сторону, смещая его источник света в сторону.

Градиент и несколько объектов

Допустим вы создали несколько объектов. Открываем панель Gradient и щелкаем по превью градиента. Если задать градиент нескольким объектам, то каждая фигура получит свой собственный индивидуальный градиент.

Чтобы сделать градиент общим для нескольких фигур, выберите инструмент Gradient Tool и задайте новый градиент выделенным фигурам.

Градиент и панель Tools

Пожалуй первая мысль при попытки изменить цвета градиента — это кликнуть по иконке на панели Tools. Увы но это ни к чему не приведет. Иконка градиента на панели Tools, обозначает лишь то, что объекту присвоен градиент. Не более того. Менять цвет градиента через неё нельзя.

Градиент и шрифт

Старые версии Иллюстратора не позволяли присваивать шрифту градиент, что имело определенный смысл. Цели градиента изначально были несколько другими, а применение его на объемных блоках текста в стократ утяжеляли фаил. Прогресс не может стоять на месте, особенно если в конкурирующей программе Corel Draw задавать градиент шрифтам можно давным давно. Однако при попытке применить градиент к тексту даже в самом последнем Иллюстраторе визуально ничего не произойдет. И вот почему.

Illustrator использует продвинутую панель оформления Appearance. Выберите инструмент Type Tool и напишите текст. Выберите инструмент Gradient Tool и кликните по надписи. Посмотрим что происходит на панели Appearance. Откройте её через Windows > Appearance

Как видите градиент добавлен. Однако он находится под значением Characters. Что это? Любая надпись состоит из двух составляющих.

• Type — грубо говоря вся надпись целиком, как объект.
• Characters — конкретная буква шрифта в режиме редактирования.

По умолчанию Type не имеет цвета, а Characters залит черным. Панель оформления Appearance устроена подобно панели слоев. И градиент находится ниже «слоя» Characters, которая залита черным цветом. Чтобы стало ясно что происходит, сделайте двойной клик по Characters и вы все поймете. Решение?

Исправить положением можно двумя способами:

• Переместите градиент выше Characters в панели оформления Appearance
• Сделайте двойной клик по Characters, вы попадете в оформление букв. Отключите черный цвет.

И это все, что вам нужно знать о градиентах в Иллюстраторе.

Похожие записи:

1. Как сделать флаер [часть 3]
2. Гранжевая визитка в Иллюстраторе [ч.2]
3. Как сделать визитку в Фотошопе?
4. Трансформирование объектов в Фотошопе

Применение или изменение градиента

После применения градиента к объекту пользователь может легко заменить или изменить градиент.

Применение градиента к объекту

Выделите объект и выполните одно из следующих действий:

• Чтобы применить последний использованный градиент, щелкните поле «Градиент» на панели «Инструменты» или в поле «Градиентная заливка» палитры «Градиент».
• Чтобы применить последний использованный градиент к невыделенному объекту, который в данный момент не содержит градиент, щелкните объект инструментом «Градиент» .
• Для применения предварительно заданного или ранее сохраненного градиента выберите его в меню «Градиент» палитры «Градиент» или щелкните образец градиента в палитре «Образцы». Совет. Чтобы в палитре «Образцы» были показаны только образцы градиентов, нажмите кнопку «Показать виды образцов» и выберите «Показать образцы градиентов».

Создание эллиптического градиента

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

Выберите «Радиальный» в меню «Тип».
Укажите для пропорции значение, превышающее 100%.
Для наклона эллипса задайте значение угла, превышающее 0.

Изменение цветов в градиенте

Выполните одно из следующих действий:

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

Чтобы изменить цвет узла, выполните одно из следующих действий:

• Дважды щелкните узел градиента (в палитре «Градиент» или выбранном объекте) и укажите новый цвет в появившейся палитре. Чтобы изменить вид появившейся панели, нажмите пиктограмму «Цвет» или «Образцы» вдоль левого края. Щелкните вне палитры, чтобы подтвердить сделанный выбор.
• Перетащите цвет с палитры «Цвет» или «Образцы» на узел градиента.

Примечание.

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

Чтобы добавить в градиент промежуточные цвета, перетащите цвет с палитры «Образцы» или «Цвет» на шкалу градиента палитры «Градиент». Или щелкните под шкалой градиента и выберите цвет так же, как для начального или конечного узла.

Чтобы удалить промежуточный цвет, перетащите квадрат со шкалы градиента или выберите его и щелкните кнопку «Удалить» на палитре «Градиент».

Чтобы настроить положение цветов в градиенте, выполните одно из следующих действий:

• Чтобы изменить средние точки цветовых узлов градиента (точки, в которых два цвета встречаются со значением 50% для каждого), перетащите ромбик, расположенный над шкалой, или щелкните его и введите значение от 0 до 100 в поле «Положение».
• Чтобы изменить конечные точки цветовых узлов градиента, перетащите крайний левый или крайний правый узел градиента, расположенные под шкалой градиента.
• Чтобы изменить направление цветов градиента на противоположное, щелкните «Обратный градиент» в палитре «Градиент».

Чтобы изменить непрозрачность цвета градиента, щелкните узел цвета в палитре «Градиент» и укажите значение в поле «Непрозрачность». Если непрозрачность узла градиента составляет менее 100%, для этого узла появляется значок и цвет отображается «в клетку» на шкале градиента.

Чтобы сохранить новый или измененный градиент в качестве образца, нажмите в палитре «Образцы» кнопку «Новый образец». Или перетащите градиент с палитры «Градиент» или панели «Инструменты» в палитру «Образцы».

Применение градиента к нескольким объектам

Выполните заливку всех объектов градиентом.
Выберите все объекты, которые необходимо залить.
С помощью инструмента «Градиент» выполните одно из следующих действий:

• Для создания градиента с одной градиентной шкалой щелкните в той точке монтажной области, где должен начинаться градиент, и перетащите курсор в точку его окончания.
• Для создания градиента с градиентной шкалой для каждого выделенного объекта щелкните в той точке монтажной области, где должен начинаться градиент, и перетащите курсор в точку его окончания, удерживая нажатой клавишу «Alt» (Windows) или «Option» (Mac OS). После этого можно отрегулировать градиентную шкалу для каждого объекта (несколько градиентных шкал можно создать только для простых контуров).

Изменение направления и радиуса градиента, а также положения его центральной точки

После заливки объекта градиентом можно использовать инструмент «Градиент» и аннотатор (ползунок) градиента, расположенный внутри объекта, для изменения градиента путем создания нового контура с заливкой. Этот инструмент позволяет изменять направление градиента, а также положение его центральной, начальной и конечной точек.

Выберите объект с заливкой градиентом.

Выберите инструмент «Градиент» и выполните одно из следующих действий:

• Чтобы изменить направление линейного градиента, щелкните в точке, где должен начинаться градиент, и перетащите инструмент в нужном направлении. Или поместите инструмент «Градиент» на аннотатор градиента в объекте и, когда курсор превратится в значок поворота , перетащите его для установки угла. Примечание. Направление можно также изменить, задав новое значение в поле «Угол» в палитре «Градиент».
• Чтобы изменить радиус радиального или эллиптического градиента, поместите инструмент «Градиент» на стрелку аннотатора в объекте и перетащите ее для установки радиуса.
• Чтобы изменить центральную точку градиента, поместите инструмент «Градиент» в начало аннотатора градиента в объекте и перетащите его в нужное место.
• Чтобы изменить радиус и угол одновременно, щелкните конечную точку (удерживая «Alt» в Windows или «Option» в Mac OS) и перетащите ее в новое место. Примечание. Если аннотатор (ползунок) градиента не появляется при наведении инструмента «Градиент» на объект с градиентом, выберите «Просмотр» > «Показать градиентный аннотатор».

Урок Иллюстратора #4 — Как работать с градиентом и цветом в Illustrator ⁠ ⁠

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

В данном видео мы разберем:

1. Отличительная черта градиента в фотошоп и иллюстратор

2. Как применить градиент в иллюстраторе к фигурам

3. Как применить градиент в иллюстраторе к тексту

4. Что делать если градиент в иллюстраторе не работает

916 постов 12.5K подписчика

Подписаться Добавить пост

Правила сообщества

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

Вставить свои 5 копеек. Если будет своя альтернативная точка зрения или совет по какой-то теме, то это приветствуется.

1. Публиковать сообщения, картинки, не соответствующие тематике;

2. Размещать ссылки рекламного характера;

3. Перегибать палку;

Если оступился:

в случае нарушений, доступ в группу будет закрыт, а пользователь занесен в бан-лист;

2 года назад

Выделяешь все буквы, жмешь Ctrl+8 объединяя все в одну фигуру

Похожие посты
2 года назад

Время⁠ ⁠

Концепт-логотипы для слова тайм(vremya).

Пробую делать всякие штуки в Adobe illustrator

Показать полностью 4
4 года назад

Девушки с лисами⁠ ⁠

Векторная вариация на пост Девушки и лисы

Работа выполнена моей девушкой для конкурса одной школы рисования.

4 года назад

«Дизайнер»⁠ ⁠

Теща занимается аэрографией и рисованием на заказ.
На днях поступил заказ на разработку логотипа для одной торговой компании.
Нужно было сделать эскиз логотипа, подготовить его, перевести в вектор и раскрасить. Далее заготовка должна была уйти в одну из рекламных кампаний города для подготовки и печати.
Теща рисует хорошо, а вот с компьютером на «Вы», поэтому мы с супругой были добровольно-принудительно привлечены к проекту в свободное от работы время.
Сложностей особо не возникло. Теща нарисовала рисунок, заказчику все понравилось. Жена перевела рисунок в электронный вид, раскрасила и отправила почтой все наработки в рекламное агенство.
И тут начались странности. Проект делался в Иллюстраторе, а агенство работает в Кореле. Чет у них там слезло/перелезло, цвета не те — исправляйте.
Черт с ним, перевели в CMYK, подправили цвета, проверили у себя в Кореле — все хорошо. Отправили рекламщикам.
Сообщение от агенства — чет у нас опять не выходит, пришлите проект в формате tiff.

Хозяин барин. Переделали, отправили.
Сообщение от агенства — у нас тут при увеличении качество рисунка плохое и артефакты вылазят. Переделайте рисунок на больший размер.

Жена звонит в агенство и попросила подойти к телефону того, кто работает с нашим проектом. Трубку взяло нежное создание женского пола (по голосу лет 18) и представилось дизайнером.
Супруга поинтересовалась какого собственно хрена они хотят. Дизайнер объясняет, что файл который мы прислали маленького разрешения и поэтому она не может распечатать баннер с ним. На вопрос, а какого хрена они растягивают растровое изображение, если им изначально прислали вектор дизайнер спросила — А что такое растр?

Занавес. Таких матов от жены (когда она мне это рассказывала) я ещё не слышал.

Вот так и живём — юрист и геоэколог знают чем отличается растровое изображение от векторного, а сотрудник рекламного агенства нет.

Спасибо, что дочитали.

Теща моя, часть работы моя, тег «моё»

Показать полностью 2
4 года назад

Babushka: Review⁠ ⁠

Вчера в нашем сообществе @mrcosmomez опубликовал свой проект с просьбой высказать своё мнение и критику по нему. У меня этого набралось столько, что я решил опубликовать всё отдельным постом

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

— Части логотипа

Платок и очки, никак друг с другом не сочетаются. У них разная цветовая гамма, разная толщина, разная стилистика (у очков тени и блики есть, у платка ничего) и так далее. Плюс очки не вписаны в композицию: они просто приклеены поверх

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

— Кривой вектор

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

Применим основные правки. Сделаем логотип более симметричным. Увеличим масштаб паттерна, улучшив его восприятие. Заменим очки, сделав их тоще, и слив с основой. А так же поработаем с надписью. Кстати о ней

— Плохая типографика названия

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

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

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

— Фирменный стиль (айдентика)

Главной проблемой примеров использования логотипа, которые представил автор, было отсутствие гармоничной цветовой гаммы. Выбранный им паттерн имел тёмно синюю основу, которая не имела ничего общего с яркими розовыми, голубыми и зелёными оттенками. Другой проблемой было сухое использование названия — коробки и бутылки с надписью «Babushka» не имели ничего общего с логотипом

Как исправить? Определиться с основными цветами. Именно с ними будет связана идентичность логотипа. Вместо сплошных цветов на коробках можно использовать тот самый паттерн с логотипа. Коробка будет выглядеть в разы интереснее, и она сразу будет ассоциироваться с брендом логотипа

Предложенный мной вариант тоже далеко не идеальный, но более гармоничный

Что можно сказать в конце? В ходе работы всегда старайтесь оценивать результат по нескольким критериям: сочетание элементов друг с другом, лаконичность композиции и лёгкая читаемость. Само собой это далеко не всё, но просто соблюдая эти три пункта — можно добиться очень хороших результатов

Успехов в обучении и работе! И вкусного чая)