Компьютерная графика: растровые и векторные изображения
Цели и задачи
- Цель по SMART: к концу урока научиться различать растровую и векторную компьютерную графику по способу представления изображения, объяснять особенности пиксельной и объектной моделей и выбирать подходящий вид графики для конкретной практической задачи.
- Сформировать представление о компьютерной графике как области информатики, связанной с созданием, хранением, изменением и отображением изображений с помощью компьютера.
- Научиться объяснять, что растровое изображение состоит из пикселей, а векторное — из геометрических объектов, и приводить примеры их применения.
- Развивать умение анализировать изображение по его признакам, работать с цифровой информацией, аргументировать собственный выбор и сотрудничать в парах.
- Воспитывать ответственное отношение к цифровому контенту, аккуратность при работе с графическими файлами и интерес к профессиям, связанным с дизайном, программированием и визуализацией данных.
Планируемые результаты
Личностные
- Проявляют интерес к возможностям компьютерной графики и связывают изучаемые знания с деятельностью дизайнера, архитектора, разработчика игр или инженера.
- Осознают значение цифровых изображений в учебной, профессиональной и повседневной деятельности.
- Понимают необходимость уважительного и ответственного использования чужих графических материалов.
- Развивают самостоятельность при выборе способа представления изображения и готовность аргументировать принятое решение.
Метапредметные
- Выделяют существенные признаки растровой и векторной графики, сравнивают модели и делают выводы на основе наблюдений.
- Работают с информацией на экране и в раздаточном материале, преобразуют наблюдения в таблицу сравнения.
- Формулируют учебную цель, планируют действия, проверяют себя по критериям и корректируют ошибочные выводы.
- Участвуют в обсуждении, задают уточняющие вопросы, слушают позицию одноклассника и аргументированно защищают собственное решение.
Предметные
- Знать понятие компьютерной графики и основные области её применения.
- Знать, что растровое изображение формируется из пикселей, а векторное — из линий, кривых, геометрических фигур и других объектов.
- Уметь объяснять влияние увеличения масштаба на качество растрового и векторного изображения.
- Уметь выбирать растровый или векторный способ представления для фотографии, логотипа, схемы, карты и иллюстрации.
- Владеть базовыми понятиями «пиксель», «размер изображения», «масштаб», «графический объект».
Универсальные учебные действия (УУД)
Личностные УУД
- Осознают личную значимость умения работать с цифровыми изображениями для учёбы и будущей профессиональной деятельности.
- Проявляют познавательный интерес к исследованию способов создания изображений.
- Оценивают собственную готовность использовать цифровые инструменты аккуратно и ответственно.
- Формируют уважительное отношение к результатам творческой работы других людей.
Регулятивные УУД
- Самостоятельно формулируют цель исследования после обнаружения различий между изображениями.
- Планируют последовательность действий при анализе примеров компьютерной графики.
- Сопоставляют полученный вывод с эталонной таблицей и находят собственные ошибки.
- Оценивают результат работы по критериям: правильность классификации, наличие объяснения и точность терминов.
Познавательные УУД
- Наблюдают за изменением изображения при увеличении масштаба и выделяют существенные признаки.
- Сравнивают растровую и векторную модели по способу построения, качеству при масштабировании и областям применения.
- Строят простую схему «изображение — элемент — изменение при увеличении».
- Классифицируют изображения и обосновывают результат классификации.
Коммуникативные УУД
- Работают в парах по правилам распределения ролей: аналитик и докладчик.
- Формулируют вопросы к одноклассникам и дают краткие аргументированные ответы.
- Согласуют общий вывод в ситуации различия мнений.
- Представляют результат работы пары классу, используя изученные термины.
Подготовка учителя к уроку
- Подготовить презентацию с двумя одинаковыми изображениями: фотографией и простым логотипом, каждое показать сначала в обычном масштабе, затем с увеличением.
- Подготовить на экране или доске изображения фотографии, пиксельного фрагмента, логотипа, схемы, карты и иллюстрации.
- Распечатать по одному комплекту карточек на пару: 6 изображений для классификации и 6 карточек с описаниями их свойств.
- Распечатать по одному листу на каждого ученика с таблицей «Растровая графика — Векторная графика» и мини-заданием на выбор формата.
- Подготовить стикеры двух цветов для быстрой проверки гипотез: зелёный — «растровое», синий — «векторное».
- Вывести на доску памятку: «Растр = пиксели; вектор = объекты; увеличение растра может ухудшить качество».
- Подготовить компьютер учителя, проектор или интерактивную доску, а также два заранее открытых изображения в графическом редакторе или просмотрщике.
- Подготовить карточки трёх уровней для самостоятельной работы: обязательный, базовый и повышенный варианты.
- Проверить, что изображения можно увеличить без потери времени на поиск файлов, и заранее отключить уведомления на компьютере.
Ход урока
Этап 1. Организационный момент и мотивация (4 мин)
Цель этапа: включить учащихся в исследование и показать практическую значимость компьютерной графики.
Время | Действие учителя | Действие учеников |
|---|---|---|
1 мин | Учитель приветствует класс: "Здравствуйте, ребята. Сегодня мы будем не просто слушать объяснение, а проведём небольшое цифровое исследование. Проверьте, что на столе есть тетрадь и ручка. На экране появятся изображения, а ваша задача — заметить то, что обычно скрыто от взгляда." | Проверяют готовность, открывают тетради, записывают дату. |
3 мин | Учитель показывает фотографию и логотип, затем увеличивает оба изображения: "Посмотрите внимательно. Почему фотография при увеличении превращается в набор цветных квадратиков, а контуры логотипа остаются ровными? Как вы думаете, одинаково ли компьютер хранит эти изображения? Сегодня мы проверим ваши гипотезы." Учитель предлагает приём «Подумай — обсуди в паре — поделись». | 30 секунд наблюдают молча, одну минуту обсуждают гипотезу в парах, затем формулируют ответы: "Фотография состоит из точек", "Логотип построен из линий", "Изображения могут храниться по-разному". |
Завершение этапа: учитель подводит итог: "Мы увидели проблему: изображения выглядят по-разному после увеличения. Теперь вспомним, что уже знаем о цифровой информации, и найдём знания, которых нам не хватает для объяснения этого наблюдения."
Этап 2. Актуализация знаний (5 мин)
Цель этапа: актуализировать знания о цифровой информации, файлах, изображении и масштабе.
Время | Действие учителя | Действие учеников |
|---|---|---|
2 мин | Учитель задаёт вопросы: "Что такое информация? В каком виде компьютер хранит любые данные? Что может быть графическим файлом? Что происходит, когда мы увеличиваем изображение на экране?" Учитель фиксирует ключевые слова на доске: «файл», «данные», «экран», «изображение», «масштаб». | Отвечают: "Информация — сведения об окружающем мире", "Компьютер хранит данные в цифровом виде", "Графическим файлом может быть фотография или рисунок", "При увеличении мы видим изображение крупнее". |
3 мин | Учитель показывает фрагмент изображения размером 8 на 8 условных клеток: "Представьте, что экран состоит из маленьких цветных точек. Если каждая точка имеет свой цвет, можно ли описать изображение набором таких точек? А если вместо точек записать: круг, линия, прямоугольник, можно ли описать простой рисунок иначе?" | В тетради зарисовывают маленькую сетку и отмечают цветные клетки, затем предлагают два способа описания: "перечислить точки" и "описать фигуры". |
Завершение этапа: учитель подводит итог: "Мы вспомнили, что изображение можно описывать через отдельные точки или через целые фигуры. Но пока это только гипотеза. На следующем этапе сформулируем вопрос исследования и проверим его на конкретных примерах."
Этап 3. Постановка проблемы и целеполагание (4 мин)
Цель этапа: сформулировать учебную проблему и совместно определить план открытия нового знания.
Время | Действие учителя | Действие учеников |
|---|---|---|
2 мин | Учитель показывает на экране увеличенные фотографию и логотип: "Сформулируйте вопрос, на который мы должны ответить к концу урока. Вопрос должен помочь объяснить различие между двумя изображениями." Учитель принимает несколько вариантов и уточняет формулировки. | Предлагают вопросы: "Почему изображения по-разному изменяются при увеличении?", "Как компьютер строит изображение?", "Как выбрать подходящий способ создания рисунка?". |
2 мин | Учитель объединяет ответы: "Наш главный вопрос: чем отличаются растровая и векторная компьютерная графика и где применять каждую из них? Предлагаю план: сначала исследуем элементы изображения, затем сравним две модели, после этого классифицируем реальные примеры и проверим себя." | Записывают тему урока и цель: «Научиться различать растровую и векторную графику и выбирать подходящий вид для задачи». |
Посмотрите план целиком
Зарегистрируйтесь — и откройте план урока по этой теме полностью: цели, ход урока и рефлексия по ФГОС.
Завершение этапа: учитель подводит итог: "Цель определена, план исследования есть. Теперь перейдём к главному: самостоятельно обнаружим, из каких элементов могут состоять компьютерные изображения."
Этап 4. Открытие нового знания (10 мин)
Цель этапа: открыть признаки растровой и векторной графики через наблюдение, сравнение и формулирование вывода.
Время | Действие учителя | Действие учеников |
|---|---|---|
4 мин | Учитель раздаёт парам лист с двумя увеличенными фрагментами и говорит: "Рассмотрите изображения через увеличительное окно на листе. У первого изображения найдите отдельные цветные элементы. У второго определите, какие фигуры и линии могли быть использованы для его создания. Обсудите, что является минимальным элементом каждого изображения." | Пары выделяют цветные квадратики на первом фрагменте и подписывают их «пиксели», на втором обводят линии и фигуры. Формулируют: "Минимальный элемент растра — пиксель", "Вектор состоит из объектов". |
3 мин | Учитель выводит на экран фотографию и логотип в масштабе 100%, 400% и 800%: "Сравните края изображений. Что происходит с фотографией? Что происходит с логотипом? Почему векторный объект можно пересчитать и построить заново при изменении размера?" | Заполняют первую часть таблицы сравнения, отвечают: "У растра становятся заметны квадратики и теряется чёткость", "Векторные линии остаются гладкими", "Вектор хранит описание объектов и их параметры". |
3 мин | Учитель подводит к обобщению: "Растровая модель удобна, когда важно передать множество оттенков и мелких деталей, например в фотографии. Векторная модель удобна для схем, логотипов и чертежей, где важны чёткие контуры. Не существует универсально лучшего вида — выбор зависит от задачи." Учитель записывает на доске две опорные формулы-напоминания: «растр = пиксели» и «вектор = объекты». | Дополняют таблицу признаками: способ построения, качество при увеличении, типичные области применения. Задают уточняющие вопросы и приводят собственные примеры. |
Запись в тетрадях
- Компьютерная графика — область информатики, связанная с созданием, хранением, обработкой и отображением изображений.
- Растровое изображение состоит из пикселей — маленьких цветных элементов.
- Векторное изображение состоит из графических объектов: линий, кривых, кругов, прямоугольников и других фигур.
- При сильном увеличении растрового изображения становятся заметны пиксели, а векторные объекты сохраняют гладкость контуров.
- Фотографии обычно создают в растровой графике, а логотипы, схемы и чертежи — в векторной.
Завершение этапа: учитель подводит итог: "Мы открыли две модели представления изображений и установили их главный признак. Теперь проверим новое знание на конкретных объектах и научимся объяснять свой выбор, а не просто угадывать ответ."
Этап 5. Первичное закрепление. Классификация изображений (7 мин)
Цель этапа: закрепить различение растровой и векторной графики через классификацию и аргументацию.
Время | Действие учителя | Действие учеников |
|---|---|---|
2 мин | Учитель раздаёт каждой паре шесть карточек: фотография кота, логотип спортивной команды, схема метро, цифровая живописная иллюстрация, технический чертёж и снимок поверхности планеты. Инструкция: "Разложите карточки на две группы. Не спешите: сначала определите, важны ли фотографии детали и оттенки или геометрические контуры и масштабирование." | Распределяют карточки на две группы и назначают докладчика. |
3 мин | Учитель просит применить приём «Подумай — обсуди в паре — поделись»: "Для каждой группы подготовьте одно общее правило и приведите по два примера. Если вы считаете, что изображение может быть создано обоими способами, объясните, почему." | Обсуждают решение, формулируют: "Фотография и цифровая живопись чаще растровые, потому что содержат много оттенков; логотип, схема и чертёж чаще векторные, потому что состоят из чётких объектов". |
2 мин | Учитель организует взаимопроверку: "Поднимите зелёную карточку, если согласны с классификацией, и синюю — если хотите предложить исправление. Исправление обязательно объясните термином «пиксель» или «объект»." | Сравнивают результаты двух пар, исправляют спорные карточки и записывают одно обоснование в таблицу. |
Завершение этапа: учитель подводит итог: "Теперь вы умеете не только назвать вид графики, но и доказать выбор по способу построения и назначению изображения. Далее каждый самостоятельно проверит, насколько уверенно умеет применять этот алгоритм."
Этап 6. Самостоятельная работа с самопроверкой (8 мин)
Цель этапа: проверить индивидуальное понимание признаков графических моделей и умение выбирать подходящий формат.
Время | Действие учителя | Действие учеников |
|---|---|---|
1 мин | Учитель раздаёт карточки трёх уровней: "Выберите уровень, который соответствует вашей уверенности. Обязательный уровень выполняют все. Повышенный можно выбрать, если базовое задание кажется простым. Работайте самостоятельно и подписывайте объяснение каждого ответа." | Выбирают карточку, записывают фамилию и приступают к работе. |
4 мин | Учитель предлагает задания. Обязательный уровень: определить вид графики для фотографии, значка приложения и карты погоды. Базовый уровень: объяснить, почему при увеличении фотографии заметны пиксели, а логотип сохраняет контуры. Повышенный уровень: выбрать вид графики для эмблемы школьного проекта, фотографии класса и схемы маршрута, указав возможное исключение. | Выполняют выбранный вариант, используют слова «пиксель», «объект», «масштаб», «детали», «контуры». |
3 мин | Учитель выводит эталон: "Проверьте не только итог, но и объяснение. За каждый правильный выбор поставьте один балл, ещё один балл — за точное обоснование. Ошибку не стирайте, а исправьте другим цветом." | Сверяют ответы с эталоном, подсчитывают баллы, отмечают вопросительный знак рядом с непонятным заданием. |
Эталон решения
Фотография — растровая графика, потому что изображение передаёт множество оттенков и деталей с помощью пикселей. Значок приложения — обычно векторная графика, потому что его основу составляют простые контуры и фигуры, которые нужно сохранять чёткими при разных размерах. Карта погоды может быть растровой, если это изображение со множеством цветовых переходов, или векторной, если она построена из условных линий, значков и областей. Поэтому окончательный выбор зависит от способа создания и назначения изображения.
Завершение этапа: учитель подводит итог: "Индивидуальная проверка показала, что главный признак — не название файла и не цвет картинки, а способ её построения. Осталось применить это знание к жизненной задаче и сформулировать общий алгоритм выбора."
Этап 7. Включение в систему знаний и рефлексия (7 мин)
Цель этапа: применить знания в практическом контексте, обобщить алгоритм выбора и оценить собственное продвижение.
Время | Действие учителя | Действие учеников |
|---|---|---|
3 мин | Учитель предлагает ситуацию: "Школьная команда готовит цифровой проект. Нужны фотография участников для страницы проекта, эмблема команды для печати на футболках и схема маршрута к месту соревнования. Какой вид графики выбрать для каждого объекта? Обсудите решение в парах и подготовьте аргумент." | В парах выбирают: фотография — растровая, эмблема — векторная, схема маршрута — векторная. Объясняют выбор через детали, пиксели, объекты и масштабирование. |
2 мин | Учитель просит составить на доске алгоритм: "Назовите три вопроса, которые нужно задать себе перед выбором вида графики." Учитель объединяет ответы в памятку. | Формулируют алгоритм: "Есть ли много оттенков и мелких деталей? Нужны ли чёткие геометрические контуры? Нужно ли часто менять размер без потери качества?". |
2 мин | Учитель проводит рефлексию «Светофор»: "Зелёный — я различаю виды графики и могу объяснить выбор; жёлтый — различаю, но затрудняюсь с аргументацией; красный — мне нужна помощь. На стикере допишите одно новое понятие и один оставшийся вопрос." | Поднимают карточку выбранного цвета, на стикере пишут: "Я узнал, что..." и "Мне нужно уточнить...". Прикрепляют стикеры к доске. |
Завершение этапа: учитель подводит итог: "Сегодня вы сами открыли различие между растровой и векторной графикой, проверили его на изображениях и применили к задаче из жизни. На следующем уроке мы продолжим работу с компьютерной графикой и рассмотрим, какими инструментами создают и изменяют изображения."
Критерии оценивания практической работы
- «5» — правильно классифицированы все изображения или ситуации, приведены точные объяснения с использованием терминов «пиксель», «объект», «масштаб», а вывод сформулирован самостоятельно и последовательно.
- «4» — правильно выполнено большинство заданий, допущена одна неточность в классификации или объяснении, основные признаки растровой и векторной графики названы верно.
- «3» — правильно определена хотя бы половина примеров, но объяснение неполное или использованы термины без связи с конкретным изображением; после подсказки вывод скорректирован.
Рефлексия
Вопрос для ученика | Цель вопроса |
|---|---|
Что нового вы узнали о способах представления компьютерных изображений? | Выявление осознания ключевого различия между пиксельной и объектной моделями. |
По какому признаку вы определяете, что изображение растровое или векторное? | Проверка понимания алгоритма классификации, а не механического запоминания примеров. |
Какое задание оказалось самым сложным и почему? | Выявление точек затруднения в применении терминов и выборе вида графики. |
Где в будущем вы могли бы использовать знания о растровой и векторной графике? | Связь учебного материала с личным опытом, интересами и профессиональным самоопределением. |
Завершающее слово учителя
"Сегодня мы выяснили, что компьютерная графика может строиться по-разному: растровое изображение состоит из пикселей, а векторное — из объектов. Важно не считать один вид лучше другого, а выбирать его под конкретную задачу. Типичная ошибка — определять вид графики только по внешнему виду, не анализируя способ построения и поведение при увеличении. На следующем уроке мы рассмотрим инструменты создания и редактирования графических изображений."
Домашнее задание
Уровень | Что задать | Зачем |
|---|---|---|
Базовый (обязательный) | Составить таблицу сравнения растровой и векторной графики по четырём признакам: элемент изображения, изменение качества при увеличении, преимущества, примеры применения. Привести по три примера изображений каждого вида. | Закрепляет основные понятия и умение систематизировать материал; при проверке обратить внимание на точность терминов и соответствие примеров. |
Средний (повышающий) | Проанализировать пять изображений из цифровой среды: фотографию, логотип, схему, иллюстрацию и снимок экрана. Для каждого определить предполагаемый вид графики и написать объяснение в одном-двух предложениях. | Развивает читательскую и цифровую грамотность, умение применять критерии к реальным объектам; при проверке смотреть на аргументацию, а не только на ответ. |
Продвинутый (дополнительный) | Спроектировать на бумаге или в графическом редакторе простой знак для школьного мероприятия и описать, почему для него лучше выбрать растровую или векторную модель. Указать, что изменится при увеличении изображения. | Развивает проектное и креативное мышление; при проверке оценивать обоснованность выбора, ясность описания объектов и понимание масштабирования. |
Контрольные вопросы перед выходом из класса: «Из чего состоит растровое изображение?», «Из чего состоит векторное изображение?», «Почему фотографию обычно относят к растровой графике?», «Для какого изображения особенно важно сохранять чёткие контуры при изменении размера?»