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

Разработка урока информатики в 10 классе по теме

«Цветовые модели RGB, CMYK, HSB»

выполнена учителем информатики ГБОУ СОШ № 1200

с углубленным изучением английского языка

Сергеевой Г. В.

1. Место урока в курсе. Тема «Информация. Кодирование информации» в

10 классе рассчитана на 17 часов (1 урок в неделю). Тема включает разделы: "Двоичное

кодирование информации. Принцип Фано", "Кодировние текстовой информации.

Формулы Шеннона и Хартли", "Кодирование графической информации", "Кодирование

звуковой и видеоинформации", "Кодирование числовой информации". На раздел

"Кодирование графической информации" отведено 3 урока. Данный урок является вторым

по счёту в разделе "Кодирование графической информации". На предыдущем уроке

учащиеся освоили следующие знания и навыки:

Знают:

– как происходит дискретизация растровых графических изображений;

– что такое информационный объём растрового изображения, графическое

разрешение, глубина кодирования цвета, количество цветов в палитре, объём

видеопамяти;

– основные возможности и инструменты графического редактора MS Paint.

Умеют:

– решать задачи на вычисление информационного объёма растрового изображения;

– определять количество цветов в палитре, если известен информационный объём

изображения и его размер в пикселях;

– переводить целые числа из десятичной системы счисления в двоичную,

восьмеричную, шестнадцатеричную и другие позиционные системы и обратно;

– переводить целые числа из двоичной системы счисления в шестнадцатеричную и

обратно;

– создавать и редактировать растровые изображения в растровом графическом

редакторе MS Paint.

В качестве домашнего задания к данному уроку были даны 3 задачи: на вычисление

информационного объёма растрового изображения, на определение количества цветов в

палитре и на определение размера растрового рисунка в пикселях. Кроме этого, было

задано прочитать материал из файла, прикреплённого в электронном журнале: "Цветовые

модели" и "Форматы графических файлов" (задание на опережение).

2. Цели урока.

Обучающая: сформировать представление о цветовых моделях RGB, CMYK, HSB, а

также понимание того, где и с какой целью используются эти модели.

Развивающая: расширить представление о роли цвета в практической деятельности

человека, в частности, в профессии дизайнера. Дать стимул к дальнейшему

самостоятельному изучению вопроса.

Воспитательная: добиваться получения результата, анализировать и оценивать

результаты своей работы; воспитание общей информационной культуры.

3. Задачи:

– научить записывать коды чистых и смешанных цветов палитры True Color в

двоичной, десятичной и шестнадцатеричной системах счисления;

– научить генерировать цвета в графическом редакторе с помощью модели RGB;

– научить принципам смешивания компонент R, G, B для получения сложных

цветов.

4. Тип урока – комбинированный. Сделана попытка организовать "перевёрнутый"

урок: ученики читают дома теоретический материал, формулируют вопросы к учителю.

Учитель отвечает на вопросы, систематизирует материал. Затем ученики выполняют

практическую работу.

5. Этапы урока:

– проверка домашнего задания;

– организационный (постановка целей и задач урока);

– систематизация материала, с которым ученики работали дома; разбор примеров

записи кодов чистых и смешанных цветов в системе RGB;

– краткая информация о разработках института Pantone (США), мировом

законодателе моды на цвета; просмотр презентации "Модные цвета сезона осень-зима

2016-2017 года";

– практическая работа в среде MS Paint по подбору цветов с помощью модели RGB

для предложенных образцов (модные цвета сезона осень-зима 2016-2017 г.г.).

6. Оценка результатов. В системе оценки результатов урока выделяется два

уровня:

– первый уровень: самооценка. Учащиеся подбирают 10 цветов самостоятельно,

записывают результаты в карточку, затем определяют те же самые цвета с помощью

инструмента копирования цвета (инструмент "палитра"), также записывают их в карточку

и сравнивают свои результаты с полученными методом копирования цветами.

– второй уровень: оценка учителя. Учитель к следующему уроку проверяет

карточки, выставляет оценки. Так как точного совпадения цветов, подобранных

учениками, и полученных копированием не может быть, основным критерием является

подбор серого цвета (доли компонент R, G, B должны быть равны), а также

приблизительное соответствие подобранных и скопированных цветов. Наибольшая

корреляция подобранных и скопированных цветов наблюдается у учеников,

занимающихся в художественной школе.

Взаимная оценка результатов в данной практической работе не использовалась.

7. Методы обучения, используемые на уроке:

– "перевёрнутый" урок: теоретическая часть материала прочитывается дома,

практические примеры записи кодов выполняются на уроке под руководством учителя;

– минимум-тренинг (отработка минимального уровня знаний в соответствии с

ФГОС);

– практическая работа (выполняется индивидуально).

– стимулирование к дальнейшему самостоятельному изучению проблемы.

8. Формы работы с учащимися на уроке:

