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

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

Ярослав Лазунов
03.02.2014
Цель урока
Как создать креативную книжную полку для веб иконок

This article was originally published on Vectips.com in English. You can view the original article here.

В этом уроке мы нарисуем книжную полку в виде облака, пройдя все этапы дизайна, от создания первых форм и 3D моделирования в Adobe Illustrator до применения текстуры и работы над тенями и цветами.

Шаг 1

Запускаем Adobe Illustrator, затем переходим File > New…. Устанавливаем в открывшемся диалоговом окне требуемые размеры рабочей области и выбираем режим RGB.

Шаг 2

Нарисуем две окружности разного размера с обводкой и без заливки при помощи Ellipse Tool (L). Выделим оба объекта при помощи Selection Tool (V), затем нажмем на кнопку Vertical Align Bottom в панели Align.

Шаг 3

Создадим прямоугольник при помощи Rectangle Tool (M). Нижние вершины прямоугольника должны совпадать с нижними точками окружностей. Сделать это не сложно, если у вас включен режим Smart Guides (Cmd/Ctrl + U).

Нарисуем еще две окружности так, как это показано на рисунке ниже.

Шаг 4

При помощи простых фигур мы создаем облако, но в таком виде трудно оценить его форму. Выделяем все объекты, затем группируем их (Cmd/Ctrl + G). Не снимая выделения с полученной группы, переходим Effect > Pathfinder > Add. Формы объединились в единое целое, но при этом мы не потеряли возможность редактировать положение и размеры объектов, входящих в группу.

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

Теперь мы можем закончить процедуру объединения объектов, для этого переходим Object > Expand Appearance.

Шаг 5

Подберите на глаз необходимую толщину обводки в панели Stroke.

Теперь при помощи Line Tool (\) + Shift создадим несколько горизонтальных и вертикальных сегментов, как это показано на рисунке ниже.

Шаг 6

Выделяем все объекты, затем переходим Object > Path > Outline Stroke.

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

Шаг 7

Заливаем этот путь нейтральным серым цветом.

Приступаем к процессу 3D моделирования. Не снимая выделения с объекта, переходим Effect > 3D > Extrude & Bevel… и устанавливаем параметры, указанные на рисунке ниже.

Визуально оцените ваш 3D объект и, если что-то вас не устраивает, измените параметры эффекта.

Для упрощения последующей обработки выбираем поверхность No Shading в окне опций 3D Extrude & Bevel.

Шаг 8

Процесс построения 3D объекта закончен, переходим к работе с обычными векторными объектами, для этого переходим Object > Expand Appearance…

Теперь нам необходимо объединить объекты, которые принадлежат к одной поверхности. Выделяем такие объекты при помощи Direct Selection Tool (A), затем нажимаем на Unite в панели Pathfinder.

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

Шаг 9

Часто объекты, полученные в результате 3D моделирования, имеют открытые пути, что может осложнить их дальнейшую обработку.

Для быстрого закрытия используем Close All Paths скрипт, который вы можете скачать здесь.

Шаг 10

Объекты, полученные в результате 3D моделирования часто содержат большое количество лишних точек. Удалять их при помощи стандартных функций Adobe Illustrator очень трудно. Для этих целей я использую Smart Remove Brushes Tool (VectorScribe plug-in).

Создадим заднюю стенку для нашей книжной полки. Выделяем составной путь, показанный на рисунке ниже.

Копируем и вставляем его назад (Cmd/Ctrl + C; Cmd/Ctrl + B), затем размещаем ниже всех созданных объектов (Object > Arrange > Send to Back). Теперь переходим Object > Compound Path > Release.

Нажимаем на Unite в панели Pathfinder.

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

Шаг 11

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

Вы можете превратить его в векторную текстуру, используя функцию Live Trace в Adobe Illustrator. Однако такая векторная текстура будет иметь множество цветов и точек, что очень увеличит размер вашего файла. Для трассировки я предпочитаю использовать InkScape. О том, как трассировать в InkScape и о преимуществах этого способа вы сможете прочитать в моей статье - Как создать векторную текстуру высокого качества используя Photoshop, Illustrator и Inkscape. Полученную векторную текстуру я вставляю в иллюстратор. Как вы можете видеть, почти не потеряв реалистичности, такая текстура состоит всего из 11 составных путей и одного обычного пути, что соответствует 12 цветам.

Шаг 12

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

Шаг 13

Помещаем деревянную текстуру ниже всех созданных объектов. Заливаем заднюю стенку полки радиальным градиентом от белого к коричневому цвету.

