Давыдова Е.В., школа 444 ЭЛЕМЕНТЫ ТЕОРИИ КОМПЬЮТЕРНОЙ ГРАФИКИ 1.Почему мы видим цвет? 2.Цветовая модель. 3.Характеристика цвета. 4.Восприятие цвета. - презентация

1 Давыдова Е.В., школа 444 ЭЛЕМЕНТЫ ТЕОРИИ КОМПЬЮТЕРНОЙ ГРАФИКИ 1. Почему мы видим цвет? 2. Цветовая модель. 3. Характеристика цвета. 4. Восприятие цвета

2 Давыдова Е.В., школа 444 ПОЧЕМУ МЫ ВИДИМ ЦВЕТ? Приемник Источник Источник света (свет) + освещенный им объект Приемник света – глаз 2 типа нервных клеток, обеспечивающих зрение: 1. Палочки – черно-белое зрение (в условиях плохой освещенности); 2. Колбочки – распознавание цветовой информации.

3 Давыдова Е.В., школа 444 БЕЛЫЙ ЦВЕТ Каждый Охотник Желает Знать Где Сидит Фазан Как Однажды Жак Звонарь Городской Сломал Фонарь Белый цвет – сложный цвет, состоящий из лучей различной цветности: 1.красный, 2.оранжевый, 3.желтый, 4.зеленый, 5.голубой, 6.синий, 7.фиолетовый. Спектр

4 Давыдова Е.В., школа 444 ПОЧЕМУМЫ ВИДИМ ПРЕДМЕТЫ ЦВЕТНЫМИ? ПОЧЕМУ МЫ ВИДИМ ПРЕДМЕТЫ ЦВЕТНЫМИ? Если белый свет падает на белый предмет, то все составляющие белого света отражаются от него – мы видим белый цвет предмета; на красный предмет, то все составляющие белого света поглощаются поверхностью предмета, только красная составляющая отражается; на черный предмет, то поглощаются все составляющие спектра – мы видим черный цвет предмета.

5 Давыдова Е.В., школа 444 ЦВЕТОВАЯ МОДЕЛЬ Система представления цвета для мониторов система RGB (Red, Green, Blue) Это аддитивная («складывающая») система, то есть цвет получается как результат смешивания трех соответствующих компонент: красный, зеленый, синий. Система представления цвета для печати систему CMYK (Cyan, Magenta, Yellow). Это субтрактивная («вычитающая») система, содержащая противоположные RGB цвета и черный (blacK) цвет: бирюзовый, малиновый, желтый.

6 Давыдова Е.В., школа 444 РАЗЛИЧИЯ МЕЖДУ RGB и CMYK Системы RGB и CMYK различны по сути и предназначены для описания разных проявлений цвета: с помощью RGB описываются излучающие тела, с помощью CMYK - поглощающие. При поглощении части спектра тело отражает оставшуюся часть и при этом приобретает определенный цвет. Чем субтрактивная система CMYK отличаются от аддитивных RGB? А тем, например, что при смешивании цветов в CMYK получается не белый, а черный цвет, белый же получится при отсутствии краски. Это как раз и нужно в полиграфии, где лист без красок белый, а при окрашивании темнеет вплоть до черного.

7 Давыдова Е.В., школа 444 КАК ПОЛУЧИТЬ НУЖНЫЙ ЦВЕТ? = RGB = RGB 0 + += RGB = RGB Каждый из трех цветовых компонентов RGB может принимать одно из 256 значений от 255 до 0. Любой цвет и оттенок цвета можно получить сочетанием красного, зеленого и синего цветов в различных пропорциях.

8 Давыдова Е.В., школа 444 ПОДБОР ЦВЕТА

9 Давыдова Е.В., школа 444 ХАРАКТЕРИСТИКА ЦВЕТА Одна из цветовых схем, которая характеризует естественные свойства любого оттенка тон насыщенность яркость тон одна из точек цветового круга, максимально яркая и насыщенная (цвет по радуге) насыщенность соотношение основного цвета и такого же по яркости серого яркость общая яркость цвета (крайние позиции черный и максимально яркий тоновый); интенсивность, с которой излучается цвет.

10 Давыдова Е.В., школа 444 ХАРАКТЕРИСТИКА ЦВЕТА S - контраст H – оттенок B - яркость

