ЭЛЕМЕНТЫ ТЕОРИИ КОМПЬЮТЕРНОЙ ГРАФИКИ 1 Почему мы видим

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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