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

Как создать динамический фон с помощью Adobe Illustrator и Phantasm CS

Ярослав Лазунов
12.04.2013
Цель Урока
Как создать динамический фон с помощью Adobe Illustrator и Phantasm CS

Для создания динамических повторяющихся и не повторяющихся фонов мы будем использовать панель Appearance  и плагин для Adobe Illustrator - Phantasm CS. Давайте детально рассмотрим, как это делается.

Создание повторяющегося фона

Шаг 1

Берем Rectangle Tool (M) и создаем прямоугольник с заливкой серого цвета.

Открываем панель Appearance (Window > Appearance) и, не снимая выделения с объекта, добавляем новую заливку, нажав на соответствующую кнопку в нижней части объекта.

Шаг 2

Создадим элемент, из которого будет состоять фон. Для создания его формы я буду использовать Dynamic Shapes Tool (плагин VectorScribe), что даст нам большую свободу действий в дальнейшем. Выбираем Dynamic Circle в панеле Dynamic Shapes и создаем окружность при помощи Dynamic Shapes Tool. Заливаем эту окружность радиальным градиентом, который содержит черный цвет и два оттенка серого цвета.

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

Шаг 3

Добавим новую заливку светло-серого цвета к созданной окружности, выделяем эту заливку в панеле Appearance и переходим Effect > Transform & Distort > Transform… и устанавливаем параметры, указанные на рисунке ниже.

Сохраним созданный объект как новый символ в панеле Symbols.

Удалим окружность из текущего документа, она нам больше не понадобится.

Шаг 4

Переходим к прямоугольнику, который был создан в первом шаге. Выделяем прямоугольник, верхнюю заливку в панеле Appearance  и символ в панеле Symbols, затем переходим Effect > Phantasm CS > Halftone…. Устанавливаем параметры эффекта, которые указаны на рисунке ниже.

Диалоговое окно Phantasm CS Halftone имеет много опций, которые позволяют вам получать различные фоны, используя один и тот же элемент.

Шаг 5

Добавим новую обводку для прямоугольника в панеле Appearance, заливаем ее радиальным градиентом от белого к черному цвету и устанавливаем режим смешивания Overlay.

Шаг 6

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

Теперь группируем наш прямоугольник (Cmd / Ctrl + G)

Выделяем группу и переходим Effect > Pathfinder > Crop.

Шаг 7

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

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

Шаг 8

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

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

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

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

Шаг 9

Выделим путь в панеле Layer и сохраним новый графический стиль в панеле Graphic Styles.

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

После применения стиля объект необходимо сгруппировать и перейти Effect > Pathfinder > Crop.

Шаг 10

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

Для устранения этого дефекта выделяем заливку, к который был применен эффект Halftone в панеле Appearance и переходим Effect > Path > Offset path и устанавливаем величину смещения.

Не повторяющиеся фоны

Шаг 11

При помощи Phantasm CS мы легко можем получать не повторяющийся фон. Создадим прямоугольник с заливкой черного цвета. Теперь переходим Object > Create Gradient Mesh… и устанавливаем количество строк и столбцов в диалоговом окне.

При помощи Direct Selection Tool (A) выделяем некоторые узлы и окрашиваем их в разные оттенки темно-синего цвета.

Шаг 12

Купируем прямоугольник и вставляем его вперед (Cmd / Ctrl + C, Cmd / Ctrl + F). Перекрашиваем узлы градиентной сетки на серый цвет, так как это показано на рисунке ниже.

Шаг 13

Создадим окружность и зальем ее радиальным градиентом от белого к черному цвету.

Установим для этой окружности режим смешивания Color Dodge в панеле Transparence.

Перетаскиваем окружность в панель Symbols и сохраняем как новый символ.

Шаг 14

Выделяем верхний gradient mesh объект, символ в панеле Symbols и переходим Effect > Phantasm CS…  устанавливаем параметры, указанные на рисунке ниже.

Шаг 15

Не снимая выделения с объекта, переходим Effect > Warp > Rise… и устанавливаем параметры этого эффекта.

На этот раз спрячем выступающие за пределы фона объекты при помощи Clipping Mask. Создаем прямоугольник, размер которого должен соответствовать размеру фона, выделим его и объект, к которому был применен Phantasm CS Halftone эффект, затем переходим Object > Clipping Mask > Make (Cmd / Ctrl + 7).

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

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