В плане создания изображений у дизайнеров есть 2 варианта: растровая и векторная графика. Это – два отдельных мира: свои сферы применения, свои программы для рисования, свои преимущества и недостатки. Растровую графику и векторную графику иногда приводят как противоположности, и отчасти это правильно – если есть какая-то задача, обычно она решается либо конкретно растровой, либо конкретно векторной графикой. Но конкуренции здесь нет, и из этого следует неожиданный вывод: если вы хотите стать хорошим дизайнером, вам придется научиться пользоваться и тем, и тем. Ниже – что такое векторная графика, что такое растр, когда ими нужно пользоваться и какие у этих видов графики плюсы и минусы.
Растровая и векторная графика – что за понятия
Преимущества векторного способа описания графики перед растровой графикой
Пример, показывающий разницу между растровой и векторной графикой при увеличении. Растровые изображения плохо масштабируются, при увеличении распадаются на пиксели, тогда как векторные изображения могут быть неограниченно увеличены без потери качества (примеры изображения были преобразованы в векторный формат SVG для показа на этом рисунке).
Ве́кторная гра́фика — способ представления графических объектов и изображений (формат описания) в компьютерной графике, основанный на математическом описании элементарных геометрических объектов, обычно называемых примитивами, таких как: точки, линии, сплайны, кривые Безье, круги, окружности, эллипсы, многоугольники.
Объекты векторной графики описываются совокупностью координат, параметров и атрибутов.
Термин «векторная графика» используется для подчёркивания отличий от растровой графики, в которой изображение представлено в виде графической матрицы, состоящей из пикселей.
При выводе на матричные устройства отображения (мониторы, механические устройства — принтеры, и пр.) векторная графика предварительно преобразуется в растровую графику, преобразование производится программно или аппаратно средствами современных видеокарт. Для плоттеров и векторных мониторов преобразование из векторного в растровый формат не требуется, так как в таких устройствах примитивы строятся перемещением пера или электронного луча.
Что такое растровая и векторная графика
Рассказываем, чем они различаются и как их лучше использовать.
Иллюстрация: Оля Ежак для Skillbox Media
Пишет о дизайне в Skillbox Media, а в перерывах и сама орудует графическим планшетом. Влюблена в советские шрифты, японскую рекламу и русский язык.
В компьютерной графике изображение может формироваться двумя способами:
Растровые изображения повсюду — например, фотографии. На качественном изображении вы не увидите точек. Но если начать его увеличивать, вы увидите пиксели, из которых оно состоит:
Это могут быть рисунки, сканы документов и всё, что можно нарисовать в растровых редакторах: в Photoshop, Procreate, Paint.
Самые популярные растровые форматы: gif, jpeg, png. Gif позволяет создавать анимированные изображения, а jpeg и png — только статичные.
Обычно вектор используют для создания логотипов, элементов интерфейса и шрифтов. Их составляющие — контур и заливка. Компьютер рассчитывает контур по математической формуле, поэтому изображение не будет расплывчатым независимо от размера. А ещё такие файлы имеют гораздо меньший вес, чем растровые картинки.
Иллюстрация: pikisuperstar / Freepik
Самые популярные векторные форматы — eps и svg. Eps чаще используют в полиграфии, а svg — в веб-дизайне.
Обычно кривые делают в векторных редакторах — Adobe Illustrator, Figma, CorelDRAW. Иногда и в коде на HTML — но с этим обычно никто не заморачивается.
В графических редакторах кривые создают по опорным точкам — на них линия может изгибаться и менять своё направление.
Изображение: Skillbox Media
Растровое изображение не получится перевести в вектор с сохранением цветовой гаммы. Внутри одной векторной фигуры может быть только однотонная заливка или градиент — это не даёт такого многообразия цветовых переходов, как пиксели.
Если автоматически перевести фото в вектор, итоговая картинка будет казаться очень размытой:
Попытка превратить растровое изображение в векторное. Изображение: Vincent van Zalinge / Unsplash / Skillbox Media
Вот если в Paint вы нарисуете закорючку из одного-двух цветов, по ней можно будет сделать векторный контур. Но обычно векторные изображения сразу рисуют с помощью кривых.
Зато вектор в растр перевести можно в один клик в любом графическом редакторе.
Зависит от вашей задачи. Оба формата имеют и преимущества, и недостатки.
Преимущество растровой графики — в цветовых возможностях. Она позволяет хорошо передавать градиенты и цветовые переходы на сложных иллюстрациях. Но при увеличении изображения его качество будет ухудшаться.
Преимущество векторной графики — в бесконечном размере. Логотип в формате svg можно увеличивать сколько угодно, и его контур не пострадает. Но сделать сложную иллюстрацию со множеством цветов и мелких деталей будет сложнее.
Для фотографий и сложных иллюстраций лучше всего подойдёт растровая графика. Для простых иллюстраций и логотипов — векторная.
Изображения: Noah Buscher / Unsplash / Freepik
А что ещё у вас почитать о работе с изображениями?
Жизнь можно сделать лучше!Освойте востребованную профессию, зарабатывайте больше и получайте от работы удовольствие. А мы поможем с трудоустройством и важными для работодателей навыками.
Как перевести растр в вектор
Ниже мы собрали 5 способов, как перевести растровое изображение в векторное. Какой способ выбрать — зависит от того, сколько у вас свободного времени, установлены ли у вас указанные программы, умеете ли вы ими пользоваться и какое качество векторизации вам необходимо.
Способ 1. Ручная перерисовка
Это самый сложный и долгий способ. Он применяется в тех случаях, когда работа так или иначе связана с творчеством. Например, дизайнеры иконок и логотипов часто сначала набрасывают изображения от руки на бумаге, затем загружают фотографию или отсканированную страницу в графический редактор и создают новые контуры поверх. В Adobe Illustrator рисовать фигуры в векторе можно с помощью «Пера», «Кривизны», «Кисти», «Карандаша» или набора готовых фигур, среди которых прямоугольник, эллипс, многоугольник, звезда и линия. Отрисовывать вектор от руки можно двумя основными способами.
Инструмент «Кривизна» в Adobe Illustrator, который позволяет сразу рисовать изогнутый контур объекта
Рисование с помощью цветных примитивов в Adobe Illustrator. Получившиеся фигуры можно объединять, вырезать друг из друга, редактировать по цвету, форме, прозрачности, размеру и вносить множество других изменений для получения целостной композиции
В конце исходник-подложку просто удаляют, а получившееся изображение-контур дорабатывают: раскрашивают, меняют толщину линий, добавляют элементы и т.д.
Пример векторной иконки, созданной на основе карандашного наброска. Источник
Способ 2. Перевод растра в вектор в Adobe Photoshop
Несмотря на то что Photoshop — это редактор преимущественно растровой графики (например, профессиональных фотографий), у него есть несколько функций и для работы с вектором. Так, например, в нем можно открывать некоторые векторные форматы для использования в дизайн-макетах. Однако сейчас мы рассмотрим функционал «Фотошопа», который иногда применяют для создания векторных иконок, логотипов и надписей. Важный момент: в качестве исходника нужно будет взять изображение с небольшим количеством цветов и четкими границами между ними. Для примера рассмотрим иконку в формате PNG.
Открываем иконку в программе и действуем следующим образом.
Создание рабочего контура
Окно экспорта файла в Adobe Photoshop
Способ 3. Трассировка в Adobe Illustrator
Здесь есть удобная функция автоматической трассировки, поэтому процесс проще, чем в «Фотошопе».
Настройки в окне «Трассировка изображения», которые позволят посмотреть цветной результат
В Adobe Illustrator вы можете выполнять векторизацию не только в цвете, но и в черно-белом варианте, а также в формате не заполненных цветом контуров. Это может быть полезным при работе с простыми картинками, такими как логотипы или иконки. Полученные контуры можно затем подправить или раскрасить в соответствии с художественным замыслом. Изменить настройки итога векторизации можно в том же окне «Трассировка изображения» в поле «Стиль».
Предпросмотр итога векторизации в черно-белом формате
Способ 4. Трассировка в CorelDRAW
Здесь процесс трассировки немного отличается от «Иллюстратора», но тоже несложный.
Варианты трассировки в интерфейсе CorelDRAW
Первый способ работает автоматически. Спустя пару секунд ожидания вы получите векторизованный цветной рисунок. « Трассировка по центральной линии» подходит для технических иллюстраций (например, схем оборудования или расположения каки-либо объектов на географических картах). Кроме того, с помощью этой опции можно векторизовать карандашные наброски с высокой контрастностью.
«Трассировка абрисом» включает больше разновидностей объектов, которые можно векторизовать. Ее можно применять для создания логотипов, иконок, штриховых рисунков и иных картинок и иллюстраций. А выбрав вариант «Изображения высокого качества», можно трассировать даже детализированные фото с промежуточной настройкой итогового результата (детализации, степени сглаживания углов, цветов и других параметров).
Виды объектов, которые можно векторизовать с помощью «Трассировки абрисом»
В целом, CorelDRAW представляет собой простой и мощный инструмент для трассировки растровых изображений в векторный формат с рядом опций для точной настройки результатов.
Способ 5. Трассировка в онлайн-сервисах
Если у вас нет возможности использовать перечисленные выше программы, можно выполнить трассировку онлайн, без установки ПО на компьютер. Вот несколько популярных сервисов, в которых можно это сделать.
Vector Magic. Этот онлайн-сервис предлагает несколько режимов трассировки, включая полностью автоматический режим и режим, управляемый пользователем, поддерживает несколько форматов и отличается высокой точностью.
Vectorizer. Этот сервис известен своей простотой и доступностью. Он предлагает автоматический и ручной режимы трассировки с возможностью регулировки выходных параметров и настройки конечного результата. Он поддерживает широкий спектр входных и выходных форматов и имеет удобный интерфейс.
Пример исходного фото в растре и конечного в векторе из сервиса Vectorizer
Fconvert.ru. Это универсальный сервис-конвертер, который позволяет переводить одни графические форматы в другие за считаные секунды. Чтобы векторизовать растровую картинку, нужно выбрать конвертер «Трассировка» в главном меню.
Online-converting.ru. Здесь также есть отдельный инструмент для автоматической трассировки — перевода растра в цветной вектор. Перед стартом нужно выбрать выходной формат файла, например SVG, задать желаемое разрешение, количество цветов и еще несколько параметров отрисовки.
У многих из вас наверняка возник вопрос: «Наверное, выполнять обратную операцию, то есть переводить вектор в растр, тоже сложно?» Нет, это гораздо проще. Например, в Adobe Photoshop сделать это можно в один клик! Открываете векторную картинку, переходите в панель слоев, кликаете на названии картинки правой кнопкой мыши и выбираете «Растрировать слой». Готово — ваше изображение стало пиксельным, то есть растровым.
Перевод изображения из вектора в растр в Adobe Photoshop
Давно не разбавлял развлекательную программу познавательной. В этой связи ловите пост-полезность)
Уже ведь все в курсе, что логотипы должны в векторе? А шрифты — в кривых? А что макет — в CMYK? А что сила — в правде?)
Всё это действительно так (почти всегда). Но обо всём по порядку: сегодня я вам подробно расскажу о том, что такое векторный формат и почему логотипы желательно делать в нем.
Векторная графика — это категория компьютерной графики, которая для представления изображения использует фигуры, построенные по математическим формулам.
Помните, в школе на геометрии нужно было построить окружность в системе координат? Для этого достаточно было знать только координату центра окружности и её радиус, верно? Таким же образом рисуется окружность и в векторной графике.
Подобным же образом рисуются кривые, прямые, ломаные линии, многоугольники, эллипсы и прочие, так называемые графические примитивы.
Помимо координат и размеров этим элементам в программе для создания векторных изображений можно задать:
– цвет заливки (однотонный или цветовым переходом — градиентом);
– наличие, толщину, форму и цвет обводки;
– расположение относительно других объектов (слоём выше или ниже);
– или применить какие-то дополнительные эффекты (размытие, «клонирование», деформация и многие другие).
Но основными параметрами в векторной графики являются координаты опорных точек и направление (векторов) линий, проходящих через них. Отсюда и название.
Кстати, о названиях: несмотря на то, что графические примитивы зовутся именно так, порой они могут представлять собой очень сложный на вид объект.
Например рисунок ниже — это один единственный примитив, представленный замкнутой кривой линией:
А этот примитив ниже и вовсе поражает своей фотореалистичностью:
Вся «фотография» справа также является одной кривой, но окрашена она сетчатым градиентом (слева показана эта самая сетка) — плавных переходов цвета в ней так много, что мы отчётливо видим все светотени и даже текстуру кожи.
Чем векторная графика отличается от растровой?
Векторная графика часто противопоставляется растровой. И правильно делает: они отличаются на фундаментальном уровне со всеми вытекающими.
Любое растровое изображение состоит из матрицы (сетки) пикселей. Каждому из этих пикселей приписано его местоположение и цвет. И растровое изображение содержит в себе эту информацию о каждом своём пикселе. Этим объясняется зависимость «веса» растрового изображения от его размера — чем больше в нём пикселей, тем больше информации ему нужно в себе хранить.
Посмотрите примеры ниже:
Слева — векторный синий круг размером 200 на 200 пикселей. Да, хотя в векторной графике самих пикселей нет, размер изображения можно задать и в них.
Справа — растровый синий круг такого же размера.
При этом файл векторного круга весит 2,16 Кб, а растрового — 4,73 Кб. Разница небольшая, да. Если бы они оба были размером 100 на 100 пикселей, разница была бы ещё меньше: 2,16 Кб против 2,24. Но чем больше будет размер обоих картинок, тем значительнее будет разница в весе файла.
К примеру: вес векторного круга размером 1000 на 1000 пикселей будет всё так же 2,16 Кб, а вес растрового файла будет уже 27,6 Кб — в 12,5 раз больше! Если брать рисунки 10000 на 10000 пикселей, то веса файлов будут 2,16 против 640 Кб — растровый файл будет уже в 300 раз тяжелее векторного.
Почему это происходит? В то время, как растровому файлу в последнем случае приходится нести информацию о 100 миллионах точек (пикселей), векторному всё также нужно знать лишь 3 параметра — размер круга, его местоположение и цвет.
Что будет, если увеличить те двухсотпиксельные круги?
Увеличенный фрагмент векторного файла:
Увеличенный фрагмент растрового файла:
Пиксели. Они повсюду. Вы их точно увидите!
Однако, не стоит полагать, что растровая графика во всём уступает векторной. У обеих категорий есть как плюсы, так и минусы, и каждой своё применение.
Плюсы векторных изображений:
1. Сравнительно небольшой вес файлов (особенно для больших размеров);
2. Масштабируемость изображения без потерь в качестве;
3. Простой перевод в растровое изображение;
4. Сравнительно простое и более качественное редактирование;
5. Широкие возможности для нанесения на поверхности (печать, шелкография, гравировка, тиснение, фольгирование, вырубка и другие).
Минусы векторных изображений:
1. Сравнительно большой вес файлов маленького размера (например, иконки 32х32 px) и файлов со сложной графикой (например, фотореалистичные иллюстрации);
2. Сложность создания фотореалистичных иллюстраций;
3. Необходимость в специальном программном обеспечении для полномерного использования — большинство графических редакторов, просмотрщиков работают только с растровой графикой.
Распространённые векторные форматы это: SVG, PDF, EPS, AI и CDR. Последние два разработаны специально для программ Adobe Illustrator и CorelDRAW соответственно, и максимально верно поддерживаются именно ими. Оба эти формата могут читаться и редактироваться другим ПО, но с некоторыми ограничениями.
Наиболее распространённым форматом является SVG, его можно просматривать и редактировать в любом векторном редакторе, и он поддерживается всеми современными браузерами.
Обратите внимание! У каждой типографии и производителей сувенирной продукции свои технические требования, так что они могут требовать разные форматы файлов. Поэтому лично я подготавливаю для клиентов несколько форматов, чтобы для любого случая нашелся подходящий.
Характеристики растровых файлов — полная противоположность оных у векторных.
1. Сравнительно небольшой вес файлов маленького размера (например, иконки 32 на 32 пикселя) и файлов со сложной графикой (фотографии, фотореалистичные иллюстрации);
2. Относительная простота создания фотореалистичных изображений;
3. Отсутствие нужды в специальном программном обеспечении — все графические редакторы (в том числе и векторные), просмотрщики изображений и браузеры работают с растровыми файлами.
1. Сравнительно большой вес файлов (особенно для больших размеров);
2. Невозможность масштабирования без потерь в качестве изображения;
3. Сложный перевод в векторное изображение;
4. Сравнительно сложное редактирование;
5. Узкие возможности для нанесения на поверхности — возможна только печать.
В двух словах (очень общо и без тучи возможных нюансов) можно сказать, что для фотографий и фотоподобных изображений лучше использовать растровую графику, для всего остального — векторную. Последнюю всегда можно легко переконвертировать в растровый формат любого размера.
К слову, популярные форматы растровых изображений — это хорошо знакомые всем PNG, JPG, GIF, а также TIFF, PSD, BMP.
А теперь я расскажу вам один секрет!
На самом деле, мы не можем увидеть действительно векторное изображение на современных дисплеях.
Даже если открыть векторный редактор и нарисовать в нём векторный синий круг, изображение, которое мы увидим будет растровым! Всё дело в том, что все современные дисплеи состоят из пикселей, и если открыть файл с векторным изображением, компьютер (плеер, телефон или другое устройство) преобразует его в растровое. Иначе просто не получится.
Поэтому настоящие векторные изображение живут только в наших умах и сердцах!
Но как говорил мой французский тёзка: «Зорко одно лишь сердце. Самого главного глазами не увидишь.»
Почему логотип должен быть векторным
Несмотря на то, что, как я сказал, на современных дисплеях любое изображение будет представлено в растровом виде, логотипы и многую другую графику изначально стоит создавать в векторе.
Причины, по которым это необходимо, основываются на всех преимуществах векторных форматов.
Во-первых, это, конечно, вес файлов. Векторные файлы уступают растровым в этом параметре только при очень малых физических размерах или сложных фотореалистичных изображениях. Но в малых размерах и разница между весами будет минимальной, пусть даже и в пользу растровой графики. А фотоподобные логотипы встречаются крайне редко (лишь в исключительных случаях), и всё равно, начиная с определённого размера, вектор-таки начнёт выигрывать.
Разумеется, это не самое главное преимущество, но порой, например, в дизайне сайта (где необходима быстрая загрузка картинок) это может быть существенным.
Во-вторых, логотип в векторе — это безграничные возможности для масштабирования: любой векторный логотип можно напечатать хоть в километр шириной (был бы достаточно большой принтер ) и всё равно на печати не будет видно злополучных пикселей, которые так сильно портят впечатление от графики.
Типичный пример, когда для качественной печати изображения не хватило разрешения (векторный рисунок решил бы эту проблему). Думаю, вам частенько встречается подобное.
Но дело даже не в том, что вы можете сделать из векторного изображение очень большое растровое, а в том, что вы можете сделать изображения абсолютно любого размера! Скажем, для шапки сайта логотип нужен ровно 60 px в высоту, для фирменного бланка — 300 px в ширину, а для печати фирменных футболок — не менее 4000 px. И все эти размеры можно легко подготовить, используя всего один векторный файл.
В-третьих, относительно простое и более качественное редактирование. Это не значит, что векторный формат поощряет постоянные изменения логотипа. Но однажды вам может понадобиться анимированная или 3D-версия, какой-то особый праздничный вариант, или вы решите добавить в логотип слоган — и в этом случае работать с векторным файлом будет намного удобнее, а итоговый вариант будет качественнее.
В общем, я всё сказал! В следующий раз кратенько расскажу, как сделать логотип векторным, если у вас на руках есть только растр.
Надеюсь, кому-то было полезно!)
Принципиальные недостатки векторной графики
Различные булевы операции над фигурами как множествами точек (диаграммы Венна)
Векторные графические редакторы, типично, позволяют вращать, перемещать, отражать, растягивать, перекашивать, т. е. выполнять все аффинные преобразования над объектами, изменять порядок следования и комбинировать примитивы в составные объекты.
Также используются более изощрённые преобразования, например, булевы операции применённые к замкнутым фигурам как множествам точек, принадлежащих данным фигурам: объединение, дополнение, пересечение как показано на рисунке и т. д.
Форматы векторной графики
Наиболее распространенными векторными форматами являются:
Где используется векторная графика
Вектор применяется там, где требуется высокая четкость изображений при увеличении:
FAQ
Практически нельзя, если у вас на руках нет оригинала. Есть пара алгоритмов искусственного интеллекта, которые пытаются улучшить качество с помощью распознавания контекста, но до совершенства этим алгоритмам еще очень далеко.
В каких случаях может применяться и векторная, и растровая графика?
Растровая графика – более простой и понятный формат, поэтому начнем с нее. Любое растровое изображение построено на пикселях – маленьких светодиодах, светящихся в наших мониторах. Изображение – это просто набор пикселей, раскрашенных определенным образом. Разрешение изображения – это ширина и длина прямоугольной матрицы, в которой пиксели находятся, растровая картинка 500×500 содержит в себе 250 000 пикселей. Пример растрового изображения:
Пиксели при увеличении:
Растровый формат хорош тем, что позволяет отображать большое количество цветов и, что самое важное – нелинейные переходы между ними. В отличие от векторных форматов, растр позволяет сделать любые обводки, любые размытости и так далее.
Проблема растра – в том, что нужно хранить информацию о каждом пикселе, поэтому даже картинки размера 1 200 х 800 будут весить очень и очень много – если разместить их на странице сайта, страница будет грузиться вечность. Про широкоформатные фото с фотоаппарата и говорить не стоит.
У векторных форматов все устроено иначе: никаких пикселей, сплошные формулы. В таком графическом файле прописаны правила отображения изображения: вот отсюда и дотуда провести линию такой-то толщины, покрасить ее в красный, в 20% от левой границы изображения создать круг с таким-то диаметром, залить его зеленым, всю незанятую область залить синим. То есть вы буквально формулами реализуете компьютерную графику. Непосредственно формулы используются в легковесных веб-форматах, для более тяжелых и сложных изображений используются графические редакторы, которые позволяют вам работать с геометрическими фигурами и кривыми линиями:
Такой подход имеет свои плюсы и минусы.
Основной плюс – в весе итогового изображения.
Поскольку вам не нужно хранить огромный объем данных, как в растровых изображениях, даже сложные векторные рисунки грузятся на страницах практически моментально. Но если в растровом графическом редакторе вы можете создавать практически любое изображение, то в векторном вы ограничены допустимыми формулами и контурами – векторные рисунки обычно собираются из простых геометрических фигур. Работать с цветами в векторных редакторах тоже сложнее, поэтому цветовая гамма обычно подбирается так, чтобы использовалось минимальное количество цветов:
Типичные примитивные объекты
Кубическая кривая Безье, заданная координатами 4 опорных точек
Этот список примитивов неполон. Есть разные типы кривых (Catmull-Rom сплайны, NURBS и т. д.), которые используются в различных приложениях. Также возможно рассматривать растровое изображение как примитивный объект, описанные как прямоугольник со сложной текстурой.
Отличие векторной графики от растровой
Большинство картинок, которые мы видим в интернете, — растровые. Они состоят из множества точек (или квадратов) — пикселей. Это хорошо заметно, если максимально приблизить изображение. Чем больше точек, тем больше деталей различимо на картинке.
Основные параметры растровой графики — это разрешение и глубина цвета.
Именно эти данные вы увидите в описании любой картинки на вашем компьютере, если щелкнете по ней правой кнопкой мыши.
Если разрешение составляет 1080х1080, это значит, что и в ширину, и в длину картинка имеет 1080 пикселей. Глубина цвета отвечает за то, какое максимальное количество цветов может содержать изображение. Например, глубина цвета 24 бита предполагает максимум 16,8 млн оттенков.
Задача компьютера при отображении растровой графики — показать требуемое количество пикселей с нужным цветом. При увеличении растровой картинки заметно различие в оттенках пикселей:
Различие оттенков пикселей
Точки выбраны для представления изображений потому, что в прошлом именно так было дешевле и проще осуществлять печать, а при взгляде на расстоянии они сливались в единую композицию.
В векторной графике пикселей нет. Картинка здесь — это не сетка, а простые геометрические фигуры (круги, квадраты, многоугольники, линии), которые имеют координаты, радиус, цвет, прозрачность и др.
Координаты опорной точки на векторном изображении
Принцип работы векторной графики похож на то, как в школе чертят графики функций: проставляют точки в системе координат и затем соединяют их, получая кривую. Векторный объект представляет собой такой же график. Только его построил не человек, а компьютер. Человек редактирует фигуру через наглядный интерфейс.
В векторной графике компьютер запоминает не количество и цвета точек, а математические функции, определяющие, как идут линии на рисунке. Это позволяет увеличивать изображение, и оно останется идеально четким.
Векторная графика применяется там, где нужны небольшие схематичные изображения, идеальное применение – иконки для сайтов и приложений:
Второе применение – бэкграунд. С помощью векторной графики легко создаются градиенты и ненавязчивые фоновые элементы. Особенно часто это используется при производстве рекламы.
При этом нужно отметить, что векторная графика тоже может использоваться для рисования «серьезных» изображений, пример арта:
Способ хранения изображения
Математически векторная графика основана на аналитической геометрии. В векторной графике примитивы описываются совокупностью координат опорных точек, параметрами примитива, к которым относятся например, исходные координаты, коэффициенты масштабирования, повороты, коэффициенты растяжения по осям. К атрибутам относят цвет и тип цветовой заливки областей, толщину и цвет линий.
В анимированной векторной графике при отображении на устройстве вывода координаты, атрибуты и параметры могут динамически изменяться во времени по заданным функциям от времени, создавая движущееся изображение.
Рассмотрим, к примеру, описание такого графического примитива, как окружность радиуса r. Для её построения необходимо задание следующих исходных данных:
Координаты центра и радиус являются обязательными параметрами, остальные данные из описания окружности часто называют атрибутами и могут быть опущены. В этом случае при графическом выводе они заменяются атрибутами по умолчанию или текущими атрибутами.
Пример описания красного круга с координатами центра 79; 77, радиуса 20 с чёрным контуром толщиной 1 на языке XML (используемого в формате SVG, рекомендованном для применения в Википедии):
Применяется везде, где нужны насыщенные цвета и цветовые переходы. Это может быть:
Единственный недостаток – это вес итогового изображения. В процессе редактирования растровых изображений можно немного снизить детализацию, но большого эффекта это не даст. Проблему решают сжатием, популярный формат .jpg – это как раз набор алгоритмов, обеспечивающих сжатие изображения и уменьшение его итогового веса. Но у сжатия тоже есть свой минус – существенная потеря детализации. В результате сжатия изображение может стать зернистым и искаженным. В давние годы (когда алгоритмы сжатия были куда хуже, чем сейчас) в комьюнити дизайнеров даже была своя шкала сжатия изображений, выраженная в шакалах, откуда и пошло название «шакальное изображение»:
На Пикабу и Хабре «достойным членам сообщества», опубликовавшим фото плохого качества, даже давали медаль:
Все это – иллюстрация проблемы алгоритмов сжатия, и проблема актуальна до сих пор – вы либо получаете хорошее и тяжелое изображение, либо получаете легкое изображение с искажениями.
Программы для работы с векторной графикой
Популярными и авторитетными являются следующие.
Также использовать векторную графику можно во многих приложениях, например Adobe InDesign, Affinity Designer, Flash Player, Adobe After Effects и др.
Некоторые программы для digital-рисования позволяют создавать векторные рисунки и даже комбинировать векторные и растровые слои на одной иллюстрации. Например, такая возможность есть в Paint Tool SAI 2. Художники часто используют ее, чтобы создавать ровные и четкие контуры или однородные заливки.
Зачем нужна векторизация изображений
Одной из основных целей векторизации растровой графики является улучшение качества изображения. При преобразовании пиксельной картинки в векторную полученное изображение будет иметь более плавные линии и четкие контуры. Вектор не зависит от разрешения, то есть его можно будет увеличивать или уменьшать без потери качества. Это может быть особенно полезно для логотипов и других графических элементов, которые необходимо воспроизводить в разных размерах. Например, печатать и на визитках, и на сумках, и на постерах, и на билбордах.
Пример векторизации растрового (пиксельного) логотипа, качество которого было низким. Источник
Векторизация растровой графики также помогает адаптировать изображения для печати. Обычно типографии просят клиентов предоставлять оригинал-макеты с расширениями .eps, .cdr, .ai, .psd, .tiff или .pdf. Первые три из них являются векторными. Файлы в растровых форматах jpg, gif и png для широкоформатной печати вовсе не принимаются, так как их нельзя растянуть без потери качества и четкости. Векторные изображения не зависят от разрешения.
Пример дизайна упаковки с помощью векторных иллюстраций. Источник
Пример коллекции векторных иконок. Источник
Наконец, векторизация растровой графики может использоваться для создания художественных эффектов. Для векторной графики характерны «плоские» цвета и минимум плавных переходов. Поэтому с помощью нее можно создавать графичные, мозаичные портреты, пейзажи, рекламу в стилистике поп-арт и другие необычные дизайны.
Примеры художественного использования векторной графики. Получившиеся портреты не отличаются высокой реалистичностью, но в целом узнаваемы и имеют интересный эффект плоского мультипликационного кадра. Автор — Alden Ansley Cua. Источник
Преимущества векторной графики
Рассказывая о том, какие задачи решает векторизация, мы, конечно, не можем не коснуться принципиальных различий векторной и растровой графики. Они отличаются не просто качеством, расширениями файлов или областями использования. Различия лежат глубоко — в самом принципе создания и структуре изображений. Сейчас поясним подробнее.
Растровое изображение — это картинка, состоящая из сетки пикселей. Каждый пиксель — это маленький квадратик, которому присвоено определенное значение цвета, что в совокупности формирует общее изображение. Разрешение растрового изображения определяется количеством пикселей в сетке, которое обычно задается как ширина, помноженная на высоту (например, 800 x 600 пикселей). У растровой картинки также есть такой параметр, как глубина цвета. Это количество битов, используемых для представления каждого пикселя, что определяет количество возможных цветов в изображении. Большая глубина цвета означает большее количество возможных цветов и большую точность цветопередачи, но также означает больший размер файла.
Пиксели при сильном увеличении растрового изображения
Векторное изображение — это картинка, состоящая не из пикселей, а из геометрических фигур, которые нарисованы с помощью математических уравнений. Это похоже на то, как в школе мы рисовали графики функций, получая плавные «горки» на оси координат. В векторной графике нет сетки пикселей, поэтому у нее нет и разрешения. То есть ее можно масштабировать до любого размера без потери качества. Одни из основных параметров векторного изображения — это размер, цвета заливки и обводки. Размеры обычно задаются в таких единицах, как дюймы или миллиметры, а цвета заливки и обводки могут быть определены с использованием широкого спектра цветовых моделей, включая RGB, CMYK и Pantone. Кроме того, векторные изображения могут включать градиенты, узоры, шум и другие визуальные элементы.
Если перевести ту же картинку в вектор и масштабировать, вы никогда не увидите пиксели
Таким образом, переводя растр в вектор, вы меняете не только четкость или цвета картинки. Вы полностью изменяете внутреннюю структуру, принцип отрисовки и свойства изображения.