Vectorboom
Уроки / Web дизайн / Comments: 1

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

Ярослав Лазунов
17.10.2012
Цель урока
Универсальные техники, которые позволяют создавать едва разлечимые, однотонные безшовные узоры в любой версии Adobe Illustrator

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

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

Шаг 1

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

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

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

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

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

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

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

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

Шаг 2

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

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

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

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

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

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

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

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

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

Шаг 3

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

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

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

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

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

Шаг 4

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

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

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

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

Шаг 5

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

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

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

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

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

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

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

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

Шаг 6

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

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

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

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

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

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

Шаг 7

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

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

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

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

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

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

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

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

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

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

Все получилось правильно.

Шаг 8

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

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

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

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

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

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

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

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

Создание однотонных, еле заметных безшовных узоров в Adobe Illustrator CS6

Шаг 9

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

урок: Создание однотонных, еле заметных безшовных узоров в Adobe Illustrator CS6

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

урок: Создание однотонных, еле заметных безшовных узоров в Adobe Illustrator CS6

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

урок: Создание однотонных, еле заметных безшовных узоров в Adobe Illustrator CS6
урок: Создание однотонных, еле заметных безшовных узоров в Adobe Illustrator CS6

Шаг 10

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

урок: Создание однотонных, еле заметных безшовных узоров в Adobe Illustrator CS6

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

урок: Создание однотонных, еле заметных безшовных узоров в Adobe Illustrator CS6

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

урок: Создание однотонных, еле заметных безшовных узоров в Adobe Illustrator CS6

Таким образом, мы перешли в режим создания паттернов.

Шаг 11

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

урок: Создание однотонных, еле заметных безшовных узоров в Adobe Illustrator CS6

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

урок: Создание однотонных, еле заметных безшовных узоров в Adobe Illustrator CS6

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

урок: Создание однотонных, еле заметных безшовных узоров в Adobe Illustrator CS6

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

урок: Создание однотонных, еле заметных безшовных узоров в Adobe Illustrator CS6
урок: Создание однотонных, еле заметных безшовных узоров в Adobe Illustrator CS6

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

Рекомендую также почитать несколько уроков по созданию бесшовных узоров, текстур и фонов в Adobe Illustrator:

Как создать реалистичную деревянную текстуру в Adobe illustrator

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

Как создать векторную джинсовую текстуру, используя Adobe Illustrator

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

Бесплатный вектор - Бесшовная кирпичная стена

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

Всего комментариев: 0
Только зарегистрированные пользователи могут добавлять комментарии.
[ Registration | Login ]
twitter RSS facebook deviantart feed dribbble
Логин
Пароль
Новости Форума
 
Перепечатка, копирование или воспроизведение информации в каком-либо виде строго запрещены.
Все материалы, которые размещены на этом сайте не подлежат дальнейшему воспроизведению и/или распространению в любой форме, кроме как с письменного разрешения автора.