– фронтальная беседа с классом;

– самостоятельная практическая работа учащихся на компьютере.

9. Оборудование и программное обеспечение: 15 персональных компьютеров,

интерактивная доска, растровый графический редактор MS Paint, презентация и

иллюстративный материал, подготовленные учителем (презентация демонстрируется на

интерактивной доске, изображения моделей в формате .jpg размещены на компьютерах

учащихся).

Ход урока

1. Приветствие. Организационный момент. Проверка домашнего задания.

Проверяется наличие домашнего задания, ответы в задачах, учитель отвечает на

вопросы по домашнему заданию.

2. Постановка целей и задач урока.

Сегодня на уроке мы должны разобраться, как формируется цветное изображение на

экране монитора, чем различаются цветовые модели RGB, CMYK и HSB и в каких

случаях применяется каждая из них. Также мы должны научиться записывать коды

базовых чистых цветов и ряда смешанных цветов палитры True Color (глубина

кодирования цвета равна 24 битам) в двоичной, десятичной и шестнадцатеричной

системах счисления.

Во второй половине урока вы поработаете дизайнерами и попробуете подобрать

десятку модных цветов сезона осень-зима 2016-2017 г.г. с помощью цветовой модели

RGB в графическом редакторе MS Paint.

3. Актуализация знаний (минимум-тренинг).

Давайте вспомним, из чего состоит видеосистема персонального компьютера.

(Монитор + видеокарта (видеоадаптер)).

Что, в свою очередь, входит в состав видеоадаптера?

(Видеопроцессор и видеопамять).

Какие типы мониторов вы знаете?

(На электронно-лучевой трубке и жидкокристаллические).

Мы не будем углубляться в физические принципы устройства LCD-мониторов, это

выходит за рамки нашего курса. Отметим только, что используется специальное вязкое

вещество – жидкокристаллическая матрица, помещённое между двумя пластинами. На

пластины наносятся проводники во взаимно перпендикулярных направлениях, а также две

специальные плёнки, поляризующие свет в разных направлениях. В том месте, где к

жидким кристаллам приложено напряжение, они изменят плоскость поляризации света и

свет сможет пройти через обе пленки. В итоге получится простейший LCD-монитор. Если

снабдить его сеткой цветных светофильтров и добавить подсветку с обратной стороны,

получится цветной LCD монитор.

Вся площадь экрана LCD монитора разделена на квадратики. Каждый квадратик

разделен на три прямоугольника, светящихся соответственно красным, зеленым и синим

цветом. Светящиеся прямоугольники занимают практически всю площадь квадратиков, а

квадратики в свою очередь, занимают всю площадь экрана. При этом квадратики имеют

не условно, а ярко выраженную квадратную форму.

Согласно современному представлению о цветном зрении (теории

Юнга – Гельмгольца), глаз человека содержит чувствительные элементы (рецепторы) трёх

типов. Каждый из них воспринимает весь поток света, но первые наиболее чувствительны

в области красного цвета, вторые в области зелёного цвета, а третьи – в области синего

цвета. Цвет – это результат возбуждения всех трёх типов рецепторов. Поэтому считается,

что любой цвет (то есть ощущения человека, воспринимающего волны определённой

длины), можно имитировать, используя только три световых луча (красный, зелёный и

синий) разной яркости. Следовательно, любой цвет (в том числе и белый приближённо

раскладывается на три составляющих – красную, зелёную и синюю). Изменяя

интенсивность этих составляющих, можно составить любые цвета. Эта модель цвета

получила название RGB по начальным буквам английских слов "red" (красный), "green"

(зелёный) и "blue" (синий).

Цвет каждого пикселя закодирован в видеопамяти двоичным кодом. Длина кода равна

битовой глубине цвета (I). Цветное изображение можно получить, начиная с I=3 бита. При

этом количество цветов в палитре K определяется по формуле: K=2

Мы рассмотрим системы цветов с глубиной кодирования цвета, равной 3 битам и

24 битам. С принципами формирования других палитр можно ознакомиться, изучив файл

"Цветовые модели".

На интерактивную доску выводится заранее подготовленная таблица.

Таблица 1 – Коды цветов

Глубина

кодирования

цвета

I, бит

Количество цветов

K=2

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)

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

Изначально коды в таблице не записаны. Учитель записывает код красного цвета в

трёх системах счисления, ученики записывают коды чистого зелёного и чистого синего

цветов. Учитель записывает код белого цвета, ученики – код чёрного цвета. Учитель

объясняет принцип получения смешанных цветов (жёлтый = красный + зелёный;

голубой = зелёный + синий; пурпурный = красный + синий). Ученики под контролем

учителя записывают коды этих цветов. Учитель объясняет, что все оттенки серого цвета

получаются при равных долях красного, зелёного и синего, причём, чем больше в коде

