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

1 Основные понятия компьютерной графики

2 Виды графических элементов Иллюстрации, фотографии, чертежи, схемы Функциональные графические элементы, различные элементы управления навигацией на сайте – кнопки, ролловеры и т.д. Декоративные элементы: фоновые рисунки, заголовки, анимированные изображения и др.

3 Компьютерная графика: цветовые модели Растровая и векторная графика Что такое пиксель? Форматы графических файлов Содержание

4 Человек видит: Излучение с длиной волны от 380 нм. до 780 нм. «Белый свет» (свет полуденного солнца): «смесь» в диапазоне - от 400 нм. (синий цвет) до 700 нм. (красный цвет) Что такое свет? Нанометр – 1 миллиардная часть метра

5 Глаз человека воспринимает длины волн в диапазоне: 400 – 500 нм. (синий цвет) 500 – 600 нм. (зелёный цвет) 600 – 700 нм. (красный цвет) Компьютерная графика: цветовые модели. RGB

6 красный + зелёный = жёлтый красный + синий = пурпурный зелёный + синий = голубой красный + зелёный + синий = белый Смешивание цветов

7 Всего цветов: 256 * 256 * 256 = Для передачи о 256 состояниях нужен 1 байт Для передачи информации о состояниях нужно всего 3 байта Модель RGB R = 0… 255 G = 0… 255 B = 0… 255

8 Cyan – голубой Magenta – фиолетовый Yellow – жёлтый Black - чёрный Цветная печать построена на модели CMY Модель CMYK

9 А – модель Lab B – модель RGB С – модель CMYK Цветовой охват различных устройств

10 Компьютерная графика: цветовые модели Растровая и векторная графика Что такое пиксель? Форматы графических файлов Содержание

11

12 Состоит из пикселей Пиксель – логическая точка Изображение – совокупность точек Состоит из объектов Объект – контур + выделенная область Изображение – совокупность объектов Растровая и векторная графика

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

14 Растр

15

16

17

18 Компьютерная графика: цветовые модели Растровая и векторная графика Что такое пиксель? Форматы графических файлов Содержание

19 Что такое пиксель? Мельчайший элемент картинки – PICTURE ELEMENT – PIXEL – ПИКСЕЛЬ Мельчайший элемент картинки – PICTURE ELEMENT – PIXEL – ПИКСЕЛЬ Изображение – это кирпичная стена; Каждый кирпичик окрашен в свой цвет. Пиксель – это «кирпич» изображения

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

21 Компьютерная графика: цветовые модели Растровая и векторная графика Что такое пиксель? Форматы графических файлов Содержание

22 Сколько нужно места в памяти, чтобы воспроизвести на экране изображение размером 800 на 600 пикселей? Количество пикселей в изображении: 800 * 600 = пикселей Для хранения информации о цвете одного пикселя требуется 3 байта Поэтому для хранения информации о цвете всего изображения требуется: * 3 = байт= 1, 37 Мб Форматы графических файлов

23 Время. Человек не любит и не хочет ждать Скорость. Скорость загрузки информации из Интернета по телефонным проводам составляет не более 2-3 килобайт в секунду. Вывод: страница с изображением должна иметь не больше Килобайт. Выбор формата графического файла

24 Если изображение «сбросить» на диск в том виде, в котором оно находится в оперативной памяти, то это и будет сохранение файла в формате BMP. Помните пример? 800*600*3 байт = 1,37 Мегабайт Файлы имеют расширение имени *.bmp. Число цветов в изображении 16,77 млн.цветов Изображения импортируются в Word и PowerPoint Файл формата BMP быстро загружается с диска в оперативную память. Но по каналам Интернета изображение передается долго. BMP (Bit Map Picture)

25 Файл имеет расширение имени *.gif Максимальное число цветов изображения: 256. осуществляется подбор цветов: для каждого изображения – собственная палитра Сжатие информации без потери качества в итоге экономия приблизительно в 5 – 20 раз. Изображения пригодны для размещения на сайтах Изображения импортируются в Word и PowerPoint GIF (Graphic Interchange Format)

26 Изображение может содержать прозрачные области и зрительно выглядеть не прямоугольным Разрешает иметь слои, которые можно «листать», создавая эффект мультипликации (анимированный GIF) GIF (Graphic Interchange Format)

27 Файлы имеют расширение имени *.jpg *.jpeg Алгоритм отбрасывает «избыточную» информацию, невидимую глазом, а потому обеспечивает сжатие информации с потерей качества Обеспечивает экономию приблизительно в 5 – 60 раз. Изображения можно размещать на сайтах Изображения импортируются в Word и PowerPoint JPEG (Joint Photographic Expert Group)

28 Файлы имеют расширение имени *.png Резервирует 1 байт на цвета пикселя, как и GIF Включает сжатие информации Изображения импортируются в Word и PowerPoint Применяется в Web, часто дает более «легкие» файлы, чем GIF Не поддерживает анимацию PNG – 8 (Portable Network Graphic)

29 Файлы имеют расширение имени *.png Резервирует 3 байта на цвета пикселя, как и BMP Сжатие информации без потери качества При использовании сжатия экономичнее, чем BMP Применяется в Web, но файлы немного «тяжеловаты» Изображения импортируются в Word и PowerPoint PNG (Portable Network Graphic)

30 Файлы имеют расширение имени *.tiff *.tif Резервирует 3 байта на цвета пикселя, как и BMP Сжатие информации без потери качества. При использовании сжатия экономичнее, чем BMP Используется для работы с большими изображениями Широко применяется в полиграфии, но НЕ в Web Изображения импортируются в Word и PowerPoint TIFF (Tagged Image File Format)

31 Файлы имеют расширение имени *.psd Резервирует 3 байта на цвета пикселя, как BMP и TIFF Сжатие информации без потери качества Экономичнее, чем формат BMP и сходен с TIFF Используется для сохранения результатов обработки изображения НЕ используется в Web НЕ импортируется в Word и PowerPoint PSD (PhotoShop Document)