Шаг 3

Теперь добавим рот. Создайте круг 12 х 12 пикселей с тёмно-фиолетовой Обводкой и без Заливки. Инструментом «Ножницы» (С) кликните на обеих боковых опорных точках, разделив фигуру. Удалите верхнюю половину круга.

Удерживая Alt-Shift, перетащите полукруг вправо, создав копию.

Мы можем настроить толщину линий на панели Обводки. Установите Толщину на 2

Соедините рот с носом, добавив короткую вертикальную линию толщиной 2.

Шаг 4

Давайте наденем на кролика пару круглых забавных очков. Создайте большой круг 55 х 55 пикселей с лиловой обводкой и Толщиной обводки 3.

Скопируйте (перетащите, удерживая Alt-Shift) её на противоположную сторону и соедините круги маленькой дугой. Мы можем скопировать дугообразную линию с группы рта и перевернуть её.

Шаг 5

Теперь перейдём к ушам. Создайте светло-серый эллипс 22 х 75 пикселей. Выделите его верхние и нижние опорные точки Инструментом «Прямое выделение» (А) и Преобразуйте выделенные опорные точки в угол на панели управление сверху.

Затем выделите обе боковые опорные точки и перетащите их слегка вверх, чтобы сделать верх фигуры шире.

Шаг 6

Дважды кликните на Инструменте «Вращение» (R) и установите Угол на 20 градусов. Теперь Скопируйте (Control-C) фигуру и Вставьте её на Передний план  (Control-F). Сделайте фигуру меньше и заполните её розовым цветом, изображающим внутреннюю часть уха.

Шаг 7

Сгруппируйте (Control-G) обе части уха, дважды кликните на Инструменте «Зеркальное отражение» (О) и выберите Вертикальную ось. Нажмите «Копировать» для создания второго уха.

Шаг 8

Присоедините уши к верху головы и

Вот он! Наш кролик готов!

2. Рисуем персонажа-котёнка 

Шаг 1

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

Шаг 2

Возьмите Инструмент «Эллипс» (L) и сделайте несколько полосок на лбу. Создайте овал 15 х 45 пикселей в центре верхнего края головы и добавьте два маленьких овала по обеим сторонам головы.

Выделите все овалы и голову. Возьмите Инструмент «Создание фигур» (Shift-M), удерживайте Alt и нажмите на тех частях, которые вы хотите удалить.

Шаг 3

1. Возьмите Инструмент «Многоугольник» (вы можете найти его в том же выпадающем меню, где и Инструмент «Прямоугольник» (М)) и кликните на любом участке Монтажной области, чтобы открыть окно Настроек. Установите количество Сторон на 3. Создайте треугольник 65 х 60 пикселей. 
2. Выделите верхний угол треугольника Инструментом «Прямое выделение» (А) и перетащите его вправо.
3. Возьмите Инструмент «Перо>»(Shift-C) и сделайте верх уха скруглённым. Кликните на верхней опорной точке и перетащите указатели наружу, сделав угол плавным.

Шаг 4

Перетащите верхнюю точку дальше вправо, наклонив фигуру ещё больше.

Шаг 5

