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

   
 
Цель урока Как в Adobe Illustrator создать однотонный, едва различимый фон для веб сайта - student2.ru В этом уроке мы рассмотрим процесс создания едва различимых, однотонных бесшовных узоров в Adobe Illustrator и техники, позволяющие упростить эту работу. Эти техники являются универсальными, то есть пригодными для применения в любой версии Illustrator. Кроме того, мы создадим один утонченный бесшовный узор в Adobe Illustrator CS6. Этот релиз приложения имеет функцию создания шаблонов, позволяющую автоматизировать процесс. Нежные, однотонные и малозаметные безшовные узоры в настоящее время очень популярны в дизайне. Их часто применяют для создания фонов веб сайтов. Изучите этот урок, и вы сможете создавать уникальные паттерны для своих проектов. Универсальные техники, которые позволяют создавать едва разлечимые, однотонные безшовные узоры в любой версии Adobe Illustrator Шаг 1 Начнем наш урок с создания пиксельного бесшовного узора. Это вид паттернов остается популярным на протяжении многих лет. И я уверен, что он будет популярным и в будущем. Давайте рассмотрим несколько техник, которые позволят облегчить создание пиксельного бесшовного узора. Пиксельные паттерны отличаются от остальных тем, что их объекты должны точно соответствовать размерам пиксельной сетки. Именно это свойство позволяет объектам иметь резкие границы. Включим режим Pixel Preview (View > Pixel Preview). Этот режим позволяет нам видеть линии пиксельной сетки при зумировании монтажной области. Кроме того режим Pixel Preview позволяет вам создавать объекты, которые имеют только целые размеры в пикселях. Зумируем монтажную область текущего документа, затем возьмем инструмент иллюстратора Rectangle Tool (M) и создадим квадрат, как это показано на рисунке ниже. Как в Adobe Illustrator создать однотонный, едва различимый фон для веб сайта - student2.ru Создадим еще несколько квадратов, которые будут располагаться по одной из диагоналей первого квадрата. Как в Adobe Illustrator создать однотонный, едва различимый фон для веб сайта - student2.ru Цвета элементов тонких узоров должен незначительно отличаться друг от друга. Это может выражаться в нескольких процентах при работе в цветовом режиеме. Выделяем все созданные объекты и перетаскиваем их в панель Swatches. Как в Adobe Illustrator создать однотонный, едва различимый фон для веб сайта - student2.ru Теперь мы можем применять этот паттерн для заливки любых объектов или использовать, как фон для сайта. Как в Adobe Illustrator создать однотонный, едва различимый фон для веб сайта - student2.ru Шаг 2 Мы рассмотрели один из самых простых примеров создания пиксельного безшовного узора. Однако, даже эта техника позволяет нам создавать интересные фоны. Как в Adobe Illustrator создать однотонный, едва различимый фон для веб сайта - student2.ru Как в Adobe Illustrator создать однотонный, едва различимый фон для веб сайта - student2.ru Но не все так просто как может показаться на первый взгляд. Давайте рассмотрим еще один пример. При помощи Rectangle Tool (M) создадим элемент паттерна, как это показано на рисунке ниже. Как в Adobe Illustrator создать однотонный, едва различимый фон для веб сайта - student2.ru Теперь перетащим его в панель Swatches и применим к объекту произвольной формы. Как в Adobe Illustrator создать однотонный, едва различимый фон для веб сайта - student2.ru Как вы видите в местах касания плиток паттерна мы получили удваивание элементов. Как в Adobe Illustrator создать однотонный, едва различимый фон для веб сайта - student2.ru Я не задумывал такой паттерн, следовательно, он нуждается в коррекции. Шаг 3 Создадим прямоугольник без заливки и обводки и поместим его ниже всех объектов паттерна. Как в Adobe Illustrator создать однотонный, едва различимый фон для веб сайта - student2.ru Этот прямоугольник будет ограничивать видимую часть элементов паттерна. Перенесем все объекты паттерна, в том числе и прямоугольник в панель Swatches и применим к объекту. Как в Adobe Illustrator создать однотонный, едва различимый фон для веб сайта - student2.ru Теперь паттерн выглядит, так как было задумано. Шаг 4 Часто в процессе создания паттерна трудно представить, как он будет выглядеть после применения. Сейчас я познакомлю вас с техникой, которая позволит вам видеть несколько плиток паттерна во время его создания. Итак, создадим одну плитку паттерна, которая состоит из квадратов размером 1x1px. Как в Adobe Illustrator создать однотонный, едва различимый фон для веб сайта - student2.ru Группируем все квадраты (Cmd / Ctrl + G). Размер этой группы составляет 16x16px. Вы можете увидеть это в панели Transform или в панели Control. Как в Adobe Illustrator создать однотонный, едва различимый фон для веб сайта - student2.ru Шаг 5 Выделяем группу и переходим Effect > Distort & Transform > Transform…, затем устанавливаем вертикальное и горизонтальное смещение, величина которых соответствует размерам группы. Число копий - 0 (ноль) Как в Adobe Illustrator создать однотонный, едва различимый фон для веб сайта - student2.ru Переходим еще раз Effect > Distort & Transform > Transform…, и устанавливаем новые параметры эффекта, как это показано на рисунке ниже. Как в Adobe Illustrator создать однотонный, едва различимый фон для веб сайта - student2.ru В последний раз применяем Transform Effect с новыми параметрами. Как в Adobe Illustrator создать однотонный, едва различимый фон для веб сайта - student2.ru Теперь мы видим сразу 9 плиток паттерна. Как в Adobe Illustrator создать однотонный, едва различимый фон для веб сайта - student2.ru Шаг 6 Мы можем добавлять новые элементы в паттерн. Давайте посмотрим, как это делается. Создадим несколько новых прямоугольников и сгруппируем их. Как в Adobe Illustrator создать однотонный, едва различимый фон для веб сайта - student2.ru Перенесем новую группу в группу с основной плиткой паттерна, к которой мы применяли Transform Effects. Эту манипуляцию следует проделать в панели Layers. Как в Adobe Illustrator создать однотонный, едва различимый фон для веб сайта - student2.ru Как вы можете видеть, новый элемент появился на всех плитках паттерна. Как в Adobe Illustrator создать однотонный, едва различимый фон для веб сайта - student2.ru Шаг 7 Создаем новые элементы и переносим их снова в группу с плиткой паттерна. Как в Adobe Illustrator создать однотонный, едва различимый фон для веб сайта - student2.ru Теперь, когда паттерн готов, переходим Object > Expand Appearance Как в Adobe Illustrator создать однотонный, едва различимый фон для веб сайта - student2.ru Паттерн должен быть ограничен прямоугольником, размер которого соответствует первоначальному размеру плитки (16x16px) Как в Adobe Illustrator создать однотонный, едва различимый фон для веб сайта - student2.ru Остальные объекты должны быть удалены. Как в Adobe Illustrator создать однотонный, едва различимый фон для веб сайта - student2.ru Переносим паттерн в панель Swatches и проверяем, все ли правильно мы сделали. Как в Adobe Illustrator создать однотонный, едва различимый фон для веб сайта - student2.ru Все получилось правильно. Шаг 8 Вы можете применять растровые эффекты к пиксельным паттернам. Это добавит к ним текстуру. Выделяем элементы паттерна и переходим Object > Blur > Gaussian Blur…, затем устанавливаем радиус размытия в диалоговом окне. Как в Adobe Illustrator создать однотонный, едва различимый фон для веб сайта - student2.ru Как в Adobe Illustrator создать однотонный, едва различимый фон для веб сайта - student2.ru Теперь переходим Object > Blur > Radial Blur… и устанавливаем параметры эффекта. Как в Adobe Illustrator создать однотонный, едва различимый фон для веб сайта - student2.ru В случае применения растровых эффектов вам обязательно нужно создать ограничивающий прямоугольник без заливки и обводки и разместить его ниже всех элементов паттерна. Как в Adobe Illustrator создать однотонный, едва различимый фон для веб сайта - student2.ru В противном случае между плитками паттерна будут образовываться пробелы. Сохраняем паттерн в панели Swatches и применяем его к произвольному объекту для проверки. Как в Adobe Illustrator создать однотонный, едва различимый фон для веб сайта - student2.ru Создание однотонных, еле заметных безшовных узоров в Adobe Illustrator CS6 Шаг 9 Теперь давайте рассмотрим создание однотонных, еле заметных фонов в Adobe Illustrator CS6. Этот релиз программы имеет функцию Pattern Creation, которая позволяет автоматизировать процесс. Создадим прямоугольник с заливкой темно-серого цвета. Как в Adobe Illustrator создать однотонный, едва различимый фон для веб сайта - student2.ru Добавим к этому объекту новую заливку в панели Appearance (Window > Appearance) Как в Adobe Illustrator создать однотонный, едва различимый фон для веб сайта - student2.ru Выделяем эту заливку в панеле и переходим Effect > Texture > Grain… и устанавливаем параметры эффекта. Как в Adobe Illustrator создать однотонный, едва различимый фон для веб сайта - student2.ru Как в Adobe Illustrator создать однотонный, едва различимый фон для веб сайта - student2.ru Шаг 10 Применим к этой заливке режим смешивания Multiply и уменьшим прозрачность до 20% Как в Adobe Illustrator создать однотонный, едва различимый фон для веб сайта - student2.ru Как я уже писал в 8 шаге этого урока, в случае применения растровых эффектов нам необходимо создать ограничивающий прямоугольник без заливки и обводки ниже всех объектов. Как в Adobe Illustrator создать однотонный, едва различимый фон для веб сайта - student2.ru Выделяем созданные объекты и переходим Object > Pattern > Make Как в Adobe Illustrator создать однотонный, едва различимый фон для веб сайта - student2.ru Таким образом, мы перешли в режим создания паттернов. Шаг 11 Берем инструмент иллюстратора Type Tool (T) и создаем разные буквы и символы. Размещаем их в произвольном порядке. Как в Adobe Illustrator создать однотонный, едва различимый фон для веб сайта - student2.ru Применяйте к символам разные шрифты и изменяйте размер шрифта, для этого удобно использовать панель Character (Window > Type > Character). Для создания символов, которых нет на вашей клавиатуре, используйте панель Glyph (Type > Glyph) Как в Adobe Illustrator создать однотонный, едва различимый фон для веб сайта - student2.ru Когда вы закончите создание паттерна, кликните на "Done” в топ баре. Как в Adobe Illustrator создать однотонный, едва различимый фон для веб сайта - student2.ru Паттерн готов, теперь его можно использовать для заливки объектов. Как в Adobe Illustrator создать однотонный, едва различимый фон для веб сайта - student2.ru Как в Adobe Illustrator создать однотонный, едва различимый фон для веб сайта - student2.ru На этом наш небольшой урок закончен.

Наши рекомендации