Основные понятия растровой графики. «Видимый свет» – излучение с длиной волны от 380 нм. до 780 нм. Глаз человека воспринимает длины волн в диапазоне. - презентация

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

2 «Видимый свет» – излучение с длиной волны от 380 нм. до 780 нм. Глаз человека воспринимает длины волн в диапазоне нм., как синий цвет, нм., как зеленый цвет нм., как красный цвет «Белый свет» (свет полуденного солнца) - «смесь» в диапазоне от 400 нм. (синий) до 700 нм. (красный). Эти цвета приняты как первичные для компьютерного воспроизведения цвета. Модель построения цвета называется: модель RGB (Red, Green, Blue) Модель RGB

3 Смешивание цветов Красный + Зеленый=Жёлтый Красный + Синий=Пурпурный Зелёный + Синий=Голубой Красный + Зелёный + Синий=Белый

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

5 Модель RGB. Упражнение Откройте любое окно управления цветом и на практике познакомьтесь с формированием цветов в модели RGB Windows Photoshop

6 Модель RGB. Дополнительные цвета Красный + Зелёный + Синий = Белый Зелёный + Синий = Голубой Красный + Голубой = Белый G R B Красный и голубой – взаимно дополнительные цвета; нельзя изменить красный, не затронув голубой цвет. Кроме голубого есть еще два дополнительных цвета

7 Векторная графика В векторной графике – объекты. Объект = контур и внутренняя область. Изображение – совокупность объектов

8 + = Работа с объектами векторной графики Чтобы создать сложное изображение, компонуем ОБЪЕКТЫ

9 Растр

10 Растр-1 Растр

11 Растр-2 Растр

12 Растр-3 Растр

13 Растр-3 Растр

14 Простейшее растровое изображение При уменьшении масштаба рисунка линии становятся более гладкими Матрица. Растр «квадратиков»

15 Графика - векторная и растровая В векторной графике – объекты. Объект = контур и внутренняя область В растровой графике – матрица (растр ) раскрашенных точек (пикселей) Изображение – совокупность объектов Изображение - совокупность точек

16 Понятие о пикселе ЯЛЕСКИПРЕМЗАРВОКАК АКЧОТ ЯАКСЕЧИГОЛ-ЬЛЕСКИП Мельчайший элемент картинки – PICTURE ELEMENT – PIXEL – ПИКСЕЛЬ Мельчайший элемент картинки – PICTURE ELEMENT – PIXEL – ПИКСЕЛЬ Изображение – это кирпичная стена; Каждый кирпичик окрашен в свой цвет. Пиксель – это «кирпич» изображения

17 Пиксель не имеет фиксированного размера При разрешении экрана 800 на 600 точек, на том же ФИКСИРОВАННОМ поле экрана располагается меньше точек (пикселей изображения), т.е. геометрический размер пикселя – величина ПЕРЕМЕННАЯ. Измените область экрана до 800 на 600 точек.

18 Если бы пиксель был фиксирован, фотографии нельзя было бы видеть на мониторах разного размера

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

20 Какие размеры файлов пригодны для Web? 1. Человек не терпелив. 2. Ждать загрузки изображения он будет не больше 30 секунд. 3. Скорость загрузки информации из Интернета по телефонным проводам составляет не более 2 килобайт в секунду. 4. Делайте вывод : страница с изображением должна иметь не больше 60 Килобайт. 5. Как же сохранить изображение для Web ?

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

22 Формат GIF Graphic Interchange Format Формат для «обмена» графикой Файл имеет расширение имени *.gif Максимальное число цветов изображения: 256 (Осуществляется подбор цветов: для каждого изображения – собственная палитра ) Используется сжатие информации без потери качества В итоге экономия приблизительно в 5 – 20 раз Изображения ПРИГОДНЫ для размещения на сайтах Изображения импортируются в Word и PowerPoint

23 Формат BMP и формат GIF Формат BMP; 470 К Формат GIF; 43 К (256 цветов) Формат GIF; 15 К (26 цветов)

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

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

26 Формат BMP и формат JPEG Формат BMP; 470 К Формат JPEG; 41 К (все цвета) Формат JPEG; 6,9 К (все цвета)