Поверните ухо, присоедините его к левой стороне головы и Отправьте его на Задний план (Shift-Control-[). Используйте Инструмент «Зеркальное отражение» (О), чтобы отразить группу уха по Вертикальной оси и присоединить её к противоположной стороне головы.

Шаг 6

Завершите создание котёнка, добавив круглые очки.

3. Создаём милую собаку породы шиба-ину 

Шаг 1

Начните с создания головы из оранжевого эллипса 125 х 90 пикселей. Выделите его боковые опорные точки Инструментом «Прямое выделение» (А) и сдвиньте их слегка вниз. Сделайте опорные указатели короче, чтобы сделать бока головы более заострёнными.

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

Шаг 2

Возьмите Инструмент «Отрезок линии» (\) или Инструмент «Перо» (Р), удерживайте Shift и создайте горизонтальную линию. Перейдите в Эффект > Искажение и трансформирование > Зигзаг и установите следующие параметры:

• Размер — 10 пикселей
• Складки — 3
• Точки — Гладкие 

Нажмите ОК и перейдите в Объект > Разобрать оформление, чтобы применить эффект.

Шаг 3

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

Поместите созданную линию поперёк лица, как показано на картинке внизу, и выровняйте её по отношению к голове, используя голову как Ключевой объект.  Для этого выделите линию вместе с головой и кликните один раз на голове. Затем кликните на «Горизонтальное выравнивание по центру» на панели Выравнивания.

Шаг 4

Выделив обе фигуры, кликните «Разделить» на панели Обработки контуров, чтобы разделить фигуру. Заполните нижнюю часть белым цветом.

Шаг 5

Давайте сформируем ухо из оранжевого треугольника 65 х 60 пикселей. Перейдите в Эффект > Деформация > Дуга, установите значение Вертикального сгиба

Разберите оформление для применения эффекта.

Шаг 6

Выделите фигуру Инструментом «Прямое выделение» (А) и сделайте углы скруглёнными. Мы можем сделать это либо вручную, сдвинув маркер круга Динамических углов, либо установив Угловой радиус на 10 пикселей на панели управления сверху.

Скопируйте (Control-C > Control-F) фигуру и уменьшите копию. Измените цвет её заливки на белый.

Шаг 7

Присоедините ухо к голове и используйте Инструмент «Зеркальное отражение» (О), чтобы создать зеркальную копию. Наш шиба-ину готов! Отличная работа!

4. Создаём милого енота 

Шаг 1

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

Перейдите к Части 3, Шагу 1 для воссоздания головы енота.

Шаг 2

Давайте сделаем полоски. Создайте тёмно-голубой эллипс 83 х 75 пикселей, поверните его и расположите на левой стороне лица, как показано на картинке внизу. Используйте Инструмент «Зеркальное отражение» (О), чтобы отразить фигуру по Вертикальной оси, создав копию.

Выделите эллипсы вместе с головой и используйте Инструмент «Создание фигур» (Shift-M), удерживая клавишу Alt, чтобы удалить ненужные части.

Шаг 3

Теперь у нас есть все четыре персонажа! Давайте добавим ещё несколько объектов, чтобы сделать узор разнообразнее.

5. Создаём цветной барабан 

Шаг 1

Давайте создадим верхний и нижний края барабана из пары розовых прямоугольника 98 х 9 пикселей с Угловым радиусом 2 пикселя. 

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

Шаг 2

Создайте горизонтальную линию жёлтой обводкой при помощи Инструмента «Перо» (Р) либо «Отрезок линии» (\). 

Перейдите в Эффект > Искажение и Трансформирование > Зигзаг и установите следующие параметры:

• Размер — 26 пикселей
• Складки — 4
• Точки -> Углы 

Нажмите ОК и перейдите в Объект > Разобрать оформление. Используйте Инструмент «Удалить опорную точку» (-), чтобы удалить нижнюю точку справа для симметричности фигуры.

Шаг 3

Выделите созданную фигуру, кликните правой кнопкой мыши и Соедините для замыкания контура. Нажмите Shift-X, чтобы Переключить заливку и обводку.  

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

Шаг 4

Завершите создание барабана, добавив пару простых палок, сделанных из кругов и скруглённых прямоугольников.

6. Рисуем школьный блокнот, мелки и яблоко 

Шаг 1

Перейдём к следующему школьному объекту. Возьмите Инструмент «Прямоугольник» (М) и создайте жёлтый прямоугольник 75 х 110 пикселей. Скопируйте (Control-C > Control-F) его и сделайте верхнюю копию немного меньше (75 x 98 пикселей). Заполните новую фигуру розовым цветом.

Шаг 2

Давайте добавим спираль. Создайте два серых прямоугольника 12 х 6 пикселей и поместите их на левой стороне тетради. Выделите прямоугольники и перейдите в Объект > Переход > Создать. 

Теперь, когда Группа перехода создана, мы можем изменить настройки, перейдя в Объект > Переход > Параметры перехода, и установить Разбивку на «Заданное число шагов», равное 7.

Шаг 3

Давайте добавим жёлтый скруглённый прямоугольник на обложку и украсим его буквами «АВС».  Примененный шрифт Bananito Font, который вы можете найти на GraphicRiver, либо заменить его любым рукописным шрифтом по своему вкусу.

Скопируйте (Control-C) жёлтую базу прямоугольника и Вставьте её на Задний план (Control-B). Выделите его верхнюю и нижнюю правые опорные точки Инструментом «Прямое выделение» (А) и сдвиньте точки вниз.  Заполните копию тёмно-жёлтым цветом, чтобы сделать объект более трёхмерным.

Шаг 4

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

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

Шаг 5

Давайте создадим яблоко из красного круга 55 х 55 пикселей. Выделите его верхнюю опорную точку и используйте Инструмент «Опорная точка» (Shift-C) для вращения указателей на 45 градусов, чтобы создать сердцевидный верх яблока. Сделайте его более плавным при помощи функции «Динамические углы».

Завершите создание яблока, добавив ещё несколько деталей, таких как листок и блик, при помощи Инструмента «Эллипс» (L).

7. Создаём сплошной узор 

Шаг 1

Теперь, когда все наши элементы готовы. Мы можем выделить их и перейти в Объект > Узор > Создать. После открытия панели Настроек узора установите следующие параметры:

• Вид мозаики -> Сетка
• Ширина 450 пикселей
• Высота 450 пикселей
• Копии 5 x 5

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

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

Шаг 2

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

Заполните пустые пробелы общими элементами, такими как круги, листья, каплевидные фигуры, создав их либо при помощи Инструмента «Карандаш»  (N), либо Объектной кистью. 

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

Шаг 3

Начните с создания круга размером приблизительно 20 х 20 пикселей. Выделите его левую опорную точку и перетащите её дальше влево. Преобразуйте выделенную опорную точку в угол на панели управления сверху.

Затем перетащите фигуру на панель Кистей (Окно > Кисти). Выберите Объектную кисть в появившемся меню и оставьте все параметры по умолчанию.  Теперь можете выбрать кисть на панели Кистей и использовать Инструмент «Кисть» (В) для рисования простых цветочных элементов или завитушек.

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

Шаг 4

После того как настроите узор по своему вкусу, кликните «Готово» в верхней части Монтажной области. Теперь мы можем найти наш узор на панели Образцов и в любой момент отредактировать его при необходимости, нажав на кнопку «Редактировать узор» в нижней части панели.

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

Готово!

Шаг 5

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

Поздравляю! Наш сплошной детский школьный узор готов!

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

Узнать больше интересного:

Поделиться ссылкой:

Понравилось это:

Нравится Загрузка…

Как создать геометрический бесшовный узор в Adobe Illustrator ~ Записки микростокового иллюстратора

Наташа сделала для нашего блога уже не один урок по Adobe Illustrator. Если интересно, то ниже ссылки:
1. Урок Adobe Illustrator — кондитерская этикетка.
2. Как нарисовать пингвина, используя простые формы.
3. Как нарисовать алфавит в Adobe Illustrator

Итак, если все готовы отлетать по треугольничкам 😊, то передаю слово Наталье.

Шаг 1

Тем же Инструментом Линия проведите новую линию в квадрате от левого верхнего угла до середины нижней стороны этого квадрата.
Тем же способом проведите новую линию от правого верхнего угла до середины нижней стороны.

Шаг 2

Шаг 3

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

Решаем, какая цветовая гамма будет у вашего узора. Я закрасила свой в сине-желто-красную гамму. Обратите внимание, что цвет заливки самого левого треугольника в верхнем ряду и цвет самого правого треугольника в том же ряду должен быть одинаковым. То же самое с нижним рядом: цвет самого левого и самого правого должен быть одинаковым. Остальные треугольники закрашивайте как хотите.

Последнее — убираем обводку, она больше не нужна.

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

Шаг 4

Поставьте ваш квадрат точно в левый верхний угол artboard-а. Используйте панель Transform (Shift+F8), чтобы проверить точность по координатам.

Шаг 5

Шаг 6

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

На этом урок можно считать завершённым. Спасибо за внимание!

И вот ещё несколько полезных ссылок по паттернам:
1. Как сохранять бесшовные паттерны для микростоков.
2. Как сделать сет паттернов для стоков в Adobe Illustrator.
3. Как избавиться от белых полосок в паттерне.
4. Большой видео каст по паттернам.
5. Как сделать бесшовный паттерн с помощью скриптов и символов.

Наталья Долотко специально для блога Записки микростокового иллюстратора

P.S: Специально для любителей треугольничков у нас есть ещё один вкусный урок по этой теме: Как нарисовать фон из треугольников в Adobe Illustrator
В уроке показан очень удобный и быстрый метод разукрашивания фона в случайные цвета с помощью скрипта Vary Hues.

Читать дальше…

Подпишитесь на нашу рассылку, чтобы не пропустить ничего нового:

Предлагаю ознакомиться с аналогичными статьями:

Скрипт Magic Pattern Pro | MAI Tools

[English version]

Magic Pattern Pro это скрипт для Adobe Illustrator, который автоматически создаёт бесшовные паттерны из любого элемента. Ещё больше паттернов – теперь целых 20 шаблонов бесшовных текстур в вашем распоряжении.

Скрипт собирает бесшовные паттерны прямо на рабочей (монтажной) области. Делает это быстро и легко. А новая функция “Create All” создаёт сразу все 20 паттернов в один клик. Это просто фантастическая продуктивность самого лучшего инструмента для создания паттернов в иллюстраторе, скрипта Magic Pattern Pro.

Смотрите это видео, чтобы узнать как работает скрипт Magic Pattern Pro.

Неоспоримое преимущество скрипта Magic Pattern Pro – это высокая скорость, большая производительность и удобный пользовательский интерфейс. Сэкономьте драгоценное время и уйдите в отрыв от конкурентов с нашим новым инструментом для создания паттернов в иллюстраторе.

Magic Pattern Pro прекрасно подходит для создания стоковых бесшовных паттернов и текстур. Никаких эффектов – 100% векторный результат.

Также скрипт полезен для полиграфии и дизайна текстиля. Magic Pattern Pro это просто конвейер по производству паттернов. Теперь вы можете делать сотни паттернов в час.

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

Скрипт Magic Pattern Pro работает с любыми размерами монтажной области. Не имеет значения, какой у вас артбоард: квадратный или прямоугольный. Также вы можете создать файл с несколькими артбордами и делать бесшовные паттерны на каждом из них. А новая функция “Create All” делает сразу все 20 паттернов за один клик.

Совместимость: Adobe Illustrator CS5, Adobe Illustrator CS6, Adobe Illustrator CC

Версия скрипта универсальна, и подходит как для Windows так и для Macintosh OS.

Инструкция по установке и использованию скрипта Magic Pattern Pro доступна по этой ссылке:

Magic Pattern Pro User Guide (Ru)

Magic Pattern Pro User Guide (Eng)

Приобрести скрипт Magic Pattern Pro можно за $ 10. Нажмите кнопку ниже, чтобы оформить покупку. На странице оплаты выберите удобную для себя валюту, способ платежа и заполните анкету покупателя. После покупки вы получите автоматическое письмо на указанный вами электронный адрес, где будет ссылка на скачивание скрипта.

Возможно, вас также заинтересует скрипт Super Magic Eraser, который автоматически обрезает и удаляет векторные объекты, выступающие за границы артборда.

Бесшовный фон – Очень быстро
Как быстро делать бесшовные паттерны для микростоков
Фабрика паттернов
Новый инструмент для создания паттернов в иллюстраторе
Создание бесшовных паттернов с Magic Pattern Pro
Как нарисовать геометрический паттерн с чередующимся узором
Магический скрипт
Скрипт Magic Pattern Pro – обзорная статья
Хау ту по скриптам от Mai Tools
Скрипт Magic Pattern Pro
Как делать паттерны быстро и легко с помощью Magic Pattern Pro
Как проведя за компьютером несколько минут нарисовать 20 картинок
Magic Pattern Pro – делает паттерны в иллюстраторе в один клик

Comments

comments

Убийца фонов с помощью SVG Pattern Tool в Illustrator

Фото: ГОРИЗОНТ

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

Вот почему Illustrator идеально подходит для создания фонов. Вы можете легко создавать бесшовные повторяющиеся фоны в Adobe Illustrator с помощью Pattern Tool .

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

Но одни только образцы не являются реальной историей здесь.

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

Давайте посмотрим, как это работает.

Давайте сделаем шаблоны

Чтобы начать, откройте Adobe Illustrator и перейдите в Object> Pattern> Make . Это меняет интерфейс, так что у вас есть центральный квадрат на холсте. Вы сразу же получите сообщение о том, что шаблон был добавлен на панель образцов.

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

Важное примечание. Прежде чем углубляться в создание узоров с помощью инструмента «Узор» , убедитесь, что «Переместить плитку с рисунком не отмечено в центре панели. В противном случае вам будет сложнее работать с Pattern Tool.

Ширина и высота по умолчанию для нашей секции шаблона составляет 100px x 100px, но вы можете сделать все, что вам нужно. Вы также можете связать ширину и высоту, чтобы они масштабировались вместе.

Прежде чем мы выберем способ мозаичного рисунка, давайте дадим Illustrator нечто простое для мозаичного изображения. Выберите инструмент «Эллипс» и, удерживая нажатой клавишу «Option» / «Alt» (рисуйте от центра) и клавишу «Shift» (сохраняйте пропорции), создайте круг внутри квадратной плитки.

Используйте инструмент «Прямой выбор» и выберите круг. Нажмите Command / Ctrl + C, чтобы скопировать, затем нажмите Command / Ctrl + F, чтобы вставить его в то же место. Удерживая нажатой клавишу Alt / Option + Shift, уменьшите верхний круг.

Затем выберите оба круга и нажмите Ctrl + 8, чтобы создать составной путь.

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

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

Различные варианты листов представлены в раскрывающемся списке «Тип листов». На диаграмме вы можете увидеть различные варианты и то, как они кардинально меняют дизайн.

Варианты мозаики

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

Вам даже не нужно использовать кучу форм. Выберите Star Tool и используйте стрелки вниз, чтобы уменьшить количество сторон до трех, что дает вам треугольник.

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

Затем добавьте круг, рисуя центр над нижней вершиной треугольника.

Для этого удерживайте клавиши Alt / Option и Shift при перетаскивании наружу. Обратите внимание, как Illustrator автоматически рисует круг в верхней части квадрата, повторяя рисунок.

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

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

Вот где Pattern Tool значительно экономит время. Выберите все фигуры и удалите их штрихи. Затем сделайте желтый круг, синий треугольник и красный шестиугольник. Отсюда выберите каждый по отдельности и перейдите на панель прозрачности. Установите фигуры на следующую прозрачность:

• Круг: 50%
• Треугольник: 20%
• Шестиугольник: 35%

Затем измените тип плитки с Gird на Hex по столбцам. Это создает узкий перекрывающийся шаблон, показанный ниже.

Экспорт вашего паттерна как SVG

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

Шаг 1

Выберите инструмент «Прямоугольник» и создайте синий квадрат размером 50px x 50px и нарисуйте его в верхнем правом углу плитки рисунка.

Шаг 2

Затем, используя Ellipse Tool , создайте круг с такими же размерами, но поместите его так, чтобы половина его перекрывала квадрат. Теперь создайте белый круг размером 50px x 50px и поместите его с левой стороны.

Шаг 3

Выберите все это и нажмите Command / Ctrl + C, чтобы скопировать, а затем Ctrl + F, чтобы вставить вперед. Пока выбор активен, поверните его так, чтобы он смотрел в другом направлении. Поместите его в нижнюю половину плитки, чтобы у вас был зигзагообразный рисунок.

Шаг 4

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

Нажмите «Готово», и вы должны вернуться на пустой холст. Используйте Canvas Tool, чтобы установить холст на 100px x 100px, и используйте инструмент Rectangle Tool, чтобы создать квадрат с такими же размерами. Убедитесь, что заливка активна и нажмите на образец, который вы только что закончили. Он заполнит ваш квадрат образцом.

Шаг 5

Затем перейдите в File> Save As, и появится диалоговое окно. Выберите SVG и убедитесь, что SVG 1.1 отмечен. Сделав это, нажмите «ОК» и сохраните SVG как имя по вашему выбору.

Шаг 6

Если вы откроете SVG в браузере (просто нажмите и перетащите SVG на значок Firefox), он откроется в браузере. Обратите внимание, что это еще не шаблон. Вы должны видеть только область размером 100px x 100px вашего шаблона. Мы должны что-то с ним сделать, чтобы он заполнил браузер.

Когда вы сохраняете файл в формате SVG в Illustrator, именно размер вашего документа определяет область шаблона. Шаблон есть; в настоящее время он ограничен областью 100px x 100px исходного холста.

Например, если ваш холст был 1024px x 768px, именно столько браузера будет заполнено вашим шаблоном. Чтобы раскрыть его, нам нужно отредактировать SVG в двух простых местах, меняя ширину и высоту до 100% оба раза.

Вверху, где написано «viewbox =« 0 0 100 100 », это говорит о том, что паттерн начинается с координат 0 сверху и 0 слева, а ширина и высота имеют размер 100px.

Измените ширину и высоту на 100% — но пока вы не увидите разницу. Нам нужно изменить размер области прямоугольника, содержащей шаблон.

Шаг 7

Перейдите туда, где написано «<rect />», и измените эти значения на 100% каждое. Вместо 100 пикселей шаблон будет заполнять шаблон на 100% ширины и высоты браузера с помощью шаблона SVG. Результат показан ниже и бесконечно повторяющийся образец SVG.

Если вы хотите, вы можете точно контролировать размер шаблона в этой строке кода, прямо под кодом окна просмотра, который мы впервые отредактировали: <pattern x = «- 346» y = «- 256». Поскольку это квадрат, если мы увеличим значения ширины и высоты в равной степени, мы пропорционально увеличим размер шаблона. Установите ширину и высоту 300, и вы увидите результат ниже.

Установка размера по ширине и высоты по 30 каждый создаст более узкий, меньший SVG-шаблон, как показано ниже.

Я думаю, вы согласитесь, что это делает создатель шаблонов Illustrator очень полезным инструментом.

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

Создание паттернов в «Фотошопе» и «Иллюстраторе» | Дизайн

Создание паттернов в «Фотошопе» и «Иллюстраторе»

Сразу предупреждаю, что это статья для тех, кто не знает как пользоваться Edit → Define Pattern и Иллюстраторовским аналогом. Это не про бесшовные текстуры.

Кто знает, проходит мимо. Кто не знает, заходит и смотрит в картинки и видео, чтобы знать 🙂

Photoshop

Имеем в наличии: пустую белую поляну (белую — это для определенности, а так любую, конечно же). Размер возьмем ну допустим 500 на 500 пикселей.

Дальше размещаете на поляне любую мелкую картику. Можете выбрать одну из этих:

Я уже заготовил для вас ПСДшник 500 на 500 с этими малявками послойно: samples.psd.

Итак, поляна есть, мелкая картинка, которая станет основой узора, в наличии. Выделяем ее марки-тулом (marqui tool):

Отключаем фон, чтобы под основой паттерна ничего не было. Так как функции Define Pattern все равно, на каком слое вы находитесь, она схватит все, что увидит. Как принтскрин.

Должен предупредить, в режиме интерфейса Basic вы этой функции в меню попросту не увидите. Так что если вы в Бейсике, переключитесь на Essentials например.

Дальше выбираем инструмерт Paint Bucket (G) и ставим его в режим Pattern

Выбираем в соседней менюшке (вот эта со стрелочкой вниз) только что сделанный нами паттерн (он последний):

А дальше пользуемся карзиной как обычно — просто заливаем нужную область. Она равномерно покроется нашим паттерном:

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

Ну а теперь для закрепления видео:

Illustrator

В Иллюстраторе все это происходит несколько иначе — через палитру Swatches.

В Фотошопе она тоже есть, но функционал иллюстраторовской Swatches несколько шире. Там могут храниться не только цвета, но и градиенты и текстуры. Это что-то вроде фотошопской палитры Styles, только по-другому 🙂

Выглядит она практически так же как в Фотошопе:

Фотошоп

Иллюстратор

Есть тут выбиралка типов свотчей, можно сразу поставить на паттерны, чтобы кроме них ничего не отображалось. Можно и не ставить — не так уж их много.

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

Файл 500 на 500 с картинками: samples.ai.

Смотрим видео:

Итак, иллюстратор тоже создает вполне себе нормальные паттерны. Но расстояние между «кирпичами» здесь задается не тем, какую область вы выделили при создании паттерна. Оно делается искусственно рисованием прозрачного прямоугольника вокруг «кирпича».

По времени что в Фотошопе, что в Иллюстраторе затраты примерно одинаковы. Но тем не менее знать оба способа полезно чтобы не открывать второй редактор, когда работаете в одном из них. Ну и в Иллюстраторе неудобно делать пиксельную графику 🙂 Но быстреее менять один паттерн на другой 🙂

О Дафонте

Теперь лирическое отступление о том, где брать картинки-кирпичи для фонов. Все очень просто. Существует сайт www.dafont.com, на котором хранится туча бесплатных шрифтов (степень бесплатности каждого указана ровнехонько над словечком download).

Идем в раздел Dingbats, выбираем, например, подраздел Various и ищем подходящий шрифт. Шрифты в разделе Dingbats по существу просто наборы картинок и этого добра там действительно много и бесплатно.

В шрифтовом разрезе у Иллюстратора есть несомненное преимущество — палитра Type → Gliphs, в которой показываются все символы шрифта:

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

Впрочем, есть еще один прекрасный способ — поставить Font Expert. В нем чудовищно удобно просматривать шрифты, устанавливать и сносить их. Находите в нем нужный символ, копируете в Фотошоп, назначаете нужный шрифт и дело в шляпе.

Дизайн текстиля. Создание коллекции паттернов.

1. Подготовительный.Здесь я примерно продумываю, сколько будет паттернов коллекции (обычно это от 7 до 12). Какие цвета будут фоновыми, на какую тему будут отдельные пттерны, какая будет композиция и т.д. В общем все, что связано с организацией и построением мотивов;

2. Создание этих самых паттернов в Adobe Illustrator;

Напишу несколько общих рекомендаций и принципов, на которые следут обратить внимание при создании коллекции. Это не золотые правила, которым надо обязательно следовать. А просто закономерности, которые я выделила, изучая успешные коллекции разных авторов.

1. Основной признак удачной коллекции — разнообразие. Коллеция имеет один стиль и цветовое решение, но она просто обязана быть разнообразной и интересной))

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

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

