Vectorboom
Советы / Техники / Comments: 3

Как создать векторную полигональную мозаику лайма

Ярослав Лазунов
18.02.2014
Цель Урока

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

В сегодняшнем уроке мы научимся создавать векторную полигональную мозаику из растрового изображения при помощи бесплатного веб инструмента Triangulator и Adobe Illustrator. Для усиления визуального эффекта мы создадим отражение при помощи Opacity Mask и падающую тень, используя радиальный градиент и панель Transparency.

Шаг 1

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

Распаковываем архив, находим файл index.html и открываем его в вашем браузере.

Я рекомендую вам использовать Google Chrome для этих целей. Triangulator работает только с браузерами имеющими File API support.

Шаг 2

Теперь нам потребуется растровое изображение, которое мы будем конвертировать в вектор. Triangulator работает со всеми распространенными форматами изображений (GIF, JPG, PNG8 и PNG24). Я буду использовать Fresh ripe lime с Shutterstock. Конечно, вы можете использовать другое изображение. Уменьшите картинку в любом растровом редакторе, например в Photoshop, если оно имеет слишком большие размеры. Я думаю, что для удобной работы ширина изображения должна быть около 600-800px. Качество изображения не имеет существенного значения.

Шаг 3

Перетащите ваше изображение в drop зону страницы, как это показано на рисунке ниже.

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

Шаг 4

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

Затем удаляем образовавшиеся полигоны, нажав на Delete all vertices.

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

Шаг 5

Клик в новой точке приведет к созданию нового полигона или разделению существующего, если клик был сделан внутри него.

Вы можете перемещать вершины созданных полигонов.

Шаг 6

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

Шаг 7

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

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

Шаг 8

После того, как мозаика из полигонов полностью создана, нажимаем на Export

Теперь нажимаем на Save this link as file.

В результате этих действий мозаика откроется в новом окне.

Шаг 9

Кликаем правой кнопкой мыши на мозаике, затем выбираем Save as… в открывшемся контекстном меню.

Сохраняем файл на жестком диске. Как вы можете видеть, этот файл имеет расширение SVG, и может быть открыт в любом векторном редакторе.

Шаг 10

Открываем файл в Adobe Illustrator. Мозаика представляет собой обычные векторные объекты, которые залиты линейными градиентами.

Выделим и удалим полигоны, которые находятся за пределами лайма.

Шаг 11

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

Для перемещения вершин соседних полигонов выделите их при помощи Lasso Tool (Q), затем сместите при помощи Direct Selection Tool (A) или клавиш со стрелками.

Шаг 12

Приступим к созданию фона. Нарисуем прямоугольник при помощи Rectangle Tool (M). Размеры прямоугольника должны соответствовать размерам рабочей области. Заливаем этот объект радиальным градиентом от белого к светло-зеленому цвету.

Отключим видимость всех объектов кроме фона в панели Layers. Теперь переходим File > Save for Web… и сохраняем файл в JPG формате, например.

Шаг 13

Перетягиваем файл с растровым фоном в Triangulator , затем создаем мозаику, также как мы делали это с лаймом.

Сохраняем полученные полигоны, как SVG файл, затем открываем его в Adobe Illustrator.

Шаг 14

Неровные края фона выровняем при помощи панели Align, затем группируем все его объекты (Cmd/Ctrl + G).

Теперь скопируем фон и вставим его в документ, в котором находится лайм. Поместим фон ниже объектов лайма.

Шаг 15

Создадим отражение. Выделяем все объекты лайма, затем переходим Object > Transform > Reflect…. В открывшемся диалоговом окне выбираем Horizontal Axis и нажимаем на кнопку Copy.

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

Шаг 16

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

Выделяем отражение лайма и прямоугольник, затем нажимаем на Make Opacity Mask в сплывающем меню панели Transparency.

Расположим Opacity Mask ниже объектов лайма, переместив ее вниз в панели Layers.

Шаг 17

Создадим падающую тень. Нарисуем окружность при помощи Ellipse Tool (L) и зальем ее радиальным градиентом от темно-зеленного к белому цвету.

Установим для окружности режим смешивания Multiply в панели Transparency.

Деформируем окружность при помощи Selection Tool (V), превратив ее в эллипс. Поместим тень ниже объектов лайма.

Векторный натюрморт с лаймом в стиле полигональной мозаики готов.

Всего комментариев: 3
0
1  
Хороший урок, сделал по нему http://vk.com/helg519?z=photo51506953_333527522%2Fphotos51506953

0
2  
Спасибо, интересный,отличный урок! много нового для меня.

0
3  
и вам спасибо

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