Растровая и векторная графика
DESCRIPTION
This presentation is about graphics.TRANSCRIPT
![Page 1: Растровая и векторная графика](https://reader033.vdocuments.pub/reader033/viewer/2022061219/54b9019e4a795901168b465e/html5/thumbnails/1.jpg)
Основные понятия компьютерной графики© Ястребов Л.И., 2002 – 2006© Колодин С.А., с изменениями, 2010
![Page 2: Растровая и векторная графика](https://reader033.vdocuments.pub/reader033/viewer/2022061219/54b9019e4a795901168b465e/html5/thumbnails/2.jpg)
Виды графических элементов
•Иллюстрации, фотографии, чертежи, схемы
•Функциональные графические элементы, различные элементы управления навигацией на сайте – кнопки, ролловеры и т.д.
•Декоративные элементы: фоновые рисунки, заголовки, анимированные изображения и др.
![Page 3: Растровая и векторная графика](https://reader033.vdocuments.pub/reader033/viewer/2022061219/54b9019e4a795901168b465e/html5/thumbnails/3.jpg)
•Компьютерная графика: цветовые модели
•Растровая и векторная графика•Что такое пиксель?•Форматы графических файлов
Содержание
![Page 4: Растровая и векторная графика](https://reader033.vdocuments.pub/reader033/viewer/2022061219/54b9019e4a795901168b465e/html5/thumbnails/4.jpg)
Человек видит:Излучение с длиной волны от 380 нм. до
780 нм.
«Белый свет» (свет полуденного солнца): «смесь» в диапазоне - от 400 нм. (синий
цвет) до 700 нм. (красный цвет)
Что такое свет?
Нанометр – 1 миллиардная часть метра
![Page 5: Растровая и векторная графика](https://reader033.vdocuments.pub/reader033/viewer/2022061219/54b9019e4a795901168b465e/html5/thumbnails/5.jpg)
•Глаз человека воспринимает длины волн в диапазоне:▫400 – 500 нм. (синий цвет)▫500 – 600 нм. (зелёный цвет)▫600 – 700 нм. (красный цвет)
Компьютерная графика: цветовые модели. RGB
![Page 6: Растровая и векторная графика](https://reader033.vdocuments.pub/reader033/viewer/2022061219/54b9019e4a795901168b465e/html5/thumbnails/6.jpg)
•красный + зелёный = жёлтый•красный + синий = пурпурный•зелёный + синий = голубой•красный + зелёный + синий = белый
Смешивание цветов
![Page 7: Растровая и векторная графика](https://reader033.vdocuments.pub/reader033/viewer/2022061219/54b9019e4a795901168b465e/html5/thumbnails/7.jpg)
•Всего цветов: 256 * 256 * 256 = 16777216
•Для передачи о 256 состояниях нужен 1 байт
•Для передачи информации о 16777216 состояниях нужно всего 3 байта
Модель RGBR = 0… 255
G = 0… 255
B = 0… 255
![Page 8: Растровая и векторная графика](https://reader033.vdocuments.pub/reader033/viewer/2022061219/54b9019e4a795901168b465e/html5/thumbnails/8.jpg)
•Cyan – голубой•Magenta – фиолетовый•Yellow – жёлтый•Black - чёрный
▫Цветная печать построена на модели CMY
Модель CMYK
![Page 9: Растровая и векторная графика](https://reader033.vdocuments.pub/reader033/viewer/2022061219/54b9019e4a795901168b465e/html5/thumbnails/9.jpg)
•А – модель Lab•B – модель RGB•С – модель CMYK
Цветовой охват различных устройств
![Page 10: Растровая и векторная графика](https://reader033.vdocuments.pub/reader033/viewer/2022061219/54b9019e4a795901168b465e/html5/thumbnails/10.jpg)
•Компьютерная графика: цветовые модели
•Растровая и векторная графика•Что такое пиксель?•Форматы графических файлов
Содержание
![Page 11: Растровая и векторная графика](https://reader033.vdocuments.pub/reader033/viewer/2022061219/54b9019e4a795901168b465e/html5/thumbnails/11.jpg)
![Page 12: Растровая и векторная графика](https://reader033.vdocuments.pub/reader033/viewer/2022061219/54b9019e4a795901168b465e/html5/thumbnails/12.jpg)
•Состоит из пикселей
•Пиксель – логическая точка
•Изображение – совокупность точек
• Состоит из объектов• Объект – контур +
выделенная область• Изображение –
совокупность объектов
Растровая и векторная графика
![Page 13: Растровая и векторная графика](https://reader033.vdocuments.pub/reader033/viewer/2022061219/54b9019e4a795901168b465e/html5/thumbnails/13.jpg)
•Чтобы создать сложное изображение, нужно сгруппировать объекты
Растровая и векторная графика
![Page 14: Растровая и векторная графика](https://reader033.vdocuments.pub/reader033/viewer/2022061219/54b9019e4a795901168b465e/html5/thumbnails/14.jpg)
Растр
![Page 15: Растровая и векторная графика](https://reader033.vdocuments.pub/reader033/viewer/2022061219/54b9019e4a795901168b465e/html5/thumbnails/15.jpg)
Растр
![Page 16: Растровая и векторная графика](https://reader033.vdocuments.pub/reader033/viewer/2022061219/54b9019e4a795901168b465e/html5/thumbnails/16.jpg)
Растр
![Page 17: Растровая и векторная графика](https://reader033.vdocuments.pub/reader033/viewer/2022061219/54b9019e4a795901168b465e/html5/thumbnails/17.jpg)
Растр
![Page 18: Растровая и векторная графика](https://reader033.vdocuments.pub/reader033/viewer/2022061219/54b9019e4a795901168b465e/html5/thumbnails/18.jpg)
•Компьютерная графика: цветовые модели
•Растровая и векторная графика•Что такое пиксель?•Форматы графических файлов
Содержание
![Page 19: Растровая и векторная графика](https://reader033.vdocuments.pub/reader033/viewer/2022061219/54b9019e4a795901168b465e/html5/thumbnails/19.jpg)
Что такое пиксель?
Мельчайший элемент картинки – PICTURE ELEMENT –
PIXEL – ПИКСЕЛЬ
Мельчайший элемент картинки – PICTURE ELEMENT –
PIXEL – ПИКСЕЛЬ
Изображение – это кирпичная стена;Каждый кирпичик окрашен в свой цвет.
Пиксель – это «кирпич» изображения
![Page 20: Растровая и векторная графика](https://reader033.vdocuments.pub/reader033/viewer/2022061219/54b9019e4a795901168b465e/html5/thumbnails/20.jpg)
Что такое пиксель?
![Page 21: Растровая и векторная графика](https://reader033.vdocuments.pub/reader033/viewer/2022061219/54b9019e4a795901168b465e/html5/thumbnails/21.jpg)
•Компьютерная графика: цветовые модели
•Растровая и векторная графика•Что такое пиксель?•Форматы графических файлов
Содержание
![Page 22: Растровая и векторная графика](https://reader033.vdocuments.pub/reader033/viewer/2022061219/54b9019e4a795901168b465e/html5/thumbnails/22.jpg)
Сколько нужно места в памяти, чтобы воспроизвести на экране изображение размером 800 на 600 пикселей?
Количество пикселей в изображении: 800 * 600 = 480 000 пикселей
Для хранения информации о цвете одного пикселя требуется 3 байта
Поэтому для хранения информации о цвете всего изображения требуется:480 000 * 3 = 1 440 000 байт= 1, 37 Мб
Форматы графических файлов
![Page 23: Растровая и векторная графика](https://reader033.vdocuments.pub/reader033/viewer/2022061219/54b9019e4a795901168b465e/html5/thumbnails/23.jpg)
•Время. Человек не любит и не хочет ждать
•Скорость. Скорость загрузки информации из Интернета по телефонным проводам составляет не более 2-3 килобайт в секунду.
•Вывод: страница с изображением должна иметь не больше 60 - 90 Килобайт.
Выбор формата графического файла
![Page 24: Растровая и векторная графика](https://reader033.vdocuments.pub/reader033/viewer/2022061219/54b9019e4a795901168b465e/html5/thumbnails/24.jpg)
• Если изображение «сбросить» на диск в том виде, в котором оно находится в оперативной памяти, то это и будет сохранение файла в формате BMP.▫Помните пример? 800*600*3 байт = 1,37 Мегабайт
• Файлы имеют расширение имени *.bmp. ▫Число цветов в изображении 16,77 млн.цветов▫Изображения импортируются в Word и PowerPoint
• Файл формата BMP быстро загружается с диска в оперативную память. Но по каналам Интернета изображение передается долго.
BMP (Bit Map Picture)
![Page 25: Растровая и векторная графика](https://reader033.vdocuments.pub/reader033/viewer/2022061219/54b9019e4a795901168b465e/html5/thumbnails/25.jpg)
• Файл имеет расширение имени *.gif• Максимальное число цветов изображения:
256.▫осуществляется подбор цветов: для каждого
изображения – собственная палитра• Сжатие информации без потери качества
▫в итоге экономия приблизительно в 5 – 20 раз.• Изображения пригодны для размещения на
сайтах• Изображения импортируются в Word и
PowerPoint
GIF (Graphic Interchange Format)
![Page 26: Растровая и векторная графика](https://reader033.vdocuments.pub/reader033/viewer/2022061219/54b9019e4a795901168b465e/html5/thumbnails/26.jpg)
• Изображение может содержать прозрачные области и зрительно выглядеть не прямоугольным
• Разрешает иметь слои, которые можно «листать», создавая эффект мультипликации (анимированный GIF)
GIF (Graphic Interchange Format)
![Page 27: Растровая и векторная графика](https://reader033.vdocuments.pub/reader033/viewer/2022061219/54b9019e4a795901168b465e/html5/thumbnails/27.jpg)
•Файлы имеют расширение имени *.jpg *.jpeg•Алгоритм отбрасывает «избыточную»
информацию, невидимую глазом, а потому обеспечивает сжатие информации с потерей качества
•Обеспечивает экономию приблизительно в 5 – 60 раз.
•Изображения можно размещать на сайтах•Изображения импортируются в Word и
PowerPoint
JPEG (Joint Photographic Expert Group)
![Page 28: Растровая и векторная графика](https://reader033.vdocuments.pub/reader033/viewer/2022061219/54b9019e4a795901168b465e/html5/thumbnails/28.jpg)
•Файлы имеют расширение имени *.png•Резервирует 1 байт на цвета пикселя,
как и GIF•Включает сжатие информации•Изображения импортируются в Word и
PowerPoint•Применяется в Web, часто дает более
«легкие» файлы, чем GIF•Не поддерживает анимацию
PNG – 8 (Portable Network Graphic)
![Page 29: Растровая и векторная графика](https://reader033.vdocuments.pub/reader033/viewer/2022061219/54b9019e4a795901168b465e/html5/thumbnails/29.jpg)
•Файлы имеют расширение имени *.png•Резервирует 3 байта на цвета пикселя,
как и BMP•Сжатие информации без потери качества•При использовании сжатия экономичнее,
чем BMP•Применяется в Web, но файлы немного
«тяжеловаты»•Изображения импортируются в Word и
PowerPoint
PNG (Portable Network Graphic)
![Page 30: Растровая и векторная графика](https://reader033.vdocuments.pub/reader033/viewer/2022061219/54b9019e4a795901168b465e/html5/thumbnails/30.jpg)
• Файлы имеют расширение имени *.tiff *.tif• Резервирует 3 байта на цвета пикселя, как и
BMP• Сжатие информации без потери качества.
При использовании сжатия экономичнее, чем BMP
• Используется для работы с большими изображениями
• Широко применяется в полиграфии, но НЕ в Web
• Изображения импортируются в Word и PowerPoint
TIFF (Tagged Image File Format)
![Page 31: Растровая и векторная графика](https://reader033.vdocuments.pub/reader033/viewer/2022061219/54b9019e4a795901168b465e/html5/thumbnails/31.jpg)
•Файлы имеют расширение имени *.psd•Резервирует 3 байта на цвета пикселя,
как BMP и TIFF•Сжатие информации без потери качества •Экономичнее, чем формат BMP и сходен с
TIFF•Используется для сохранения результатов
обработки изображения •НЕ используется в Web•НЕ импортируется в Word и PowerPoint
PSD (PhotoShop Document)
![Page 32: Растровая и векторная графика](https://reader033.vdocuments.pub/reader033/viewer/2022061219/54b9019e4a795901168b465e/html5/thumbnails/32.jpg)
Вопросы?
![Page 33: Растровая и векторная графика](https://reader033.vdocuments.pub/reader033/viewer/2022061219/54b9019e4a795901168b465e/html5/thumbnails/33.jpg)
•Ястребов Л.И. Кодирование графической информации. - © ФИО, 2002 – 2006
Использованные материалы