Растровая или векторная графика: в чём разница

Коротко: растровая состоит из пикселей и размывается при увеличении — это фото и иллюстрации. Векторная строится формулами и остаётся чёткой в любом размере — это логотипы, иконки, печать.

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

Когда нужен растр (Photoshop)

Растровая графика — это фотографии, цифровое рисование, ретушь, коллаж, реалистичные текстуры. Всё, где важна работа со светом, тенями и плавными переходами цвета. Цветовые модели RGB (для экрана) и CMYK (для печати) — это тоже растровая история: первое занятие курса графики как раз объясняет эту разницу, потому что цвет на экране и цвет на напечатанной странице — это физически разные вещи.

Когда нужен вектор (Illustrator)

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

Почему ребёнку стоит учить оба инструмента, а не один

Реальные дизайн-проекты редко обходятся одним типом графики. Брендбук сочетает векторный логотип и растровые фотографии в макетах. Мобильная игра — это векторные кнопки и меню поверх растрового фона. Курс «Графика и анимация» именно поэтому строится последовательно: сначала Photoshop (растр), потом Illustrator (вектор), а финальные проекты требуют умения сочетать оба.

Как понять разницу на практике, а не в теории

Самый простой способ — попробовать увеличить изображение в обоих форматах. Фото, увеличенное в десять раз, распадается на квадратики-пиксели. Векторный логотип, увеличенный так же, остаётся чётким. Именно с этого наглядного примера обычно и начинается объяснение на первом занятии.

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

С чего лучше начать ребёнку — с растра или с вектора?

С растра. Photoshop интуитивнее воспринимается на старте — рисование, фотографии, эффекты дают быстрый видимый результат. Вектор с кривыми Безье требует чуть больше точности руки и терпения, поэтому логичнее идёт вторым этапом.

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

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

Какой формат файла для чего используют?

Растровые форматы — JPEG, PNG, GIF, для фотографий и изображений с экрана. Векторные — SVG и форматы Illustrator, для логотипов и печатных макетов, где важна чёткость в любом размере.

Подробнее о самом курсе — Как создать портфолио дизайнера на Behance, Dribbble и Pinterest, а о выборе направления в дизайне в целом — Какое направление дизайна выбрать: советы для начинающих.

Как выбрать формат по назначению

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

• Логотип, иконка, знак. Только вектор. Его придётся печатать и на визитке, и на вывеске, а между ними разница в сотни раз.
• Фотография, коллаж, ретушь. Растр, другого варианта нет.
• Афиша, флаер, что угодно для типографии. Обычно оба: текст и фигуры в векторе, фотографии в растре.
• Картинка для сайта или соцсети. Растр нужного размера — но иконки и простые элементы лучше оставить векторными.

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

Как это выглядит в школьных задачах

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

Ребёнок, который понимает разницу, делает иначе: для печати ищет вектор или крупную картинку, для презентации берёт обычную, а собственную эмблему рисует в векторе сразу. Эти три решения экономят больше времени, чем любые горячие клавиши.

Что такое разрешение простыми словами

Слово, которое пугает взрослых не меньше детей, а на деле означает плотность пикселей. Картинка в 72 точки на дюйм идеально выглядит на экране и рассыпается на бумаге; 300 точек — норма для печати, но такой файл весит в разы больше.

Практический вывод для ребёнка простой: размер и назначение выбираются до начала работы, а не после. Увеличить готовую растровую картинку без потери качества невозможно — именно поэтому афишу, сделанную «на глаз», типография возвращает.

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

Форматы файлов: минимум, который надо знать

Детям этот список кажется скучным ровно до первой испорченной работы.

JPG — фотографии для экрана. Сжимает с потерями, поэтому каждое пересохранение портит картинку чуть больше.

PNG — то, где нужна прозрачность: логотип на цветном фоне, иконка, элемент интерфейса.

SVG — вектор для веба: масштабируется без потерь и весит копейки.

PDF — то, что идёт в печать.

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

Упражнение, которое объясняет разницу за пять минут

Объяснять пиксели словами бессмысленно — ребёнок кивнёт и не поймёт. Работает одно простое сравнение.

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

После этого вопрос «а почему логотип нельзя нарисовать в Photoshop» закрывается навсегда. Ребёнок видит разницу сам, а не принимает её на веру.

Почему в дизайне почти всегда нужны оба

В реальной работе они не конкурируют, а живут рядом. Логотип рисуют в векторе, потом кладут на фотографию в растре. Афиша собирается из векторного текста и растрового фона. Иконки в интерфейсе — вектор, а картинки в том же интерфейсе — растр.

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

Как это разложено по месяцам на курсе — «Курс графики и анимации: чему научится за 18 месяцев». А какое направление дизайна выбрать дальше — отдельная статья.

Оба инструмента преподаются последовательно на курсе «Графика и анимация».