27 Формат GIF и формат JPEG Формат GIF, 128 цветов, 10,5 K Формат BMP, 425 K Формат JPEG, 12,5 K Формат GIF, 8 цветов, 7 K

28 Формат GIF и формат JPEG Рисованные изображения, небольшое количество цветов; хорошо очерченные контуры; контрастные переходы. Фотографические изображения, большое количество цветов; нет резких переходов; нет жестких, чётких контуров. Чем больше площадь плавных переходов, тем лучше сжимается. Резкие границы Плавные переходы Промежуточный случай: присутствуют и резкие границы и плавные переходы. Надо использовать JPEG с малым сжатием. Большие файлы Промежуточный случай: присутствуют и резкие границы и плавные переходы. Надо использовать JPEG с малым сжатием. Большие файлы Маленькие файлы GIF:JPEG:

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

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

31 Как изображение попадает в компьютер?

32 О каком разрешении изображения надо говорить

33 Исходное разрешение

34 Разрешение монитора Задача 1. Диагональ 14 дюймов, Количество точек 640 на 480. Каково разрешение? Вычисляем диагональ в пикселях: 800 Разрешение монитора: 800/14 = 57 пиксель/дюйм Задача 1. Диагональ 14 дюймов, Количество точек 640 на 480. Каково разрешение? Вычисляем диагональ в пикселях: 800 Разрешение монитора: 800/14 = 57 пиксель/дюйм Задача 1. Диагональ 14 дюймов, Количество точек 800 на 600. Каково разрешение? Вычисляем диагональ в пикселях: 1000 Разрешение монитора: 1000/14 = 71 пиксель/дюйм Задача 1. Диагональ 14 дюймов, Количество точек 800 на 600. Каково разрешение? Вычисляем диагональ в пикселях: 1000 Разрешение монитора: 1000/14 = 71 пиксель/дюйм Задача 2 Диагональ 17 дюймов, Количество точек 1024 на 768. Каково разрешение? Вычисляем диагональ в пикселях: 1280 Разрешение монитора: 1280/17= 75 пиксель/дюйм Задача 2 Диагональ 17 дюймов, Количество точек 1024 на 768. Каково разрешение? Вычисляем диагональ в пикселях: 1280 Разрешение монитора: 1280/17= 75 пиксель/дюйм Задача 3. Диагональ 17 дюймов, Количество точек 1280 на Каково разрешение? Вычисляем диагональ в пикселях: 1639 Разрешение монитора: 1000/17= 96 пиксель/дюйм Задача 3. Диагональ 17 дюймов, Количество точек 1280 на Каково разрешение? Вычисляем диагональ в пикселях: 1639 Разрешение монитора: 1000/17= 96 пиксель/дюйм Задача 4. Диагональ 17 дюймов, Количество точек 1600 на 1200 Каково разрешение? Вычисляем диагональ в пикселях: 2000 Разрешение монитора: 2000/17= 118 пиксель/дюйм Задача 4. Диагональ 17 дюймов, Количество точек 1600 на 1200 Каково разрешение? Вычисляем диагональ в пикселях: 2000 Разрешение монитора: 2000/17= 118 пиксель/дюйм

35 Разрешение изображения Разрешения изображения отличаются в 5 раз Как будут отличаться изображения на экране монитора ? Разрешения изображения отличаются в 5 раз Как будут отличаться изображения на экране монитора ? На экране монитора они будут одинаковыми! На экране монитора они будут одинаковыми!

36 Разрешение при печати Экран Лист бумаги Размер изображения 6 х 6 пикселей Размер изображения 6 х 6 дюймов Разрешение изображения при печати: 1 пиксель на 1 дюйм

37 Разрешение при печати Экран Лист бумаги Размер изображения 6 х 6 пикселей Размер изображения 3 х 3 дюймов Разрешение изображения при печати: 2 пикселя на 1 дюйм

38 Разрешение при печати Экран Лист бумаги Размер изображения 6 х 6 пикселей Размер изображения 2 х 2 дюйма Разрешение изображения при печати: 3 пикселя на 1 дюйм

39 Разрешение при печати 20 px/cm 800 пикселей 600 пикселей Размеры печатного оттиска на бумаге: 40 см на 30 см «Размер» пикселя: 0,5 мм