4. Контраст. Разнообразность в контрасте: темное на светлом, светлое на темном, темные элементы на темном фоне, светлые элементы на пастельном фоне. Не бойтесь экспериментировать.

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

7. Ритм узоров. Здесь пригодится какая-нибудь справочная информация по раппортным сеткам, ритму и композиции узоров.

Вот в принципе основные моменты,. которые хотелось бы выделить. Самое главное — экспериментируйте, делайте больше паттернов и ищите то, что вас вдохновляет!

Illustrator Как создать узор, который плавно повторяет

Иллюстратор: Как создать узор — Учебное пособие Ника Бересфорда Дэвиса

Многие дизайнеры избегают шаблонов по нескольким причинам.До Adobe Illustrator CS6 существующие образцы узоров нельзя было редактировать и они были негибкими. Если вам не нравятся предоставленные образцы узора, вам придется либо создать свой собственный, либо сгладить прозрачность объекта, залитого образцом узора, развернуть его атрибуты и вручную отредактировать полученный рисунок.

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

Цель этого руководства — объяснить в Illustrator, как создать узор, независимо от того, используете ли вы Illustrator CS5 (или более раннюю версию) или Illustrator CS6. Процесс проектирования и создания шаблона одинаков как для более ранних версий, так и для CS6. Только после того, как узор будет «определен», вы увидите заметные различия в способах обработки образца узором в Illustrator CS6.