11 Давыдова Е.В., школа 444 ХАРАКТЕРИСТИКА ЦВЕТА HSB Hue – цветовой тон, оттенок Saturation – насыщенность, контрастность Brightness - яркость HSV Hue – цветовой тон, оттенок Saturation – насыщенность, контрастность Value – величина яркости HLS Hue – цветовой тон, оттенок Lightness - освещенность Saturation – насыщенность, контрастность В разных графических редакторах можно встретить разные названия:

12 Давыдова Е.В., школа 444 ЦВЕТОВОЙ КРУГ Цветовой круг применяется для образования гармоничных сочетаний из двух, трех,четырех цветов. При комбинации краски часто сталкиваются с проблемой, почему одни цвета создают приятное сочетание друг с другом, а другие режут глаз. На цветовом круге можно выделить самостоятельные цвета (красный, желтый, зеленый, голубой, синий, фиолетовый), а также цвета переходные (желто-красный, желто-зеленый и т.д.)

13 Давыдова Е.В., школа 444 ЦВЕТОВОЙ КРУГ В традиционной цветовой теории выделяют три основных цвета, образующие равносторонний треугольник в цветовом круге: красный, желтый и синий. Все остальные цвета можно получить путем смешивания основных. Так получаются дополнительные цвета: зеленый, оранжевый и фиолетовый и цвета производные: желто-оранжевый, красно-оранжевый, красно-фиолетовый, сине-фиолетовый, сине-зеленый и желто-зеленый.

14 Давыдова Е.В., школа 444 ВОСПРИЯТИЕ ЦВЕТА Все цвета можно разделить на две группы: Чем меньше площадь, занимаемая конкретным цветом, тем тусклее, темнее он кажется. Поэтому маленькие элементы делают ярче, большие темнее. теплые (красный, желтый, зеленый), которые приближают объект, делают его больше и активнее. холодные (синий, голубой, фиолетовый), которые успокаивают и отдаляют данный предмет,

15 Давыдова Е.В., школа 444 СОЧЕТАЕМОСТЬ ЦВЕТОВ Выбор цветов одной композиции основан на том, что вы стремитесь подчеркнуть: единство выбираются цвета, близкие друг другу на цветовом круге; выбираются цвета примерно на расстоянии четверти окружности. контраст

16 Давыдова Е.В., школа 444 ЦВЕТОВЫЕ СХЕМЫ Зная особенности восприятия каждого цвета и цветовых сочетаний, можно построить целый ряд готовых схем. Гармоничное сочетание цветов - несколько близлежащих, расположенных один за другим на цветовом круге, например, желто-красный, желтый и желто-зеленый. Для создания контраста выбирают цвета противоположные, расположенные напротив друг друга (дополняющие). Примененные рядом, они делают друг друга ярче и живее. Пары «желтый фиолетовый», «пурпурный зеленый». Можно попробовать использовать одни и те же цвета, но разной степени насыщенности.

17 Давыдова Е.В., школа 444 ТЕКСТ И ФОН Для комфортного чтения цвет текста и цвет фона должны контрастировать. Можно выделить два случая: Светлый текст на темном фоне Светлый текст на темном фоне Применяйте то, что наиболее уместно на ваш взгляд.

18 Давыдова Е.В., школа 444 ВИДЫ КОМПЬЮТЕРНОЙ ГРАФИКИ По способу формирования изображений компьютерную графику принято подразделять на: Трехмерная графика Векторная графика Растровая графика

19 Давыдова Е.В., школа 444 Растровая графика Основа растрового представления графики - пиксел (точка) с указанием его цвета. Различают: разрешение оригинала; разрешение экранного изображения; разрешение печатного изображения. разрешение - количество точек, приходящихся на единицу длины. Важным понятием растровой графики является

20 Давыдова Е.В., школа 444 Разрешение оригинала Зависит от требований: к качеству изображения, размеру файла, способу оцифровки или методу создания исходной иллюстрации, выбранному формату файла, другие параметры. Измеряется в точках на дюйм (dots per inch – dpi ) В общем случае действует правило: чем выше требования к качеству, тем выше должно быть разрешение оригинала.

