Урок Illustrator — Как создать векторную штриховку и тисненый узор — Уроки
Цель Урока
В этом уроке мы рассмотрим несколько способов создания штриховки в иллюстраторе, которые включают в себя обрезку штриховки по заданному контуру. Затем мы применим полученные знания для создания объемного узора, который состоит только из путей.
Создание штриховки
Для создания штриховки (то есть параллельных линий, которые находятся на равных расстояниях друг от друга) можно использовать несколько методов. Давайте рассмотрим некоторые из них.
Дублирование линий
Переместите линию на некоторое расстояние, удерживая клавишу Opt / Alt. Это действие приведет к ее дублированию.
Теперь воспользуемся горячими клавишами иллюстратора Cmd / Ctrl + D необходимое количество раз для последовательного повторения последнего действия.
Вы можете устанавливать определенное расстояние между линиями штриховки. Для этого выделяем линию, затем переходим Object > Transform > Move…, устанавливаем величину горизонтального или вертикального смещения и нажимаем на Copy.
Теперь снова используем комбинацию клавиш Cmd / Ctrl + D для повторения перемещения.
Использование Blend Tool для создания штриховки
Создадим две линии, для этого вы можете использовать технику дублирования, как было указано выше.
Выделяем обе линии, затем используем Cmd / Ctrl + Opt / Alt + B для применения к ним эффекта бленда.
Для управления параметрами эффекта два раза кликните по иконке Blend Tool (W) на панели инструментов. Устанавливаем необходимые нам параметры в открывшемся диалоговом окне.
Этот метод дает нам большую свободу действий при получении штриховки по сравнению с дублированием. Вы можете устанавливать расстояние между линиями или количество шагов эффекта.
Кроме того вы можете изменить форму одной или обеих линий, получая интересные эффекты.
На рисунке выше к правой линии применен Зиг Заг эффект (Effect > Distort & Transform > Zig Zag…). Если с линиями штриховки предстоит работать в дальнейшем, то переходим Object > Blend > Expand, затем Object > Expand Appearance .
Использование Transform Effect для создания штриховки
И наконец, вы можете получать штриховку, используя Transform Effect. Выделим линию, затем переходим Effect > Distort & Transform > Transform… и устанавливаем необходимые параметры такие, как смещение и количество копий, наблюдая за происходящими изменениями.
Штриховка объектов
Использование Clipping and Opacity Mask
Итак, у нас есть штриховка и объект.
Расположим объект выше линий штриховки, он также должен находиться над линиями штриховки в панели Layers.
Выделяем объект и линии штриховки, затем используем комбинацию горячих клавиш Cmd / Ctrl + 7 для создания Clipping Mask.
Для ограничения линий штриховки вы также можете создать Opacity Mask. Заливаем верхний объект белым цветов.
Выделяем объект и линии штриховки, затем выбираем Make Opacity Mask в сплывающем меню панели Transparency.
Обрезка штриховки по контуру объекта
Если линии штриховки будут представлять собой пути переменной толщины, то они, чаще всего, должны быть обрезаны по контуру объекта. И здесь пользователи Adobe Illustrator сталкиваются с трудностями. Надеюсь, у вас не будет проблем с решением этого вопроса после прочтения моего урока.
Использование Shape Builder Tool
Замечание: Shape Builder Tool доступен только пользователям Adobe Illustrator CS5 – CS6. Выделяем объект и линии штриховки. Берем Shape Builder Tool и, удерживая клавишу Opt / Alt, проводим курсором по внешним линиям штриховки, нажав на кнопку мыши.
Скорее всего, вам понадобиться повторить это действие несколько раз и даже удалять отдельные штрихи. Все зависит от сложности объекта, к которому должна быть применена штриховка.
Теперь контур объекта может быть удален.
Использование Live Paint Bucket (метод разработал seryozha )
Выделяем штриховку и объект, затем переходим Object > Live Paint > Make
Отметьте Paint Strokes. Выбираем другой цвет для stroke, затем проводим курсором по линиям внутри объекта.
Некоторые штрихи придется перекрасить отдельно. Как и в предыдущем способе это зависит от сложности объекта.
Теперь переходим Object > Expand. Выделяем одну из черных линий, затем переходим Select > Same > Stroke Color
Нажимаем на Delete.
Методы, описанные выше, плохо подходят для обрезки штриховки по контуру объекта со сложной формой. Давайте рассмотрим более универсальный метод с использованием панели Pathfinder и в продолжение этого метода создадим объемный узор, который состоит только из линий.
Шаг 1
Итак, мы имеем объект со сложной формой, который представляет собой составной путь (Compound path) и штриховку.
Продублируем узор и штриховку (Cmd / Ctrl + C; Cmd / Ctrl + F), они нам еще понадобятся в дальнейшем. А пока отключим их видимость в панели Layers. При помощи Rectangle Tool (M) создадим прямоугольник, который будет накрывать всю штриховку и лежать ниже узора.
Шаг 2
Выделяем узор и прямоугольник, затем нажимаем на Minus Front в панели Pathfinder.
Вероятно, что в результате этих действий мы получим группу из нескольких объектов. У нас должен быть один Составной путь, поэтому переходим Object > Compound Path > Make или используем горячие клавиши иллюстратора Cmd / Ctrl + 8. Применяем к полученному составному пути обводку.
Шаг 3
Выделяем составной путь и линии штриховки, затем нажимаем Outline в панели Pathfinder.
Выделяем одну из цветных линий, затем переходим Select > Same > Stroke Color и нажимаем на Delete.
У нас остались только линии, которые не имеют обводки.
Нам осталось присвоить им обводку нужного цвета и толщины.
Как вы можете видеть, этот способ прекрасно работает, и я считаю его наилучшим. Теперь продолжим создавать объемный узор.
Шаг 4
Отключим видимость заштрихованного узора и включим видимость копии узора и штриховки в панели Layers.
Применяем к узору обводку, затем выделяем узор и штриховку и нажимаем на Outline в панели Pathfinder.
Выделяем одну из цветных линий, затем переходим Select > Same > Stroke Color и нажимаем на Delete.
Применяем к оставшимся линиям обводку.
Теперь мы имеем внешнюю и внутреннюю штриховку узора. Я применил к ним разные цвета для наглядности.
Шаг 5
В дальнейшем нам предстоит работать со штриховкой внутри узора, давайте исследуем ее пути. Для этого применим к ним Arrowheads в панели Stroke.
Как вы можете видеть, мы имеем группу разнонаправленных путей.
Для создания тисноного узора все пути должны иметь одно направление. К сожалению, не существует простого способа повернуть пути в одну сторону. Поэтому нам придется сделать это вручную. Берем Pen Tool (P) и кликаем по начальной точке одного из «неправильно” направленных путей.
Нажимаем на клавишу P для того чтобы не продолжать отредактированный путь, затем редактируем направление следующего «неправильного” пути.
Вот такая вот монотонная работа: клик + P + клик + P +…. Но нам нужно это сделать.
Когда работа будет сделана нам нужно отключить стрелки в панели Stroke.
Шаг 6
Теперь давайте создадим Pattern Brush, которую мы будем применять к штриховке узора для создания объема. При помощи Pen Tool (P) создадим путь, показанный на рисунке ниже. Толщина пути должна быть равна толщине штриховки, а начальная и конечная точка лежать на одной горизонтальной прямой.
Шаг 7
Разрезаем путь в точках A и B (я раздвинул части пути для наглядности и удобства дальнейшей работы).
Копируем все эти пути и вставляем их вперед. Теперь давайте уменьшим значение Keyboard Increment (Cmd / Ctrl + K)
Выделяем точку A левого верхнего пути при помощи Direct Selection Tool (A), затем смешаем ее вниз несколькими нажатиями на клавишу со стрелкой вниз.
На ту же величину смещаем точки B, C и D копий центрального и правого пути.
Шаг 8
Выделяем все 6 путей, берем Reflect Tool (O) и кликаем в точке A, удерживая клавишу Opt / Alt
Выбираем Horizontal и нажимаем на Copy в диалоговом окне.
Отключаем обводку у нижних путей.
Шаг 9
Берем Rectangle Tool (M) и создаем прямоугольник без заливки и обводки, который проходит точно через точки A, B и C путей расположенных слева.
Поместим прямоугольник ниже этих путей. Создадим аналогичные прямоугольники для путей, расположенных в центре и справа.
Работайте очень аккуратно, как известно, Pattern Brush не любит небрежного отношения. На рисунке ниже показаны элементы кисти в режиме Outline.
Шаг 10
Выделяем и группируем (Cmd / Ctrl + G) по отдельности правую, среднюю и левую часть кисти.
Теперь последовательно перетаскиваем эти элементы в панель Swatches.
Шаг 11
Открываем панель Brushes (F5) и выбираем во всплывающем меню New Brush…
Теперь выбираем Pattern Brush в открывшемся диалоговом окне.
Выбираем для Side, Start and End Tiles ранее сохраненные образцы (swatches) и выбираем Colorization Method – Hue Shift, для того чтобы иметь возможность перекрашивать обводку.
Шаг 12
Применяем кисть к внутренней штриховке узора.
Изменим цвет обводки внутренней и внешней штриховки.
А вот как выглядит этот узор с волнистой штриховкой.
Описанный в этом уроке стиль применяется для создания защитных узоров на банкнотах и других ценных бумагах. Теперь вы должны пообещать мне, что не станете фальшивомонетчиками. Будьте всегда в курсе свежих новостей о векторной графике, новых уроков работы в Adobe Illustrator, статей и интервью посвященных графическому дизайну. Команда RU.Vectorboom работает для Вас! До новых встреч!
Паттерн штриховка в Illustrator — kobieta_mon — ЖЖ
? LiveJournal- Find more
- Communities
- RSS Reader
- Shop
- Help
- Login
- CREATE BLOG Join
- English
(en)
- English (en)
- Русский (ru)
- Українська (uk)
- Français (fr)
- Português (pt)
- español (es)
- Deutsch (de)
- Italiano (it)
- Беларуская (be)
Десять полезных приёмов в Adobe Illustrator ~ Записки микростокового иллюстратора
В нашей группе в контакте я уже давно собираю всякие хитрости и фишки в иллюстраторе вот в этом альбоме:
И сегодня мы решили, что для удобства их лучше опубликовать на блоге с подробным описанием. Поэтому встречайте десять полезных приёмов в Adobe Illustrator.
1. Ромашка
В иллюстраторе можно легко сделать форму цветка из многоугольника с помощью эффекта Pucker & Bloat. Не забудьте разобрать эффект через Expand Appearance, чтобы получить в итоге простой векторный объект.
2. Хоткеи через ActionsВ Adobe Illustrator можно назначить хоткеи для любого действия или цепочки из нескольких действий, если записать их в Actions, даже если эти инструменты и функции отсутствуют в настройках Keyboard Shortcuts.
Например на хоткей можно повесить функции PathFinder, или даже вызов скриптов. Если действие не добавляется в Actions при обычной записи через кнопочку Begin Recording, то его можно прописать вручную через меню панели > Insert Menu Item.
3. Warp искажения
Любой объект можно исказить через Warp. Доступно 15 стилей искажений, благодаря чему из одной прямой ленточки можно быстро сделать массу изогнутых вариаций.
Выделив Warp объект, можно легко его редактировать через панель информации, расположенной в самом верху сразу под меню иллюстратора.
Разобрать Warp в простые шейпы можно через команду Expand.
4. Document Info
В иллюстраторе есть очень полезная панель Document Info (Window > Document Info). С её помощью можно легко проверить вектор на наличие открытых путей и прочих элементов, недопустимых на стоках.
Достаточно выделить всё (Ctrl+A) и выставить в меню панели галочку Objects. В списке вы увидите всю информацию о выделенных объектах, и сразу сможете понять, какие элементы присутствуют в файле.
В примере выше Document Info показывает наличие 3-х открытых путей и 2-х кистей.
Классификация для всего списка:
Paths — пути. Если есть открытые, то необходимо закрывать или экспандить. Очень помогает скрипт Extended Select.
Compound Paths — составные пути, допустимы для стоков.
Gradient Meshes — градиентные сетки, допустимы для стоков.
Symbol Instances — символы, нужно экспандить.
All Type Objects — тексты, нужно экспандить.
По остальным типам текстов то же самое.
Clipping Masks — маски, допустимы для стоков
Opacity Masks — непрозрачные маски, допустимы для стоков
Но иногда маски не принимают из-за их некорректного использования.
Transparent Groups (Objects) — прозрачные элементы, допустимы для стоков
RGB Objects — цветовая модель RGB, допустимы для стоков
По остальным цветовым моделям то же самое, только не смешивайте их в одном файле.
Spot Color Objects — плашечные цвета, нужно перевести в Process Color
Pattern Objects — текстурные заливки, нужно экспандить.
Gradient Objects — градиенты, допустимы для стоков
Brushed Objects — кисти, нужно экспандить.
Styled Objects — стили, в зависимости от содержания оформления, но в большинстве случаев нужно экспандить.
Fonts — шрифты, нужно экспандить. Считай тоже самое, что All Type Objects, но зачем-то их сделали отдельно.
Linked Images — залинкованные изображения, нужно удалять.
Embedded Images — встроенные изображения, нужно удалять.
Обычно оба этих пункта, это растр.
Non-Native Art Objects — какие-то непонятные объекты из измерения X. Появляются крайне редко, в результате применения различных термоядерных эффектов с последующим экспандом или другими шаловливыми манипуляциями. Если вы обнаружите такой, то сохраните файл. Напишите потом диссертацию по этой теме, и возможно вам дадут Нобелевскую или пригласят на TED.
5. Круговой орнамент через кисти
В иллюстраторе можно легко сделать круговой орнамент с помощью Pattern Brush.
1. Сделайте фрагмент узора, перетащите в панель Brushes, тип кисти Pattern Brush.
2. Примените кисть к кругу — готово!
Интересный эффект наблюдается, если у круга с Pattern Brush увеличивать толщину обводки. Иллюстратор начнёт пересчитывать кисть, создавая различные вариации узора.
Также прикольные круговые орнаменты и мандалы рисуются в зеркальных шаблонах Live Mirror.
6. Сбросить Bounding Box
В иллюстраторе, при выделении объекта, появляется ограничительная рамка Bounding Box, с помощью которой этот объект можно трансформировать. При повороте эта рамка тоже поворачивается, тем самым не даёт в дальнейшем сжимать объект по горизонтали или вертикали. Но её можно сбросить через Object > Transform > Reset Bounding Box.
7. Тёмный/светлый интерфейс
Интерфейс Adobe Illustrator не всегда был тёмным. Если вам привычнее работать в светлой версии иллюстратора, то можно изменить внешний вид интерфейса через меню Edit > Preferences > User Interface, настроив значение яркости Brightness.
8. Штриховка через Scribble
В Adobe Illustrator можно легко сделать штриховку, если применить к любой форме эффект Scribble.
Штриховка очень гибко настраивается через опции эффекта. Можно поменять как наклон, так и толщину штриха и интенсивность.
Разобрав эффект через команду Expand Appearance, получаем самые простые обводки, которые в свою очередь можно разобрать в замкнутые формы через Expand.
9. Светяшки и боке
В Adobe Illustrator есть инструмент Flare Tool, который используется для создания блика. Но если этот блик разобрать через Object > Expand (галочка только Object), то получатся обычные круги, градиенты и режимы наложения у которых будут хорошо подобраны для световых эффектов.
Останется только их разгруппировать и накопировать, чтобы получить массу светяшек для своего вектора.
10. Поворот системы координат
В иллюстраторе можно легко повернуть координатную систему: Ctrl+K > Constrain Angle > задаём значение угла поворота.
Автофигуры и другие инструменты будут ориентированы под новую систему координат. Благодаря этому очень удобно делать дизайн под наклоном.
Если у вас тоже есть свои хитрости и приёмы, оставляйте в комментариях.
Роман aka dacascas специально для блога Записки микростокового иллюстратора
Видеоуроки Adobe Illustrator с поддержкой преподавателя. Всё, начиная от первых шагов в иллюстраторе и заканчивая подготовкой работ для экзаменов и для продажи на микростоках. Получи доступ к интерактивному видеокурсу прямо сейчас! Подробности в этой статье: Adobe Illustrator шаг за шагом
Как в иллюстраторе сделать обводку из точек. Как создать векторную штриховку и тисненый узор в Adobe Illustrator
В этом уроке Illustrator мы научимся рисовать красивые светящиеся линии. Результат выглядит очень эффектно.
 | Шаг 1. Создаем новый документ (Ctrl+N ) размером 8 на 11 дюймов и, используя Инструмент Прямоугольник (Rectangle Tool (M)) , рисуем черный прямоугольник размером с наш документ. |