Давайте сначала создадим дизайн шаблона.

В палитре образцов Illustrator вы найдете три различных типа образцов. Это:

• Образцы цвета
• Образцы градиента
• Образцы узоров

Мы сосредоточимся на образцах узоров. Чтобы получить к ним доступ, выберите Window / Swatches. Открыв палитру «Образцы», щелкните небольшое меню «Показать виды образцов» внизу.Во всплывающем меню выберите «Показать образцы узоров».

Чтобы протестировать какие-либо предустановки образцов, создайте новый документ и используйте инструмент «Прямоугольник», чтобы создать поле для заполнения. Щелкните меню «Библиотеки образцов», чтобы открыть длинный список образцов цвета, градиента и узоров. Наведите курсор на опцию Узоры, и вы найдете Основные графические узоры, Декоративные узоры и Природные узоры. Выберите любой из них, чтобы заполнить прямоугольник, и вы увидите узор в действии.

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

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

Создайте случайный узор в Illustrator

Быстро создавайте произвольные формы, заполненные случайными цветами. Выделите всю группу и выберите Edit / Define Pattern. Появится диалоговое окно с запросом имени для нового шаблона — дайте ему имя по вашему выбору. Щелкните ОК. Теперь вы можете удалить исходную группу объектов.

Теперь, когда вы посмотрите в окно «Образцы узоров», вы увидите новый образец — тот, который вы только что создали. Создайте новый прямоугольник с помощью инструмента «Прямоугольник» и залейте его новым узором, убедившись, что в нижней части панели инструментов выбрано «Заливка» (в отличие от «Обводка»), и щелкнув новый образец узора.

