Как создать бесшовный узор в стиле Хохлома, используя Adobe Illustrator. Рисование узора в иллюстраторе


Как сделать бесшовный узор в Иллюстраторе

В этом уроке мы разберем, как сделать простой и в то же время трендовый геометрический паттерн в Иллюстраторе. Вначале мы создадим повторяющуюся фигуру и затем будем сдвигать ее используя «Быстрые» Направляющие (Smart Guides). И в завершении у нас получиться современный узор, который мы с легкостью сможем перекрашивать. Используя эту технику можно создавать множество узоров в Adobe Illustrator.

Шаг 1. Создаем фон

Начнем с того, что нарисуем фон для нашего узора. Используем инструмент Прямоугольник - Rectangle Tool (M) и кликнем по рабочему полю. В открывшемся окошке установим размер прямоугольника 100 px по Ширине (Width) и 100 px по Высоте (Height). После этого нажимаем ОК. Я выбрал мятный цвет, но цвет прямоугольника может быть любой.

Создаем фон

Шаг 2. Создаем фигуру

Теперь давайте создадим повторяющуюся форму для нашего паттерна. Выберем цвет Обводки (Stroke) – черный, а цвет Заливки (Fill) – уберем.

Выберем инструмент Эллипс - Ellipse Tool (L) в панели инструментов, затем кликнем по рабочему полю левой кнопкой мыши. В появившемся диалоговом окне зададим размеры круга, 20 px по Ширине (Width) и 20px по Высоте (Height) затем нажимаем ОК.

Затем удерживая кнопки Alt (создает копию) и Shift (передвигает ровно по линии) сдвигаем круг. Теперь их должно получиться два. Выделив оба круга, выбираю инструмент Поворот - Rotate Tool (R) и нажимаю кнопку Enter. В появившемся диалоговом окне задаю угол поворота 90 градусов и нажимаю Копировать (Copy).

Мы практически закончили с созданием фигуры, осталось только объединить объекты в одну фигуру. Идет в панель Обработка контуров (Pathfinder) и нажимаем кнопку Соединение (Unite). Теперь фигура готова.

Создаем фигуру

Шаг 3. Создаем фигуру

Поместите фигуру поверх фона, который мы сделали в прошлом шаге. Поменяйте цвет обводки с черного на белый. Можете также поэкспериментировать с Толщиной (Weight) обводки в панели Обводка (Stroke).

После этого, преобразуем обводку в векторную фигуру, для этого нажмем в верхней панели Объект > Разобрать (Object > Expand).

Теперь выровняем наш объект относительно прямоугольника. Зайдем в панель Выравнивание (Align). Убедитесь, что оба объекта выбраны (квадратный фон и фигура будущего паттерна) и нажмите кнопки Горизонтальное выравнивание по центру (Horizontal Align Center) и Вертикальное выравнивание по центру (Vertical Align Center).

Создаем фигуру

Шаг 4. Создаем паттерн (узор)

Теперь нам нужно будет сдвигать фигуру, но делать это нужно точно, поэтому нужно активировать «Быстрые» направляющие (Smart Guides), для этого нажмем в верхней панели Просмотр > «Быстрые» направляющие - View > Smart Guides (Ctrl + U).

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

Создаем паттерн (узор)

Шаг 5. Создаем паттерн (узор)

Делаю тоже самое, зажав кнопку Alt, только сдвигаю фигуру вниз.

Создаем паттерн (узор)

Шаг 6. Создаем паттерн (узор)

Теперь, также копирую фигуру влево.

Создаем паттерн (узор)

Шаг 7. Создаем паттерн (узор)

Теперь, также копирую фигуру вправо.

Создаем паттерн (узор)

Шаг 8. Создаем паттерн (узор)

Теперь делаю копии фигур по диагонали. Но беру исходную фигуру, для копии не из центра, т.к. ее сложно точно передвинуть по диагонали, а беру фигуру слева и передвигаю ее наверх. 

Создаем паттерн (узор)

Шаг 9. Создаем паттерн (узор)

Повторяю действие, нажав кнопку Alt, перемещаю и копирую правую фигуру наверх.

Создаем паттерн (узор)

Шаг 10. Создаем паттерн (узор)

Тоже самое повторяю, копируя фигуры вниз.

Не забываю зажимать кнопку Alt при перемещении.

Создаем паттерн (узор)

Шаг 11. Группировка узора (паттерна)

Выберите все наши 9 объектов фигур, без квадрата и сгруппируйте (правая кнопка мыши > Сгруппировать). Эта группировка поможет нам впоследствии и сэкономит время.

Группировка узора (паттерна)

Шаг 12. Создание узора (паттерна)

Теперь выберем сгруппированные объекты и квадрат. Перейдем в панель Обработка контуров и там нажмем кнопку Минус Первый (Crop). Обратите внимание, что сгруппированные фигуры должны лежать выше, чем объект квадрат. Результат должен выглядеть так:

Создание узора (паттерна)

Шаг 13. Создание узора (паттерна)

Чтобы создать Паттерн (узор), необходимо открыть панель Стили Графики (Swatches), затем просто взять наш узор (паттерн) и перенести в эту панель.

Создание узора (паттерна)

Шаг 14. Использование узора (паттерна)

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

Теперь берем инструмент Прямоугольник - Rectangle Tool (M) и создаем квадрат по высоте и ширине в 600 px. Теперь опять перейдем в панель Стили Графики (Swatches) и выберем созданный нами паттерн.

Использование узора (паттерна)

Шаг 15. Использование узора (паттерна)

Теперь посмотрим, как можно поменять цвет этого узора. Для этого выберем наш квадрат, который залит паттерном и перейдем Редактирование > Редактировать цвета > Перекрасить графический объект (Edit > Edit Colors > Recolor Artwork). В открывшимся окне, выберем раздел Редактировать (Edit).

После этого нажмем по цепочке Создавать ссылки на гармоничные цвета (Link harmony colors), расположенной по центру и чуть правее.

Теперь можно сдвигать кружки и этим простым движение будет меняться цвет нашего узора.

Я остановился на голубом цвете для примера.

Использование узора (паттерна)

Шаг 16. Масштабирование узора (паттерна)

Если нам нужно изменить масштаб самого паттерна,  а не его контура, нажимаем правой кнопкой мыши, затем выбираем Трансформировать > Масштабирование (Transform > Scale).  Задаем нужный масштаб в процентах.

Масштабирование узора (паттерна)

Шаг 17. Финальное изображение

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

sveres.ru

Как создать векторный растительный орнамент в Adobe Illustrator - Уроки

Цель Урока

