Разработка урока "Цветовые модели RGB, CMYK, HSB" 10 класс

1
Разработка урока информатики в 10 классе по теме
«Цветовые модели RGB, CMYK, HSB»
выполнена учителем информатики ГБОУ СОШ № 1200
с углубленным изучением английского языка
Сергеевой Г. В.
1. Место урока в курсе. Тема «Информация. Кодирование информации» в
10 классе рассчитана на 17 часов (1 урок в неделю). Тема включает разделы: "Двоичное
кодирование информации. Принцип Фано", "Кодировние текстовой информации.
Формулы Шеннона и Хартли", "Кодирование графической информации", "Кодирование
звуковой и видеоинформации", "Кодирование числовой информации". На раздел
"Кодирование графической информации" отведено 3 урока. Данный урок является вторым
по счёту в разделе "Кодирование графической информации". На предыдущем уроке
учащиеся освоили следующие знания и навыки:
Знают:
как происходит дискретизация растровых графических изображений;
что такое информационный объём растрового изображения, графическое
разрешение, глубина кодирования цвета, количество цветов в палитре, объём
видеопамяти;
основные возможности и инструменты графического редактора MS Paint.
Умеют:
решать задачи на вычисление информационного объёма растрового изображения;
определять количество цветов в палитре, если известен информационный объём
изображения и его размер в пикселях;
переводить целые числа из десятичной системы счисления в двоичную,
восьмеричную, шестнадцатеричную и другие позиционные системы и обратно;
переводить целые числа из двоичной системы счисления в шестнадцатеричную и
обратно;
создавать и редактировать растровые изображения в растровом графическом
редакторе MS Paint.
В качестве домашнего задания к данному уроку были даны 3 задачи: на вычисление
информационного объёма растрового изображения, на определение количества цветов в
палитре и на определение размера растрового рисунка в пикселях. Кроме этого, было
задано прочитать материал из файла, прикреплённого в электронном журнале: "Цветовые
модели" и "Форматы графических файлов" (задание на опережение).
2. Цели урока.
Обучающая: сформировать представление о цветовых моделях RGB, CMYK, HSB, а
также понимание того, где и с какой целью используются эти модели.
Развивающая: расширить представление о роли цвета в практической деятельности
человека, в частности, в профессии дизайнера. Дать стимул к дальнейшему
самостоятельному изучению вопроса.
Воспитательная: добиваться получения результата, анализировать и оценивать
результаты своей работы; воспитание общей информационной культуры.
2
3. Задачи:
научить записывать коды чистых и смешанных цветов палитры True Color в
двоичной, десятичной и шестнадцатеричной системах счисления;
научить генерировать цвета в графическом редакторе с помощью модели RGB;
научить принципам смешивания компонент R, G, B для получения сложных
цветов.
4. Тип урока комбинированный. Сделана попытка организовать "перевёрнутый"
урок: ученики читают дома теоретический материал, формулируют вопросы к учителю.
Учитель отвечает на вопросы, систематизирует материал. Затем ученики выполняют
практическую работу.
5. Этапы урока:
проверка домашнего задания;
организационный (постановка целей и задач урока);
систематизация материала, с которым ученики работали дома; разбор примеров
записи кодов чистых и смешанных цветов в системе RGB;
краткая информация о разработках института Pantone (США), мировом
законодателе моды на цвета; просмотр презентации "Модные цвета сезона осень-зима
2016-2017 года";
практическая работа в среде MS Paint по подбору цветов с помощью модели RGB
для предложенных образцов (модные цвета сезона осень-зима 2016-2017 г.г.).
6. Оценка результатов. В системе оценки результатов урока выделяется два
уровня:
первый уровень: самооценка. Учащиеся подбирают 10 цветов самостоятельно,
записывают результаты в карточку, затем определяют те же самые цвета с помощью
инструмента копирования цвета (инструмент "палитра"), также записывают их в карточку
и сравнивают свои результаты с полученными методом копирования цветами.
второй уровень: оценка учителя. Учитель к следующему уроку проверяет
карточки, выставляет оценки. Так как точного совпадения цветов, подобранных
учениками, и полученных копированием не может быть, основным критерием является
подбор серого цвета (доли компонент R, G, B должны быть равны), а также
приблизительное соответствие подобранных и скопированных цветов. Наибольшая
корреляция подобранных и скопированных цветов наблюдается у учеников,
занимающихся в художественной школе.
Взаимная оценка результатов в данной практической работе не использовалась.
7. Методы обучения, используемые на уроке:
"перевёрнутый" урок: теоретическая часть материала прочитывается дома,
практические примеры записи кодов выполняются на уроке под руководством учителя;
минимум-тренинг (отработка минимального уровня знаний в соответствии с
ФГОС);
практическая работа (выполняется индивидуально).
стимулирование к дальнейшему самостоятельному изучению проблемы.
3
8. Формы работы с учащимися на уроке:
фронтальная беседа с классом;
самостоятельная практическая работа учащихся на компьютере.
9. Оборудование и программное обеспечение: 15 персональных компьютеров,
интерактивная доска, растровый графический редактор MS Paint, презентация и
иллюстративный материал, подготовленные учителем (презентация демонстрируется на
интерактивной доске, изображения моделей в формате .jpg размещены на компьютерах
учащихся).
Ход урока
1. Приветствие. Организационный момент. Проверка домашнего задания.
Проверяется наличие домашнего задания, ответы в задачах, учитель отвечает на
вопросы по домашнему заданию.
2. Постановка целей и задач урока.
Сегодня на уроке мы должны разобраться, как формируется цветное изображение на
экране монитора, чем различаются цветовые модели RGB, CMYK и HSB и в каких
случаях применяется каждая из них. Также мы должны научиться записывать коды
базовых чистых цветов и ряда смешанных цветов палитры True Color (глубина
кодирования цвета равна 24 битам) в двоичной, десятичной и шестнадцатеричной
системах счисления.
Во второй половине урока вы поработаете дизайнерами и попробуете подобрать
десятку модных цветов сезона осень-зима 2016-2017 г.г. с помощью цветовой модели
RGB в графическом редакторе MS Paint.
3. Актуализация знаний (минимум-тренинг).
Давайте вспомним, из чего состоит видеосистема персонального компьютера.
(Монитор + видеокарта (видеоадаптер)).
Что, в свою очередь, входит в состав видеоадаптера?
(Видеопроцессор и видеопамять).
Какие типы мониторов вы знаете?
(На электронно-лучевой трубке и жидкокристаллические).
Мы не будем углубляться в физические принципы устройства LCD-мониторов, это
выходит за рамки нашего курса. Отметим только, что используется специальное вязкое
вещество жидкокристаллическая матрица, помещённое между двумя пластинами. На
пластины наносятся проводники во взаимно перпендикулярных направлениях, а также две
специальные плёнки, поляризующие свет в разных направлениях. В том месте, где к
жидким кристаллам приложено напряжение, они изменят плоскость поляризации света и
свет сможет пройти через обе пленки. В итоге получится простейший LCD-монитор. Если
снабдить его сеткой цветных светофильтров и добавить подсветку с обратной стороны,
получится цветной LCD монитор.
Вся площадь экрана LCD монитора разделена на квадратики. Каждый квадратик
разделен на три прямоугольника, светящихся соответственно красным, зеленым и синим
цветом. Светящиеся прямоугольники занимают практически всю площадь квадратиков, а
квадратики в свою очередь, занимают всю площадь экрана. При этом квадратики имеют
не условно, а ярко выраженную квадратную форму.
4
Согласно современному представлению о цветном зрении (теории
Юнга Гельмгольца), глаз человека содержит чувствительные элементы (рецепторы) трёх
типов. Каждый из них воспринимает весь поток света, но первые наиболее чувствительны
в области красного цвета, вторые в области зелёного цвета, а третьи в области синего
цвета. Цвет это результат возбуждения всех трёх типов рецепторов. Поэтому считается,
что любой цвет (то есть ощущения человека, воспринимающего волны определённой
длины), можно имитировать, используя только три световых луча (красный, зелёный и
синий) разной яркости. Следовательно, любой цвет том числе и белый приближённо
раскладывается на три составляющих красную, зелёную и синюю). Изменяя
интенсивность этих составляющих, можно составить любые цвета. Эта модель цвета
получила название RGB по начальным буквам английских слов "red" (красный), "green"
(зелёный) и "blue" (синий).
Цвет каждого пикселя закодирован в видеопамяти двоичным кодом. Длина кода равна
битовой глубине цвета (I). Цветное изображение можно получить, начиная с I=3 бита. При
этом количество цветов в палитре K определяется по формуле: K=2
I
.
Мы рассмотрим системы цветов с глубиной кодирования цвета, равной 3 битам и
24 битам. С принципами формирования других палитр можно ознакомиться, изучив файл
"Цветовые модели".
На интерактивную доску выводится заранее подготовленная таблица.
Таблица 1 Коды цветов
Глубина
кодирования
цвета
I, бит
Количество цветов
K=2
I
3
8 цветов: R G B
0 0 0 чёрный (Black)
1 0 0 красный (Red)
0 1 0 зелёный (Green)
0 0 1 синий (Blue)
1 1 0 жёлтый (Yellow)
0 1 1 голубой (Cyan)
1 0 1 пурпурный (Magenta)
1 1 1 белый (White)
24
16 777 216 цветов: RRRRRRRRGGGGGGGGBBBBBBBB
256 оттенков красного, 256 оттенков зелёного и 256 оттенков синего (True Color)
Цвет
Двоичный код
Десятичный
код
Шестнадцатеричный
код
Красный
111111110000000000000000
(255, 0, 0)
#FF0000
Зелёный
000000001111111100000000
(0, 255, 0)
#00FF00
Синий
000000000000000011111111
(0, 0, 255)
#0000FF
Белый
111111111111111111111111
(255, 255, 255)
#FFFFFF
Чёрный
000000000000000000000000
(0, 0, 0)
#000000
Тёмно-серый
010110100101101001011010
(90, 90, 90)
#5A5A5A
Светло-серый
111000101110001011100010
(226, 226, 226)
#E2E2E2
Жёлтый
111111111111111100000000
(255, 255, 0)
#FFFF00
Голубой
000000001111111111111111
(0, 255, 255)
#00FFFF
Пурпурный
111111110000000011111111
(255, 0, 255)
#FF00FF
Фиолетовый
100000000000000010000000
(128, 0, 128)
#800080
Изначально коды в таблице не записаны. Учитель записывает код красного цвета в
трёх системах счисления, ученики записывают коды чистого зелёного и чистого синего
5
цветов. Учитель записывает код белого цвета, ученики код чёрного цвета. Учитель
объясняет принцип получения смешанных цветов (жёлтый = красный + зелёный;
голубой = зелёный + синий; пурпурный = красный + синий). Ученики под контролем
учителя записывают коды этих цветов. Учитель объясняет, что все оттенки серого цвета
получаются при равных долях красного, зелёного и синего, причём, чем больше в коде
нулей, тем цвет темнее, чем больше единиц, тем светлее (биты, стоящие левее, вносят
бОльший вклад в степень темноты или светлоты). Учитель записывает код тёмно-серого
цвета, ученики код светло-серого цвета. Ученики самостоятельно записывают код
фиолетового (тёмно-пурпурного цвета).
Учитель поясняет, что в видеопамяти коды пикселей хранятся в двоичной системе
счисления, в компьютерной литературе и в языке HTML в шестнадцатеричной, а в
графических редакторах для удобства человека в десятичной системе.
Метод RGB используется для формирования цвета, излучаемого монитором. При
печати изображения на бумаге используется модель CMYK (Cyan-Magenta-Yellow-Black).
Значения C=M=Y=0 говорят о том, что на белую бумагу не наносится никакая
краска, поэтому все лучи отражаются, мы видим белый цвет. Если нанести на бумагу
краску голубого цвета, красные лучи будут поглощаться, останутся только синие и
зелёные. При наложении жёлтой, голубой и пурпурной красок теоретически должен
получиться чёрный цвет. Но краски не идеальны, поэтому вместо чёрного цвета
получается грязно-коричневый. Чтобы решить эту проблему, в набор красок добавляют
чёрную краску.
Кроме цветовых моделей RGB и CMYK, существуют и другие модели, например, HSB
(Hue тон, оттенок; Saturation насыщенность; Brightness яркость), которая ближе всего
к естественному восприятию человека. Тон это, например, красный, зелёный, синий,
фиолетовый. Насыщенность это чистота тона, при уменьшении насыщенности до нуля
получается серый цвет. Яркость определяет, насколько цвет светлый или тёмный. Любой
цвет при снижении яркости до нуля превращается в чёрный, а при увеличении яркости до
максимума в белый.
В профессиональных графических редакторах цвет представляется одновременно в
трёх моделях, в редакторе MS Paint только в двух (RGB и HSB).
4. Использование цветовых моделей в работе дизайнера.
Учитель даёт краткую справку о разработках института цвета Pantone (США),
являющегося мировым законодателем моды на цвета. Два раза в год институт
представляет разработку десяти актуальных цветов (сезон зима-осень и весна-лето). Все
производители модной одежды придерживаются этих рекомендаций. До 2016 года
институт разрабатывал отдельно десятку цветов для женской и десятку цветов для
мужской одежды. Начиная с 2016 года, производителям одежды представляется единая
десятка модных цветов. Учитель объясняет, что в современном дизайне используются
сложные цвета, назвать словами большое количество цветов невозможно, да и каждый
человек может представить оттенок цвета по-своему, а тройка чисел RGB позволяет
воспроизвести цвет однозначно. Компьютерное воспроизведение цвета используется не
только в дизайне одежды, но и, например, при подборе цвета краски для автомобиля.
Учитель демонстрирует презентацию "10 модных цветов сезона осень-зима
2016-2017 года".
6
5. Практическая работа. Учащимся объявляется путь доступа к растровым
изображениям, содержащимся в презентации и предлагается сначала подобрать цвет
самостоятельно на основе модели RGB в среде растрового редактора MS Paint, а затем
получить его копированием с помощью инструмента точного копирования цвета
(палитра) и сравнить полученные результаты. Тройки чисел нужно внести в таблицы,
которые раздаются учащимся. Если по времени ученик не успевает определить все
10 цветов, допускается определение меньшего количества, но обязательным условием
является описание серого цвета.
Таблица 2 Результаты практической работы
Класс _______ Фамилия, имя ____________________
ПРАКТИЧЕСКАЯ РАБОТА
"Определение цветов методом RGB"
Оригинальное
название
Перевод
Подобранный цвет
Скопированный цвет
R
G
B
R
G
B
Riverside
Прибрежная полоса
Airy Blue
Воздушный голубой
Sharkskin
Акулья кожа
Spicy Mustard
Пряная горчица
Potter´s Clay
Гончарная глина
Warm Taupe
Тёплый серо-коричневый
Lush Meadow
Пышный луг
Dusty Cedar
Пыльный кедр
Aurora Red
Утренняя заря
Bodacious
Безрассудный
6. Самоконтроль, оценка учителя.
В качестве самоконтроля учащиеся сопоставляют тройки чисел в колонке
"Подобранный цвет" с соответствующими тройками чисел в колонке "Скопированный
цвет". Учитель предупреждает, что эти тройки не могут и не должны совпадать точно, так
как восприятие цвета индивидуально, а на модели цвета могут различаться из-за
различной освещённости разных частей платья или костюма.
Учитель проверяет карточки с результатами практической работы к следующему
уроку. Оценка снижается только за неправильное определение серого цвета. Наибольшей
степенью корреляции отличаются работы учеников, занимающихся в художественной
школе.
7
7. Домашнее задание.
Размещается в электронном журнале к следующему уроку.
1. Установите соответствие между кодами цветов и их названиями (соедините линиями).
Код цвета
Название цвета
#0000FF
средней яркости серый
#00FF00
почти чёрный
#808080
тёмно-синий
#C0C0C0
светло-серый
#010101
синий
#000080
зелёный
2. Для кодирования фона страницы Интернет используется атрибут
bgcolor="XXXXXX", где в кавычках задаются шестнадцатеричные значения
интенсивности цветовых компонент в 24-битной RGB-модели. Какой цвет будет у
страницы, заданной тегом <body bgcolor="#FFFFFF">?
1) Белый
2) Зелёный
3) Красный
4) Синий
3. Для кодирования фона страницы Интернет используется атрибут
bgcolor="XXXXXX", где в кавычках задаются шестнадцатеричные значения
интенсивности цветовых компонент в 24-битной RGB-модели. Какой цвет будет у
страницы, заданной тегом <body bgcolor="#404000">?
1) Серый
2) Фиолетовый
3) Тёмно-красный
4) Коричневый
4. Для кодирования фона страницы Интернет используется атрибут
bgcolor="XXXXXX", где в кавычках задаются шестнадцатеричные значения
интенсивности цветовых компонент в 24-битной RGB-модели. Какой цвет будет у
страницы, заданной тегом <body bgcolor="#800080">?
1) Серый
2) Фиолетовый
3) Тёмно-красный
4) Коричневый
5. По желанию: создать презентацию "Разработка института Pantone. Сезон весна-
лето 2017 г."
8
В соответствии с требованиями ФГОС ниже приводится технологическая карта
урока.
Этап урока
Функции учащихся
Функция учителя
УУД
(универсальные
учебные действия)
Проверка домашнего
задания
Сверяют ответы задач.
В случае неверного
ответа неявно указы-
вает на ошибку:
"Проверь формулу",
"Обрати внимание на
единицы измерения",
"Проверь вычисления".
Коммуникативные,
познавательные.
Объявление темы урока,
сообщение целей и задач
Записывают тему урока.
Подводит к осознанию
темы, формулирует
цели и задачи, заинте-
ресовывает учеников
неожиданным содержа-
нием практической
работы.
Регулятивные,
целеполагание.
Актуализация знаний
Сверяют правильность
понимания материала,
прочитанного дома, задают
вопросы учителю,
корректируют действия
товарищей.
Помогает системати-
зировать материал,
формулировать
выводы.
Познавательные,
регулятивные.
Информация об исполь-
зовании приобретённых
знаний в работе
дизайнера.
Расширяют границы позна-
ния, смотрят презентацию.
Демонстрирует воз-
можности применения
полученных знаний в
практической деятель-
ности, стимулирует к
дальнейшему самосто-
ятельному изучению
вопроса.
Познавательные,
регулятивные.
Практическая работа на
компьютере
Выполняют практическую
работу на компьютере,
осуществляют самоконт-
роль.
Консультирует.
Регулятивные,
коммуникативные,
самоконтроль
Домашнее задание.
Могут выбирать задание из
предложенных учителем с
учётом индивидуальных
возможностей.
Предоставляет выбор.
Познавательные,
регулятивные,
контроль.
Самоанализ урока
Цели урока достигнуты, задачи выполнены. Идея "перевёрнутого" урока реализована только для тех
учащихся, кто выполнял домашнее задание (примерно 60% группы). Для остальных требуется
дополнительная корректировка и контроль на следующем уроке. Информация о роли цвета в работе
дизайнера и о существовании института Pantone оказалась абсолютно новой для всей группы, вызвала
интерес и эмоциональный отклик. Два ученика пытались искать дополнительную информацию в Интернете,
но презентацию не подготовил никто (возможно, играет роль загруженность учеников). По результатам
работы выставлены только оценки "4" и "5". Оценка снижалась за неправильное определение серого цвета
(не соблюдено соотношение R=G=B). Умение записывать коды цветов в разных системах счисления будет
проверено на следующем уроке с помощью небольшой самостоятельной работы.