Это почти все, что есть в Illustrator CS5 и более ранних версиях. Если вы хотите отредактировать узор внутри заполненной формы, вам нужно будет выделить прямоугольник и выбрать «Объект / Развернуть». После этого вы сможете выбирать отдельные элементы в шаблоне и настраивать их. Что я действительно хочу сделать, так это создать цельный повторяющийся узор, как тот, что вверху страницы.

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

Чтобы создать новый узор, первым делом нужно создать дизайн. Второй шаг — определить квадратную или прямоугольную область, которая будет повторяться, и вырезать все остальное. Третьим шагом будет определение самого образца узора.

Шаблон, который я создал для этой статьи, было довольно просто собрать.Если вы изучите его, то увидите, что он просто состоит из множества наложенных друг на друга квадратов, половина из которых повернута на 45 °. Я использовал сетку для создания квадратов и просто продолжал создавать больше на новых слоях с разными цветами заливки, пока не был доволен результатом.

В качестве ориентира я нашел эскиз, в котором показаны основные формы звезды и креста (см. Источник ниже):

Источник: © D0zyD0g

Затем, используя комбинацию инструментов «Прямоугольник», «Повернуть» и «Объединить» в палитре Обработки контуров, я построил узор.Как только вы дойдете до заключительного этапа, когда вы сможете вручную создать узор, скопировав и разместив повторяющиеся элементы, вам нужно будет довести его до точки, где вы сможете создать повторяющуюся плитку.

Как удалить области за пределами обтравочной маски

Обычно при маскировке определенной области дизайна я использую инструмент Object / Clipping Mask.Лучшая причина для использования этого заключается в том, что вы всегда можете удалить маску позже или поработать с ней, чтобы настроить ее содержимое. Другими словами, это неразрушающий способ работы.

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

Способ сделать это — вообще не использовать обтравочную маску.Вместо этого используйте кнопку Crop в палитре Pathfinder.

Используйте инструмент Crop Tool, чтобы удалить все за пределами маски

Перед тем, как использовать инструмент «Кадрирование», сделайте копию всего узора (чтобы можно было сохранить оригинал) и преобразуйте все штрихи в контуры: Объект / Путь / Обводка контура. Это важный этап, потому что инструмент Pathfinder «Обрезка» не будет выполнять свою работу должным образом, если в дизайне есть какие-либо штрихи.

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

Теперь вместо использования Обтравочной маски с выделенной группой узоров и квадратом нажмите кнопку «Обрезать» на панели Обработки контуров. Это полностью удалит (а не просто скроет) области узора за пределами повторяющейся плитки.

До этого момента процесс создания дизайна узора был практически идентичен как для Illustrator CS5, так и для CS6.Однако здесь их пути расходятся.

Теперь наступает момент, когда мы добавляем новую плитку в нашу палитру Образцов узоров. Просто выберите плитку и выберите «Редактировать / Определить узор» … Откроется окно, в котором вы сможете дать название новому образцу узора. Назовите его, нажмите «ОК», и вы увидите, что новый образец появится в палитре «Образцы узоров». Теперь вы можете создать форму и заполнить ее (надеюсь) идеальным повторяющимся узором.

Это все для Illustrator CS5 (и более ранних версий). Если вы хотите отредактировать узор или заставить его выложить плитку другим способом, вам придется вернуться на несколько этапов и переопределить узор. В качестве альтернативы вы можете выбрать Object / Expand с выбранным заполненным элементом. Это разбивает узор на редактируемый дизайн, хотя вы сможете вносить изменения только в определенные области дизайна — ваши изменения не будут перенесены в остальную часть дизайна узора.

Чтобы определить узор в CS6, выберите только что созданную плитку и выберите «Объект / Узор / Создать». Появится окно с надписью:

Новый узор добавлен на панель «Образцы». Любые изменения, сделанные в режиме редактирования рисунка, будут применены к образцу после выхода.

Режим редактирования паттернов? Прохладный! Наконец, способ редактировать узор после того, как он был создан.Рядом с окном (теперь вы можете нажать ОК) вы увидите новую панель управления под названием «Параметры узора». Вы также заметите, что вокруг плитки узор повторяется с уменьшенной непрозрачностью, поэтому вы можете предварительно просмотреть, как узор будет выглядеть после применения.

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

Это означает, что вы не обязательно привязаны к прямоугольникам и квадратам, если хотите создать бесшовную плитку. Если вы изучите предустановленные шаблоны, которые поставляются с Illustrator CS6, вы поймете, что я имею в виду. Попробуйте один из них. Выберите Window / Swatch Libraries / Patterns / Nature / Nature_Foliage и щелкните один раз на образце «Leaves Tropical Color». Экземпляр этого образца появится в палитре образцов узоров. Дважды щелкните этот новый образец, и откроется режим редактирования параметров узора.