Некоторое время назад я был вдохновлен прекрасными абстрактными цветочными узорами, которые создает Sandra (mikiverevikim) при помощи чернильной ручки и бумаги. Я решил попробовать создать орнамент в таком стиле в Adobe Illustrator, но, не имея подходящего инструмента, до сих пор откладывал это. Сегодня мы сделаем это вместе, потому что появился долгожданный инструмент - MirrorMe, который отражает мгновенно  вашу работу относительно одной или нескольких осей симметрии.

Создание стилизованных цветов при помощи MirrorMe (Apply to Layer)

Шаг 1

Приступим к созданию стилизованного цветка. Берем MirrorMe Tool и кликаем на рабочей области.

Откроем панель MirrorMe (Window > MirrorMe > MirrorMe panel), в которой установим количество осей симметрии равное 8 и кликаем "Apply to Layer” в аннотационной системе панели MirrorMe.

Теперь все, что мы нарисуем в активном секторе, будет динамически отражаться в остальных секторах.

Шаг 2

Я буду рисовать при помощи Dynamic Sketch Tool (плагин Dynamic Sketch), хотя для рисования в режиме "Apply to Layer” подходят любые инструменты рисования, как стандартные, так и разработанные Astute Graphics. Открываем панель Dynamic Sketch (Window > Dynamic Sketch > Dynamic Sketch panel), затем устанавливаем максимальную и минимальную толщину обводки. Выбираем давление на стилус (Stylus Pressure) из выпадающего меню, в случае если вы будете использовать Графический планшет или скорость рисования (Sketching Speed), если вы будете рисовать при помощи мышки.

Теперь создадим путь из точки A до точки B, пересекая вертикальную ось.

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

Шаг 3

Если вас по каким-нибудь причинам не удовлетворяет полученный результат, то вы можете отредактировать положение пути при помощи Direct Selection Tool или InkScribe Tool (плагин InkScribe).

Вы также можете управлять переменной шириной обводки, используя Width Tool или один из инструментов плагина Width Scribe, например Width Selector Tool.

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

Шаг 4

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

При помощи InkScribe Tool я создал несколько параллельных путей, большинство из которых пересекают оси симметрии.

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

Когда все элементы цветка будут готовы, нажмите на кнопку Remove Axes в панели MirrorMe.

Выделяем и группируем полученные объекты (Cmd/Ctrl + A, Cmd/Ctrl + G). Теперь мы можем использовать цветок при создании композиции.

Шаг 5

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

Копируем оси выбрав соответствующий пункт из всплывающего меню панели MirrorMe, затем нажимаем на кнопку Remove Axes.

Выделяем и группируем все созданные объекты этого цветка, после чего блокируем группу в панели Layers. Теперь выбираем Paste Axes as Provisional в сплывающем меню панели MirrorMe.

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

Теперь изменим количество осей.

Обращаю ваше внимание на то, что манипуляции с осями не повлияли на ранее созданные лепестки, так как эта группа была блокирована в панели Layers.

Шаг 6

Отмечаем "Apply to Layer” в аннотационной системе.

Теперь вы можем рисовать новые объекты, рождая неповторимые формы.

Создайте в этом шаге несколько разнообразных по форме цветов.

Создание Pattern Brushes (Apply to Selection)

Шаг 7

Создадим еще один лепесток. Как не трудно догадаться, я создал его при помощи MirrorMe с одной вертикальной осью симметрии в режиме Apply to Layer.

Создадим зеркальную копию лепестка, используя одну горизонтальную ось симметрии. Нажимаем на Apply to Selection в аннотационной системе.

Поместим лепестки так, как это показано на рисунке ниже.

Шаг 8

Выделяем лепесток, расположенный справа, устанавливаем угол для осей равный 270 градусов в панели MirrorMe, затем берем MirrorMe Tool и устанавливаем ось так, чтобы она проходила через точку A, которая является вершиной левого лепестка. Нажимаем на кнопку Apply to Selection.

Шаг 9

Создадим при помощи Rectangle Tool (M) несколько прямоугольников, вытянутых по горизонтали.

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

Шаг 10

Копируем последний прямоугольник и вставляем его назад (Cmd/Ctrl+ C; Cmd/Ctrl+ B). Отключаем заливку и обводку у нижнего прямоугольника. Группируем элементы созданной плитки. Продублируем группу и перекрасим один ее элемент для получения еще одной плитки для Pattern Brush.

Перетаскиваем плитки в панель Brushes и сохраняем, как Pattern Brushes.

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

Теперь нам осталось создать композицию из созданных элементов…

Примеры композиций

ru.vectorboom.com

Рисуем узор пейсли в Adobe Illustrator • ARTshelter

В этом уроке мы будем рисовать этнический узор пейсли в Illustrator. У нас он более известен под названием турецкий огурец. Но, на самом деле, его оригинальное название – бута.

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

Чтобы не затягивать урок, и вы не заскучали, мы не будем делать узор бесшовным. Если вы хотите создать бесшовную текстуру, то посмотрите урок по рисованию цветочного узора. Просто замените цветы на турецкие огурцы.

Начнем!

Создаем основу узора

Шаг 1

Для начала создаем новый документ File – New (Файл — Новый) размером 850 х 850 пикселей.

Далее начинаем рисовать основу узора. С помощью Ellipse Tool (L) (Овал) создаем овал. Заливаем фигуру белым цветом, а для обводки выбираем черный или темно-серый. Затем с помощью Convert Anchor Point Tool (Shift+C) (Преобразовать опорную точку) создаем острую верхушку овала: кликаем по верхней опорной точке фигуры, чтобы удалить ее. В результате появится острый угол.

После этого мы деформируем фигуру. Переходим Effect – Warp – Arc (Эффект – Деформация – Дуга) и в появившемся окне вводим необходимые настройки. Поставьте галочку напротив Preview (Просмотр), чтобы видеть изменения сразу во время настройки эффекта.

Эта фигура пригодится нам позже, поэтому дублируем ее и убираем копию в сторону.

Рисуем узор пейсли в Adobe Illustrator

Шаг 2

Продолжаем трансформировать фигуру. Выбираем ее и переходим Effect – Warp – Arc (Эффект – Деформация – Дуга). В открывшемся окне Warp Options (Настройки деформации) вводим настройки, как показано ниже. После этого применяем к фигуре Object – Expand Appearance (Объект – Разобрать оформление).

Рисуем узор пейсли в Adobe Illustrator

Шаг 3

