Отличия растровой и векторной графики. Использование растровой графики для хранения фотографий. Форматы PNG и JPEG. Конвертация с целью снижения объёма изображения.

Отличия растровой и векторной графики. Использование растровой графики для хранения фотографий. Форматы PNG и JPEG. Конвертация с целью снижения объёма изображения.

11/12/23

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

Задание 1: Сравнительная таблица

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

1. Определение графики

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

2. Достоинства

3. Недостатки

4. Редакторы

5. Форматы

6. Для чего применяют

С древних времен люди передавали свое восприятие мира в виде рисунка

Рисунок первобытного художника, Испания

Сцены жизни фараона, древнеегипетская настенная роспись

Компьютерная графика

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

Векторная

Линия - это элементарный объект векторной графики

CorelDraw,

Растровая

Adobe Illustrator

Основной элемент – точка (пиксел)

Трехмерная

Основной элемент — геометрическая проекция объекта на плоскость

3D Studio MAX

Adobe Photoshop, Gimp

Maya 

Виды компьютерной графики

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

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

Достоинства растровой графики

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

Высокая скорость обработки сложных изображений, если не нужно масштабирование

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

Чувствительны к уменьшению и увеличению –

изменению размера.

Имеют большой информационный объем

Paint

Adobe Photoshop

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

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

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

Достоинства векторной графики

Не чувствителен к изменению размера

Малый информационный объем при сколько угодно большом объекте

Возможность редактирования каждого элемента изображения в отдельности.

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

Не каждый объект может быть легко изображен в векторном виде

Перевод векторной графики в растр достаточно прост. Но обратного пути, как правило, нет

Corel DRAW

Adobe Illustrator

Векторные графические редакторы

Отличие растровой и векторной графики

Графические редакторы

Растровые

Векторные

Содержат описания графических примитивов

Хранят информацию о цвете каждого пикселя

Графические редакторы

Растровые

Векторные

Графические редакторы

Растровые

Векторные

Графические редакторы

Растровые

Векторные

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

Векторное изображение

P 2

P 3

P 1

P 2

R

R

G

G

0

1

B

B

1

1

1

1

1

1

0

0

1

1

0

1

0

1

0

1

1

0

0

0

0

1

0

0

1

1

0

1

1

1

1

0

0

1

1

1

1

1

1

0

1

0

0

1

0

0

X

Y

0

1

1

1

1

0

1

1

0

0

1

1

0

1

0

1

Векторное изображени е

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

Совокупность пикселей. Геометрия растра задается при определении. Цвет пикселей – изменяемый атрибут.

Изображаемые объекты заданы математической функцией. 

• изменение размера изображения не влияет на качество
• геометрические размеры изображения не влияют на размер файла

• изменение размера изображения приводит к потере качества
• геометрические размеры изображения определяют размер файла

Цветовые схемы

модели

• RGB – для компьютерной обработки и воспроизведения на экране,
• CMYK – для подготовки печатных изображений,
• HSB- при создании изображений инструментами графического редактора

Цветовая модель RGB

Аддитивная модель – цвет образуется путем смешения трех основных цветов.

Red

Green

Комментарий

Слайд содержит интерактивные элементы

Blue

24

Палитра цветов RGB и ее особенности

Как формируется изображение?

Формируется путем сложения

базовых цветов

Какие цвета являются в ней основными?

Базовые цвета – красный,

зеленый, синий.

Таблица цветов RGB

Красный

Зеленый

0

Синий

0

255

Цвет

0

0

0

0

Черный

0

255

0

0

0

Красный

Зеленый

255

255

255

Синий

255

255

255

Голубой

255

0

0

255

Желтый

255

Пурпурный

255

Белый

Палитра цветов CMYK и ее особенности

Как формируется изображение?

Формируется путем наложения

базовых цветов

Какие цвета являются в ней основными?

Базовые цвета – голубой,

пурпурный, желтый и черный.

Таблица цветов С M Y K

Голубой

(нет красного)

Пурпурный

0

(нет зеленого)

Желтый

0

0

0

(нет синего)

Цвет

0

0

255

255

Белый

255

Желтый

0

0

0

255

Пурпурный

0

255

255

Голубой

0

255

Красный

255

255

255

Зеленый

0

255

Синий

255

Черный

