Методическая разработка урока по информационным технологиям на тему "Понятие компьютерной графики. Работа с векторной и растровой графикой"

Методическая разработка учебного занятия

по теме «Понятие компьютерной графики. Работа с векторной и растровой графикой»

Преподаватель Кечечян Анна Арменовна

Федеральное государственное бюджетное образовательное учреждение высшего образования «Университет «Дубна»

Специальность 09.02.06 Сетевое и системное администрирование

Дисциплина Информационные технологии

Пояснительная записка

Методическая разработка урока на основе рабочей программы дисциплины «Информационные технологии» представляет собой проведение комбинированного урока с применением современных педагогических технологий: мультимедиа, видео – уроков, способствует индивидуализации обучения, развивает мотив речевой деятельности учащихся, оказывает эмоциональное воздействие, повышает эффективность обучения данного предмета.

Рабочим учебным планом для данного модуля определено:

тема «Понятие компьютерной графики. Работа с векторной и растровой графикой»;

выполнение практической работы «Работа с растровыми и векторными изображениями»;

самостоятельная работа устанавливается в форме отчетной работы и повторения пройденного материала.

Тема: понятие компьютерной графики. Работа с векторной и растровой графикой

Тип урока: Комбинированный

Цель урока:

образовательная:

закрепить и совершенствовать знания о компьютерной графике;

разновидности компьютерной графики, особенности работы с векторной и растровой графикой;

развивающая:

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

осуществлять поиск информации;

развитие умения классифицировать и давать характеристику компьютерной графике и взаимодействовать с ней;

воспитательная:

воспитание любви к профессии, привитие интереса к изучаемому предмету;

воспитание практического и рационального представления о компьютерной графике и ее разновидностях.

Межпредметная связь: Компьютерный дизайн, Информатика и ИКТ.

Основные знания и умения: в результате изучения темы студент должен

уметь:

определять разновидность компьютерной графики;

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

принимать решения по организации процессов работы с растровой и векторной графикой;

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

знать:

разновидности и характеристики основных видов компьютерной графики;

общие требования к оформлению векторных и растровых изображений;

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

способы и формы работы с векторной и растровой компьютерной графикой;

Изучение данной темы направлено на формирование:

общих компетенций (ОК):

ОК 1. Понимать сущность и социальную значимость своей будущей профессии, проявлять к ней устойчивый интерес.

ОК 2. Организовывать собственную деятельность, выбирать типовые методы и способы выполнения профессиональных задач, оценивать их эффективность и качество.

ОК 4. Осуществлять поиск и использование информации, необходимой для эффективного выполнения профессиональных задач, профессионального и личностного развития.

ОК 5. Использовать информационно-коммуникационные технологии в профессиональной деятельности.

ОК 9. Ориентироваться в условиях частой смены технологий в профессиональной деятельности.

ОК 10. Исполнять воинскую обязанность, в том числе с применением полученных профессиональных знаний (для юношей).

профессиональных компетенций (ПК):

ПК 3.1. Собирать исходные данные для разработки проектной документации на информационную систему.

ПК 3.5. Оформлять учетно-отчетную документацию.

ПК 3.6. Разрабатывать техническую документацию на эксплуатацию информационной системы.

ПК 5.2. Разрабатывать проектную документацию на разработку информационной систе6мы в соответствии с требованиями заказчика.

Оборудование:

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

Наглядные пособия: таблицы.

Раздаточный материал: рабочая тетрадь. Используемые технологии:

Метод обучения: словесный (вопросы, беседа), информационно-сообщающий, наглядный, практическая работа.

Место темы в изучаемой дисциплине: Тема урока продолжает раздел «Мультимедиа технологии»

Источники информации

Основные:

1. Гохберг Г.С., Зафиевский А.В., Короткин А.А. Информационные технологии. –М.: ОИЦ «Академия», 2014

2. Грайс, Д. Графические средства персонального компьютера / Д. Грайс. - М.: Мир, 2017. - 376 c.

3. Панюкова, Т. А. GIMP и Adobe Illustrator. Лекции по растровой графике / Т.А. Панюкова. - М.: Либроком, 2016. - 280 c.

Интернет-ресурсы: www.youtube.com www.skillbox.ru

«Векторная и растровая графика. Особенности, свойства, отличия»

«Что такое растровая и векторная графика»

Ход урока

I. Организационный момент (5 мин)

Приветствие, проверка посещаемости и готовности к уроку.

Психологический настрой обучающихся.

II. Актуализация опорных знаний, умений, навыков, мотивационных состояний:

Фронтальный опрос. (20 мин)

(Приложение А)

III. Сообщение темы и цели урока. (10 мин)