Далее мы создадим дубликат получившейся фигуры. Для этого выбираем копию, кликаем по ней правой кнопкой мышки и переходим Transform – Reflect (Трансформирование – Отражение). В открывшемся диалоговом окне устанавливаем Axis (Оси) на Vertical (Вертикальная), Angle (Угол) – на 90 градусов и жмем кнопку Copy (Скопировать). Перемещаем получившуюся фигуру правее и уменьшаем ее. Размещаем копию на верхнем заостренном конце оригинальной фигуры, как показано ниже. Теперь выбираем оба объекта и на панели Window – Pathfinder (Окно – Обработка контуров) жмем кнопку Unite (Объединить), чтобы объединить их в одну фигуру.

Чтобы место перехода одной фигуры в другую было более широким и гладким, выделяем их, берем инструмент Smooth Tool (Сглаживание контуров) и проводим по линиям в месте соединения. В результате в этом месте появится плавный переход. Таким образом, мы создали основу, внутри которой будем добавлять элементы, чтобы нарисовать узор пейсли.

Рисуем узор пейсли в Adobe Illustrator

Рисуем цветок для узора

Шаг 1

Рисуем окружность с белой заливкой и темно-серой (или черной) обводкой. Чтобы получить идеальную окружность, берем Ellipse Tool (L) (Овал) и зажимаем клавишу Shift. Копируем полученный круг и вставляем дубликат на передний план (Ctrl+C, Ctrl+F). Уменьшаем его и размещаем точно по центру оригинала. Для пропорционального изменения размера, во время масштабирования удерживаем клавиши Alt и Shift. Для маленькой окружности на панели Stroke (Обводка) устанавливаем пунктирную линию.

Создаем третью копию, но в этот раз больше оригинальной окружности (копируем клавишами Ctrl+C и Ctrl+B, затем масштабируем, удерживая Alt и Shift). Выбираем последнюю окружность и переходим Object – Path – Add Anchor Points (Объект – Контур – Добавить опорную точку). В результате на окружности появятся дополнительные четыре опорные точки. Применяем эту команду столько раз, сколько лепестков хотите получить на цветке.

Шаг 2

Теперь превратим большую окружность в лепестки. Выделяем ее и переходим Effect – Distort & Transform – Pucker & Bloat (Эффект – Исказить и трансформировать – Втягивание и раздувание). Активируем функцию Preview (Просмотр) и корректируем параметры эффекта, чтобы получить контур цветка, как показано ниже. После этого не забываем применить команду Object – Expand Appearance (Объект – Разобрать оформление). Создаем копию этих лепестков и увеличиваем их размер (Ctrl+C, Ctrl+B).

После этого создаем большую копию маленькой пунктирной окружности (Ctrl+C, Ctrl+V) и размещаем ее ниже остальных фигур (Ctrl+X, Ctrl+B).

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

Шаг 3

Теперь мы должны создать новую кисточку. Рисуем окружность с помощью Ellipse Tool (L) (Овал), зажав при этом клавишу Shift. Используя Rectangle Tool (M) (Прямоугольник), рисуем прямоугольник, перекрывающий нижнюю часть окружности. Это фигура вспомогательная, поэтому ее цвет не важен. Выделяем обе фигуры и на панели Pathfinder (Обработка контуров) жмем кнопку Minus Front (Минус верхний). В результате у нас получилась половинка окружности.

Выделяем получившийся полукруг и перетаскиваем его на панель Brush (Кисть) (открыть ее можно через главное меню Window (Окно)). В результате откроется новое окно, в котором мы выбираем Pattern Brush (Бордюрная кисть) и жмем ОК. В следующем открывшемся окне применяем настройки, как показано ниже. Обратите внимание, что Colorization Method (Метод окрашивания) должен быть установлен на None (Нет). Затем жмем ОК и наша кисточка готова к использованию.

Шаг 4

Создаем новую окружность для цветка и, не снимая с нее выделение, на панели Brush (Кисть) выбираем нашу кисточку. Эта окружность должна располагаться ниже остальных. Для этого мы активируем инструмент Selection Tool (V) (Выделение), кликаем по фигуре правой кнопкой мышки и выбираем Arrange – Send to Back (Монтаж – Поместить на задний план).

Применяем к окружности Object – Expand Appearance (Объект – Разобрать оформление). Затем копируем ее, вставляем под оригиналом (Ctrl+C, Ctrl+B) и увеличиваем масштаб, чтобы получилось два ряда лепестков. Цветок для узора пейсли готов!

Заполняем основу цветами

Шаг 1

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

Шаг 2

Теперь мы создадим уменьшенную копию основы-лепестка и поместим ее внутрь оригинала. Как это сделать? Выделяем нужную фигуру, переходим Object – Path – Offset Path (Объект – Контур – Создать параллельный контур) и вводим отрицательное число (между -4 и -10). В результате над основой появится уменьшенная копия.

Далее создаем еще одну копию дубликата основы, которую мы также слегка уменьшаем. Выделяем вторую копию, переходим Object – Path – Offset Path (Объект – Контур – Создать параллельный контур) и вводим отрицательное число. Меняем тип линии последней копии на пунктирную.

И, наконец, создаем еще одну уменьшенную копию внутри предыдущей фигуры. Заполняем ее темно-серым цветом, как показано ниже. Мы почти закончили!

Шаг 3

Заполняем свободное пространство внутри серой фигуры белыми окружностями разного диаметра.

Шаг 4

В этом шаге мы создадим еще одну кисточку, чтобы разнообразить узор пейсли. Для начала мы берем копию каплевидной фигуры, которую скопировали в начале урока. Убедитесь, что вы применили к ней Expand Appearance (Разобрать оформление).

Далее мы отрежем часть этой фигуры. Рисуем прямоугольник, цвет и обводка не важны. Прямоугольник должен перекрывать нижнюю часть капли. Выделяем обе фигуры и на панели Pathfinder (Обработка контуров) применяем Minus Front (Минус верхний). Далее будем работать с верхней половинкой капли.

Отключаем обводку фигуры и заливаем ее темно-серым цветом. Затем копируем фигуру (Ctrl+C, Ctrl+F) и меняем цвет заливки дубликата на белый. Зажимаем клавишу Shift и тянем за верхнюю часть, чтобы уменьшить. Далее дублируем последнюю фигуру и вставляем ее выше предыдущей (Ctrl+C, Ctrl+F). Меняем цвет заливки на темно-серый. Снова тянем за верхнюю часть, чтобы уменьшить. В результате у вас должна получиться фигура в виде многослойного лепестка, как показано ниже.

Выделяем созданную фигуру и перемещаем ее на панель Brush (Кисть). В появившемся окне выбираем Pattern Brush (Бордюрная кисть) и жмем ОК. В следующем окне настраиваем параметры кисточки и жмем ОК. Теперь у нас есть новая кисточка для работы!