На этом образце вы увидите, что плитка с узором не ограничена квадратом — на этот раз это шестиугольник. В параметрах узора тип плитки — «Шестигранник за строкой». Если вы измените Тип плитки на «Кирпич за строкой», а ширину и высоту на 17,5 мм каждая, результат будет примерно таким же. Поиграйте с этими настройками еще немного, и вы увидите, насколько вы теперь можете контролировать узор.

Удачи!

Скачать векторную графику без лицензионных отчислений — векторные пакеты от VectorVice

Ресурсы и дополнительная информация

Как создать узор в Illustrator — Medialoot

Инструменты и советы Illustrator

Узоры — отличный способ украсить веб-сайты, фоны, чехлы для iPhone и все остальное, для чего нужен не только белый фон.Но чтобы иметь возможность использовать один и тот же узор на многих различных элементах или объектах — и убедиться, что он не похож на Minecraft — векторы просто необходимы. Они позволяют масштабировать до любого размера, не беспокоясь о потере качества.

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

Шаг 1

Откройте Illustrator и выберите «Файл»> «Создать». Назовите новый документ «Узор», установите размер 600 x 600 пикселей и нажмите «ОК».

Шаг 2

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

Шаг 3

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

Шаг 4

Выберите «Выбрать»> «Все».

Шаг 5

Перейдите в Объект> Узор> Создать. На этом этапе появится информационное окно, в котором вы узнаете, что новый узор был добавлен на вашу панель образцов. Нажмите ОК в этом окне, чтобы продолжить.

Шаг 6

На этом этапе у вас есть все параметры узора, видимые на панели параметров узора. Кроме того, в верхней части документа у вас будет серая полоса с опциями «Сохранить копию», «Готово» и «Отменить» для шаблона, над которым мы работаем.

Шаг 7

На панели параметров узора дайте узору любое имя, которое хотите, я назову его «Цветочный».

Шаг 8

В раскрывающемся меню «Tile Type» выберите «Brick by Column», чтобы сделать наш узор более динамичным.

Шаг 9

Поскольку цель состоит в том, чтобы сделать узор более динамичным, с плавными элементами, а не с очевидным повторением, необходимо сделать размер плитки немного меньше, чем у наших элементов. Для этого просто введите меньшие значения, чем текущие в полях «Ширина» и «Высота». Поскольку текущие значения этого размера плитки составляют 425 x 570 пикселей (приблизительно) в этом случае, я установлю ширину на 390 пикселей и высоту на 500 пикселей.

Шаг 10

Как вы могли заметить, некоторые элементы перекрываются с другими.Это приемлемо в зависимости от того, как вы хотите создать свой узор, но в этом случае мы создадим узор со всеми элементами с промежутками между ними, чтобы вы могли лучше понять, как создать повторяющийся узор в Illustrator. Возьмите Selection Tool (V) и перемещайте / вращайте / масштабируйте элементы, пока не заметите, что нет перекрытий. Пока вы это делаете, вы увидите, что повторяющиеся копии вашего рисунка изменятся.

Шаг 11

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

Шаг 12

Чтобы проверить недавно созданный паттерн, перейдите в Select> All и нажмите клавишу Delete на клавиатуре, чтобы удалить все элементы, которые мы использовали для создания паттерна.

Шаг 13

Выберите инструмент «Прямоугольник» (M) и щелкните один раз по холсту. Установите ширину и высоту 600 пикселей и нажмите ОК.

Шаг 14

Убедитесь, что недавно созданный квадрат выбран, и откройте панель «Образцы» (в меню «Окно»> «Образцы»).

Шаг 15

Щелкните по узору «Цветочный», чтобы применить его к квадрату.

Шаг 16

Если вы чувствуете, что ваш узор слишком большой или слишком маленький, вы можете легко изменить его масштаб. Просто щелкните правой кнопкой мыши по созданному квадрату и в раскрывающемся меню выберите «Преобразовать»> «Масштаб». Установите желаемые значения масштаба, но не забудьте снять флажок «Преобразовать элементы» (чтобы избежать масштабирования формы) и нажмите «ОК».

Некоторые заключительные примечания

Если вы хотите изменить что-то в своем узоре (например, цвета, масштаб, штрихи и т. Д.), Просто дважды щелкните узор на панели образцов, и Illustrator переключится в режим редактора узоров.После того, как вы внесете все необходимые изменения, просто нажмите «Готово» на верхней серой панели, и ваш шаблон будет обновлен.

Как создать собственный узор в Adobe Illustrator

Образцы пользовательского узора можно создать из фигур в Illustrator. В версиях CC для большей гибкости была добавлена ​​панель параметров узора.

Большинство шагов в этом руководстве применимы в CS5 и CS6. Исключения, как указано.

1. Создайте фигуру или фигуры, которые вы хотите использовать.В этом примере я буду использовать ботанический мотив.
2. Если вы работаете с несколькими фигурами с помощью CS-версий Illustrator, вам также необходимо создать квадратную ограничивающую рамку вокруг фигур. Удерживая Shift , рисуя прямоугольник, убедитесь, что он идеально квадратный. Установите Fill и Stroke на None , если вы не хотите, чтобы в узоре был цветной фон. В этом случае убедитесь, что квадрат расположен позади других фигур ( Object> Arrange> Send to Back ).
3. Выделите все формы и перетащите их на панель образцов .
4. Создайте еще одну фигуру и перейдите на панель Swatches Panel . Примените узор к Заливка .
5. Чтобы изменить примененный узор в версиях CS, используйте команды Transform . Например, если вы хотите изменить угол узора, перейдите к Object> Transform> Rotate .
6. В диалоговом окне выключите Transform Object и отметьте Transform Pattern .
7. В Illustrator CC представлена ​​панель параметров Pattern для глобального преобразования узоров. Другими словами, изменения будут применены к самому образцу. Чтобы изменить образец, перейдите на панель образцов и дважды щелкните образец узора. Это откроет панель параметров шаблона, а также переведет вас в режим изоляции .
8. Параметры Тип плитки позволяют смещать повторение узора или изменять форму плитки.Есть также поля Ширина и Высота для масштабирования узора. Как вы можете видеть на снимке экрана, вы также можете дать название паттерну.
9. По завершении редактирования образца узора перейдите к полосе изоляции вверху окна и нажмите Готово , чтобы выйти из режима изоляции.

Создание удивительных узоров в Illustrator

Кристиан Габриэль, Adobe Expert / ACI

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

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

Методы шаблонного безумия в иллюстраторе