Отличие в воспроизведении цветов в моделях R G B и С M Y K

Палитра цветов HSB и ее особенности

Как формируется изображение?

Формируется путем установления

значения базовых параметров

Какие цвета являются в ней основными?

Базовые параметры – оттенок цвета,

насыщенность, яркость.

Цветовая модель HSB

Цветовой оттенок (Hue) один из цветов спектра.

Цветовой оттенок – величина угла на круге.

120° зеленый

60° желтый

180°

0°

голубой

красный

300° пурпурный

240° синий

Тон

Насыщенность

Яркость

Цветовая модель HSB

Цветовой оттенок (Hue) один из цветов спектра.

Цветовой оттенок – величина угла на круге.

Насыщенность цвета (Saturation) – степень разбавления его белым цветом.

Яркость цвета (Brightness) – зависит от добавления к нему чёрного цвета – чем больше чёрного цвета, тем меньше яркость.

147 °

Цветовая модель HSB

Пространство цветов модели HSB может быть представлено в

форме вложенных концентрических конусов с общей вершиной и

общей осью симметрии

95%

79%

Hue

Saturation

0

Brightness

1

1

0

1

0

0

0

0

1

1

1

1

0

1

1

1

0

1

1

1

1

1

Форматы

Форматы графических файлов

Растровые форматы

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

bmp

tiff

gif

png

jpeg

pxc

svg

cmx

gxl

wmf

swf

Конвертация с целью снижения объёма изображения.

Особенности форматов

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

• JPEG хорошо передаёт палитру цветов, градиенты, плавные переходы, но не поддерживает прозрачность и анимации. Плохо передаёт чёткие тонкие линии. Применяется для сжатия фотографий.

• GIF сжимает изображение без потери качества, но ограничен 256 цветами. Достаточно тяжёлый и для сайтов используется редко, в основном для создания анимаций.

• PNG поддерживает полноцветные изображения, прозрачность и даже анимации (APNG), хорошо отображает как плавные переходы, так и чёткие линии. Применяется для сжатия рисунков и скриншотов.

• WebP разработан с целью заменить все предыдущие форматы. Поддерживает полноцветные изображения, прозрачность, анимации. Справляется с градиентами и графикой. Использование нового алгоритма сжатия позволяет уменьшить вес файла примерно на 30%.

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

• JPEG дал более приемлемый результат, но надо признать, что изображение при сильном сжатии таки «поплыло».

• WebP показал себя лучшим как по размеру, так и по качеству. Достаточно плавные переходы, чёткие линии, разборчивые буквы на порядок выше конкурентов.

Онлайн-конвертер

• Для конвертации форматов JPEG и PNG в WebP рекомендую бесплатный онлайн-сервис Ezgif.com. В нём есть предварительный просмотр, что позволяет для каждого изображения подобрать свои параметры оптимизации (сжатия), добиваясь наилучшего результата.

В зависимости от картинки удаётся выиграть 20-50% от исходного варианта

Онлайн-конвертер

• Compressor.io
• iLoveIMG.com

Как сжать изображение программами для работы с изображениями

• XnResize

Актуальную версию программы XnResize можно бесплатно скачать с официального сайта.

• Caesium

Инструкция, как сжать JPG с помощью Caesium:

Задание 2: Соедините понятие с его определением

Минимальный участок изображения, для которого можно задать цвет

Разрешение экрана

В качестве базовых параметров используют оттенок, насыщенность и яркость

Растр

Система RGB

Прямоугольная сетка пикселей на экране

Система CMYK

Палитра цветов формируется путем сложения базовых цветов

Пиксель

Данная система используется только для печати

Система HSB

Произведение количества строк на количество точек в строке

СПАСИБО ЗА ВНИМАНИЕ

Домашнее задание

1 группа - векторы

1) Нарисовать рисунок в векторном редакторе

2 группа - растры

1) Нарисовать рисунок в растровом редакторе

2) Сохранить рисунок в 3 форматах для вида рисунка.

2) Сохранить рисунок в 3 форматах для вида рисунка.

Каждый рисунок подписать под своим именем.

• Где применяется растровая и векторная графика?
• Как формируются растровое и векторное изображение?
• Какие изменения происходит с изображениями при масштабировании?

Практическая работа

• 1 подгруппа вектор

• 2 подгруппа растр