Рисуем узор пейсли в Adobe Illustrator

Шаг 5

Применяем ее к самому большому лепестку узора. Для этого выбираем нужную фигуру и на панели Brush (Кисть) кликаем по созданной кисточке.

Рисуем узор пейсли

Шаг 1

Группируем основной элемент узора пейсли. Для этого выделяем его и жмем Ctrl+G. Много раз дублируем получившийся элемент и заполняем им все рабочее пространство. Корректируем размер каждой копии, чтобы получить более интересный результат.

Шаг 2

Свободное пространство заполняем копиями цветов, которые мы рисовали во втором разделе урока.

Шаг 3

Также мы можем создать еще один вид цветов. Берем внутреннюю окружность и внешние лепестки с первого цветка и заливаем лепестки темно-серым цветом.

Распределяем новый цветок по узору.

Шаг 4

Над всем узором создаем прямоугольник без заливки и обводки. Для этого используем Rectangle Tool (M) (Прямоугольник). Кликаем левой кнопкой по рабочему полотну и в появившемся окне устанавливаем ширину и высоту на 850 пикселей, затем жмем ОК.

Чтобы разместить квадрат точно в центре полотна, мы воспользуемся панелью Window – Align (Окно – Выравнивание). Проверяем, чтобы на верхней панели параметр Align To (Выравнивание относительно) был установлен на Align to Artboard (Выравнивание относительно рабочей области). Чтобы этот параметр появился на панели, должен быть выделен нужный объект на рабочем полотне. На панели Align (Выравнивание) жмем кнопки Horizontal Align Center (Горизонтальное выравнивание по центру) и Vertical Align Center (Вертикальное выравнивание по центру). Далее выделяем весь узор вместе с квадратом (для этого можно воспользоваться клавишами Ctrl+A) и переходим Object – Clipping Mask – Make (Объект – Обтравочная маска – Создать) (Ctrl+7). Эта команда спрячет все детали узора, которые выступают за квадрат.

На данный момент у узора прозрачный фон. Чтобы это исправить, создаем квадрат размером 850 х 850 пикселей с белым цветом заливки. Выравниванием его относительно монтажной области и размещаем под текстурой (Ctrl+С, Ctrl+B). Мы закончили!

Поздравляю! Теперь вы знаете, как нарисовать знаменитый узор пейсли в Illustrator. Надеюсь, вы узнали что-то новое для себя. Оставляйте свои варианты узоров в комментариях. Используйте свою фантазию и творческий потенциал на полную силу!

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

comments powered by HyperComments

artshelter.info

Как сделать симметричный узор в иллюстраторе: klivenkova

В последнее время я основательно подсела на рисование вот таких штук:stock-vector-symmetry-monochrome-ornament-131853638stock-vector-lace-sepia-symmetry-element-131271311stock-vector-symmetry-monochrome-ornament-131853641stock-vector-monochrome-symmetry-ethnic-ornament-130530629

Рисующие люди спрашивают, как это сделано.Думаю, это хороший повод попробовать сделать пост-инструкцию)

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

1. Рисуем шедевр:) у меня это одна линия, но если объектов несколько, надо сгруппировать (ctrl+G)Новый рисунок (0)

2. Поверх рисуем треугольник с углом 45 градусов (я делаю так: создаю вертикальную линию, копирую её, поворачиваю копию на нужный угол и соединяю их в одну фигуру)Новый рисунок (1)

3. Выделяем всё и выполняем обрезкуНовый рисунок (2)

4. В получившейся группе уголок красим в какой-нибудь отличный от основного цвет, чтобы он не потерялся. Остальные незакрашенные объекты удаляем.Новый рисунок (3)

5. Начинаем колдовать! То есть трансформировать:)Новый рисунок (4)

6. Сначала зеркалим сегмент.Новый рисунок

7. Жмём "ОК", снова заходим в "Трансформирование" - и множим по кругуНовый рисунок (5)

8. Очень удобно, что сегмент можно редактировать, и изменяться будут все копии.Новый рисунок (6)

9. Потом разбираем оформление и разгруппировываем всё.121

10. Удаляем контрастный центр и снова группируем.122И всё)

По такому же принципу делаются узоры с бОльшим количеством сегментов, разница только в углах треугольника (шаг 2) и поворота фигур (шаг 7)stock-vector-floral-round-symmetry-pattern-ornamental-frame-129003188stock-vector-floral-round-symmetry-pattern-129003170stock-vector-floral-round-symmetry-pattern-129003212stock-vector-round-symmetry-ornament-with-cereals-129003203

Жду вопросов, замечаний, ласковой критики:)

Эти и другие мои картинки на Шаттерстоке

klivenkova.livejournal.com

Урок Illustrator - Как создать векторный винтажный узор, используя pattern brush - Уроки

Цель урока

создание векторной винтажной рамки в adobe illustrator

Создание pattern brush у многих дизайнеров, даже опытных, вызывает некоторые трудности. В сегодняшнем уроке я расскажу, как правильно создавать такую кисть в Adobe Illustrator. Для создания элементов векторного орнамента мы будем использовать InkScribe Tool плагина DrawScribe, что позволит работать более эффективно.

Шаг 1

Давайте начнем наш урок с создания элементов орнамента винтажной рамки. Для создания орнамента я предпочитаю использовать InkScribeTool. Этот инструмент позволяет нам работать более быстро и точно, чем, используя старый добрый Pen Tool (P). В этом вы убедитесь в процессе нашей работы. Итак, берем InkScribe Tool и создаем путь, который состоит из четырех прямолинейных сегментов.

Как вы видите, сегменты имеют "ручки призраки". Это обычные ручки, которые содержит кривая Безье, но пока не активные. Мы создаем форму листка и она должна быть симметричной. Сейчас мы применим один трюк, который поможет вам создавать динамические симметричные формы. Выделяем созданный путь, затем переходим Effect > Transform & Distort > Transform… и устанавливаем параметры, указанные на рисунке ниже.

Шаг 2

Теперь, если мы активизируем одну из "ручек призраков" при помощи InkScribe Tool, то увидим, что наша форма изменится симметрично.  Этот трюк позволяет нам правильно оценивать всю симметричную форму целиком.

Итак, манипулируя ручками кривых и положением точек, приводим форму к виду, показанному на рисунке ниже.

Шаг 3

Как вы понимаете, у нас существует только один путь. Левая половина формы это всего лишь его отображение, полученная при помощи эффекта. Для дальнейшей работы нам потребуется сделать ее реальной. Переходим Object > Expand Appearance.