Компьютерная графика — это важный раздел дизайна, без понимания которого нельзя изучать основы компьютерного дизайна. Сегодня на занятии узнаем виды компьютерной графики и научимся отличать векторную графику от растровой.

IV. Изучение нового материала. (25 мин)

Лекционный материал и видео файл «Растровая и векторная графика», «Графический редактор Adobe Illustrator»

Ознакомить учащихся с ПО – Adobe Illustrator.

V. Закрепление материала (20 мин)

Изученный материал учащиеся закрепляют практической работой.

Перед началом работы обращается внимание учащихся на технику безопасности.

Научить учащихся определять вид компьютерной графики по предоставленным преподавателем теоретическим материалам.

Продемонстрировать правильность приемов работы с компьютерной графикой.

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

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

VI. Итог занятия (5 мин)

Заключительное слово учителя. - сообщение о достижении целей урока; - самооценка результатов труда; - оценка результатов труда; выставление оценок;

VII. Домашнее задание (2 мин)

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

VII. Рефлексия (3 мин)

Приложение А

(обязательное)

Фронтальный опрос

Что такое компьютерная графика

Ответ: Компьютерная графика - это область деятельности, в которой компьютеры наряду со специальным программным обеспечением используются в качестве инструмента как для создания (синтеза) и редактирования изображений, так и для оцифровки визуальной информации, полученной из реального мира, с целью дальнейшей её обработки и хранения.

Какие разновидности компьютерной графики Вам известны? Дайте им определения.

Ответ: векторная и растровая графика. Векторная графика – изображения, которые формируются из маленьких точек (пикселей).

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

Приведите примеры растровой и векторной графики.

Ответ: растровые изображения - это рисунки, сканы документов и всё, что можно нарисовать в растровых редакторах: в Adobe Illustrator, Adobe Photoshop, Procreate, Paint.

Обычно вектор используют для создания логотипов, элементов интерфейса и шрифтов. Их составляющие — контур и заливка. Компьютер рассчитывает контур по математической формуле, поэтому изображение не будет расплывчатым независимо от размера. А ещё такие файлы имеют гораздо меньший вес, чем растровые картинки.

Какие форматы векторных и растровых изображений?

Ответ: Форматы векторных изображений: eps, svg. Форматы растровых изображений: gif, jpeg, png.

Какие есть преимущества у растровой и векторной графики?

Ответ: Преимущество растровой графики — в цветовых возможностях. Она позволяет хорошо передавать градиенты и цветовые переходы на сложных иллюстрациях. Но при увеличении изображения его качество будет ухудшаться.

Преимущество векторной графики — в бесконечном размере. Логотип в формате svg можно увеличивать сколько угодно, и его контур не пострадает. Но сделать сложную иллюстрацию со множеством цветов и мелких деталей будет сложнее.

Назовите недостатки растровой и векторной графики.

Ответ: недостатки растровой графики:

Даже простое изображение будет иметь большой размер файла.

Масштабирование ухудшает качество изображения.

Невозможен вывод на отдельные устройства печати (например, векторный графопостроитель).

Недостатки векторной графики:

Изобразить таким способом можно далеко не все.

Изображения выглядят несколько искусственно.

Какой еще вид компьютерный графики существует?

Ответ: Фрактальная графика является одним из перспективных направлений компьютерной графики. Она основана на разделе математики – фрактальной геометрии. Термин фрактал ввел французский математик Бенуа Мандельброт. Этим термином он назвал геометрическую фигуру, которая состоит из частей, подобных целой фигуре.

Таким образом, главное свойство фракталов – это самоподобие. У фракталов увеличенные части фигуры подобны всей фигуре и друг другу. Таким образом, даже если взять небольшую часть фигуры, то по ней можно достроить все изображение исходя из соображений подобия. На рисунке показано последовательное построение известного фрактала «Кривая Коха» по небольшому фрагменту.

Приложение Б

ИНСТРУКЦИЯ

по выполнению лабораторной работы № 1

Тема «Работа с векторными изображениями»

Цель: формирование умений и навыков по определению разновидности изображений и работы с ними.

Оборудование: компьютер.

Средства обучения: программное обеспечение Adobe Illustrator, Adobe Photoshop.

Ход работы:

Рисуем прямоугольник произвольного размера с помощью инструмента Rectangle (Прямоугольник) или F6, (но все-таки нарисуйте его такого размера, чтобы он приближался к квадрату).

Щелкните правой кнопкой мыши на прямоугольнике, преобразуем его в кривую.

С помощью инструмента Shape (Форма) или F10 выделяем два крайних правых узла.

В верхней панели инструментов нажимаем кнопочку Scale and Stretch (Масштаб и растяжение) и, зажав клавишу Shift, тянем за средний верхний указатель вниз.

