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

Добавил пользователь Валентин П.
Обновлено: 04.10.2024

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

Создание кубического фонового рисунка

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

Нарисуйте шестигранник

Выберите инструмент Polygon Tool, которая находится под иконкой Rectangle Tool и нажмите на холсте…

Введите в соответствующих полях: радиус равный 100px, и 6 в качестве количества сторон. Нажмите OK. Из чисто практических соображений, задайте шестиугольника заливку любого цвета, но без обводки.

Поворот на 30°

Для преобразования этого объекта в куб, мы должны повернуть шестигранник на 30°. Выбрав шестиугольник и использую инструмент Rotate Tool зажмите клавишу Alt / Option и кликните мышью в центре. Введите 30° в качестве значения угла поворота, и нажмите кнопку ОК.

Рисуем вертикальную линию

Теперь мы создадим разделительные линии, чтобы разделить этот объект на 6 треугольников. Начнем с рисования вертикальной линии. Выберите инструмент Line Tool и нарисуйте вертикальную линию где-то в центре шестиугольника (для вашего удобства удерживая клавишу Shift).

Выравнивание по вертикали и по горизонтали

Теперь, выберите оба объекта и нажмите Align Vertical Center и Align Horizontal Center, в верхней части рабочей области. Если вы не видите эту панель, то включите ее View > Control.

Копирование и поворот линии на -60°

Выберите одну только вертикальную линию, выберите инструмент Rotate Tool и нажав кнопку Alt / Option кликните точно в центре линии. Чтобы проще находить точное место, включите Smart Guides: перейти к View > Smart Guides. Если вы видите галочку, то они уже включены. Вы можете использовать комбинацию клавиш Cmd / Ctrl + U, чтобы включать и выключать Smart Guides.

В появившемся окне введите -60° в качестве значения угла поворота, и убедитесь, что нажали на кнопку Copy. Теперь, использую сочетание кнопок Cmd / Ctrl + D чтобы повторить это действие (Object > Transform > Transform Again).

Выравнивание по вертикали и по горизонтали

Так же, как и прежде, выберите все объекты и нажмите на Align Vertical Center и Align Horizontal Center.

Разделение на треугольные сегменты

Выделив все объекты, перейдите к панели Pathfinder и выберите Divide . Это разделит шестиугольник на 6 треугольников.

Применение цвета

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

Делаем шаблон

Теперь начинается самое интересное! Выберите объект и перейдите к Object > Pattern > Make.

Illustrator выдаст предупреждение, что картина будет сохранен в панели Swatches. Просто нажмите кнопку ОК. Теперь вы находитесь в режиме Pattern. Выберите Hex by Row в выпадающем меню и введите имя в соответствующее поле. Вот и все! Теперь вы можете применять шаблон…

Применяем шаблон

Затем я масштабирую объект обратно в его оригинальный размер, снова используя инструмент Scale Tool , и, вводя значение 20%. Так как изначально я увеличил свой объект 5 раз больше (на 500%), теперь нужно сделать его в 5 раз меньше. Теперь я ставлю галочку Transform patterns и нажимаю кнопку ОК.

Создание треугольного фонового рисунка

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

Создаем разделительные линии

Выберите инструмент Line Tool и нарисуйте вертикальную линию (удерживая клавишу Shift). Цвет контура можете использовать любой, какой вам нравится. Теперь выберите инструмент Rotate Tool и нажав клавишу Alt / Option нажмите точно в верхней точке линии. В окне, которое появляется введите 120° в качестве значения угла вращения, и убедитесь, что нажимаете на кнопку Copy. Затем, нажмите Cmd / Ctrl + D, чтобы повторить это действие.

Рисуем прямоугольник

