Векторизация

Зачем нужна векторизация изображений

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

Векторизация растровой графики также помогает адаптировать изображения для печати. Обычно типографии просят клиентов предоставлять оригинал-макеты с расширениями .eps, .cdr, .ai, .psd, .tiff или .pdf. Первые три из них являются векторными. Файлы в растровых форматах jpg, gif и png для широкоформатной печати вовсе не принимаются, так как их нельзя растянуть без потери качества и четкости. Векторные изображения не зависят от разрешения.

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

Наконец, векторизация растровой графики может использоваться для создания художественных эффектов. Для векторной графики характерны «плоские» цвета и минимум плавных переходов. Поэтому с помощью нее можно создавать графичные, мозаичные портреты, пейзажи, рекламу в стилистике поп-арт и другие необычные дизайны.

Различия векторной и растровой графики

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

Растровое изображение — это картинка, состоящая из сетки пикселей. Каждый пиксель — это маленький квадратик, которому присвоено определенное значение цвета, что в совокупности формирует общее изображение. Разрешение растрового изображения определяется количеством пикселей в сетке, которое обычно задается как ширина, помноженная на высоту (например, 800 x 600 пикселей). У растровой картинки также есть такой параметр, как глубина цвета. Это количество битов, используемых для представления каждого пикселя, что определяет количество возможных цветов в изображении. Большая глубина цвета означает большее количество возможных цветов и большую точность цветопередачи, но также означает больший размер файла.

Векторное изображение — это картинка, состоящая не из пикселей, а из геометрических фигур, которые нарисованы с помощью математических уравнений. Это похоже на то, как в школе мы рисовали графики функций, получая плавные «горки» на оси координат. В векторной графике нет сетки пикселей, поэтому у нее нет и разрешения. То есть ее можно масштабировать до любого размера без потери качества. Одни из основных параметров векторного изображения — это размер, цвета заливки и обводки. Размеры обычно задаются в таких единицах, как дюймы или миллиметры, а цвета заливки и обводки могут быть определены с использованием широкого спектра цветовых моделей, включая RGB, CMYK и Pantone. Кроме того, векторные изображения могут включать градиенты, узоры, шум и другие визуальные элементы.

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

Как перевести растр в вектор: основные способы

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

Способ 1. Ручная перерисовка

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

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

• Сразу рисуем с помощью залитых фигур. Такой способ подойдет, если вы уже примерно представляете цвета будущей векторной картинки или если изображение можно быстро составить из готовых простых фигур.

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

Способ 2. Перевод растра в вектор в Adobe Photoshop

Несмотря на то что Photoshop — это редактор преимущественно растровой графики (например, профессиональных фотографий), у него есть несколько функций и для работы с вектором. Так, например, в нем можно открывать некоторые векторные форматы для использования в дизайн-макетах. Однако сейчас мы рассмотрим функционал «Фотошопа», который иногда применяют для создания векторных иконок, логотипов и надписей. Важный момент: в качестве исходника нужно будет взять изображение с небольшим количеством цветов и четкими границами между ними. Для примера рассмотрим иконку в формате PNG.

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

1. Используя инструмент «Волшебная палочка», выделяем черные границы объекта. 
2. Кликаем правой кнопкой мыши на выделенном фрагменте и выбираем «Образовать рабочий контур».
3. Далее переходим в окно «Контуры». Если у вас оно не отображается, то его нужно будет включить через «Окно» > «Контуры». В этом окне у вас появится новый объект под названием «Рабочий контур». При необходимости его можно переименовать.

4. Кликаем на нем правой кнопкой мыши и выбираем «Выполнить заливку контура», чтобы наша иконка приобрела четкие очертания. 
5. При необходимости можем подправить границы контура, перемещая узловые точки на рабочей области. 
6. Переходим в меню «Слои» > «Новый слой-заливка», выбираем цвет заливки будущего конечного файла. После этого ваш залитый контур появится уже не только в окне «Контуры», но и непосредственно на панели слоев.
7. Теперь файл можно выгрузить в векторном формате. Нажимаем «Файл» > «Экспортировать» > «Экспортировать как», выбираем формат SVG и сохраняем иконку на компьютер. Готово! Вы получили векторную иконку, которую при необходимости можно доработать или скорректировать в любом редакторе векторной графики.

