© КНТЭУ, каф. ИТС, 
Основы веб-дизайна. Лекция №4
доц. Шклярский С.М.
Графика в Web
1.Введение в компьютерную графику.
2.Форматы графических файлов.
3.Построение векторных изображений.
4.Работа с растровой графикой.
5. Оптимизация графики для Web.
1. Введение в компьютерную графику.
1930 г. - сотрудник компании «Вестингхаус» Владимир Зворыкин запатентовал изобретение
электронно-лучевой трубки (ЭЛТ) – прообраза современного кинескопа.
В.Зворыкин (1889 – 1975) |
Один из первых телевизоров |
Графика в Web |
© КНТЭУ - 2009, каф. ИТС, доц. Шклярский С.М. |
1951 г. – В МТИ в рамках научной программы для ВМС
США разработан первый компьютерный дисплей.
Изобретатель – Джей Форрестер.
1962 г. – В МТИ создана первая программа
компьютерной графики Sketchpad («Блокнот»).
Разработчик - Айвен Сазерленд.
1965 г. – фирма IBM выпускает первый коммерческий
графический терминал IBM-2250
Графика в Web |
© КНТЭУ - 2009, каф. ИТС, доц. Шклярский С.М. |
Ведущие производители оборудования для компьютерной графики:
•Silicon Graphics
•Evans&Sotherland
•IBM, Sun Microsystems
•nVidia, ATI, Intel …
Ежегодная выставка-симпозиум по компьютерной графике SYGGRAPH (www.syggraph.org)
Графика в Web |
© КНТЭУ - 2009, каф. ИТС, доц. Шклярский С.М. |
Схема воспроизведения графики
100101001110011001
011010111010000101
010100010101001001
010101000101000101
цифро-аналоговое |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||
преобразование |
|
|
|
|
|
|
|
|
Источники |
||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Оцифровка |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||||
|
изображения |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Чтение/захват
изображения
Видеопамять
Графическая 
программа
Графика в Web |
© КНТЭУ - 2009, каф. ИТС, доц. Шклярский С.М. |
Пиксел - это световое пятно на экpане дисплея, котоpое может пpинимать pазличные оттенки.
Пикселы pасполагаются на экpане в виде строк и столбцов.
Разpешение экрана опpеделяется количеством пикселов в каждой стpоке и в каждом столбце.
Типичные разрешения экрана (ширина х высота):
•640 х 480 – для старых мониторов, PDA и т.п.
•800 х 600 - для офисной работы
•1024 х 768 – для графики, мультимедия, интернет и т.д.
•…
Чем больше пикселов на экpане, тем выше качество изобpажения .
Графика в Web |
© КНТЭУ - 2009, каф. ИТС, доц. Шклярский С.М. |
Принцип воспроизведения цвета на дисплее
00000000 11011001 11101001 |
|
|
00010011 10111101 10001111 |
люминофоры |
|
11100111 11100111 11111111 |
||
|
||
видеопамять |
пикселы |
|
|
Графика в Web |
© КНТЭУ - 2009, каф. ИТС, доц. Шклярский С.М. |
Максимальное количество цветов, одновpеменно отобpажаемых на экpане, опpеделяется количеством битов, выделенных для каждого пиксела в видео-буфеpе.
Любой цвет можно получить, смешивая в определенной пропорции основные цвета спектра:
•красный
•зеленый
•синий
Такая цветовая модель называется RGB (Red-Green-Blue).
В полноцветных системах каждому пикселу отводится 24 бита цветовой инфоpмации: 8 - для кpасной компоненты цвета, 8 - для зеленой и 8 - для синей.
Такая система способна воспроизвести 224 = 16777215 цветов.
Графика в Web |
© КНТЭУ - 2009, каф. ИТС, доц. Шклярский С.М. |
100101001110011001
011010111010000101
010100010101001001
010101000101000101
цифро-аналоговое |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||
преобразование |
|
|
|
|
|
|
|
Источники |
|||||||||||||||||||||||||||||||||||||
|
|
|
|
||||||||||||||||||||||||||||||||||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Оцифровка |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||||||
|
изображения |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Чтение/захват
изображения
Видеопамять
Графическая 
программа
Графика в Web |
© КНТЭУ - 2009, каф. ИТС, доц. Шклярский С.М. |
Типы графических файлов:
1. Растровые – это файлы, в которых изображение хранится как набор пикселей (графических точек).
A(100,150)
C(180,130) |
Каждая точка изображения |
|
представлена числом. |
|
B(200,250) |
Глубина цвета - характеристика качества растрового изображения – определяется количеством бит, описывающих одну точку изображения (8,16 или 24).
Графика в Web |
© КНТЭУ - 2009, каф. ИТС, доц. Шклярский С.М. |