Разгруппировываем полученные объекты два раза, затем выделяем верхние точки касания путей и соединяем их (Command / Ctrl + J). Те же действия проделаем с нижними точками касания путей.

Теперь форма листа представляет собой один замкнутый путь.

Шаг 4

Создадим вертикальную линию в центре листа и применим к ней треугольный профиль в панели Stroke.

Теперь создадим два криволинейных сегмента и применим к ним тот же профиль.

Шаг 5

Выделяем эти три пути, затем переходим Object > Expand Appearance.

Объединяем полученные объекты при помощи Unite в панели Pathfinder.

Теперь выделяем все созданные объекты, затем нажимаем Minus Front в панели Pathfinder. Удалим лишние точки при помощи функции Smart Remove point инструмента InkScribe.

Шаг 6

Создадим две окружности при помощи Ellipse Tool (L), затем соединим их центры вертикальной линией.

Группируем все созданные объекты (Command/ Ctrl + G).

Шаг 7

Выделяем группу, берем Rotate Tool (R) и, удерживая клавишу Option / Alt, кликаем в центре нижней окружности. Устанавливаем угол равный 90 градусов в открывшемся диалоговом окне, затем нажимаем на Copy.

Два раза используем комбинацию горячих клавиш иллюстратора Command / Ctrl + D, для того чтобы повторить последнее действие.

Шаг 8

Выделяем все объекты, затем переходим Object > Transform > Rotate… и устанавливаем угол равный 45 градусам.

Создаем окружность без заливки с обводкой черного цвета.

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

Шаг 9

Перетаскиваем группу вправо, удерживая клавиши Shift и Option/Alt, что приведет к ее дублированию.

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

Шаг 10

Берем Scissors Tool (C) и разрезаем правую окружность в точке A.

Сместим нижнюю точку вместе разреза вправо.

Соединим точки A и B при помощи InkScribe Tool. В панели InkScribe выбраны опции "Draw a curved segment” и "Smooth point”. Эти опции позволяют нам сразу создать плавный переход криволинейного сегмента в прямолинейный в точке B.

Манипулируя ручками точек криволинейного сегмента A и B, приведем его к виду, показанному на рисунке ниже.

Шаг 11

Создадим еще два криволинейных сегмента при помощи InkScribe Tool.

При помощи Spiral Tool создадим две спирали и поместим их так, как показано на рисунке ниже.

Создадим две окружности и поместим их на концах спиралей.

Шаг 12

Создадим два эллипса.

Выделим их, затем нажмем на Minus Front в панели Pathfinder.

Мы получили форму еще одного листочка. Иногда такие формы удобней создавать именно таким путем.

Шаг 13

Группируем все объекты второго элемента орнамента. Теперь выделим его и переходим Object > Transform > Reflect…, выбираем Horizontal Axis в диалоговом окне и нажимаем на кнопку Copy.

Переместим новый элемент орнамента горизонтально вправо.

Шаг 14

Выделяем третий элемент орнамента, затем переходим Object > Transform > Rotate…, и устанавливаем угол, равный -90 градусов, затем нажимаем на кнопку Copy.

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

Шаг 15

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

Выделяем вертикальную направляющую, затем переходим Object > Transform > Move… и устанавливаем величину горизонтального смещения влево, нажимаем на кнопку Copy.

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

Шаг 16

При помощи InkScribe Tool или Pen Tool (P) создаем путь, который состоит из двух прямолинейных сегментов. Точки этого пути должны точно лежать на правой и верхней направляющей.

Используя эту технику, создадим еще два пути так, как это показано на рисунке ниже.

Теперь направляющие могут быть удалены.

Шаг 17

Все элементы нашего векторного винтажного орнамента готовы, давайте приступим к созданию pattern brush. Нам необходимо определить основные элементы кисти.  Площадь угловой плитки выделена красным цветом на рисунке ниже.

Изменим длину прямолинейных путей так, чтобы их крайние точки лежали точно на краях угловой плитки.

Шаг 18

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

Нам необходимо ограничить площадь плиток реальными векторными объектами. Это должны быть прямоугольники без заливки и обводки.

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

Шаг 19

У боковой плитки не хватает трех прямолинейных путей. Создадим их.

Выделяем все элементы угловой плитки (в том числе и прямоугольник без заливки и обводки, который соответствует ее размерам) и переносим в панель Swatches.

Те же действия совершаем с элементами боковой плитки (не забудьте выделить прямоугольник без заливки и обводки  и в этом случае).

Шаг 20

Открываем панель Brushes (Window > Brushes) и выбираем New Brush в сплывающем меню.

В открывшемся диалоговом окне выбираем Pattern Brush.

Применяем к side tile и corner tile "pattern swatches”, которые мы создали в предыдущем шаге. Для того чтобы цвет кисти соответствовал цвету обводки выбираем Colorization method: Tint

Нажимаем OK. Создадим прямоугольник произвольного размера и применим к нему созданную кисть.

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

Не расстраивайтесь, если с первого раза у Вас не получится точно состыковать элементы орнамента. Я должен признаться, что это очень кропотливая работа и у меня это получилось далеко не с первого раза. Для точной стыковки элементов вы можете просматривать их в режиме Outline preview (Command / Ctrl + Y).

ru.vectorboom.com

Урок Adobe Illustrator - Как создать бесшовный узор в стиле Хохлома. - Уроки

Цель урока

Khokhloma seamless pattern

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

 

Вы можете скачать исходный векторный файл к данному уроку

 

Требования

  •    
  • Программа: Adobe IllustratorCS-CS5;
  •    
  • Уровень: Средний
  •    
  • Время выполнения: 3-4 часа

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

Шаг 1

Каждый орнамент состоит из повторяющихся элементов. Давайте приступим к их созданию. Начнем с создания ягод рябины. Берем Rectangle Tool (M) и создаем квадрат черного цвета, будем его использовать как фон, для того чтобы правильно подбирать цвета элементов орнамента. Теперь берем Ellipse Tool (L) и создаем окружность с заливкой красного цвета.

ashberry for the russian ornament

Создадим еще две окружности одну желтого цвета, а другую черного цвета, как это показано на рисунке ниже.

ashberry for the russian ornament

Шаг 2

Создадим Art Brush для создания блика на ягоде рябины. Берем Polygon Tool и создаем треугольник.

ashberry for the russian ornament

Берем Direct Selection Tool (A) и перемещаем вершину прямоугольника вниз, как это показано на рисунке ниже.

ashberry for the russian ornament

Не снимая выделения с этой точки, конвертируем ее из угловой в гладкую.

