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

Существует четыре типа компьютерной графики:

1. Растровая графика. Состоит из пикселей — мелких цветных квадратов, которые вместе формируют картинку: фотографии, скриншоты, рисунки, сделанные в Photoshop или Procreate.
2. Векторная графика. Построена из линий, точек и фигур, описанных математическими формулами. Сюда относятся логотипы, иконки, иллюстрации, созданные в Figma, Adobe Illustrator или CorelDRAW.
3. Фрактальная графика. Менее распространённый тип графики, базируется на математических формулах, которые создают повторяющиеся узоры. Примеры: калейдоскоп, папоротник или снежинка.
4. 3D-графика. Создаётся в трёхмерном пространстве и содержит объём, глубину и текстуры. Используется в играх, анимации, архитектуре, дизайне продуктов.

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

К ключевым характеристикам векторной графики можно отнести следующее:

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

Рассмотрим сферы, где используется растровая графика.

• Фотография. Все цифровые фотоснимки — это растр. Камеры, в том числе встроенные в смартфоны, сохраняют их в JPEG, PNG или RAW.
• Цифровая живопись и рисунок. Иллюстраторы создают растровые изображения в Procreate или Photoshop.
• Веб-дизайн и интерфейсы. Картинки, баннеры, фоны чаще всего хранятся в интерфейсах в формате JPEG или PNG. Также растровая графика используется в качестве элементов UI с текстурами или эффектами.
• Полиграфия. Плакаты, журналы, буклеты содержат растровые изображения, например фото или фоны. В полиграфии часто применяются форматы TIFF и JPEG с высоким разрешением.
• Игры. Растр подходит для фонов и текстур объектов, особенно в 2D-играх и пиксель-арте.
• Видео и кино. По сути, кадры видео — это последовательность растровых изображений. Они также применяются в композитинге и монтаже.
• Образование и наука. Фото с микроскопов, аэрофотосъёмка, рентгеновские снимки — всё это растр. Также он встречается в качестве иллюстраций в учебниках и при визуализации данных (например, тепловые карты или сканы).

Разберём основные сферы, где применяется векторная графика.

• Фирменный стиль. Логотипы создаются в векторе, который можно масштабировать для визитки и баннера, не теряя качество. Также он используется в брендинге, маркетинге и рекламе.
• UI/UX. Векторные иконки и кнопки широко применяются в приложениях и на сайтах. При этом SVG является стандартом в веб-дизайне: легко масштабируется, быстро загружается, поддерживается CSS-анимацией.
• Иллюстрации и инфографика. Чёткие, чистые линии и формы делают вектор подходящим вариантом для технических и научных картинок, инфографики, диаграмм. Также часто используется в презентациях, отчётах, образовательных материалах.
• Полиграфия и печать. Вектор используют в макетах визиток, листовок, упаковки, поскольку он сохраняет качество при высоком разрешении.
• Шелкография, вышивка, сувенирная продукция. Векторная графика применяется для создания макетов, которые будут напечатаны на футболках, кружках или бейджах. Вектор легко адаптировать под плоттерную резку и другие технологии.
• Чертежи, схемы, карты. Вектор применяется в CAD-системах, например в AutoCAD, для создания архитектурных и инженерных проектов. Также полезен в создании карт, планов помещений, маршрутных схем.
• Мультфильмы. В 2D-анимации персонажи и сцены часто создаются как векторные объекты.
• Игровая графика (2D). Иконки, интерфейс, объекты и фоны для казуальных и мобильных игр бывают в векторе. Этот вариант выбирают, потому что вектор удобно использовать для адаптации под разные разрешения экрана.