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

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

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

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

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

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

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

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

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

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

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

11. A A A A A

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

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

14. Растр

15. Растр

16. Растр

17. Растр

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

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

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

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

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

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

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

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

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

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

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

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

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

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