21 Давыдова Е.В., школа 444 Разрешение экранного изображения Для экранных копий изображения элементарную точку растра принято называть пикселем. Для экранной копии изображения достаточно разрешение 72 dpi, для распечатки на цветном или лазерном принтере dpi, для вывода на фотоэкспонирующеем устройстве dpi. Размер пикселя варьируется в зависимости от: выбранного экранного разрешения, разрешения оригинала, масштаба отображения.

22 Давыдова Е.В., школа 444 Связь между параметрами изображения и размером файла Размер файла растровых изображений стремительно растет с увеличением разрешения. Фотоснимок (стандартный размер 10 х 15 см, с оцифрованным разрешением dpi, цветовое разрешение 24 бита), занимает в формате TIFF около 4 Мбайт. Если оцифровать этот фотоснимок с более высоким разрешением, то он будет занимать Мбайт.

23 Давыдова Е.В., школа 444 Масштабирование растровых изображений Одним из недостатков растровой графики является так называемая пикселизация изображений при увеличении. Раз в оригинале присутствует определенное количество точек, то при большем масштабе увеличивается их размер, становятся заметны элементы растра, что искажает само изображение.

24 Давыдова Е.В., школа 444 Векторная графика В векторной графике базовым элементом является линия. Линия описывается математически формулами как единый объект, и потому объем данных для отображения объекта средствами векторной графики существенно меньше, чем в растровой графике. Как и любой объект, линия обладает свойствами: формой (прямая, кривая), толщиной, цветом, начертанием (сплошная, пунктирная). Замкнутые линии приобретают свойство заполнения. Охватываемое ими пространство может быть заполнено другими объектами (текстуры, карты) или выбранным цветом.

25 Давыдова Е.В., школа 444 Векторная графика Векторные изображения могут быть увеличены или уменьшены без потери качества. Это возможно, т.к. масштабирование изображений производится с помощью простых математических операций (умножение параметров графических примитивов на коэффициент масштабирования). Векторные графические изображения являются оптимальным средством для хранения высокоточных графических объектов (чертежей, схем и т.д.), для которых имеет значение сохранение четких и ясных контуров.

26 Давыдова Е.В., школа 444 Представление графических данных Форматы графических файлов определяют способ хранения (растровый, векторный) информации в файле, а также форму хранения информации (используемый алгоритм сжатия). Сжатие применяется для растровых графических файлов, т.к. они имеют достаточно большой объем. Существуют различные алгоритмы сжатия, причем для различных типов изображения целесообразно применять подходящие типы алгоритмов сжатия.

27 Давыдова Е.В., школа 444 Характеристика часто используемых графических форматов Тип графической информации Алгоритм сжатия Графические форматы Рисунки типа аппликации, содержащие большие области однотонной закраски. Заменяет последовательность повторяющихся величин (пикселей одинакового цвета) на две величины (пиксель и количество его повторений). BMP, PCX Рисунки типа диаграмм Осуществляет поиск повторяющихся в рисунке "узоров". TIFF, GIF Отсканированные фотографии, иллюстрации Основан на том, что человеческий глаз очень чувствителен к изменению яркости отдельных точек изображения, но гораздо хуже замечает изменение цвета. JPEG

28 Давыдова Е.В., школа 444 Графика для Web-браузеров В компьютерной графике применяют более трех десятков форматов файлов для хранения изображений. Но существует пока три основных формата, которые распознаются достаточно большим числом Web-браузеров: GIF и JPEG, PNG, без установки дополнительных модулей.

29 Давыдова Е.В., школа 444 Формат GIF Формат GIF (Graphics Interchange Format) был введен компанией CompuServe в качестве первого формата для передачи и демонстрации графики через модем. Цвет каждого пикселя кодируется восьмью битами, поэтому GIF- файл может содержать до 256 цветов.

30 Давыдова Е.В., школа 444 Формат GIF: Индексированная палитра Цвета, которые используются в GIF-изображении, хранятся внутри самого файла в специальной таблице цветов, называемой индексированной палитрой.

31 Давыдова Е.В., школа 444 Существуют две основные версии формата GIF: GIF87 и GIF89a – они названы так по году стандартизации. Обе версии поддерживают способ представления графического файла с чередованием строк - во время приема изображения из Интернета его детали прорисовываются постепенно. Эффект похож на то, что происходит, когда на нерезкую картинку постепенно наводят фокус. Поэтому пользователи с медленными модемами могут обычно еще в самом начале приема картинки оценить ее содержание и время, необходимое на полную передачу, и принять решение, стоит ли продолжать прием или можно от него отказаться. Чередование строк формата GIF