Применим к этому объекту режим смешивания Multiply в панели Transparency.

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

Шаг 14

Копируем заднюю стенку и вставляем вперед (Cmd/Ctrl + C; Cmd/Ctrl + F). Выделяем обе формы задней стенки и деревянную текстуру, затем используем комбинацию горячих клавиш Cmd/Ctrl + 7 для создания Clipping Mask. Таким образом, мы скрыли часть текстуры, которая выходит за пределы нашей полки.

Шаг 15

Продублируем переднюю часть полки (Cmd/Ctrl + C; Cmd/Ctrl + F). Не снимая выделения с нового объекта, переходим Object > Compound Path > Release.

Удаляем внешнюю форму серого облака.

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

Шаг 16

Заливаем одну из этих форм коричневым цветом.

Дублируем коричневую форму (Cmd/Ctrl + C; Cmd/Ctrl + F), затем заливаем ее белым цветом.

Выделяем коричневую и белую форму (это удобно сделать в панели Layers) затем переходим Object > Blend > Make.

Шаг 17

Два раза кликнем по иконке Blend Tool (W) для открытия диалогового окна Blend Options. Устанавливаем количество specified steps. Я редко использую более 30 шагов, для того чтобы не сильно увеличивать размер файла.

Шаг 18

Смещаем внутрь точки белого объекта, так как это показано на рисунке ниже.

Выделяем весь бленд объект и устанавливаем режим Multiply в панели Transparency.

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

Шаг 19

Заливаем боковые стенки полки линейными градиентами в соответствии с направлением света (сверху вниз).

Шаг 20

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

Поместим эту текстуру ниже передней части полки.

Выделяем текстуру и переднюю часть полки, затем используем комбинацию горячих клавиш Cmd/Ctrl + 7 для создания Clipping Mask.

Шаг 21

Дублируем Compound Clipping Path (Cmd/Ctrl + C; Cmd/Ctrl + F).

Заливаем новый объект радиальным градиентом от темно-серого к черному цвету.

Применяем к этой форме режим смешивания Screen.

Таким образом, мы осветили переднюю часть полки.

Шаг 22

Дублируем переднюю часть, затем заливаем новый объект белым цветом.

Дублируем белый объект и смещаем копию на несколько пикселей вниз.

Выделяем обе белые формы, затем нажимаем Minus Front в панели Pathfinder.

Уменьшим непрозрачность полученной формы в панели Transparency.

Таким образом, мы получили блики на гранях полки.

Шаг 23

Создадим прямоугольник при помощи Rectangle Tool (M), величина которого соответствует размеру рабочей области. Заливаем прямоугольник радиальным градиентом от светло-серого к голубому цвету.

Шаг 24

Тень от облака я создал при помощи бленд объекта. Копируем заднюю стенку полки и вставляем ее назад (Cmd/Ctrl + C; Cmd/Ctrl + B). Этот объект должен располагаться ниже всех объектов полки, но выше фона. Заливаем форму облака синим цветом (для наглядности я отключил видимость всех вышележащих объектов).

Копируем форму облака, затем вставляем назад. Окрашиваем новый объект белым цветом, затем смещаем вниз и немного вправо.

Установим для белого объекта 0% прозрачности в панели Transparency.

Выделяем синюю и прозрачную форму облака, затем переходи Object > Blend > Make. Нажимаем дважды на иконку Blend Tool (W) для открытия диалогового окна Blend Options. Устанавливаем необходимое количество шагов.

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

Всего комментариев: 4
0
1  
Здравствуйте. Не получается выполнить действие в в 10-м шаге, создаем заднюю стенку...

Копируем и вставляем его назад (Cmd/Ctrl + C; Cmd/Ctrl + B), затем размещаем ниже всех созданных объектов (Object > Arrange > Send to
Back). Теперь переходим Object > Compound Path > Release.

Нажимаем на Unite в панели Pathfinder.

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

Спасибо!

0
2  
Давайте очистим действие от лишней информации.
1. Вам нужно разобрать составной путь Object > Compound Path > Release Это получается? Вместо одного объекта должно получится несколько. Дырок в форме больше нет.
2. Все полученные объекты сливаем в один. Нажимаем на Unite в панели Pathfinder. Что тут может не получится, недоумеваю я

0
3  
Спасибо за столь скорый ответ. Но у меня не получается сделать из контура сплошной (с дырками)... делаю все, как в уроке... может я что-то упустил? спасибо

0
4  
Видимо вы выделяете не тот объект. В панели слои он должен обозначаться, как Compound path

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