ashberry for the russian ornament

Перетаскиваем созданную форму в палитру Brushes и сохраняем новую кисть как Art Brush.

ashberry for the russian ornament

Шаг 3

Берем Ellipse Tool (L) и создаем окружность без заливки с обводкой любого цвета.

ashberry for the russian ornament

Теперь берем Scissors Tool (C) и разрезаем эту окружность в точках 1 и 2. Выделяем и удаляем верхнюю часть окружности.

ashberry for the russian ornament

К оставшейся части окружности применяем Art Brush, созданную в предыдущем шаге.

ashberry for the russian ornament

Выделяем и группируем (Cmd/Ctrl + G) все элементы ягоды.

Шаг 4

Создадим еще одну ягоду рябины. Теперь берем Ellipse Tool (L) и создаем окружность с заливкой красного цвета. Размер этой окружности немного меньше первой ягоды.

ashberry for the russian ornament

Создаем новую окружность с заливкой желтым цветом. Не снимая выделения с окружности, переходим Effect> Distort & Transform> Pucker & Bloat и устанавливаем -75% в диалоговом окне эффекта.

ashberry for the russian ornament

Теперь переходим Effect> Distort & Transform> Transform и устанавливаем угол поворота и число копий диалоговом окне.

ashberry for the russian ornament

Создадим еще одну окружность черного цвета.

ashberry for the russian ornament

Выделяем и группируем (Cmd/Ctrl + G) все элементы второй ягоды.

Шаг 5

Создаем еще один элемент орнамента. Берем Ellipse Tool (L) и создаем новую окружность красного цвета.

ashberry for the russian ornament

Копируем эту окружность и вставляем ее вперед (Cmd/Ctrl+ C; Cmd/Ctrl +F), заливаем ее желтым цветом и смещаем вниз.

ashberry for the russian ornament

Копируем красную окружность и вставляем ее вперед (Cmd/Ctrl+ C; Cmd/Ctrl +F), выделяем копию красной окружности и желтую окружность и нажимаем на кнопку Intersect из палитры Pathfinder.

ashberry for the russian ornament

Группируем объекты этого элемента.

Шаг 6

Приступаем к созданию цветов. Берем Polygon Tool и создаем пятиугольник.

flower for the russian ornament

Берем Ellipse Tool (L) и создаем окружность, радиус этой окружности должен быть немного больше стороны пятиугольника. Совмещаем центр окружности с вершиной пятиугольника. Включите режим Smart Guides (Cmd/Ctrl+ U) и вы это сделаете без особого труда.

flower for the russian ornament

Шаг 7

Удерживая клавишу Opt/Alt, перетаскиваем окружность к центрам остальных вершин прямоугольника.

ashberry for the russian ornament

Выделяем все созданные формы и нажимаем на кнопку Unite из палитры Pathfinder.

flower for the russian ornament

Создадим окружность красного цвета и, не снимая выделения, переходим Effect> Distort & Transform> Pucker & Bloat и устанавливаем -67% в диалоговом окне эффекта.

flower for the russian ornament

Теперь переходим Effect> Distort & Transform> Transform и устанавливаем угол поворота и число копий диалоговом окне эффекта.

flower for the russian ornament

Шаг 8

Создаем окружность желтого цвета и переносим ее в палитру Brushes, сохраняем новую кисть как Scatter Brush с параметрами, указанными на рисунке ниже.

flower for the russian ornament

Создаем новую окружность без заливки с обводкой любого цвета и применяем к ее контуру созданную кисть.

flower for the russian ornament

Группируем все элементы цветка.

Шаг 9

Создадим еще один цветок. Берем Ellipse Tool (L) и создаем эллипс красного цвета. Теперь при помощи Pen Tool (P) создадим точку, лежащую на вертикали, проходящей через центр эллипса.

flower for the russian ornament

Выделяем эллипс и точку, и группируем их (Cmd/Ctrl+ G). Не снимая выделения с группы, переходим Effect> Distort & Transform> Transform и устанавливаем угол поворота и число копий диалоговом окне.

flower for the russian ornament

Переходим Object> Expand Appearance.

Шаг 10

Создаем новую окружность с заливкой желтого цвета.

flower for the russian ornament

Выделяем все лепестки и желтую окружность, берем Shape Builder Tool и удерживая клавишу Opt/Alt кликаем в центре желтой окружности.

flower for the russian ornament flower for the russian ornament

Shape Builder Tool - инструмент, который стал доступен в Adobe Illustrator CS5. Тем, кто использует ранние версии программы, придется воспользоваться техникой с применением палитры Pathfinder, описанной в 5 шаге. В центре цветка создадим еще одну окружность. Выделяем и группируем все элементы этого цветка.

flower for the russian ornament

Шаг 11

Теперь создадим декоративные листья для нашего орнамента. Берем Pen Tool (P) и создаем ломаную линию подобную, показанной на рисунке ниже.

leaf for the russian ornament

Устанавливаем заливку зеленого цвета для этого элемента. Точки 1 и 2 должны лежать на одной вертикали. Конвертируем четыре точки листа из угловых в гладкие и, управляя их ручками, приводим форму листа к виду, показанному на рисунке ниже.

leaf for the russian ornament

Шаг 12

Выделяем половину листа и переходим Object> Transform> Reflect… , выбираем опцию Vertical в диалоговом окне и нажимаем на кнопку Copy.

leaf for the russian ornament

Перемещаем вторую половину листа вправо, удерживая клавишу Shift до совмещения их крайних точек.

leaf for the russian ornament

При помощи Direct Selection Tool (A) или Lasso Tool (Q) выделяем верхние точки обоих половин листа и переходим Object> Path> Join (Cmd/Ctrl+ J). Ту же операцию проделываем и с нижними точками листа. В результате у нас должен получиться один закрытый контур.

leaf for the russian ornament

Шаг 13

Я изменил высоту листа, вытянув его вверх при помощи Selection Tool (V).

leaf for the russian ornament

Не снимая выделения с листа, переходим Object> Path> Offset Path и устанавливаем величину смещения контура, подбирая ее на глаз.

leaf for the russian ornament

Заливаем нижний контур листа желтым цветом, берем Scissors Tool (C) и разрезаем верхний зеленый контур в точках 1 и 2. Теперь удаляем его правую часть. Точки 1 и 2 соединяем при помощи Pen Tool (P).

leaf for the russian ornament

Шаг 14

Берем Pen Tool (P) и создаем форму стебля с заливкой черным цветом.

leaf for the russian ornament

Приступим к созданию боковых прожилок листа. Берем Pen Tool (P) и создаем треугольною форму.

