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

Отличия растровых и векторных изображенийВ этом материале мы рассмотрим основные отличия растровых и векторных изображений. Узнаем все преимущества векторной и растровой графики, а также где такую графику лучше использовать для своих целей. Итак, вы, наверное, не раз задавали себе такой вопрос: «Из чего же состоит картинка, которая отображается на экране моего компьютера?» Может быть, вы удивитесь, но на самом деле фото как такового не существует! 

Что такое растровое изображение?

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

Для этого можно просто взять фото и увеличить его. Вы заметите, что появились специальные квадратики (рисунок ниже). Изображение стало разбиваться на квадраты разного цвета. Вот эти квадратики и есть пиксели.

Пиксили в растровом изображении

Таким вот оказывается любое растровое изображение, полученное с фотокамеры, с камеры мобильного телефона или скачанное с Интернета. Каждый пиксель, как я говорил, описан определенной последовательностью цифр и символов. Как узнать, что это за последовательность? Да очень просто! Выбираете инструмент «Пипетка» (в любом графическом редакторе он есть) и наводите на нужный пиксель. Если проверяете в фотошопе, то вам дополнительно нужно будет зайти в палитру цветов.

Как узнать код или последовательность цифр цвета

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

Итак, что следует из того, что мы с вами рассмотрели выше. Если пиксели представлены в виде последовательности чисел и букв, то их можно без труда изменять. Изменяя числа и буквы каждого пикселя, мы можем изменять его цвет, то есть редактировать сам пиксель. При выполнении какой-либо глобальной операции коррекции (например, регулируем яркость) изменяется числовое значение нескольких тысяч пикселей изображения.

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

Теперь давайте познакомимся с понятием векторного изображения. Чтобы продемонстрировать наглядный пример, в Adobe Photoshop я попробую создать новый документ. Перейдем в меню «Файл» —> «Создать«. Давайте выберем инструмент, с помощью которого можно будет создавать векторную графику. К примеру, я возьму инструмент «Перо» (2). Обязательно нужно, чтобы стояла настройка «Слой-фигура» (3). После этого я расставляю точки в нужных местах (4). В результате получается определенная фигура. Вы ее можете сделать по своему усмотрению.

Что такое векторное изображениеПосле того, как мы соединили все точки, образуется фигура и к слою прикрепляется миниатюрная векторная маска (5)Это свидетельствует о том, что это векторная фигура, а не растровая. Ее можно увеличивать и уменьшать много раз и при этом качество никак не пострадает. Естественно к данному слою можно применять различные эффекты свечения, обводки и так далее.

В чем отличия векторного изображения

В чем отличия растровой и векторной графики?

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

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

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

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

Векторные изображения хорошо использовать там, где требуется большое увеличение картинки без потери качества. Например, в веб-дизайне это могут быть различные визитки, логотипы, баннеры на сайте и много другое. Программа Adobe Photoshop хоть и позволяет работать с векторными картинками, но все же она является растровым редактором. Для работы с векторными изображениями гораздо лучше подходят программы CorelDraw или Adobe Illustrator.

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

Zavitushka-dlya-sayta

 
rss-1Следить за новыми статьями на этом блоге!

 

Комментарии 22

  • да, конечно векторные изображения смотрятся симпатичнее, но я работаю в GIMP, то есть с растровыми, для моих работ этого достаточно

    • Татьяна, векторные хорошо смотрятся только при увеличении. А если в оригинальном размере, то конечно лучше растровые изображения.

  • А мне всё равно, я с оедакторами не с одним не дружу, а графику тырю, причем без зазрения совести, а что, мне можно, я умею уникализировать даже стыренные фотки )))

    • :) Сергей, а как это без графического редактора фотографию можно сделать уникальной? В обработке картинок без редактора ну ни как не обойтись. Где-то нужно подрезать, где-то вставить и так далее.

  • Я поняла разницу, но не смогла понять, почему векторные не теряют качества. Они при увеличении что делают? Добавляют к себе что-то? Как они держат качество? и почему маленькие не смотрятся?

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

  • как-то проф. семинар у нас проводился, ну и было задание сделать буклеты к этому событию… типография поставила условием векторную графику… помню ,как матерился наш маэстро Фотошопа, переводя уже готовые растровые работы в вектор… а там были и герб города и не менее сложная фанаберия..
    в растре всет аки попроще «) как мне кажется …а может быть и нет — кто на что учился «)

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

  • Фотошоп вообще очень полезная программа. У меня на ноутбуке стоит 2 программы. Пользуюсь и той и той. Просто фотошоп очень тяжело освоить. Это для профи.

    • Ну не обязательно для профи. Для новичков тоже подойдет. Просто с первого взгляда из-за большого числа функций, Photoshop становится страшной программой. Некоторые люди его даже боятся устанавливать к себе на компьютер. :) Но на самом деле ничего страшного здесь нету. Главное, разобраться в нужных командах и свойствах программы.

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

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

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

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

  • Очень познавательно и интересно. Наверное я еще долго буду оставаться новичком. Эти понятия для меня совершенно новые. А освоить бы было хорошо. Есть вещи которые хочется уметь делать самому.
    Спасибо за полезную информацию.

  • Я далека от этого, и о векторной графике узнала только сейчас. Когда училась в Полиграфическом институте (давно) изображения были только растровыми).

  • О, на какую тему интересную набрела. Сейчас, по крайней мере, понятно, о чем речь идет, и перевести из векторного в растровое тоже могу. А, помню, когда сайт создавался, отправила разработчику шапку. Шапка и шапка. Картинка и картинка. А он мне ее назад отфутболил — несолидно, дескать, вектор в шапку вешать. :-) На самом деле, разобраться с фотошопом оказалось не очень сложно. Правильно все говорят. Поначалу страх мешает. Наверное, первый шаг, которому нужно учить новичков, это тот, что отменяет действия.

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

  • Спасибо за полезную информацию! Скажите, пожалуйста, а графики для последующей печати на принтере лучше вставлять в Word растровыми изображениями или же векторными? Пишу сейчас дипломную работу, но не знаю, как идеологически правильно. В векторном виде они, конечно, выглядят намного лучше. :-)

    • Да, Дарья. Если идут графики и схемы, то лучше делать их в виде векторных изображений. А для красочных фотографий (например, пейзажи) лучше подойдет растровый вариант. :-)

А что вы думаете по этому поводу?

Ваш e-mail не будет опубликован. Обязательные поля помечены *