32 Давыдова Е.В., школа 444 Формат GIF: Прозрачность GIF89a допускает задание одного цвета в качестве прозрачного. Прозрачность подразумевает, что один цвет изображения (обычно это цвет фона) может быть объявлен прозрачным. GIF-файлы можно использовать для создания на экране несложной анимации.

33 Давыдова Е.В., школа 444 Формат GIF: Сжатие без потерь Сжатие файлов в формате GIF является сжатием без потерь. Это означает, что упаковка изображения никоим образом не сказывается на его качестве. Сжатие оказывается наиболее эффективным в тех случаях, когда в составе изображения имеются большие области однородного цвета с четко очерченными границами. Невозможно хранить и демонстрировать неиндексированные изображения, подготовленные в режиме True Color (16,8 миллиона оттенков) или High Color (32-64 тысячи оттенков). Основным ограничением GIF-файлов является изображения должны состоять из 256 или меньшего числа цветов.

34 Давыдова Е.В., школа 444 Формат JPEG Формат JPEG (Joint Photographic Experts Group) был разработан для того, чтобы эффективно хранить и передавать цветные фотографии с полным набором цветовых оттенков. Изначально формат JPEG применялся для того, чтобы фотожурналисты, специализирующиеся на опубликовании новостей, имели возможность сжать файлы своих цифровых фотоснимков до размера, пригодного для передачи с места событий в издательство через модем. Формат JPEG приспособлен для хранения неиндексированных по цвету изображений, сформированных в режиме RGB с глубиной цвета True Color. Цвет кодируется 24-мя битами на пиксель, и тем самым одновременно может воспринимать более 16 миллионов цветов.

35 Давыдова Е.В., школа 444 Формат JPEG: сжатие Степень сжатия файлов может меняться по решению пользователя. С учетом практического предела использования Web-графики в 72 dpi обычно можно выбирать очень высокую степень сжатия (до 100:1) без сколько-нибудь заметного ухудшения качества изображения. Многократное сохранение файла в этом формате ведет к ухудшению качества изображения. Поэтому не стоит архивировать изображение в формате JPEG, если только речь не идет о носителях информации, доступной только для чтения. Кроме того, искажения будут проявляться и в случае, если фото формата JPEG будет скомбинировано с изображением другого формата, а затем записано со сжатием.

36 Давыдова Е.В., школа 444 Формат JPEG: прогрессивная развертка Это позволяет браузеру вначале прорисовывать изображение с низким разрешением, а затем повысить его качество по мере подкачки файла, тем самым существенно сокращая кажущееся время загрузки графики. Формат JPEG имеет возможность представления графического файла аналогично "чересстрочной развертке" формата GIF. Это называется в терминах формата JPEG - прогрессивной разверткой. Формат JPEG имеет два существенных недостатка: Изображения, сохраненные в формате JPEG, не могут иметь прозрачных областей.

37 Давыдова Е.В., школа 444 Когда следует использовать GIF-формат? Используйте GIF-формат для хранения всех малоразмерных графических элементов: значков-ссылок, надписей и миниатюр. Применяйте формат GIF для хранения изображений любого размера, изначально состоящих из больших областей однородной окраски. Исключение из данного перечня могут составлять файлы, содержащие необычно много цветов и тонких цветовых переходов. Лучшим советчиком в этом случае может служить эксперимент.

38 Давыдова Е.В., школа 444 Когда следует использовать JPEG-формат? Применяйте данный формат во всех случаях, когда размер изображения по каждой из координат превышает 200 пикселей, а само изображение представляет собой полноценную фотографию или образец художественной графики, включающий тонкие переливы цветов.

39 Давыдова Е.В., школа 444 Оптимизация графики для Web Размер файла определяет качество графического объекта и время загрузки через Интернет. Этапы оптимизации: 1.Кадрирование. Выделение главного (отбрасывание всего лишнего) и акцентирование на иллюстрируемом элементе. 2. Сохранение в нужном формате. Файл с изображением размером 45 Кбайта при скорости загрузки 32 Кбит в секунду будет загружаться в браузер 12 секунд.