Примеры программ векторной графики и растровой графики

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

Растровая графика

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

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

Возможности Adobe Illustrator. Отличия между векторной и растровой графикой

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

Форматы растровой графики

BMP, GIF, JPG и JPEG, PNG, PICT, PCX, TIFF, PSD (с некоторыми исключениями см. ниже)

Редакторы растровой графики

Их достаточно много, но основные это Photoshop и Paint brush (программа по умолчанию установленная на Windows), так же специализированные редакторы растровой графики для цифрового рисунка (например Сorel Painter).

Недостатки и ограничения растровой графики

Самым главным недостатком растровой графики является потеря качества при увеличении изображения. Что происходит когда вы растягиваете растровые изображение: между существующими пикселями графический редактор растровой графики создает дополнительные, а цвет применяет средний с сопряженными пикселями. В итоге мы получаем “размытое”, не четкое изображение. Кроме того файлы с растровой графикой имеют больший размер по сравнению с файлами векторной графики.
Если говорить о фотографиях или изображениях в которых надо передать фотографическое качество с полутонами — альтернативы раствором формату нет.

Векторная графика

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

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

001 | Урок: Векторная и растровая графика. Особенности, свойства, отличия.

Форматы векторной графики

CDR, EPS, Ai, CMX, SVG, PSD (в некоторых случаях)

Редакторы векторной графики

Самые распространенные редакторы векторной графики это CorelDraw и Illustrator. Но есть еще одно важное исключение, которое появилось всего несколько лет назад. В Photoshop (исконно растровый редактор), есть теперь возможность использовать вектор. Поэтому Photoshop можно одновременно отнести и к редакторам растровой графики и к редактору векторной графики. Об этом рекомендую почитать отдельный пост вектор в фотошопе, где я подробно рассказываю о векторных инструментах.

Недостатки и ограничения векторной графики

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

Преимущества векторного формата

Любое изображение в векторном формате можно легко масштабировать как в меньшую так и в большую сторону без потери качества. Что происходит при масштабирование векторного изображения: т.к. векторное изображение представляет собой математическое выражение, при увеличении или уменьшении программа пересчитывает координаты опорных точек и “перерисовывает” изображение по новой. Поэтому именно векторный формат обычно используется дизайнерами при разработке логотипа. Векторный логотип заказчик всегда сможет изменить в размене без потери в качестве (хоть увеличить до состояния баннера и обернуть свой офис 10 раз). Не маловажным преимуществом векторного формата так же является возможность быстрой коррекции цвета всего за пару кликов (т.к. цвет так же задается цифровым значением) и совсем небольшой размер файлов (математическая формула описывает только опорные точки, а не каждый пиксель рабочего пространства).

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

Источник: site2max.ru

Растровая и векторная графика

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

Растровая и векторная графика – что за понятия
Растровая графика
Векторная графика
Подведем итоги

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

Растровая графика – более простой и понятный формат, поэтому начнем с нее. Любое растровое изображение построено на пикселях – маленьких светодиодах, светящихся в наших мониторах. Изображение – это просто набор пикселей, раскрашенных определенным образом. Разрешение изображения – это ширина и длина прямоугольной матрицы, в которой пиксели находятся, растровая картинка 500×500 содержит в себе 250 000 пикселей. Пример растрового изображения:

Пиксели при увеличении:

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

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

У векторных форматов все устроено иначе: никаких пикселей, сплошные формулы. В таком графическом файле прописаны правила отображения изображения: вот отсюда и дотуда провести линию такой-то толщины, покрасить ее в красный, в 20% от левой границы изображения создать круг с таким-то диаметром, залить его зеленым, всю незанятую область залить синим. То есть вы буквально формулами реализуете компьютерную графику. Непосредственно формулы используются в легковесных веб-форматах, для более тяжелых и сложных изображений используются графические редакторы, которые позволяют вам работать с геометрическими фигурами и кривыми линиями:

Такой подход имеет свои плюсы и минусы.

Основной плюс – в весе итогового изображения.

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

Растровая графика

Применение

Применяется везде, где нужны насыщенные цвета и цветовые переходы. Это может быть:

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

Преимущества

• легко создать;
• легко редактировать;
• подходит для создания детальных и реалистичных изображений.

Недостатки

Единственный недостаток – это вес итогового изображения. В процессе редактирования растровых изображений можно немного снизить детализацию, но большого эффекта это не даст. Проблему решают сжатием, популярный формат .jpg – это как раз набор алгоритмов, обеспечивающих сжатие изображения и уменьшение его итогового веса. Но у сжатия тоже есть свой минус – существенная потеря детализации. В результате сжатия изображение может стать зернистым и искаженным. В давние годы (когда алгоритмы сжатия были куда хуже, чем сейчас) в комьюнити дизайнеров даже была своя шкала сжатия изображений, выраженная в шакалах, откуда и пошло название «шакальное изображение»:

На Пикабу и Хабре «достойным членам сообщества», опубликовавшим фото плохого качества, даже давали медаль:

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

Векторная графика

Применение

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

