This presentation is about graphics.

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

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

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

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

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

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

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

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

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

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

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

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

14. Растр

15. Растр

16. Растр

17. Растр

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

19. Что такое пиксель?
Мельчайший элемент картинки –
Изображение –ELEMENT – стена;
PICTURE это кирпичная
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

32. Вопросы?

33. Использованные материалы
• Ястребов Л.И. Кодирование графической
информации. - © ФИО, 2002 – 2006

34. Контакты
• www.serge-flamel.narod.ru
• sergei-alex@rambler.ru
• www.kolodin.blogspot.ru