Способ 3. Трассировка в Adobe Illustrator

Здесь есть удобная функция автоматической трассировки, поэтому процесс проще, чем в «Фотошопе». 

1. Откройте Adobe Illustrator и импортируйте растровое изображение, перейдя в меню «Файл» > «Открыть» и выбрав файл изображения.
2. Чтобы настроить параметры векторизации, нажмите «Окно» > «Трассировка изображения». В рабочей области появится новое окно с несколькими полями. Чтобы сразу просмотреть результат будущей трассировки в цветном исполнении, выберите в этом окне «Просмотр — Результат трассировки» и «Режим — Цвет».

3. После того как параметры вас устроят, перейдите в верхнее меню и выберите «Объект» > «Трассировка изображения». 
4. Сохраните векторное изображение в нужном формате, перейдя в меню «Файл» > «Сохранить как» и выбрав соответствующий формат файла, например EPS, AI или SVG.

В Adobe Illustrator вы можете выполнять векторизацию не только в цвете, но и в черно-белом варианте, а также в формате не заполненных цветом контуров. Это может быть полезным при работе с простыми картинками, такими как логотипы или иконки. Полученные контуры можно затем подправить или раскрасить в соответствии с художественным замыслом. Изменить настройки итога векторизации можно в том же окне «Трассировка изображения» в поле «Стиль».

Способ 4. Трассировка в CorelDRAW

Здесь процесс трассировки немного отличается от «Иллюстратора», но тоже несложный. 

1. Откройте CorelDRAW и импортируйте в программу растровое изображение, которое вы хотите трассировать, перейдя в меню «Файл» > «Импорт».
2. Выбрав растровое изображение, щелкните на нем правой кнопкой мыши. Сверху в появившемся меню вы увидите варианты «Быстрая трассировка», «Трассировка по центральной линии» и «Трассировка абрисом».

Первый способ работает автоматически. Спустя пару секунд ожидания вы получите векторизованный цветной рисунок. «Трассировка по центральной линии» подходит для технических иллюстраций (например, схем оборудования или расположения каки-либо объектов на географических картах). Кроме того, с помощью этой опции можно векторизовать карандашные наброски с высокой контрастностью. 

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

3. После того как вы будете удовлетворены трассировкой, выберите трассированное изображение и перейдите в меню «Объект» > «Преобразовать в кривую», чтобы перевести трассированное изображение в векторный формат.
4. Сохраните получившееся векторное изображение в нужном формате, перейдя в меню «Файл» > «Экспорт» и выбрав соответствующий формат файла, например EPS, AI или SVG.

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

Способ 5. Трассировка в онлайн-сервисах

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

Vector Magic. Этот онлайн-сервис предлагает несколько режимов трассировки, включая полностью автоматический режим и режим, управляемый пользователем, поддерживает несколько форматов и отличается высокой точностью.

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

Fconvert.ru. Это универсальный сервис-конвертер, который позволяет переводить одни графические форматы в другие за считаные секунды. Чтобы векторизовать растровую картинку, нужно выбрать конвертер «Трассировка» в главном меню. 

Online-converting.ru. Здесь также есть отдельный инструмент для автоматической трассировки — перевода растра в цветной вектор. Перед стартом нужно выбрать выходной формат файла, например SVG, задать желаемое разрешение, количество цветов и еще несколько параметров отрисовки.

У многих из вас наверняка возник вопрос: «Наверное, выполнять обратную операцию, то есть переводить вектор в растр, тоже сложно?» Нет, это гораздо проще. Например, в Adobe Photoshop сделать это можно в один клик! Открываете векторную картинку, переходите в панель слоев, кликаете на названии картинки правой кнопкой мыши и выбираете «Растрировать слой». Готово — ваше изображение стало пиксельным, то есть растровым.