leaf for the russian ornament

Переносим эту форму в палитру Brushes и сохраняем как Art Brush.

leaf for the russian ornament

Берем Pen Tool (P) и создаем верхнюю и нижнюю прожилки листа. Помните, что вы можете изменять толщину прожилки, изменяя толщину линии в палитре Stroke.

leaf for the russian ornament

Шаг 15

Теперь переходим Object> Blend> Blend Options и устанавливаем количество шагов в диалоговом окне. Теперь выделяем обе прожилки и переходим Object> Bland> Make.

leaf for the russian ornament

Выделяем весь Blend объект и переходим Object> Transform> Reflect… и нажимаем на кнопку Copy.

leaf for the russian ornament

Смещаем полученные прожилки влево.

leaf for the russian ornament

Шаг 16

Не снимая выделения с бленд объекта, переходим Object> Expand Appearance, затем Object> Expand и изменяем цвет заливки прожилок на желтый.

leaf for the russian ornament

Всю группу с желтыми прожилками помещаем ниже формы стебля. Те же действия производим с правыми прожилками. При помощи Direct Selection Tool (A) перемешаем точки на концах прожилок так, чтобы они лежали на стебле.

leaf for the russian ornament

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

leaf for the russian ornament

Шаг 17

Основные элементы орнамента готовы. Создание остальных рассмотрим во время создания композиции.

elements of the Russian ornament

Шаг 18

Приступаем к созданию композиции. Вспомогательный фон – прямоугольник черного цвета можно удалить, он нам не нужен. Создадим новый фон. Берем Rectangle Tool (M) и создаем квадрат с заливкой черным цветом. Мой прямоугольник имеет размер 1000 на 1000 px. У меня большой монитор и мне с таким размером удобно работать. Все элементы орнамента поместим ниже прямоугольника, за пределами композиции.

composition of the Russian ornament

Эти элементы мы будем дублировать – перетаскивать на фон, удерживая клавишу Opt/Alt и помещать в нужных местах.

Шаг 19

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

ashberrys for the Russian ornament

Поворачивайте ягоды рябины в разные стороны, используя Selection Tool (V). Работая с гроздями рябины, вы должны обращать внимание не только на форму самих гроздей, но и на форму пробелов между ягодами. Старайтесь, чтобы формы пробелов были гармоничны.

ashberrys for the Russian ornament

Шаг 20

Теперь создадим основные ветви рябины. Берем Pen Tool (P) и создаем S-образную кривую. Применяем к этой кривой профиль из палитры Stroke.

ashberry's branch for the Russian ornament

Если вы работаете нe в Adobe Illustrator CS5, то вам придется создавать форму подобную этому профилю и сохранять ее как Art Brushes в палитре Brushes. Мы с вами уже несколько раз создавали такие кисти на протяжении этого урока.

Шаг 21

Теперь создадим еще одну ветку и применим к ней другой профиль из палитры Stroke.

ashberry's branch for the Russian ornament

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

Шаг 22

После создания ветвей приступим к созданию листьев на них. Листья в некоторых местах я собрал в трилистники. Трилистник – очень распространенный элемент орнамента.

ashberry's branch for the Russian ornament

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

Шаг 23

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

ashberry's branch for the Russian ornament

Такого профиля нет в палитре Stroke. Давайте посмотрим, как я его получил. Сначала я применил стандартный треугольный профиль.

ashberry's branch for the Russian ornament

Затем берем Width Tool и дважды кликаем по острому концу ветки. В открывшемся диалоговом окне инструмента задаем  ширину профиля в этом месте, наблюдая за изменением вида профиля.

ashberry's branch for the Russian ornament

Подобрали нужную толщину – нажимаем на кнопку OK. Если вы планируете использовать такой профиль в дальнейшей работе, сохраните его. Откройте выпадающий список с профилями на верхней панели инструментов и нажмите на кнопку Add to Profiles.

ashberry's branch for the Russian ornament

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

Шаг 24

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

ashberry's branch for the Russian ornament

Используя описанную технику, и разные профили продолжаем создавать мелкие ветки.

ashberry's branch for the Russian ornament ashberry's branch for the Russian ornament

Шаг 25

Будем создавать декоративные листья. Техника их создания ничем не отличается от создания мелких веток.

leaves for the Russian ornament

При создании композиции из таких объектов, вы должны обращать внимание на три аспекта: 1. форма каждого элемента; 2. форма всей композиции; 3. форма пробелов между элементами композиции.

leaves for the Russian ornament leaves for the Russian ornament leaves for the Russian ornament

Шаг 26

Добавим, пожалуй, еще ягод рябины в верхний левый угол композиции и мелкие ветви.

Khokhloma style Russian ornament

Шаг 27

Теперь будем создавать спиралевидные элементы орнамента. Для создания таких элементов я использую Spiral Tool. Выберите этот инструмент и кликните в том месте рабочей области, где вы хотите создать спираль. В открывшемся диалоговом окне, установите количество сегментов спирали, не думаю, что их должно быть более 6, и нажмите на кнопку OK.

Khokhloma style Russian ornament

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

Khokhloma style Russian ornament

Шаг 28

Комбинация спирали с листьями, на мой взгляд, интересное решение.

Khokhloma style Russian ornament Khokhloma style Russian ornament

Шаг 29

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

Khokhloma style Russian ornament

Шаг 30

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

Khokhloma style Russian ornament

Шаг 31

Теперь создадим самые мелкие элементы композиции. В этой работе будем использовать Scatter Brush, которая состоит из окружностей желтого цвета. При помощи Ellipse Tool (L) создадим окружность желтого цвета и перетащим ее в палитру Brushes. Сохраним новую кисть как Scatter Brush. Параметры этой кисти оставляем неизменными, то есть установленными по умолчанию.

Khokhloma style Russian ornament

Мы будем настраивать эту кисть в процессе ее применения.

Шаг 32

Берем Pen Tool (P) и создаем кривую линию, применяем созданную кисть к этой линии. Двойной клик по иконки кисти в палитре Brushes вызывает диалоговое окно с настройками этой кисти. Управляем ее настройками, наблюдая за происходящими изменениями.

Khokhloma style Russian ornament

Украшаем подобными элементами спирали.

Khokhloma style Russian ornament

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

Khokhloma style Russian ornament Khokhloma style Russian ornament

Шаг 33

Проявляйте фантазию, и комбинирует разнообразные мелкие элементы.

Khokhloma style Russian ornament

Вот такой финальный вид имеет моя композиция.

Khokhloma style Russian ornament

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

Шаг 34