Второе применение – бэкграунд. С помощью векторной графики легко создаются градиенты и ненавязчивые фоновые элементы. Особенно часто это используется при производстве рекламы.

При этом нужно отметить, что векторная графика тоже может использоваться для рисования «серьезных» изображений, пример арта:

Преимущества

• Маленький вес изображения.
• Легко работать с геометрическими фигурами и градиентами.

Недостатки

• Ограничения при работе с цветами.
• Сложно работать со всем, кроме геометрических фигур и градиентов.

FAQ

Можно ли восстановить качество плохого растрового изображения?

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

В каких случаях может применяться и векторная, и растровая графика?

В каких-либо комплексных изображениях. Как пример – реклама. Если вам нужно напечатать визитки, вы можете сначала воспользоваться преимуществом векторных изображений и создать фон/структуру/градиенты, после чего уже с помощью растрового редактора добавлять более сложные детали и текст.

Подведем итоги

Тезисно:

• Растровая графика – это когда изображение состоит из пикселей; векторная графика – это когда изображение состоит из линий/цветов/фигур, описанных формулами.
• Растровая графика используется там, где нужна детализация и разнообразие цветов. Недостаток растровых изображений – большой вес (либо низкая детализация) итогового изображения.
• Векторная графика используется там, где нужен низкий вес изображений. Основные недостатки – сложность работы и ограничения по формам/цветам.
• У обоих видов графики – свои сферы применения, иногда нужно скомбинировать оба вида, чтобы получить нужный результат.

Источник: www.sravni.ru

Растровые и векторные изображения

Для начала, нужно знать, что существует два типа 2D графики — растровая и векторная. Очень важно понимать разницу между этими типами изображений.

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

Давайте начнем с более распространенного типа графики – с растровых изображений.

Понятие растрового изображения

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

У каждого пикселя есть свое место на рисунке и свой собственный цвет.

Каждое изображение имеет фиксированное количество пикселов. Их вы можете видеть на экране монитора, большинство из которых отображают примерно от 70 до 100 пикселей на 1 дюйм (2,54 см) фактическое количество зависит от вашего монитора и настройки самого экрана.

Размер изображения и его разрешение

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

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

Разрешение каждого изображения подбирается в зависимости от того, где вы планируете его использовать:

• Для размещения в интернете достаточно 72 ppi, поскольку они быстрее загружаются. НО при растягивании картинки с вконтакте размером 5х5см на футболку во всю грудь мы получим все прелести сжатия изображения. Детали пропадут и появятся артефакты.

Так выглядит фото с интернета после нескольких пересохранений:

• Так, для того чтобы напечатать изображение в хорошем качестве, разрешение должно быть не ниже 300 ppi. Это основное требование для цифровой печати. Предоставлять изображение свыше 600 ppi как правило нет смысла, так как разницы при печати не будет видно.

Так выглядит картинка пригодная для полноцветной печати:

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

Форматы растровых изображений

К самым распространенным форматам растровых изображений относятся:

Файлы форматов PNG, TIFF, PSD поддерживают прозрачность фона. При этом не стоит забывать , что прозрачный фон не будет таковым, если изображение пересохранить в формат не поддерживающий прозрачность, например PNG в JPEG.

Самые популярные программы для работы с растровой графикой это Adobe Photoshop, Gimp, Corel Photo-Paint, Corel Paint Shop Pro.

Что такое векторные изображения

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

Изображение цветка в векторном формате. Увеличить его можно до любого размера

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

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

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

Векторные изображения, как правило, создаются с помощью специальных программ. Вы не можете отсканировать изображение и сохранить его в виде векторного файла без использования преобразования (трассировки) в программах вроде Adobe Illustrator или Corel Draw.

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

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

Векторные форматы

К самым распространенным форматам вектора относятся:

• AI (Adobe Illustrator);
• CDR (CorelDRAW);
• CMX (Corel валютный);
• SVG (масштабируемая векторная графика);
• PDF (Portable Document Format).

Самые популярные программы для работы с векторами: Adobe Illustrator, CorelDRAW и Inkscape.

Так чем же отличаются векторные и растровые изображения?

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

Подробное сравнение растровых и векторных изображений:

РАСТР

1. Высокая реалистичность изображения.
2. Все фотографии растровые.
3. Для создания не обязательно использовать профессиональные программы.
4. Для хорошего качества печати нужно высокое разрешение.
5. Некоторые растровые картинки возможно векторизовать с потерей качества.
6. Возможности редактирования ограничены по сравнению с вектором.
7. Чтобы убрать фон с картинки нужно редактирование в графических программах.
8. Файлы весят много.

ВЕКТОР

1. Тяжело добиться фотореалистичности.
2. Стандарт для логотипов.
3. Для создания изображение нужны специальные дизайнерские программы.
4. Наилучшее качество при печати.
5. Векторные картинки можно растрировать без потери качества.
6. Легко редактировать, в сравнении с растровыми файлами.
7. Для прозрачности достаточно экспортировать в формате поддерживающем прозрачность (PNG, TIFF, PSD).
8. Малый вес файлов.

Источник: 4kraski.ru