Существует несколько методов создания узоров в Illustrator, но основные из них: конструктор узоров Illustrator и ручной дизайн.Ручной дизайн включает в себя дополнительную работу по манипулированию и отражению частей дизайна для создания бесшовного узора. Это требует большого ноу-хау в том, как работают разные типы шаблонов. Создатели хардкорных выкроек до сих пор используют эти методы. Другой метод — это, конечно же, использование Illustrator Pattern Maker, который представляет собой полнофункциональный инструмент, который упрощает процесс создания узоров с помощью простых в использовании раскрывающихся меню, флажков и потрясающего способа предварительного просмотра ваших новых узоров. Давайте изучим конструктор узоров в Illustrator и дадим вам возможность воспользоваться одним из самых мощных инструментов в этом векторном приложении.

Создание вашего первого рисунка

Для создания паттерна все, что вам нужно сделать, это перейти в OBJECT> PATTERN> MAKE, чтобы войти в режим редактирования паттерна. Это мгновенно вызовет диалоговое окно с уведомлением о том, что он добавил ваш узор на панель Swatches. Это будет шаблон «заполнитель», если вы еще не создали никакой графики.

Диалог также сообщает вам, что любые изменения в режиме редактирования паттерна будут динамически добавляться к вашему паттерну.На этом этапе просто нажмите ОК. По сути, ваш экран должен быть пустым, с небольшим синим прямоугольником в середине документа и диалоговым окном ПАРАМЕТРЫ ШАБЛОНА с параметрами для настройки шаблона. Эта маленькая синяя коробка — ваш узор. На этом этапе все, что вы рисуете или помещаете в эту синюю рамку, будет создавать и добавлять к этому узору. Все, что находится за пределами синего поля, является повторением вашего живого рисунка и может дать вам представление о том, как ваш рисунок выглядит мозаичным. Я просто использовал Star Tool, чтобы нарисовать две звезды с помощью плитки, однако вы можете использовать любые инструменты формы, инструменты кисти, символы и почти любой инструмент, чтобы внести свой вклад в создание вашей плитки, так что имейте это в виду!

Настройка вашего шаблона

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

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

В верхней части панели находится кнопка, активирующая инструмент Pattern Tile Tool.Этот инструмент позволяет изменять размер плитки, перетаскивая ее за углы. Этот инструмент также позволяет вам вручную регулировать интервал, если вы решили сделать свою плитку кирпичным узором.

Поле ввода Name позволяет вам дать название вашему паттерну, хотя вы можете изменить это в любое время на панели Swatches. Особенность — Тип плитки. Тип плитки дает вам пять вариантов компоновки плитки.

• Сетка: это стандартный вариант двухмерной мозаики.
• Brick By Row: это смещает каждую вторую линию плитки по горизонтали
• Кирпич по столбцу: это смещает каждую вторую линию плиток по вертикали
• Hex By Column: это смещает ваш макет плитки на основе шестиугольного шаблона (по столбцу / вертикали)
• Hex by Row: это смещает ваш макет плитки на основе гексагонального узора (по строкам / по горизонтали).

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

Ширина и высота — это более точный способ набора определенной ширины и высоты вашей плитки.

Size Tile To Art изменит размер плитки в соответствии с размером вашего произведения искусства.

Move Tile with Art будет перемещать вашу плитку, когда вы перемещаете графическое содержимое в пределах своего рисунка.

H.Spacing / V.Space регулирует расстояние между строками и столбцами.

Overlap определяет, какие плитки будут отображаться впереди при наложении.

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

Dim Copies — еще одна функция, которая позволяет вам изменять прозрачность плиток предварительного просмотра, позволяя вам сосредоточиться на основной плитке для лучшего и менее запутанного макета при проектировании плитки.

Показать край плитки отображает рамку вокруг плитки.

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

Создание простого шаблона

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

Сделайте следующее:

1. Создать новый документ-иллюстратор
2. Создайте идеальный круг с заливкой и обводкой (Заливка R: 255 G: 0 B: 255, Обводка: R: 251 G: 176 B: 59)
3. Перейдите в «Эффекты»> «Искажение и преобразование»> «Сморщивание и раздувание».Затем установите ползунок на -55%
4. Выберите свое произведение и перейдите в ОБЪЕКТ> ШАБЛОН> СДЕЛАТЬ
5. В режиме редактора узоров установите для параметра Тип плитки значение Кирпич за строкой (смещение кирпича 1/3)

Вот и все! Не стесняйтесь копировать любые дополнительные свойства на картинке выше. Я также добавил один маленький кружок, как вы можете видеть в верхнем правом углу поля плитки. Прежде чем рисовать такой дополнительный элемент, сначала снимите флажок «Размер плитки» со значения «Искусство».Если вы этого не сделаете, поле плитки будет расширяться каждый раз, когда вы изменяете размер изображения внутри. А теперь иди и сделай крутые выкройки!

Все изображения созданы и скомпонованы Кристианом Габриэлем с использованием Adobe Stock, Techsmith Snag-It и Adobe Photoshop.

Как создать узор в Illustrator • Silo Creativo

$ 89
Все наши премиальные темы в наборе тем

Вы уже знаете нас, поэтому мы не можем вас обмануть: нам нравится плоский дизайн.Однако мы не откажемся и от хорошего шаблона , при условии, что он появится в нужном месте в нужное время;).

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

Это не значит, что они бесполезны или веб-страницы выглядят старыми. Мы говорим о тенденциях, и, как это бывает в моде, они всегда меняются. .Фактически, мы использовали их с хорошими результатами в некоторых наших шаблонах WordPress, таких как Vowels или Dessert.

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

На Рождество мы представили наш рождественский узор, а теперь, раз уж мы хотим потанцевать, сделаем урок с выкройкой на музыкальную тему!

В данном случае графика разрабатывается нами, но вам не нужно делать конкретные иллюстрации. Группа геометрических фигур, таких как круги, квадраты… может быть в центре нашего рисунка. Его использование будет зависеть от того, что вы ищете.

Это руководство создано с помощью Adobe Illustrator CS6.

Начнем шаг за шагом:

1.C создайте «ArtBoard» размером 600 на 600 пикселей . Размеры приблизительные и созданы для того, чтобы с ними было удобно работать. Ни при каких обстоятельствах они не требуются при создании выкройки, но мы рекомендуем их использовать, исходя из нашего опыта.

2. На этой ArtBoard, , мы рисуем квадрат размером 300 пикселей на 300 пикселей . Поскольку мы будем работать с координатами, важно сделать сетку (View-> Show Grid) и подогнать наш квадрат 300 на 300 к сетке (View -> Snap to Grid).Я рекомендую дать квадрату любой цвет (вы можете изменить его позже) и поместите его на заблокированный слой , чтобы он не двигался, пока мы создаем наш узор.

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

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

Если мы начнем с гитары в круге, другие гитары всегда должны быть на расстоянии 300 пикселей от гитары в круге в направлении «x» и «y» (потому что она расположена в углу, соприкасающемся с двумя сторонами квадрат). Однако, если (как обсуждается ниже) он размещается только на одной стороне квадрата, его следует повторять только в одном из двух направлений.Мы можем узнать точные координаты, щелкнув элемент в теге «преобразование» и перейдя на плюс-минус 300 пикселей к новым элементам.

