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

Основные понятия компьютерной графики© Ястребов Л.И., 2002 – 2006© Колодин С.А., с изменениями, 2010

Виды графических элементов

•Иллюстрации, фотографии, чертежи, схемы

•Функциональные графические элементы, различные элементы управления навигацией на сайте – кнопки, ролловеры и т.д.

•Декоративные элементы: фоновые рисунки, заголовки, анимированные изображения и др.

•Компьютерная графика: цветовые модели

•Растровая и векторная графика•Что такое пиксель?•Форматы графических файлов

Содержание

Человек видит:Излучение с длиной волны от 380 нм. до

780 нм.

«Белый свет» (свет полуденного солнца): «смесь» в диапазоне - от 400 нм. (синий

цвет) до 700 нм. (красный цвет)

Что такое свет?

Нанометр – 1 миллиардная часть метра

•Глаз человека воспринимает длины волн в диапазоне:▫400 – 500 нм. (синий цвет)▫500 – 600 нм. (зелёный цвет)▫600 – 700 нм. (красный цвет)

Компьютерная графика: цветовые модели. RGB

•красный + зелёный = жёлтый•красный + синий = пурпурный•зелёный + синий = голубой•красный + зелёный + синий = белый

Смешивание цветов

•Всего цветов: 256 * 256 * 256 = 16777216

•Для передачи о 256 состояниях нужен 1 байт

•Для передачи информации о 16777216 состояниях нужно всего 3 байта

Модель RGBR = 0… 255

G = 0… 255

B = 0… 255

•Cyan – голубой•Magenta – фиолетовый•Yellow – жёлтый•Black - чёрный

▫Цветная печать построена на модели CMY

Модель CMYK

•А – модель Lab•B – модель RGB•С – модель CMYK

Цветовой охват различных устройств

•Состоит из пикселей

•Пиксель – логическая точка

•Изображение – совокупность точек

• Состоит из объектов• Объект – контур +

выделенная область• Изображение –

совокупность объектов

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

•Чтобы создать сложное изображение, нужно сгруппировать объекты

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

Растр

Что такое пиксель?

Мельчайший элемент картинки – PICTURE ELEMENT –

PIXEL – ПИКСЕЛЬ

Мельчайший элемент картинки – PICTURE ELEMENT –

PIXEL – ПИКСЕЛЬ

Изображение – это кирпичная стена;Каждый кирпичик окрашен в свой цвет.

Пиксель – это «кирпич» изображения

Что такое пиксель?

Сколько нужно места в памяти, чтобы воспроизвести на экране изображение размером 800 на 600 пикселей?

Количество пикселей в изображении: 800 * 600 = 480 000 пикселей

Для хранения информации о цвете одного пикселя требуется 3 байта

Поэтому для хранения информации о цвете всего изображения требуется:480 000 * 3 = 1 440 000 байт= 1, 37 Мб

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

•Время. Человек не любит и не хочет ждать

•Скорость. Скорость загрузки информации из Интернета по телефонным проводам составляет не более 2-3 килобайт в секунду.

•Вывод: страница с изображением должна иметь не больше 60 - 90 Килобайт.

Выбор формата графического файла

• Если изображение «сбросить» на диск в том виде, в котором оно находится в оперативной памяти, то это и будет сохранение файла в формате BMP.▫Помните пример? 800*600*3 байт = 1,37 Мегабайт

• Файлы имеют расширение имени *.bmp. ▫Число цветов в изображении 16,77 млн.цветов▫Изображения импортируются в Word и PowerPoint

• Файл формата BMP быстро загружается с диска в оперативную память. Но по каналам Интернета изображение передается долго.

BMP (Bit Map Picture)

• Файл имеет расширение имени *.gif• Максимальное число цветов изображения:

256.▫осуществляется подбор цветов: для каждого

изображения – собственная палитра• Сжатие информации без потери качества

▫в итоге экономия приблизительно в 5 – 20 раз.• Изображения пригодны для размещения на

сайтах• Изображения импортируются в Word и

PowerPoint

GIF (Graphic Interchange Format)

• Изображение может содержать прозрачные области и зрительно выглядеть не прямоугольным

• Разрешает иметь слои, которые можно «листать», создавая эффект мультипликации (анимированный GIF)

GIF (Graphic Interchange Format)

•Файлы имеют расширение имени *.jpg *.jpeg•Алгоритм отбрасывает «избыточную»

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

•Обеспечивает экономию приблизительно в 5 – 60 раз.

•Изображения можно размещать на сайтах•Изображения импортируются в Word и

PowerPoint

JPEG (Joint Photographic Expert Group)

•Файлы имеют расширение имени *.png•Резервирует 1 байт на цвета пикселя,

как и GIF•Включает сжатие информации•Изображения импортируются в Word и

PowerPoint•Применяется в Web, часто дает более

«легкие» файлы, чем GIF•Не поддерживает анимацию

PNG – 8 (Portable Network Graphic)

•Файлы имеют расширение имени *.png•Резервирует 3 байта на цвета пикселя,

как и BMP•Сжатие информации без потери качества•При использовании сжатия экономичнее,

чем BMP•Применяется в Web, но файлы немного

«тяжеловаты»•Изображения импортируются в Word и

PowerPoint

PNG (Portable Network Graphic)

• Файлы имеют расширение имени *.tiff *.tif• Резервирует 3 байта на цвета пикселя, как и

BMP• Сжатие информации без потери качества.

При использовании сжатия экономичнее, чем BMP

• Используется для работы с большими изображениями

• Широко применяется в полиграфии, но НЕ в Web

• Изображения импортируются в Word и PowerPoint

TIFF (Tagged Image File Format)

•Файлы имеют расширение имени *.psd•Резервирует 3 байта на цвета пикселя,

как BMP и TIFF•Сжатие информации без потери качества •Экономичнее, чем формат BMP и сходен с

TIFF•Используется для сохранения результатов

обработки изображения •НЕ используется в Web•НЕ импортируется в Word и PowerPoint

PSD (PhotoShop Document)

Вопросы?

•www.serge-flamel.narod.ru•[email protected]•www.kolodin.blogspot.ru

Контакты

http://www.serge-flamel.narod.ru/

mailto:[email protected]

http://www.kolodin.blogspot.ru/

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

Education