Щелкните указателем мыши где-нибудь на свободном пространстве, а потом двойной щелчок на инструменте Shape (Форма), чтобы выделить все узлы кривой и преобразуем все линии в кривые, нажав вверху кнопочку Convert To Curve (Преобразовать линию в кривые)

Нажимаем мышкой на левом верхнем узле, нажимаем в верхней панельке кнопку Made Node Symmetrical (Сделать узел симметричным) и получим скругленный угол.

Так же поступаем со вторым узлом.

Теперь тянем эти узлы в разные стороны и направления, придавая им форму, похожую на бантик

Далее выбираем инструмент Перо (Pen Tool) и рисуем кривую (складки на бантике)

Придаем лучикам небольшое искривление. Двойной щелчок на инструменте Shape (Форма), в верхней панели нажимаем кнопочку , переводим прямые линии в кривые, затем необходимо нажать кнопочку Make Node A Cusp (Создать узел с острым углом), снимаем выделение с фигуры и потом двигаем линии в нужном направлении, чтобы они чуть искривились.

Опять рисуем прямоугольник, преобразуем его в кривую, инструментом Shape (Форма) удаляем верхний правый узел, получаем треугольную кривую.

Опять выделяем все узлы двойным щелчком на инструменте Shape (Форма), жмем кнопку , переводим прямые линии в кривые, выделяем слева два узла и жмем кнопку Made Node Symmetrical (Сделать узел симметричным). Получаем такую фигуру

Передвигаем узлы по своему усмотрению, чтобы получить такую фигуру. Кстати, если Вас не устроит симметричность узлов вы всегда можете их преобразовать в узлы с острым углом, нажав кнопочку Make Node A Cusp (Создать узел с острым углом).

Выбираем инструмент Ellipse Tool (Эллипс), в нем выбираем построение эллипса по 3 точкам, строим эллипс так, чтобы его центральная линия шла параллельно боковой грани банта (это, в общем-то, не принципиально, но так удобнее, не надо потом поворачивать фигуру)

Нарисовали эллипс, продублировали его, немного сместили.

Выделяем оба эллипса с помощью инструмента Pick (Указазтель) и в верхней панели инструментов нажимаем кнопку Back minus Front (Задние минус передние). Получаем такую фигуру, будущий блик.

Если блик залезает на внутреннюю часть бантика, двигаем его, поворачиваем, меняем направление узлов, применяя инструмент Pick (Указатель) и Shape (Форма). Примерно так

Инструментом Pick (Указатель) выделяем внутреннюю часть банта и блик, зажимаем на клавиатуре Ctrl и тянем мышью вниз за средний верхний указатель левой кнопкой мыши. Не отпуская левую кнопку мыши, нажимаем правую. Таким образом мы получаем вертикально отраженную копию наших объектов.

Смещаем эти две фигуры к нижнему краю банта, поворачиваем фигуру, если надо, увеличиваем масштаб.

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

Теперь все готово для дальнейшего творчества! Выделяем основную фигуру банта, применяем к ней линейную заливку. Цвета – на Ваш выбор – только вначале банта цвет светлее, в конце – темнее.

Убираем обводку, щелкнув правой кнопкой мыши на пустом перечеркнутом квадратике. Выделяем складку, заливаем темной однородной заливкой, убираем обводку

Выделяем внутренние части банта, заливаем линейным градиентом, только он должен быть темнее, чем градиент у банта. Обводку убираем

Осталось залить блики белым цветом и убрать обводку.

Выделяем все объекты двойным щелчком по Указателю (Pick), группируем фигуру, нажав кнопочку в верхней панели инструментов , зажимаем Ctrl, тянем левой кнопкой мыши за верхний средний указатель, не отпуская левую кнопку, жмем правую, получаем вертикально отраженную копию бантика.

Теперь немного уменьшаем масштаб нижней части бантика (тянем с зажатой клавишей Shift за диагональные указатели), поворачиваем нижнюю фигуру и подвигаем ее к верхней.

Теперь на клавиатуре нажимаем сочетание клавиш Ctrl+PageDown – перемещаем группу вниз (можно просто в диспетчере объектов перетащить эту фигуру вниз).

Группируем обе получившиеся фигуры.

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

Делаем узел. Рисуем прямоугольник, переводим в кривые. С помощью инструмента Shape Tool выделяем два верхних узла прямоугольника и в верхней панели инструментов нажимаем кнопку Scale and Stretch (Масштаб и растяжение) и, зажав клавишу Shift, тянем указатели внутрь, но не очень сильно.

Теперь делаем прямые линии кривыми, нажав Convert To Curve (Преобразовать линию в кривые). Теперь тянем каждую из сторон вверх, но не сильно, только, чтобы она чуть выпуклой стала.

Заливаем градиентом, удаляем обводку, делаем блик.