| Шаг 2. Теперь, выбираем Инструмент Mesh Tool (Сетчатый Градиент (U)) и кликаем им, как на рисунке внизу. В точке пересечения меняем цвет на темно синий (C=100, M=40, Y=0, K=60 ). Для выделения конкретной точки используем Инструмент Direct Selection Tool (Стрелка (A)) . |
| Шаг 3. С помощью все того же рисуем ещё одну горизонтальную линию и закрашиваем точку пересечения её с вертикальной линией в красный (C=0, M=100, Y=100, K=50 ) цвет. |
Шаг 4. Последнюю точку этой сетки (добавляем ещё одну линию (см. рисунок)) закрасим темно оранжевым (C=0, M=80, Y=100, K=30 ) цветом.
Шаг 5. Создадим Кисть, которую мы будем использовать при рисовании Линий. Для этого выбираем Инструмент Rectangle Tool (M) и рисуем им прямоугольник длиной 4 дюйма и высотой 0,125 дюйма . Закрашиваем его 5% черным.
Шаг 6. Выделяем прямоугольник, нажимаем Ctrl+C (чтобы скопировать), Ctrl+F (чтобы вставить наверх) и изменяем высоту (на 0,03 дюйма) и заливку (на белую).
Шаг 7. Выделяем первый прямоугольник (который потолще) и меняем его Прозрачность (Transparency) на 0% . Если вам трудно работать с этим почти невидимыми прямоугольниками перенесите их на ранее нарисованную Сетку.
Шаг 8. Выделяем оба прямоугольника и идем Object>Blend>Make (объект>переход>Сделать) . Теперь, они должны выглядеть так:
Шаг 9. Перносим наш Blend на Панель Кисти (Brushes) . Для новой кисти задаем тип New Art Brush (Объектная) , все остальный учтановки оставляем как есть. Сам Blend нам больше не понадобиться, так что его можно удалить или убрать в сторонку.
Как создать векторную штриховку и тисненый узор в Adobe Illustrator
? LiveJournal- Find more
- Communities
- RSS Reader
- Shop
- Help
- Login
- CREATE BLOG Join
- English
(en)
- English (en)
- Русский (ru)
- Українська (uk)
- Français (fr)
- Português (pt)
- español (es)
- Deutsch (de)
- Italiano (it)
- Беларуская (be)
Отрисовка эскиза в Adobe Illustrator в стиле старой карикатуры
Итоговый рисунок, который будем создавать.
Рисунки в стиле старых карикатур можно найти в газетах, журналах и анимации. В этом уроке вы познакомитесь с несколькими приемами отрисовки эскиза, в том числе научитесь создавать собственные кисти, а также объединять фигуры и кисти и имитировать тень с помощью штриховки.
Шаг 1
Для начала нарисуем эскиз и откроем его в Иллюстраторе (Файл > Поместить). Обратите внимание на линии, в разных местах толщина неодинаковая. Закрепите слой с эскизом, чтобы во время отрисовки он не двигался.
Шаг 2
Перейдем к отрисовке контуров. Создайте новый слой поверх слоя с эскизом. Отрисовку будем делать в новом слое. Создать кисти для обводки из эллипса очень легко. Выберите инструмент Эллипс (L) и создайте эллипс. Его высота будет максимальной толщиной обводки. Высоту можно задать в Параметрах.
Шаг 3
Для обводки лучше использовать кисть в виде капли. Сделайте из эллипса нечто похожее на фигуру внизу (см. рисунок). Затем перетащите в палитру Кисти и сохраните как Изобразительную Кисть (Art Brush).
Шаг 4
Вот несколько советов, которые помогут упростить работу.
- Лучше, чтобы цвет кисти отличался от цвета эскиза. Я выбрала красный. Если работаете Пером (P), для обводки выберите такой же цвет.
- В поле Клавиатурное приращение (Keyboard Increment) установите 0,25 пикселей. Для этого откройте меню Редактирование (Edit) > Установки (Preferences) > Основные (General). Это поможет вам очень аккуратно перетаскивать точки контура.
- Лучше, чтобы цвет слоя, в котором вы работаете, отличался от цвета эскиза и кистей. Это поможет вам отличить все второстепенные элементы контура: точки, линии, и т. д. Я выбрала зеленый. Дважды щелкните слой в палитре Слои и выберите для него цвет.
Шаг 5
Перейдем непосредственно к отрисовке. Выберите инструмент Перо (P), создайте кривые сегменты и примените к ним кисти.
Примечание: Очень часто кисть повернута не так, как вам нужно. Но это легко исправить. Выберите инструмент Перо (P), щелкните опорную точку, и направление кисти изменится. Смотрите рисунок внизу.
Шаг 6
Толщину кисти можно изменить в палитре Обводка, задав нужное значение в поле Толщина (Weight).
Шаг 7
Создайте кисти по форме линий, которые вы отрисовываете.
Шаг 8
Выделите созданные линии, откройте меню Объект (Object) > Преобразовать внешний облик (Expand Appearance) и в палитре Обработка контуров нажмите Соединить. Получится некую фигуру. Добавим к ней все последующие элементы, и в результате получится цельное изображение.
Шаг 9
Не всегда удается создать кисть по форме линии эскиза. В этом случае можно соединить фигуры, созданные с помощью инструмента Перо (P), и простые геометрические фигуры.
Шаг 10
Рассмотрим прием объединения двух кистей. С помощью инструмента Перо (P) создайте контур уха. Выберите инструмент Ножницы (C) и разрежьте контур на две части. Создайте две кисти, как показано на рисунке.
Примените созданные кисти к каждой части контура. Затем выделите обе части контура, откройте меню Объект (Object) > Преобразовать внешний облик (Expand Appearance) и в палитре Обработка контуров нажмите кнопку Соединить. Ненужные опорные точки удалите.
Шаг 11
Рассмотрим еще один способ создания обводки с неодинаковой толщиной. Выберите инструмент Перо (P) и создайте кривую как показано на рисунке.
Скопируйте ее и вклейте вперед (Ctrl + C, Ctrl + F). Выделите копию и перетащите ее горизонтально вверх.
Перетаскивая опорные точки верхней линии, преобразуйте ее так, как показано на рисунке.
Замкните контур инструментом Перо (P).
Шаг 12
И последний прием создания обводки. Выберите инструмент Перо (P) и создайте контур по эскизу. Не снимая выделение с линии, откройте меню Объект (Object) > Преобразовать внешний облик (Expand Appearance).
Разрежьте контур в точках 1 и 2 с помощью Ножниц (C). Выделите необходимую часть контура с помощью инструмента Прямое выделение (A) и нажмите Удалить.
С помощью Пера (P) создайте по линиям контур от точки 1 к точке 2.
Шаг 13
Используя все рассмотренные приемы, отрисуйте весь эскиз.
Шаг 14
Придайте изображению нужный тон с помощью штриховки. Изобразительную кисть (Art Brush), как обычно, создайте из эллипса.
Создайте новый слой ниже слоя с основным рисунком, но выше слоя с эскизом. В этом слое мы сделаем штриховку. Выберите инструмент Линейный сегмент (Line Segment), создайте две линии и примените к ним созданную кисть. Не снимая выделение с линии, откройте меню Объект (Object) > Переход (Blend) > Создать (Make).
Толщина линий и число шагов зависит от плотности тени в определенном месте. Плотность тени можно также передать путем наложения одного штриха на другой.
Ничего страшного, если штрихи наползают на основной элемент рисунка.
Шаг 15
Выделите все штрихи, откройте меню Объект (Object) > Переход (Blend) > Преобразовать (Expand) и Объект (Object) > Преобразовать (Expand).
И теперь, не снимая выделение со штриховки, выберите инструмент Ластик (Eraser) и удалите штрихи, которые наползают на основной элемент рисунка. Важно, чтобы слой с основным рисунком был закреплен в палитре Слои. Иначе вы сотрете местами основной рисунок.
Шаг 16
Используя этот прием, добавьте штриховку в других местах рисунка.
Шаг 17
А теперь сделаем обрезку. Создайте прямоугольник без заливки, только с обводкой, толщина обводки любая.
Освободите все слои и подслои (это очень важно в этом шаге), выделите все объекты (Ctrl + A) и в палитре Обработка контуров нажмите кнопку Обрезать.
Применив эту команду, мы выполним две задачи:
- Обрежем рисунок по прямоугольнику.
- И обрежем штриховку по форме рисунка!
Завершение
Чтобы сделать на чем-нибудь акцент, можно добавить цвет с помощью инструмента Интерактивная заливка (Live Paint Bucket). Например, можно залить цыпленка желтым цветом. Рисунок — готов. Чтобы придать рисунку старый карикатурный стиль, постарайтесь использовать как можно больше линий и штрихов. И один-два акцента цветом, не больше.
Хотите заработать на своей иллюстрации? Узнайте как это сделать с помощью микростоков.
У вас остались вопросы или есть что добавить по теме статьи? Напишите в комментариях.
Урок по созданию векторной иллюстрации в стиле карандашного эскиза в Illustrator — Уроки
Final Image Preview
В этом уроке я расскажу вам, как создать эскизные кисти в Adobe Illustrator для воссоздания карандашного эскиза в векторной работе. Затем мы применим одну из созданных кистей на практике и познакомимся со всеми этапами создания этой векторной иллюстрации. В уроке использовались плагины для Adobe Illustrator — Phantasm CS и DrawScribe plugins. Вы узнаете о некоторых инструментах этих плагинов и их применении для решения практических задач.
В этом уроке я буду использовать эскиз, который любезно предоставил Valentine Sant. На эскизе изображен персонаж русской народной сказки — Царевна Лягушка.
Наша задача – воспроизвести стилистику карандашного эскиза в векторной работе. Прерывистые и неоднородные линии созданные карандашом мы будем воспроизводить при помощи Art Brushes. Давайте научимся создавать подобные кисти.
Создание эскизных кистей
Существует множество способов создания подобных кистей. Я покажу вам некоторые из них, и я думаю, этого будет достаточно для того чтобы вы смогли экспериментировать и создавать карандашные кисти в Adobe Illustrator самостоятельно. Начнем с создания формы кистей.
Линия созданная от руки
Первой сделаем форму кисти переменной толщины для создания лини созданной от руки. Берем Rectangle Tool (M) и создаем прямоугольник с заливкой черного цвета. Высота прямоугольника должна быть несколько пикселей (в моем случае 4 px), однако это не имеет принципиального значения, так как мы можем отрегулировать параметры кисти в процессе ее сохранения.
Теперь выбираем Warp Tool (Shift + R) на toolbar и дважды кликаем по его иконки, для того чтобы открыть диалоговое окно Warp Tool Options. Придаем форме кисти инструмента эллиптический вид, оставив остальные настройки без изменений.
Совершая горизонтальные движения инструментом, придаем прямоугольнику вид, подобный показанному на рисунке ниже.
Мы получили форму первой кисти, о том как сохранять и настраивать кисть поговорим после того как создадим все разновидности кистей, так как все они будут иметь одинаковые настройки.
Грубая кисть
Создадим еще один прямоугольник, его размеры могут быть такими же, как и у первой формы кисти. Не снимая выделения с прямоугольника, переходим Effect > Distort & Transform > Roughen… и устанавливаем параметры, указанные на рисунке ниже.
Несомненно, ваши параметры могут быть совершенно другими в зависимости от того, какого эффекта вы хотите добиться.
Дискретная кисть
Создаем новый прямоугольник с заливкой нейтрального серого цвета.
Для создания этой формы кисти мы будем использовать Phantasm CS. Не снимая выделения с прямоугольника, переходим Effect > Phantasm CS > Halftone… и устанавливаем параметры, указанные на рисунке ниже.
Наша задача просто получить равномерный массив объектов. Это могут быть не только окружности, но и квадраты, линии и даже символы, если вы предварительно их создали и сохранили. Теперь переходим Object > Expand Appearance и разгруппируем полученную группу окружностей (Cmd / Ctrl + Shift + G)
Теперь воспользуемся двумя простыми скриптами Random Resize (масштабирует выделенные объекты случайным образом в указанном диапазоне) и Random Opacity (присваивает выделенным объектам случайные значения прозрачности в указанном диапазоне). Эти скрипты разработал мой друг Yemz специально для этого урока. Я уверен, они помогут вам не только в создании кистей, но и для решения других задач в вашей векторной практике. Вы сможете бесплатно скачать эти скрипты здесь. Не снимая выделения с окружностей, запускаем скрипт Random Resize и вводим максимальное и минимальное значение scale в процентах в Script Prompt и нажимаем кнопку OK
Теперь запускаем скрипт Random Opacity и вводим максимальное и минимальное значение прозрачности
Группируем все выделенные объекты и уменьшаем высоту группы до 4-5 px.
Вы можете совмещать техники создания грубой кисти с техникой создания дискретной кисти. То есть, сначала получить форму, применив к прямоугольнику эффект Roughen, а затем применить к ней эффект Phantasm CS Halftone и завершить обработку при помощи Random Resize and Random Opacity скриптов. Таким образом, я получил форму кисти, которая показана на рисунке ниже.
В качестве формы в эффекте Phantasm CS Halftone был выбран Square.
Мягкая карандашная кисть
Описанные выше формы кистей отлично подходят для воссоздания линий твердого карандаша. А сейчас мы создадим кисть для воссозданный линии мягкого карандаша. Создадим ряд прямоугольников с заливкой черного цвета, как это показано на рисунке ниже.
Не снимая выделения, применим к ним скрипт Random Opacity, установив диапазон прозрачности в пределах 10 – 20 %
Теперь переходим Object > Transform > Transform Each…. отмечаем «Random” и «Preview” в диалоговом окне и изменяем параметры Scale и Move так, чтобы добиться результата подобного, показанному на рисунке ниже.
Нажимаем кнопку OK и группируем все прямоугольники. Копируем группу и вставляем ее вперед (Cmd / Ctrl + C, Cmd / Ctrl +F) и уменьшаем ее высоту.
Разгруппируем верхнюю группу и применим к ее объектам скрипт Random Opacity, установив диапазон прозрачности в пределах 20 – 30 %
Группируем все объекты и уменьшаем высоту группы до 4 – 5 px.
Эта форма напоминает Bristle Brush в Adobe Illustrator CS5, только вы сделали ее своими руками для решения своих задач и это возможно в любой версии программы.
Создание кисти и ее параметры
Все эскизные кисти будут иметь одинаковые параметры, поэтому я покажу, как создавать кисть на примере одной из созданных выше форм. Перетаскиваем форму в панель Brushes и сохраняем новую кисть как Art Brush
Я буду использовать в этом уроке графический планшет, поэтому в диалоговом окне Art Brush Options устанавливаю зависимость толщины обводки от давления на стилус и максимальное и минимальное значение ширины обводки.
Для того чтобы цвет кисти соответствовал цвету обводки я выбрал в качестве Colorization Method — Tint. Я сохранил все созданные формы с такими параметрами. На рисунке ниже показано как выглядят обводки, к которым были применены эти кисти.
Комбинируя описанные техники, вы можете получить большое разнообразие эскизных кистей. Если по каким-либо причинам у вас недостаточно времени на эксперименты по созданию собственных кистей, вы можете воспользоваться коллекцией готовых Sketchy Brushes, которую я собрал специально для вас. Настройки готовых кистей должны быть такими, как я указал выше. Если они отличаются, измените их.
Настройка инструментов для создания скетча
Для создания контура переменной толщины обычно используют Paintbrush Tool (B). Для настройки этого инструмента дважды кликните по его иконке на панели инструментов и установите параметры, указанные на рисунке ниже
Но я буду использовать Dynamic Sketch Tool, который является одним из инструментов DrawScribe плагина. Dynamic Sketch Tool дает мне ряд преимуществ над Paintbrush Tool (B). Это возможность динамически управлять гладкостью, точность и толщиной существующих путей. Вы также можете вручную изменять зависимость толщины обводки от выбранного параметра, например от давления. Кроме того все настройки инструмента находятся в панеле, а не в диалоговом окне, как у Paintbrush Tool (B), что позволяет получить быстрый доступ к ним в процессе работы
Для настройки этого инструмента дважды кликните по его иконки на панели инструментов и установите параметры, указанные на рисунке ниже
Эти параметры немного отличаются от параметров по умолчанию. Почему я настраиваю инструмент именно таким образом, вы сможете прочитать здесь. Dynamic Sketch Tool имеет еще ряд замечательных свойств, о которых мы поговорим в процессе создания скетча.
Создание векторного эскиза (Sketching)
Создание контура
Вставляем отсканированный эскиз в текущий документ и слой с ним преобразуем в шаблонный, два раза кликнув по его названию и поставив галочку напротив Template в окне Layer Options.
Создаем новый слой выше Template Layer и, выбрав одну из созданных вами кистей или кистей из моей коллекции, создаем контур нашей иллюстрации при помощи Dynamic Sketch Tool.
Линии векторного эскиза не должны быть такими точными как при создании контура при помощи каллиграфических кистей, ведь мы воспроизводим карандашный эскиз, поэтому небольшая неаккуратность приветствуется в этом случае. Теперь давайте рассмотрим некоторые приемы, которые раскроют уникальные свойства Dynamic Sketch Tool.
Вы можете создавать от руки идеальные окружности. Для этого создайте несколько круговых витков на месте радужной оболочке глаза лягушки.
Если у вас установлена гладкость 100% в Dynamic Sketch panel и выбраны опции ‘Auto-Detect Continuous Repeated Closed Path Sketch Traces’ и ‘Smooth Toward Circular’ в окне Dynamic Sketch Preferences, вы получите идеальную окружность.
Gesture trimming режим позволяет нам удалить части пересекающихся путей посредством зигзагообразного зачеркивания. Убедитесь, что этот инструмент выбран в панели инструментов и перечеркните необходимый путь от3 до 5 раз.
Давайте поговорим о другом режиме этого гибкого инструмента рисования. Intelligent path joining режим позволяет Вам соединять пересекающиеся пути удаляя части которые выходят за точку пересечения.
Вы заметили, что я провел идеально ровную линию. Нет, у меня не твердая рука и я не использовал линейку, просто для создания прямолинейных сегментов удерживайте клавишу Opt / Alt. Это, конечно, не полный перечень функций Dynamic Sketch Tool, исчерпывающую информацию вы найдете здесь.
Создание теней и полутеней
Для создания теней и полутеней, как и в любом карандашном эскизе, мы будем использовать штриховку, варьируя толщину штрихов в зависимости от плотности тени
Для получения гладкой линии перехода от света к тени я использовал Eraser Tool и в некоторых случаях вспомогательную линию, которую необходимо удалить после штрихования.
Если вы используете только один вид Art Brush, то желательно изменять направление штриховки для получения неоднородного результата.
Финальная обработка
Создание фона
Нам необходимо создать фон . Для фона мы будем использовать текстуру бумаги. Вы можете скачать эту текстуру здесь (работа пользователя deviantART: ~ S3PTIC-STOCK). Вставьте текстуру в иллюстрацию (File > Place …)
Работать с растровым изображением мы будем используя плагин для Adobe Illustrator — Phantasm CS. Выделим растровую текстуру и нажмем на кнопку Embed на Control panel. Теперь давайте отрегулируем уровни, для этого переходим Effect > Phantasm CS > Levels…
Поместим фон ниже всех объектов векторного эскиза
Применение Phantasm CS Duotone Effect к векторному скетчу
Duotone effect чаще всего используется, чтобы лучше воспроизвести средние и яркие оттенки монохромных изображений, где не возможно передать все оттенки при печати черными чернилами. Для цвета полутонов чаще всего используют: синий, желтый, коричневый и красный цвета. Группируем и выделяем все объекты векторного скетча и переходим Effect > Phantasm CS > Duotone…. Теперь подбираем необходимые цвета и регулируем кривые этих цветов на диаграмме в диалоговом окне Phantasm CS Duotone
Создание бликов
Для создания бликов я снова буду использовать Dynamic Sketch Tool. Выбираем белую заливку и отключаем обводку. Берем Dynamic Sketch Tool и включаем Edit or Continue paths mode в Dynamic Sketch panel и создаем формы бликов.
Я предпочитаю использовать именно Dynamic Sketch Tool для такой работы, потому что мы можем динамически управлять гладкостью и точностью путей.
Некоторые профессиональные дизайнеры удивлялись, когда видели привью к этому уроку. Как ты это сделал? Это вектор? — спрашивали они. Как видите, ничего сложного здесь нет. Немного фантазий и времени на эксперименты, и любая задача будет решена, какой бы сложной она не казалась. Признаюсь, и я сначала не знал, как я это сделаю.
Автор урока Ярослав Лазунов
Оригинал урока на Английском языке: AstuteGraphics