Ученики на Учителя.com


Конспект урока "Векторная графика. Интерфейс программы векторной графики" 7 класс

Дата проведения: 1.02.2016
Класс: 7 «В»
Тема: «Векторная графика. Интерфейс программы векторной графики».
Цель: Сформировать навыки работы с векторными изображениями, обучить приемам
редактирования векторных изображений.
Задачи:
1. Обучающая: Активизировать познавательную деятельность учащихся,
практических умений.
2. Развивающая: Развивать познавательные интересы, навыки работы с мышью и
клавиатурой, самоконтроля.
3. Воспитывающая: Воспитать информационную культуру, внимательность,
аккуратность, дисциплинированность.
Оборудование: доска, компьютер, компьютерная презентация, карточки
самооценивания, программа теста MyTest, графический редактор Inkscape, кубик-
рубик.
Тип урока: комбинированный.
Структура урока: Этапы: организационный момент, психологический настрой,
постановка цели, проверка домашнего задания, теоретическая часть, практическая
работа, физминутка, закрепление знаний, подведение итогов, выдача домашнего
задания с пояснением.
Методы: словесный, наглядный, практический.
Ход урока:
I. Организационный момент. Приветствие. Обязательная положительная
мотивация. Ребята, давайте встанем вкруг, называя имя соседа пожелаем друг
другу удачи, везения и всего наилучшего.
II. Проверка домашнего задания. Проверка домашнего задания осуществляется с
помощью программы MyTest.
1) Что такое компьютерная графика?
а) область информатики, занимающаяся методами, средствами создания и
обработки изображений с помощью программно-аппаратных средств;
б) область информатики, занимающаяся графопростроением огромных
изображений;
в) область информатики, занимающаяся объектно-ориентированным
программированием.
2) На какие виды делится компьютерная графика?
а) векторная и фронтальная; б) фронтальная и растровая; в) растровая и
векторная.
3) Что такое растровая графика?
а) изображения формируются из точек различного цвета (пикселей), которые
образуют строки и столбцы (растр); б) изображения формируются из
объектов: точка, линия, окружность, прямоугольник и пр., которые хранятся в
памяти компьютера в виде графических примитивов.
4) Что такое векторная графика?
а) изображения формируются из точек различного цвета (пикселей), которые
образуют строки и столбцы (растр); б) изображения формируются из
объектов: точка, линия, окружность, прямоугольник и пр., которые хранятся в
памяти компьютера в виде графических примитивов.
5) Минимальный элемент растровой графики.
а) пиксель; б) графические примитивы; в) точка.
6) Минимальный элемент векторной графики.
а) пиксель; б) графические примитивы; в) точка.
III. Объяснение нового материала. Объявление новой темы, учащиеся должны
расставить в правильном порядке слова.
Inkscape используют, прежде всего, для создания векторных рисунков. Он может облегчить жизнь
многим чертежникам, художникам, дизайнерам, мультипликаторам и другим людям творческих
профессий.
По своим рабочим функциям, он чем-то похож на другие графические редакторы, такие как
Illustrator, CorelDraw или Xara X.
Возможно, с какой-то, из вышеперечисленных программ, вы уже и знакомы.
Скачать бесплатный, русифицированный графический редактор Inkscape (Инкскейп) вы можете : http://inkscape.org/ .
Создание и сохранение документа.
Открываем программу, по умолчанию выдается документ в виде альбомной страницы, ее хорошо
видно в центре рабочего поля, можно ввести свои требования к формату и размеру, лучше ввести с
некоторым запасом.
. . .
При рисовании вы можете выйти за рамки этой страницы, но при печати
сохраняется только изображение на странице, а за ее пределами все утратится.
Изменять свойства документа можно из меню Файл, Свойства документа. Для
каждого документа открывается новое окно Файл, Создать (Ctrl+N).
Переключаться между документами можно с помощью клавиатуры (Alt+Tab).
Сохраняют документ командами — Файл, Сохранить как…
По умолчанию Inkscape сохраняет документ в собственном формате svg, но
имеется возможность сохранить изображение в ряде других форматов.
Интерфейс программы.
Теперь внимательно посмотрим интерфейс программы. Слева находятся инструменты для создания
различных фигур, а вверху на панели опций — настройки параметров этих фигур. На самом верху,
как и везде – панель меню, ну и внизу, под таблицей палитры
цветов находится полоса состояния. Все, то же самое, что и в
других графических редакторах.
Нажимаем на любую фигуру, так мы делаем ее активной и
протягиваем курсор по полотну. Мы нарисовали фигуру, на ней
мы видим белые точки – это маркеры, с их помощью легко можно
изменять контуры фигуры, вытягивая или наоборот сжимая
любую сторону или деталь.
Ну, вот и весь принцип работы этого графического редактора.
Сложно? Думаю, что нет. Все остальное – частности, их мы
быстро освоим, не сомневайтесь.
IV. Обобщение изученного материала. Учащиеся работают с постером. Делимся
по жетонам на две группы. Первая группа – компьютерная графика, на какие
виды она делится, что такое векторная графика, что такое растровая графика,
отличие растровой и векторной графики. Вторая группа – про графический
редактор Inkscape, какой это редактор, интерфейс окна, достоинства и
недостатки векторной графики.
V. Физминутка. После выполнения практической работы ребятам предлагается
выполнить ряд математических упражнений с закрытыми глазами.
VI. Практическая работа.
Учащиеся самостоятельно выполняют работу на ПК, согласно предложенной им
практической работы.
Шаг 1. Открываем новый документ в Inkscape.
Начнем с блюдца, на котором стоит чашка кофе. Блюдце будет состоять из пяти различных
эллипсов, так что готовьтесь рисовать. Выберите инструмент ‘Рисовать круги, эллипсы и дуги’
(Circle/Ellipse tool (F5))на панели инструментов. Затем нарисуйте эллипс, примерно таких же
пропорций, как на рисунке ниже.
Теперь нужно изменить цвета заливки и обводки (контура). Для этого выделите эллипс и
откройте диалоговое окно ‘Заливка и обводка’ (Fill and Stroke) выбрав в меню Объект > Заливка
и обводка (Ctrl + Shift + F). На вкладке ‘Обводка’ нажмите кнопку ‘X’, чтобы удалить контур у
этой фигуры.
Шаг 2. Теперь нужно заполнить элипс радиальным градиентом. Мы будем применять
радиальный градиент довольно часто в этом туториале. Поэтому обратите на это особое
внимание, если вы никогда ранее не делали этого в Inkscape. Во вкладке ‘Заливка’ (окно
‘Заливка и обводка’ (Fill and Stroke)), нажмите на кнопку ‘Радиальный градиент’. Inkscape
автоматически заполнит фигуру градиентом, по умолчанию, меняющимся на прозрачный.
Мы хотим получить градиент с двумя оттенками серого цвета, поэтому жмем на кнопку
‘Изменить’ (Edit) под градиентом. Здесь можно изменить ‘Опорные точки градиента’ (Color stops)
и их ‘Прозрачность’(Transparency). Установите светлый оттенок серого(ddddddff) у первой
опорной точки. Второй опорной точке задайте более темный оттенок серого (b2b2b2ff).
Убедитесь, что ‘Прозрачность’ (Transparency) для обоих цветов была установлена на
‘Непрозрачный’ (Opaque) (без прозрачности).
Шаг 3. Следующее, что нужно сделать, это настроить размер и центр градиента относительно
вашего эллипса. Перетащите метки градиента, как показано на рисунке ниже. Примечание: Если
метки градиента отсутствуют, просто нажмите Создать’ и ‘Изменить градиенты’ на панели
инструментов (Ctrl + F1). Первый эллипс завершен, и теперь мы имеем представление о том, как
создавать и изменять градиенты. Следующие шаги будут не столь подробно описаны.
Шаг 4. Остальные эллипсы в блюдце будет совсем не трудно создать. Следующий эллипс
образует белый край вокруг блюдца. Самый просто способ его создать, это скопировать
созданный ранее эллипс, перейдя в пункт меню ‘Правка’ (Edit) > ‘Продублировать’ ((Ctrl + D)
Duplicate). Затем залейте его светло серым цветом (f2f2f2ff) в окне ‘Заливка и обводка’.
Ссдвиньте его на пару пикселей ниже, чем первый эллипс, и переместите назад через ‘Объект’
(Object) > ‘Опустить’ (Lower).
Примечание: Нажмите F1 (или ‘Объект’ > ‘Трансформировать’), чтобы перемещать объекты с
помощью мыши или клавиш со стрелками в Inkscape. Будет трудно увидеть светло-серый
эллипс, поэтому я всегда ставлю под ним темный фон. Это видно из скриншота ниже.
Шаг 5. Теперь приступим к темно-серому основанию блюдца. Ещё раз продублируйте один из
уже существующих эллипсов. Затем залейте его другим градиентом, из двух темно-серых
оттенков (2b2b2bff и 666666ff). Сдвиньте центр градиента вниз, к нижней части эллипса.
Основание не должно быть столь же широким, как остальное блюдце. Нажмите F1 и немного
отодвиньте левую и правую сторону эллипса, чтобы его “сплющить”.
Заметьте, при удержании клавиши Shift, и перетаскивании одной из грани, обе стороны будут
перетаскиваться сразу и в равной степени. Также оттяните чуть-чуть нижнюю часть эллипса,
чтобы получить правильную кривую нижней части блюдца.
Сдвиньте эллипс вниз на несколько пикселей и нажмите Page Down несколько раз, чтобы
расположить эллипс под двумя остальными. У вас должно получится что-то похожее на картинку
ниже. Обратите внимание на пропорции нижнего эллипса (выделенного) по сравнению с двумя
другими. Блюдце начинает обретать форму!
Шаг 6. Теперь нам нужно создать центр блюдца. Нарисуйте эллипс поменьше, как показано
на рисунке ниже (или выберите верхний эллипс и уменьшите его). Откройте диалоговое окно
“Заливка и обводка” (Ctrl + Shift + F). Затем залейте созданный эллипс ровным серым цветом
(979797). Перетащите ползунок Альфа-канала (Alpha), находящегося ниже цветового круга, на
100.
Укажите обводке Сплошной цвет (Stroke paint) b7b7b7 (непрозрачность 100%). Во вкладке Стиль
обводки (Stroke style) установите ширину, чтобы совпадала с шириной на картинке ниже.
Фактический размер обводки будет варьироваться, в зависимости от того, насколько большими
вы нарисовали свои эллипсы. У меня указана ширина обводки в 3px, но у вас может в итоге
получится другой размер.
Шаг 7. Блюдце почти готово. Последний штрих заключается в добавлении размытой тени.
Продублируйте самый нижний эллипс (темно серая основа). Затем размойте его на 10% (в
нижней части окна Заливка и обводка). Поместите его ниже всех других объектов.
Блюдце готово! Чтобы было легче выделять блюдце в дальнейшем, можно сгруппировать пять
эллипсов. Просто выделите их все, и нажмите Ctrl+G. Теперь приступим непосредственно к
чашке кофе!
Шаг 8. Начнем с отрисовки двух фигур при помощи инструмента Кривые Безье (Bezier Curves)
(Shift + F6). Нарисуйте одну для лицевой стороны чашки и одну для внешнего края. Эти фигуры
должны совпадать по ширине и количеству кривых. Рекомендуется включить отображение сетки
в помощь для рисования линий (Shift + #). Так же имейте в виду, при щелчке создается точка,
при перетаскивании – кривая.
Заметьте, что обе фигуры имеют одинаковую длину кривой. А нижняя часть края совпадает с
лицевой стороной чашки, и имеет одинаковый изгиб кривой. Синие цифры, отмеченные на
рисунке ниже, показывают в каком порядке были созданы точки/кривые.
Шаг 9. При все ещё включенной сетке, поместите край чашки прямо на лицевую сторону.
Удалите обводку у обеих фигур. Залейте фигуру края чашки (которая выглядит как эллипс)
сплошным серым цветом (e6e6e6ff). Залейте лицевую сторону чашки радиальным градиентом,
которой из цвета ecececff в центре переходит в цвет bdbdbdff. Затем разместите центр
градиента сверху фигуры с чашкой, как показано ниже.
Шаг 10. Сделайте дубликат фигуры с краем чашки, немного измените размер, чтобы создать
ширину края. Задайте этой фигуре тонкую серую обводку (d6d6d6ff) и радиальный градиент от
ecececff к bdbdbdff. Затем перетащите метки градиента, чтобы они совпадали с картинкой ниже.
Шаг 11. Следующие шаг заключается в создании напитка внутри чашки. Мы, конечно же,
хотим создать фигуру, которая даст видимость кофе. Чтобы дробится этого, нам нужно создать
эллипс для кофе и пересечь им внутренний край.
Вот как это делается. Создайте эллипс, похожий на коричневый на картинке ниже. Установите
его поверх края чашки. Затем продублируйте эллипс, который составляет внутреннюю часть
края. Выберите только что нарисованный и продублированный эллипс. Пройдите в меню,
выберите Контур (Path) > Пересечение(Intersection ) (Ctrl + *).
У вас должна получится такая фигура, будто в кружке налито кофе. Теперь вы можете залить её
радиальным градиентом, использую два (или более) оттенка коричневого.
Шаг 12. Создать ручку для кружки будет совсем просто. Используйте инструмент кривые
Безье, чтобы создать фигуру, более менее похожую на ручку, показанную ниже. Задайте ей
тонкую светло-серую обводку и залейте линейным градиентом от левого нижнего в правый
верхний угол, используя два оттенка серого (bdbdbdff и ecececff). Теперь поместите ее за чашку.
Шаг 13. Чтобы сделать нашу чашку особенной, добавим вокруг нее несколько синих полос.
Сделать это будет чуточку сложнее, чем кажется на первый взгляд. Нельзя просто нарисовать
линию, потому как её конец никогда не совпадет с границей чашки, как показано ниже.
Шаг 14. Вот неплохой метод, который придумал я. Создаем эллипс, примерно тех же
размеров, что и край чашки кофе. Затем заливаем любым цветом (без обводки). Дублируем
эллипс, помещаем его ниже первого и тянем немного вниз. Затем правим стороны. Я залил
эллипсы разными цветами, чтобы можно было увидеть, как это должно выглядеть в итоге.
Шаг 15. Выделяем оба эллипса, переходим в меню Контур (Path) > Разность(Difference) (Ctrl
+ минус). Вуаля! Теперь у нас есть красивая исчезающая кривая. Залейте новую фигуру любым
понравившимся цветом, и продублируйте столько раз, сколько считаете нужным. Затем
поместите полоски сверху вашей чашки, где захотите.
Шаг 16. Давайте создадим отражение на одной из сторон нашей чашки. Нарисуйте фигуру,
как показано ниже, инструментом кривая Безье. Закрасьте её белым и установите прозрачность
на 90. Разместите её сверху лицевой стороны чашки и цветных полос.
Шаг 17. Теперь приступим к пару. Нарисуйте маленький белый эллипс. Сделайте его
полупрозрачным, и заметно размойте обводку. Поместите его выше кофе. Это даст общее
впечатление тепла и пара.
Шаг 18. Теперь создадим тонкий след пара. Создаем фигуру инструментом кривая Безье как
показано ниже. Закрашиваем её светло-коричневым или золотым цветом, устанавливаем полу
прозрачность и размытие. Поиграйте с последними, чтобы результат выглядел подходяще.
Наша чашка кофе готова! Как и в случае с блюдцем, вы можете сгруппировать все фигуры, из
которых состоит чашка.
Давайте поместим чашку сверху блюдца. И добавим небольшую тень под чашкой. Просто
нарисуйте маленький черный эллипс и размойте его. Теперь она у вас есть, красивая чашка
кофе и блюдце в векторе, созданная с помощью Inkscape! Надеюсь, вам понравилось так же, как
и мне. Я также надеюсь, что туториал продемонстрировал основные особенности
программы Inkscape – альтернативу для векторной графики с открытым исходным кодом.
Наслаждайтесь!
VII. Закрепление знаний учащихся. Учащиеся выбирают себе вопрос с помощью
кубика-рубика и отвечают на вопрос. 1) где применяется компьютерная графика? 2)
что такое пиксель? 3) минимальный элемент векторного изображения? 4) при
масштабировании растрового изображения качества меняется или нет? 5) при
масштабировании векторного изображения качества меняется или нет? 6) назовите
одно достоинство векторного изображения?
VIII. Подведение итогов. Рефлексия.
1) Оценить урок,
2) Оценить себя.
Выдача домашнего задания. Выполнить рисунок в Inkscape.
Скачать материал

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