Теперь нам осталось создать бесшовную текстуру, используя эту базовую композицию. Создаем новый файл Cmd/Ctrl+ N. Берем Rectangle Tool (M) и создаем квадрат 100x100 px  без заливки с обводкой любой толщины и цвета, только для того чтобы он был виден.

Khokhloma seamless pattern

Не снимая выделения с прямоугольника, переходим Effect> Distort & Transform> Transform и устанавливаем параметры смещения в диалоговом окне.

Khokhloma seamless pattern

Теперь опять применяем тот же эффект (Effect> Distort & Transform> Transform) и устанавливаем новые параметры.

Khokhloma seamless pattern

Применяем тот же эффект с новыми параметрами в последний раз.

Khokhloma seamless pattern

Шаг 35

Отключаем обводку квадрата и переносим фигуру с примененными к ней эффектами трансформации в палитру Graphic Styles.

Khokhloma seamless pattern

Шаг 36

Удаляем прямоугольник. Переходим к файлу, в котором мы создавали узор, копируем группу с узором (Cmd/Ctrl + C), переходим к файлу, в котором создавали графический стиль и вставляем узор в его рабочую область (Cmd/Ctrl + V). Уменьшаем узор пропорционально до размеров квадрата 100 x 100 px.

Khokhloma seamless pattern

Шаг 37

Не снимая выделения с узора, применяем к нему созданный стиль.

Khokhloma seamless pattern

Теперь мы можем немного увеличить узор, для того чтобы сократить расстояние между копиями узора. Вы можете это сделать при помощи Selection Tool (V) или палитры Transform.

Khokhloma seamless pattern

Шаг 38

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

Khokhloma seamless pattern

На правом стыке мы имеем пробел, который будем прятать, размещая там элементы орнамента.

Khokhloma seamless pattern Khokhloma seamless pattern

В создании таких элементов для вас нет ничего нового.

Шаг 39

Созданные нами элементы единичны, их предстоит размножить на все копии орнамента.

Khokhloma seamless pattern

Для этого откройте палитру слои и перетащите созданные элементы в группу базового орнамента.

Khokhloma seamless pattern

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

Khokhloma seamless pattern

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

Khokhloma seamless pattern

Шаг 40

Создаем новый прямоугольник размером 100 на 100 px без заливки и обводки и разместим его ниже всех элементов композиции.

Khokhloma seamless pattern

Выделяем все объекты (Cmd/Ctrl + A) и переходим Edit> Define Pattern, присваиваем имя новому узору и нажимаем на кнопку OK.

Khokhloma seamless pattern

Теперь мы можем создавать любые формы и заливать их созданным узором в стиле Хохлома.

Khokhloma seamless pattern

Заключение

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

Вы можете скачать исходный векторный файл к данному уроку

 

 

Финальное изображение

Khokhloma seamless pattern Khokhloma seamless pattern

Будьте всегда в курсе свежих новостей о векторной графике, новых уроков работы в Adobe Illustrator, статей и интервью посвященных графическому дизайну. Команда RU.Vectorboom работает для Вас!

ru.vectorboom.com

Рисуем абстрактный бесшовный узор в Иллюстраторе

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

Шаг 1

Для начала нужно задать размеры нашего будущего паттерна, для этого устанавливаем размер artboard 600х600 px. Теперь начинаем рисовать узор с левого верхнего угла. Для этого выбираем инструмент Paintbrush Tool (B) и рисуем что-то вроде кляксы (кнопку мыши отпускаем с предварительно зажатой клавишей Alt на клавиатуре, чтобы контур получился замкнутый) (рис. 1).

Мышкой не всегда получается сделать гладкие и красивые линии (да и на планшете тоже), к счастью, контур можно легко поправить. Для этого выделяем его и той же кистью проводим в местах заломов или некрасивых изгибов столько раз, сколько понадобится, чтобы результат вас устраивал (рис. 2). В настройках инструмента Paintbrush Tool (двойной клик на значке на панели инструментов) можно поиграть с настройками и выбрать для себя оптимальные.

Примечание: когда я рисовала первый узор (который вы видели в начале урока), я к каждой нарисованной кляксе применяла шаг 5 отдельно, а не ко всем сразу, как в уроке.

Шаг 2

Таким же образом рисуем еще несколько фигур, оставляя пустым пространство около правой и нижней границы. Затем выделяем все с помощью комбинации клавиш Ctrl+A и дважды щелкаем на значке Selection Tool (V) на панели инструментов. В появившемся окне вводим значение 600 px по горизонтали и 0 px по вертикали и нажимаем на кнопку Copy (рис. 3).

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

Шаг 3

На этом этапе мы будем заполнять пустоты. Снова берем кисть и на этот раз стараемся аккуратно вписывать новые кляксы между остальными:

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

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

Шаг 4

Когда все пространство в рабочей области заполнено, выделяем все фигуры, убираем обводку и устанавливаем голубой (или любой другой) цвет для заливки:

Шаг 5

Выделяем все нарисованные фигуры, идем в меню Object - Path - Offset Path...  и в появившемся окне вводим значение -15 px (рис. 8). Нажимаем OK и новым фигурам задаем другой цвет заливки (рис. 9).

Повторяем эти действия до тех пор, пока не получим самые маленькие из возможных фигур (хотя можно остановиться и раньше). Создаем квадрат с помощью инструмента Rectangle Tool (M) размером 600x600 px, заливаем фоновым цветом и помещаем на задний план с помощью комбинации клавиш Ctrl+Shit+[ (рис. 10).

Примечание: когда я рисовала первый узор (который вы видели в начале урока), я, во-первых, брала меньшее значение для функции Offset Path (около -4 px), а во-вторых, правила каждый получившийся в результате этой функции контур с помощью кисти, сглаживая углы, изменяя слегка линии.

Шаг 6 Теперь настало время удалить все лишнее, т.е. все, что выходит за пределы рабочей области и фона. Я пользовалась способом рисовать паттерн, который нашла в журнале smile_with_jul. У нее все описано очень подробно, поэтому я, чтобы не переписывать то же самое, изложу кратко основные шаги.

Итак, сначала создаем рамку вокруг рабочей области, которая закрывает собой все, что требуется удалить. Цвет рамки должен отличаться от цвета всех элементов, присутствующих в работе. Квадрат с фоном нужно заблокировать (Ctrl+2). Выделяем рамку и рисунок и на панели Pathfinder нажмаем кнопку Divide (рис. 11). 

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

Шаг 7

На панели инструментов выделяем Magic Wand Tool (Y), кликаем на рамке и жмем Delete на клавиатуре.

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

tutgraphics.blogspot.ru


Смотрите также