Цветовая

Начала Web-дизайна
Web-дизайна
Элементы теории
компьютерной графики
•Почему мы видим свет
•Цветовая модель
•Характеристики цвета
•Восприятие цвета
Начала Web-дизайна
Web-дизайна
Почему мы видим свет?
Справка
2
Начала Web-дизайна
Web-дизайна
Белый свет (вспоминаем физику)
Каждый Охотник Желает Знать Где Сидит Фазан
Как Однажды Жак Звонарь Городской Сломал Фонарь
Справка
3
Начала Web-дизайна
Web-дизайна
Почему мы видим предметы цветными?
Справка
4
Начала Web-дизайна
Web-дизайна
Цветовая модель
Справка
5
Начала Web-дизайна
Web-дизайна
Как получить нужный цвет из
красного, зеленого и синего?
R
G
B
= 255 + 255 + 255
R
G
B
= 255 + 255 + 0
Справка
R
G
B
= 0 + 0 + 0
R
G
B
= 45 + 181 + 45
6
Начала Web-дизайна
Web-дизайна
Подбор цвета в графическом редакторе
= (0, 0, 0)
= (240, 118, 125)
= (0, 153, 0)
= (255, 255, 255)
= (255, 255, 0)
= (221, 221, 221)
Справка
7
Начала Web-дизайна
Web-дизайна
Характеристики цвета
Тон
Насыщенность
Яркость
Справка
8
Начала Web-дизайна
Web-дизайна
Цветовые схемы
Близлежащие цвета
Противоположные (дополняющие) цвета
Один цвет разной насыщенности
Цветовая схема кленовых листьев
Справка
9
Начала Web-дизайна
Web-дизайна
Восприятие цвета
«Престижные»
«Пастельные»
«Здоровые»
«Природные»
Справка
10
Начала Web-дизайна
Web-дизайна
Почему мы видим свет?
Для
Длятого,
того,чтобы
чтобы
«увидеть»
предмет,
«увидеть» предмет,
необходимы
необходимыдве
двевещи:
вещи:
•Источник
•Источниксвета
света(свет
(свет++
освещенный
освещенныйим
имобъект);
объект);
•Приемник
света
•Приемник света(глаз)
(глаз)
Закрыть справку
11
Начала Web-дизайна
Web-дизайна
Белый свет является
сложным светом,
состоящим
из лучей различной
цветности: Желает
Охотник
красного, оранжевого,
желтого,
зеленого, голубого,
синего,
фиолетового – такое
разложение
называется спектром.
Белый свет (вспоминаем физику)
Каждый
Знать Где Сидит Фазан
Как Однажды Жак Звонарь Городской Сломал Фонарь
Закрыть справку
12
Начала Web-дизайна
Web-дизайна
Почему мы видим предметы цветными?
Если
Еслибелый
белыйсвет
светпадает
падаетна
набелый
белыйпредмет,
предмет,то
товсе
всесоставляющие
составляющиебелого
белогосвета
света
отражаются
от
него,
и
мы
видим
белый
цвет
предмета.
Если
белый
свет
падает
отражаются от него, и мы видим белый цвет предмета. Если белый свет падаетна
на
зеленый
предмет,
то
все
составляющие
света
поглощаются
поверхностью
предмета,
зеленый предмет, то все составляющие света поглощаются поверхностью предмета,
иилишь
лишьзеленая
зеленаясоставляющая
составляющаяотражается,
отражается,вврезультате
результатечего
чегомы
мывидим
видимзеленую
зеленую
окраску
предмета.
Аналогично
происходит
и
с
другими
цветами:
красным,
окраску предмета. Аналогично происходит и с другими цветами: красным,синим,
синим,
зеленым
и
т.п.
Если
свет
падает
на
поверхность
черного
цвета,
то
поглощаются
зеленым и т.п. Если свет падает на поверхность черного цвета, то поглощаютсявсе
все
составляющие
спектра,
и
мы
видим
черный
предмет.
составляющие спектра, и мы видим черный предмет.
Закрыть справку
13
Начала Web-дизайна
Web-дизайна
Цветовая модель
ЦЦветовая
ветовая модель
модель RGB
RGB (Red
(Red ––
красный
красный, ,Green
Green––зеленый
зеленый, , Blue
Blue––
синий
синий).). Цветовую
Цветовую модель
модель RGB
RGB
обычно
обычноиллюстрируют
иллюстрируюткартинкой
картинкой
вв виде
трех
пересекающихся
виде трех пересекающихся
кружков
кружков. . ВВ центре
центре пересечения
пересечения
эти
три
цвета
в
сумме
дают
эти три цвета в сумме даютбелый
белый
цвет
цвет. . Попарное
Попарное пересечение
пересечение
смежных
кружков
дает
смежных
кружков
дает
дополнительные
цвета
:
Y
дополнительные цвета: Y - желтый
желтый (Yellow);
(Yellow); CC - - голубой
голубой
(Cyan);
M
–
пурпурный
(Magenta).
(Cyan); M – пурпурный (Magenta).
Закрыть справку
14
Начала Web-дизайна
Web-дизайна
Как получить нужный цвет из
красного, зеленого и синего?
R
G
B
= 255 + 255 + 255
R
G
B
= 255 + 255 + 0
Каждый
Каждыйиз
изтрех
трех
цветовых
цветовых
компонентов
компонентовRGB
RGB
может
принимать
может принимать
одно
одноиз
из256
256значений
значений
––от
максимальной
от максимальной
интенсивности
интенсивности(255,
(255,
255,
255
–
белый)
255, 255 – белый)до
до
нулевой
нулевой
интенсивности
интенсивности(000,
(000,
000,
000
–
черный).
000, 000 – черный).
Т.е.
Т.е.абсолютно
абсолютнолюбой
любой
цвет
и
оттенок
цвета
цвет и оттенок цвета
мы
мыможем
можемполучить
получить
сочетанием
сочетаниемкрасного,
красного,
зеленого
зеленогоиисинего
синего
цветов
цветовввразличных
различных
пропорциях
пропорциях
Закрыть справку
R
G
B
= 0 + 0 + 0
R
G
B
= 45 + 181 + 45
15
Начала Web-дизайна
Web-дизайна
Подбор цвета в графическом редакторе
Любой графический
редактор позволяет
определить нужный
вам цвет как «на
глаз»,
так и задав его в
формате
RGB в десятичной
или в
шестнадцатеричной
системе счисления.
= (255, 255, 255)
= (255, 255, 0)
= (221, 221, 221)
= (0, 0, 0)
= (240, 118, 125)
= (0, 153, 0)
Закрыть справку
16
Начала Web-дизайна
Web-дизайна
Характеристики цвета
Тон
Тон
Тон(hue) —
(hue) —одна
однаиз
източек
точекцветового
цветовогокруга,
круга,максимально
максимальнояркая
яркая
иинасыщенная.
насыщенная.
Насыщенность
Насыщенность
Насыщенность(saturation) —
(saturation) —соотношение
соотношениеосновного
основногоцвета
цветаии
такого
такогоже
жепо
пояркости
яркостисерого.
серого.
Яркость
Яркость
Яркость(value)
(value) —
—общая
общаяяркость
яркостьцвета
цвета(крайние
(крайниепозиции —
позиции —
черный
черныйиимаксимально
максимальнояркий
яркийтоновый).
тоновый).
Закрыть справку
17
Начала Web-дизайна
Web-дизайна
Цветовые схемы
Зная
Зная особенности
особенности
восприятия
восприятия
каждого
каждого цвета
цвета ии
Близлежащие цвета
цветовых
цветовых
сочетаний,
сочетаний, можно
можно
построить
целый
построить целый
ряд
Противоположные (дополняющие) цвета
ряд готовых
готовых схем.
схем.
Каждая
из
этих
Каждая из этих
схем,
будучи
схем,
будучи
воплощенной
вв
воплощенной
жизнь, звучит
звучит попоОдин цвет разной насыщенности жизнь,
своему,
вносит
своему,
вносит
определенное
определенное
настроение
вв
настроение
композицию.
композицию.
Цветовая схема кленовых листьев
Закрыть справку
18
Начала Web-дизайна
Web-дизайна
Восприятие цвета
Цвет
Цвет- -это
этоэмоции
эмоции
иинастроение.
настроение.Вы
Вы
можете
взбодрить
можете взбодрить
зрителя,
зрителя,навеять
навеять
на
него
осеннее
на него осеннее
или
иливесеннее
весеннее
настроение…
настроение…
«Престижные»
«Пастельные»
«Здоровые»
«Природные»
Закрыть справку
19
20