Группируем 3 линии вместе, перейдя в Object > Group или используя сочетание клавиш Cmd / Ctrl + G. Теперь, выберите инструмент Rectangle Tool и нарисуйте прямоугольник (пейзажной ориентации), начиная в точке пересечения с левой линии, в левом верхнем углу (см. изображение выше). Далее выберите оба объекта (прямоугольник и группу линий) и сделайте выравнивание по центру горизонтали и вертикали.

Создаем треугольник

Выделите прямоугольник и поместите его ниже группы линий, перейдя по Object > Arrange > Send to Back и нажмите Divide на панели Pathfinder.

Копирование и поворот на 120°

Выберите инструмент Direct Selection Tool (белая стрелка) и удалите нижние 2 треугольника. Инструментом Rotate Tool с нажатой клавишей Alt / Option кликните мышью в нижней точке треугольника. В окне Rotate введите 120° в качестве значения угла вращения, и убедитесь, что нажали на кнопку Copy. Теперь нажмите на сочетание клавиш Cmd / Ctrl + D чтобы повторить действие.

Копирование и поворот на 60°

Если вы хотите, то вы уже можете применять цвета для каждого треугольника. В своем примере я выбрал следующие цвета, чтобы создать эффект глубины. Теперь выберите оба вертикальных треугольника. Инструментом Rotate Tool снова с нажатым Alt / Option кликните именно в нижней точке соприкосновения выбранных треугольников. В окне Rotate введите 60° в качестве значения угла поворота, и убедитесь, что нажали на кнопку Copy.

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

Удаление ненужных частей

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

Копирование и отражение

Выберите 2 треугольные формы слева, и выберите инструмент Reflect Tool (нажав клавишу О). Зажав кнопку Alt / Option кликните мышью как показано на рисунке выше. В появившемся окне выберите Vertical Axis и нажмите на Copy.

Создаем паттерн

Выберите все объекты и перейти к Object > Pattern > Make.

В панели Options Pattern выберите Grid в типе плитки и задайте свое имя для паттерна. Поменяйте цвета, если вам это нужно с помощью инструмента Direct Selection Tool.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

сетка

Сетка по умолчанию размещает графику одинаково по горизонтали и вертикали.

Кирпич Рядом

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

Кирпич по столбцу

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

Hex By Row

Это поражает графику в шестиугольную форму по горизонтали.

Hex By Column

Это поражает графику в виде шестиугольника по вертикали.

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

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

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

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

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

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

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

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

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

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

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

Шаг 1

Шаг 2

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

Шаг 3

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

Шаг 4

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

Шаг 5

Шаг 6

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

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

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

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

Шаг 7

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

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

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

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

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

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

Что нужно для работы

В первую очередь вам понадобится изображение в формате PNG или хотя бы с однотонным фоном, чтобы его можно было легко убрать, сменив параметры наложения. Лучше всего, если у вас будет какой-нибудь векторный рисунок в одном из форматов Иллюстратора — AI, EPS. Если у вас есть только картинка в PNG, то её придётся переводить в вектор, чтобы можно было изменить цвет (в растровом виде можно только менять размер и разворачивать картинку).

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

Способ 1: простой паттерн из геометрических фигур

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

Способ 2: делаем паттерн при помощи картинок

Для этого понадобится скачать картинку в формате PNG с прозрачным фоном. Можно также найти картинку с однотонным фоном, но его придётся удалить перед тем, как векторизовать изображение. А инструментами Иллюстратора убрать фон у изображения невозможно, его лишь можно скрыть, поменяв вариант наложения. Будет идеально, если вы найдёте исходный файл изображения в формате Иллюстратора. В этом случае картинку не придётся векторизовать. Главная проблема – найти какие-либо подходящие файлы в формате EPS, AI в сети сложно.

Рассмотрим пошаговую инструкцию на примере картинки с прозрачным фоном в формате PNG:

Мы рады, что смогли помочь Вам в решении проблемы.

Отблагодарите автора, поделитесь статьей в социальных сетях.

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

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

Сложность урока: Легкий

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

Что такое полутона?

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

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

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

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