Как в Adobe Illustrator создать однотонный, едва различимый фон для веб сайта

Цель урока

В этом уроке мы рассмотрим процесс создания едва различимых, однотонных бесшовных узоров в Adobe Illustrator и техники, позволяющие упростить эту работу. Эти техники являются универсальными, то есть пригодными для применения в любой версии Illustrator. Кроме того, мы создадим один утонченный бесшовный узор в Adobe Illustrator CS6. Этот релиз приложения имеет функцию создания шаблонов, позволяющую автоматизировать процесс. Нежные, однотонные и малозаметные безшовные узоры в настоящее время очень популярны в дизайне. Их часто применяют для создания фонов веб сайтов. Изучите этот урок, и вы сможете создавать уникальные паттерны для своих проектов. Универсальные техники, которые позволяют создавать едва разлечимые, однотонные безшовные узоры в любой версии Adobe Illustrator Шаг 1 Начнем наш урок с создания пиксельного бесшовного узора. Это вид паттернов остается популярным на протяжении многих лет. И я уверен, что он будет популярным и в будущем. Давайте рассмотрим несколько техник, которые позволят облегчить создание пиксельного бесшовного узора. Пиксельные паттерны отличаются от остальных тем, что их объекты должны точно соответствовать размерам пиксельной сетки. Именно это свойство позволяет объектам иметь резкие границы. Включим режим Pixel Preview (View > Pixel Preview). Этот режим позволяет нам видеть линии пиксельной сетки при зумировании монтажной области. Кроме того режим Pixel Preview позволяет вам создавать объекты, которые имеют только целые размеры в пикселях. Зумируем монтажную область текущего документа, затем возьмем инструмент иллюстратора Rectangle Tool (M) и создадим квадрат, как это показано на рисунке ниже.

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

Цвета элементов тонких узоров должен незначительно отличаться друг от друга. Это может выражаться в нескольких процентах при работе в цветовом режиеме. Выделяем все созданные объекты и перетаскиваем их в панель Swatches.

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

Шаг 2 Мы рассмотрели один из самых простых примеров создания пиксельного безшовного узора. Однако, даже эта техника позволяет нам создавать интересные фоны.

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

Теперь перетащим его в панель Swatches и применим к объекту произвольной формы.

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

Я не задумывал такой паттерн, следовательно, он нуждается в коррекции. Шаг 3 Создадим прямоугольник без заливки и обводки и поместим его ниже всех объектов паттерна.

Этот прямоугольник будет ограничивать видимую часть элементов паттерна. Перенесем все объекты паттерна, в том числе и прямоугольник в панель Swatches и применим к объекту.

Теперь паттерн выглядит, так как было задумано. Шаг 4 Часто в процессе создания паттерна трудно представить, как он будет выглядеть после применения. Сейчас я познакомлю вас с техникой, которая позволит вам видеть несколько плиток паттерна во время его создания. Итак, создадим одну плитку паттерна, которая состоит из квадратов размером 1x1px.

Группируем все квадраты (Cmd / Ctrl + G). Размер этой группы составляет 16x16px. Вы можете увидеть это в панели Transform или в панели Control.

Шаг 5 Выделяем группу и переходим Effect > Distort & Transform > Transform…, затем устанавливаем вертикальное и горизонтальное смещение, величина которых соответствует размерам группы. Число копий - 0 (ноль)

Переходим еще раз Effect > Distort & Transform > Transform…, и устанавливаем новые параметры эффекта, как это показано на рисунке ниже.

В последний раз применяем Transform Effect с новыми параметрами.

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

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

Перенесем новую группу в группу с основной плиткой паттерна, к которой мы применяли Transform Effects. Эту манипуляцию следует проделать в панели Layers.

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

Шаг 7 Создаем новые элементы и переносим их снова в группу с плиткой паттерна.

Теперь, когда паттерн готов, переходим Object > Expand Appearance

Паттерн должен быть ограничен прямоугольником, размер которого соответствует первоначальному размеру плитки (16x16px)

Остальные объекты должны быть удалены.

Переносим паттерн в панель Swatches и проверяем, все ли правильно мы сделали.

Все получилось правильно. Шаг 8 Вы можете применять растровые эффекты к пиксельным паттернам. Это добавит к ним текстуру. Выделяем элементы паттерна и переходим Object > Blur > Gaussian Blur…, затем устанавливаем радиус размытия в диалоговом окне.

Теперь переходим Object > Blur > Radial Blur… и устанавливаем параметры эффекта.

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

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

Создание однотонных, еле заметных безшовных узоров в Adobe Illustrator CS6 Шаг 9 Теперь давайте рассмотрим создание однотонных, еле заметных фонов в Adobe Illustrator CS6. Этот релиз программы имеет функцию Pattern Creation, которая позволяет автоматизировать процесс. Создадим прямоугольник с заливкой темно-серого цвета.

Добавим к этому объекту новую заливку в панели Appearance (Window > Appearance)

Выделяем эту заливку в панеле и переходим Effect > Texture > Grain… и устанавливаем параметры эффекта.

Шаг 10 Применим к этой заливке режим смешивания Multiply и уменьшим прозрачность до 20%

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

Выделяем созданные объекты и переходим Object > Pattern > Make

Таким образом, мы перешли в режим создания паттернов. Шаг 11 Берем инструмент иллюстратора Type Tool (T) и создаем разные буквы и символы. Размещаем их в произвольном порядке.

Применяйте к символам разные шрифты и изменяйте размер шрифта, для этого удобно использовать панель Character (Window > Type > Character). Для создания символов, которых нет на вашей клавиатуре, используйте панель Glyph (Type > Glyph)

Когда вы закончите создание паттерна, кликните на "Done” в топ баре.

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

На этом наш небольшой урок закончен.