4. Если вместо этого элемент касается одной стороны квадрата, он должен повторяться только в том направлении, в котором он расположен, либо по горизонтали (x), либо по вертикали (y).

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

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

6. Как только мы создадим квадрат, наш узор будет готов! Нам просто нужно применить его в пространстве образцов Illustrator .

Таким образом, убрав сетку, мы помещаем квадрат, над которым работали, без контура и заливки. Выделяем и квадрат, и нарисованные на нем элементы, перетаскиваем на вкладку «Образцы» и вуаля! У нас есть текстура.

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

Как видите, это довольно просто и не требует больших знаний в Illustrator. Вам просто нужно решить причину, найти элементы, из которых она состоит, и спроектировать! Это простой способ создавать шаблоны, которые можно использовать в веб-фонах или графических работах.Можно все, нужно только грани учитывать 😉!

Кроме того, это вызывает привыкание. Как только вы создадите выкройку, вы не сможете перестать делать больше. Любое время подходит для исполнения композиции!
Надеюсь, вы найдете это полезным!

Как создать повторяющийся узор в Illustrator

Необходимо создать плавно повторяющиеся узоры в Illustrator CS6 или Illustrator CC 2014? Тогда тебе повезло. Adobe создала инструмент, который сделает процесс создания выкройки быстрым и легким.

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

Используйте готовый узор

Настройте свое рабочее пространство, выбрав «Окно»> «Рабочее пространство»> «Рисование». Для доступа к шаблонам есть несколько вариантов. Один из них — перейти на панель «Образцы» и, оказавшись там, щелкнуть значок меню «Библиотеки образцов» в левом нижнем углу.

Панель «Образцы» в верхнем левом углу, параметры в меню и панель «Меню библиотек образцов».Вы можете редактировать узоры в Illustrator или создавать их с нуля.

Вот пример различных шаблонов, которые поставляются с Illustrator.

Создание рисунка с нуля

Чтобы создать свой собственный шаблон, нажмите «Файл»> «Создать». В диалоговом окне «Новый документ» выберите «Профиль»> «Пользовательский» и установите для ширины и высоты значение 300 пикселей. Нажмите ОК, чтобы принять.

Щелкните инструмент «Прямоугольник» ( M ), чтобы выбрать его, и щелкните монтажную область. Когда появится диалоговое окно «Прямоугольник», нажмите «ОК», чтобы установить значение по умолчанию 100×100 пикселей, и нарисуйте четыре прямоугольника.

Выберите любой цвет для обводки. Установите обводку на 2 и убедитесь, что заливка отключена. Активируйте инструмент Blend ( W ) и дважды щелкните монтажную область.

Откроется диалоговое окно «Параметры наложения». Установите интервал на «Указанные шаги» и в поле параметров введите 16. В ориентации выберите первый вариант и нажмите «ОК».

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

Снимите выделение с текущих прямоугольников и повторите тот же процесс для синего и оранжевого прямоугольников. Снимите выделение с текущих прямоугольников и повторите тот же процесс для синего и оранжевого прямоугольников. Ваши прямоугольники должны выглядеть так:

Теперь у вас есть простой дизайн, который можно использовать для создания бесшовного узора в Illustrator. Прежде чем идти дальше, выделите все прямоугольники и нажмите Object> Group ( Ctrl + G ), чтобы сгруппировать все формы вместе.

Как создать узор

Теперь пора создать узор. Выделив группу узоров, нажмите Object> Pattern> Make.

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

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

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

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

Непосредственно под Типом плитки находится Смещение кирпича. Чтобы упростить задачу, выбор «Тип плитки: сетка» отключает смещение кирпича.

Как видите, вариантов много, но они могут вам не понравиться. В этом случае щелкните инструмент Pattern Tile Tool в верхней части диалогового окна Pattern.

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

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

Другие настройки

В диалоговом окне «Параметры узора» есть еще много параметров. Один из них — это числовое определение шага рисунка для большей точности. Для этого нажмите кнопку «Сохранить пропорции ширины и высоты» в верхней части и включите параметр «Размер плитки для искусства». Скопированные рисунки вернутся в соответствие с исходным рисунком.

Чтобы создать пространство, введите значение в поле параметров H Spacing и V Spacing. Обратите внимание, что вы можете активировать кнопку «Сохранить пропорции интервала» справа от поля параметров — или нет.

Вот результат:

Из других опций всплывающее окно «Копии» предлагает множество различных настроек, таких как 5×5 (по умолчанию), 7×7, 3×7, 3×3 и т. Д. Под опцией Copies находится заголовок> Dim Copies to . 70% — значение по умолчанию, но вы можете изменить, если копии расположены близко друг к другу. Так будет легче увидеть, что происходит с рисунком.

Когда вы будете удовлетворены своими изменениями, щелкните заголовок Готово в верхней части рабочего пространства. Вот и все.

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

Words: Nathan Segal

10 руководств по созданию бесшовных узоров в Adobe Illustrator

— отличный способ объединить весь ваш дизайн, а также воплотить готовый проект в жизнь. Создавать узоры в Illustrator несложно, если вы освоите несколько основных принципов.

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

Вам также может понравиться: 50 бесплатных наборов бесшовных паттернов высокого разрешения.

Неограниченные загрузки: 25 000+ шаблонов Adobe Illustrator

более 1000000 иллюстраций и векторных шаблонов, кистей, логотипов, иконок и многого другого!

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

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

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

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

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

Если вы работаете над проектом, который требует классных выкроек, связанных с едой, не пропустите этот шаблон. Этот черно-белый узор с перцем чили — отличный способ оживить ваш дизайн, и он имеет высокое разрешение 5000×5000 пикселей.

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

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

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

Если вам нужны винтажные узоры, обязательно ознакомьтесь с этим шаблоном Envato Elements. Он поставляется с 16 узорами с высоким разрешением в векторном формате, которые идеально подходят для свадебных открыток, канцелярских товаров, обоев и других проектов.

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

Узнайте, как использовать основные формы для создания племенных африканских символов, таких как крест анк и ракушки каури, а затем объедините их в приятную композицию, которая составит красивый узор.

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

Если вы ищете узоры-каракули, обязательно ознакомьтесь с этой коллекцией из 8 узоров ручной работы.Они сделаны в высоком разрешении и могут использоваться в качестве фона или обоев.

Из этого туториала Вы узнаете, как использовать инструмент «Узор» в Illustrator для создания узора с шестиугольниками. В этом учебном пособии вы поочередно выполните шаги, а также узнаете, как использовать режим Pattern, чтобы поэкспериментировать с дизайном вашего шаблона.

Из этого урока вы узнаете, как создать набор рисованных ретро-узоров в Illustrator. Вы узнаете, как использовать инструмент «Узор» для создания забавного и смелого узора.

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