нулей, тем цвет темнее, чем больше единиц, тем светлее (биты, стоящие левее, вносят

бОльший вклад в степень темноты или светлоты). Учитель записывает код тёмно-серого

цвета, ученики – код светло-серого цвета. Ученики самостоятельно записывают код

фиолетового (тёмно-пурпурного цвета).

Учитель поясняет, что в видеопамяти коды пикселей хранятся в двоичной системе

счисления, в компьютерной литературе и в языке 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 года".

5. Практическая работа. Учащимся объявляется путь доступа к растровым

изображениям, содержащимся в презентации и предлагается сначала подобрать цвет

самостоятельно на основе модели RGB в среде растрового редактора MS Paint, а затем

получить его копированием с помощью инструмента точного копирования цвета

(палитра) и сравнить полученные результаты. Тройки чисел нужно внести в таблицы,

которые раздаются учащимся. Если по времени ученик не успевает определить все

10 цветов, допускается определение меньшего количества, но обязательным условием

является описание серого цвета.

Таблица 2 – Результаты практической работы

Класс _______ Фамилия, имя ____________________

ПРАКТИЧЕСКАЯ РАБОТА

"Определение цветов методом RGB"

Оригинальное

название

Перевод

Подобранный цвет

Скопированный цвет

Riverside

Прибрежная полоса

Airy Blue

Воздушный голубой

Sharkskin

Акулья кожа

Spicy Mustard

Пряная горчица

Potter´s Clay

Гончарная глина

Warm Taupe

Тёплый серо-коричневый

Lush Meadow

Пышный луг

Dusty Cedar

Пыльный кедр

Aurora Red

Утренняя заря

Bodacious

Безрассудный

6. Самоконтроль, оценка учителя.

В качестве самоконтроля учащиеся сопоставляют тройки чисел в колонке

"Подобранный цвет" с соответствующими тройками чисел в колонке "Скопированный

цвет". Учитель предупреждает, что эти тройки не могут и не должны совпадать точно, так

как восприятие цвета индивидуально, а на модели цвета могут различаться из-за

различной освещённости разных частей платья или костюма.

Учитель проверяет карточки с результатами практической работы к следующему

уроку. Оценка снижается только за неправильное определение серого цвета. Наибольшей

степенью корреляции отличаются работы учеников, занимающихся в художественной

школе.

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 г."

В соответствии с требованиями ФГОС ниже приводится технологическая карта

урока.

Этап урока

Функции учащихся

Функция учителя

УУД

(универсальные

учебные действия)

Проверка домашнего

задания

Сверяют ответы задач.

В случае неверного

ответа неявно указы-

вает на ошибку:

"Проверь формулу",

"Обрати внимание на

единицы измерения",

"Проверь вычисления".

Коммуникативные,

познавательные.

Объявление темы урока,

сообщение целей и задач

Записывают тему урока.

Подводит к осознанию

темы, формулирует

цели и задачи, заинте-

ресовывает учеников

неожиданным содержа-

нием практической

работы.

Регулятивные,

целеполагание.

Актуализация знаний

Сверяют правильность

понимания материала,

прочитанного дома, задают

вопросы учителю,

корректируют действия

товарищей.

Помогает системати-

зировать материал,

формулировать

выводы.

Познавательные,

регулятивные.

Информация об исполь-

зовании приобретённых

знаний в работе

дизайнера.

Расширяют границы позна-

ния, смотрят презентацию.

Демонстрирует воз-

можности применения

полученных знаний в

практической деятель-

ности, стимулирует к

дальнейшему самосто-

ятельному изучению

вопроса.

Познавательные,

регулятивные.

Практическая работа на

компьютере

Выполняют практическую

работу на компьютере,

осуществляют самоконт-

роль.

Консультирует.

Регулятивные,

коммуникативные,

самоконтроль

Домашнее задание.

Могут выбирать задание из

предложенных учителем с

учётом индивидуальных

возможностей.

Предоставляет выбор.

Познавательные,

регулятивные,

контроль.

Самоанализ урока

Цели урока достигнуты, задачи выполнены. Идея "перевёрнутого" урока реализована только для тех

учащихся, кто выполнял домашнее задание (примерно 60% группы). Для остальных требуется

дополнительная корректировка и контроль на следующем уроке. Информация о роли цвета в работе

дизайнера и о существовании института Pantone оказалась абсолютно новой для всей группы, вызвала

интерес и эмоциональный отклик. Два ученика пытались искать дополнительную информацию в Интернете,

но презентацию не подготовил никто (возможно, играет роль загруженность учеников). По результатам

работы выставлены только оценки "4" и "5". Оценка снижалась за неправильное определение серого цвета

(не соблюдено соотношение R=G=B). Умение записывать коды цветов в разных системах счисления будет

проверено на следующем уроке с помощью небольшой самостоятельной работы.

Скачать материал

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

Информатика - еще материалы к урокам:

Предметы

Похожие материалы