Внеурочная деятельность "Компьютерная графика"
учебно-методический материал по технологии (6 класс)

КПВ: Компьютерная графика

Лабораторная №1. InkSkape. Графические примитивы

Первое, что мы видим, открывая документ InkSkape, белый прямоугольник – «холст». Поговорим о работе с ним поподробнее.

Прокрутка холста осуществляется несколькими способами, это колесико мыши при прокрутуке по вертикали и колесико мыши + shift по горизонтали, либо клавиша ctrl +стрелки, либо полосы прокрутки (комбинация клавиш Ctrl+B позволяет показать или скрыть их).

Масштаб изменяется кнопками «+» и «-» на клавиатуре, либо с помощью колесика мыши и клавиши Ctrl. Ctrl + щелчок колесиком или Ctrl + щелчок правой кнопкой для увеличения изображения, Shift + щелчок колесиком или Shift + щелчок правой кнопкой чтобы уменьшить масштаб. Кроме того, можно воспользоваться полем "масштаб" в нижнем правом углу окна документа, здесь можно установить точное значение масштаба в %. Ещё один вариант – воспользоваться инструментом "Масштаб" (значок с лупой) на боковой панели. Это пока всё, что касается работы с холстом.

Перейдем к инструментам для рисования.

Инструмент «Прямоугольники и квадраты»

Вызывается нажатием соответствующей кнопки на панели инструментов или клавиши F4. Знак курсора в этот момент меняется, появляется прямоугольник. Левой клавишей мыши рисуется прямоугольник, левая клавиша + ctrl  - квадрат. По умолчанию прямоугольник рисуется от угла, но нажатая клавиша Shift позволяет рисовать «от центра»

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

Инструмент «Круги, эллипсы и дуги»

Вызывается нажатием соответствующей кнопки на панели инструментов или клавиши F5. Левой клавишей мыши рисуется эллипс, левая клавиша + ctrl  - круг. По умолчанию эллипс так же как и прямоугольник рисуется от угла, но нажатая клавиша Shift позволяет рисовать «от центра». Квадратный маркер позволяет менять пропорции объекта, а круглый создает дуги и сектора. Если перемещая круглый маркер, мы располагаем курсор внутри круга, то мы как бы срезаем его часть, если же курсор располагается снаружи – мы получаем сектора:

Если перемещать маркер, удерживая клавишу Ctrl, сектор будет изменяться с фиксированным шагом – 150. Чтобы вернуть фигуре изначальную форму достаточно нажать кнопку «сделать фигуру целым эллипсом» на панели параметров инструментов (её вид зависит от выбранного инструмента).

Инструмент «Звездочки и многоугольники»

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

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

Перемещая один из маркеров с зажатой клавишей Shift, можно закруглить углы и добиться интересных эффектов:

Перемещение маркера с зажатой клавишей Alt искажает фигуру:

Чтобы отменить изменения можно нажать на значок «сбросить параметры фигуры» на панели параметров инструмента:

Там же можно переключиться с рисования звезд на рисование многоугольников:

Многоугольник имеет только один маркер, но клавиши Shift и Alt при работе с ним действуют аналогично. Кроме того, на панели параметров инструмента можно задать количество вершин (углы), отношение большого радиуса к малому, закругление и искажение:

Инструмент «Спирали»

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

Перемещение внутреннего и внешнего радиусов позволяют дорисовывать и  убирать витки. Перемещение маркеров с зажатой клавишей Alt «раскручивает» спираль.

Удерживая клавишу shift можно выбрать группу объектов и производить с ними все те же действия, что и с одним объектом. Повторный щелчок мышью по выбранному объекту с нажатой клавишей Shift приводит к его исключению из выделения.

Перемещение и масштабирование объектов

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

Повторный щелчок по объекту изменит форму стрелок. Теперь объект можно поворачивать (угловые стрелки) и наклонять (срединные стрелки). Нажатая кнопка ctrl позволяет фиксировать «шаг» наклона – 150

Группировка объектов

Для группировки объектов необходимо выделить их и нажать ctrl+G (следите за раскладкой), для разгруппировки Ctrl+U. В качестве объекта, могут выступать группы, что позволяет группировать их между собой. В этом случае Ctrl+U позволит разгруппировать только верхний уровень группировки. Для того, чтобы разгруппировать всю конструкцию нужно будет нажать Ctrl+U несколько раз.

Цвет объекта

Чтобы изменить цвет объекта достаточно выделить его и выбрать соответствующий оттенок на палитре внизу окна, но более мощным инструментом является панель «Заливка и обводка». Вызывается нажатием соответствующей кнопки  или по сочетанию клавиш Ctrl+Shift+F.

Вы увидите, что диалоговое окно имеет три вкладки: "заливка", "обводка" и "стиль обводки". Закладка "Заливка" позволяет редактировать заливку выбранных объектов. С помощью кнопок сразу под названием закладки, можно выбрать типы заливки, включая и первый пункт "нет заливки" (кнопка с крестиком), сплошной цвет заливки, а также линейные и радиальные градиенты. Для рисунка выше была активирована вторая кнопка сплошной заливки.

Ниже кнопок с видами заливки на закладке "Заливка" вы увидите варианты выбора цвета. Для каждого способа выбора цвета есть своя собственная вкладка: RGB, CMYK, HSL и "Круг". Довольно удобно выбирать цвет на закладке "Круг", где вы можете повернуть треугольник внутри круга, чтобы выбрать цвет на цветовом круге, а затем выберите оттенок этого цвета в треугольнике. Для всех цветов изменять прозрачность можно с помощью ползунка "Альфа-канала" (прозрачность). Прозрачность измеряется в % непрозрачности, т.е. 100% абсолютно непрозрачный цвет и, наоборот, 0% абсолютно прозрачный.

Всякий раз, когда вы выбираете объект, цвет в описанном выше диалоговом окне обновляется, показывая цвет текущей заливки и обводки. Если выбрано несколько объектов, диалоговое окно показывает их средний цвет. Поэкспериментируйте с этим диалоговым окном. Теперь вы можете создавать разноцветные фигуры и даже полупрозрачные.

Вырвнивание объектов в inkscape

Порядок объектов их расположение относительно друг друга изменяется с помощью команд меню "Объект": "поднять на передний план" - клавиша Home и "Опустить на задний план" - клавиша End. С помощью этих команд можно поднимать и опускать объекты текущего слоя. Две другие команды "Поднять" Page Up и "Опустить" Page Down, будет действовать только на один один шаг, т.е. изменят порядок только одного объекта на один уровень. Выполняя эти действия несколько раз можно перемещать объекты последовательно от самого верхнего уровня до самого нижнего соответственно.

Очень полезной будет в этом случае клавиша Tab которая позволяет выделять объекты по очереди. Если изначально не был выбран ни один объект, то нажатие этой клавиши выделит самый нижний объект, в противном случае она выбирает объект на уровень выше выбранных объектов. Комбинация клавиш Shift+Tab работает в обратном порядке, начиная с верхнего объекта и переходя вниз.

Полученных знаний достаточно для создания простеньких изображений следующего плана:

Создайте собственный рисунок, содержащий не менее 15 примитивов.

КПВ: Компьютерная графика

Лабораторная №2. Inkscape

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

1. Открываем документ Inkscape. С помощью инструмента «круги, эллипсы, дуги»  рисуем круг.  

Совет: Воспользуйтесь клавишей Ctrl. Зажатая клавиша Ctrl гарантирует целое соотношение сторон.

Цвет заливки - 00ссff, цвет обводки - 3737c8ff, толщина обводки – 6 px.

Цвет можно выбрать  из палитры, расположенной в нижней части окна (левая клавиша – цвет заливки, Shift + левая клавиша – цвет обводки) либо вызвав меню «заливка и обводка» (Shift+Ctrl+F или двойной щелчок по зоне «заливка и обводка» в нижней части окна). Шестнадцатеричное значение цвета (3737c8ff, например) можно задать в окне RGBA на закладке «Обводка» или «Заливка». Толщину обводки можно задать, щелкнув правой клавишей по цифре рядом с цветом обводки:

2. С помощью инструментов «перо»  и «редактирование узлов» создаем контур будущего уха, выполняем заливку и обводку.

Перемещаем «ухо» на нужное место с помощью инструмента «выделение» . Оставшийся при этом серый контур удаляем (выделить, del). Полученную фигуру объединяем в один контур Для этого можно воспользоваться пунктом меню Контур->Сумма либо сочетанием клавиш Ctrl++.

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

3. Рисуем лапу. Сначала создаем небольшой вытянутый эллипс, затем «оконтуриваем» его (контур->Оконтурить объект либо Shift+Ctrl+C). С полученным объектом можно работать как с контуром, а не как с фигурой, воспользовавшись этим, придаем объекту нужную форму.

По аналогии создаем остальные конечности и располагаем их на рисунке

4. С помощью изученных инструментов добавляем глаза, нос, рот и брови. Некоторые из объектов не нуждаются в обводке. Чтобы избавиться от обводки или заливки достаточно щёлкнуть по значку с крестиком  на палитре (щелчок + Shift в случае с обводкой)

5. Блики. Скопируйте  контур тела зайца и разместите его рядом с рисунком. Уберите обводку, залейте контур красным

Ещё раз скопируйте полученную фигуру и залейте её контрастным цветом для наглядности. Затем расположите вторую фигуру так, чтобы она перекрывала большую часть первой. Выделите оба объекта и вычтите одну форму из другой (Контур->разность). Переместите полученный объект на Кроша так, чтобы образовались тени:

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

С помощью контура рисуем зубы

Верхняя часть обводки явно лишняя, при этом остальную обводку хотелось бы сохранить. Выбираем один их верхних узлов и зажимаем комбинацию Shift+B – «разорвать контур в месте выбранного узла». Теперь переместив этот самый узел, мы уберем и обводку с участка рассоединения.

Добавим язык. Для этого копируем и переносим на свободный участок холста контур-рот. Перекрываем его наклонным овалом и выполняем операцию «пересечение» (Контур-пересечение). Меняем цвет получившегося объекта, убираем обводку и перемещаем обратно на рисунок.

Самостоятельно добавьте блик на лапу.  Рисунок готов:

Задание: создайте собственный мультяшный персонаж, используя изученные инструменты.

КПВ: Компьютерная графика

Лабораторная №4. Inkscape

Объединение контуров. Текстуры

Создайте новый файл с горизонтальным холстом (файл-> создать A4_Landscape)

С помощью инструментов Контур, Перо и Редактор узлов создаем очертания рыбы

С помощью тех же инструментов добавляем детали.

На данный момент наше изображение представляет собой набор отдельных объектов: линий, контуров, кругов. Чтобы оно стало цельным, выделяем все части рисунка (ctrl+a) и выполняем команду Контур-> Объединить (Ctrl+K). После этого рисунок можно закрасить по своему вкусу

Чтобы сделать наш рисунок интереснее, заменим в некоторых местах сплошную заливку на текстуру.
На отдельном участке холста создадим ряд разноцветных прямоугольников. Для удобства выравнивания включим отображение сетки (Вид->сетка). Если прямоугольники всё равно находятся на разных уровнях, для каждого из них можно вручную задать одинаковую высоту и положение по оси Y

Преобразуем полученное изображение в текстуру. Выделим все прямоугольники и выполним команду Объект->Текстура->Объекты в текстуру (Alt+I). Теперь в меню «Заливка и обводка» можно найти соответствующую текстуру (название её будет начинаться со слова pattern – шаблон). Применив данную текстуру к участку рисунка и выделив этот участок инструментом редактор узлов,  чуть в стороне вы увидите три маркера.

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

Отображение сетки на данном этапе можно отключить.

По аналогии создайте и примените ещё несколько текстур:

Теперь мы можем удалить с холста исходники наших текстур. Интересного эффекта можно добиться, сняв обводку: (Ctrl+a) + правый щелчок по окну «обводка» - > «снять обводку»

Применим к верхнему гребню одну из встроенных текстур (волны, горошек, шахматная доска – на ваш выбор. Поменяем цвет фона, добавим нашей рыбе плавник. Изображение готово.

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

КПВ: Компьютерная графика

Лабораторная №5. Inkscape

Кривые Спиро. Распылитель
Внимательнее рассмотрим режимы работы инструмента Перо

Помимо уже рассмотренных нами кривых Безье, вы можете выбрать Кривые Спиро, а также последовательность прямых отрезков. При работе с кривыми Спиро необходимо использовать сглаженные узлы, чтобы получить их  - щелкнув левой клавишей мыши по холсту, не отпускайте сразу клавишу, а протяните ее немного. 

Судя по подписям («Рисовать последовательность прямых отрезков») последние два пункта не отличаются друг от друга, однако один из них позволяет делать наклонные линии, а второй только горизонтальные и вертикальные.  Каждый из четырех режимов позволяет работать с пятью формами:

- нет эффекта

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

- нарастание (линия становится толще от первого узла к последнему)

- эллипс (линия объемная в центре, но истончается ближе к краям)

- из буфера обмена (позволяет растянуть объект, находящийся в буфере обмена по контуру кривой)

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

Откройте горизонтальный холст в inkscape. Нарисуйте голубой прямоугольник, а затем поверх, с помощью инструмента Перо и кривых Безье или Спиро (на ваш выбор), замкнутый контур подобного плана:                                                                

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

С помощью кривой Спиро создаем заготовку дерева

«Оконтуриваем» получившиеся элементы дерева и суммируем их

Совет: выделить несколько элементов сразу вы можете, удерживая нажатой клавишу «shift».

С помощью редактора узлов делаем ствол толще и устраняем шероховатости:

Украшаем наше дерево «цветами». Для этого можно использовать инструмент «звезда» (Углы – 5, закругление – 3, смещение -0), с помощью того же инструмента создаем стилизованное солнце (углы – 120, закругление - 0 , смещение - 0) цвет заливки жёлтый, обводки – оранжевый, непрозрачность – 60.

. С помощью инструмента Перо создайте кривую следующего вида:        

Воспользовавшись инструментом «распылитель» , создадим «травяные заросли»:  

Чтобы убрать излишки, воспользуемся операцией «разность». Так как она применима только к контурам, сначала оконтурим все «травинки», затем объеденим их с помощью операции «сумма». После этого с помощью прямоугольников и вычитания уберем излишки:

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

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

Задание 1:  Обоснуйте необходимость оконтуривать и суммировать объекты прежде чем выполнять операцию «разность». Объясните почему мы выполняем операцию «разность», для каждого из трех слоев в отдельности (что мешает нарисовать все три три слоя, объеденить их и потом уже «отрезать» излишки)?

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

Задание 2: Создайте собственный рисунок на основе кривых или отрезков прямых линий.

КПВ: Компьютерная графика

Лабораторная №6. Inkscape

Градиентные заливки. Клоны

Базовая форма стеклянного стакана с соком

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

 Нарисуйте эллипс без заливки с обводкой зеленого цвета #629A61.

Нарисуйте еще один эллипс. Поместите его на уровень ниже зеленого (клавиша Page Down). Цвет обводки #FFF56B, заливка линейным градиентом от темного #D59707 к светлому #F9B50A.

Нарисуем сам будущий стакан. Проще всего это сделать с помощью прямоугольника. Т.е. нарисовать прямоугольник, «оконтурить» его и инструментом управления контурами изменить нижний контур вытянув его вниз. А так же немного сдвинуть нижние узлы, что бы получилась фигура такая, как на рисунке ниже. Обводки нет. Заливка линейным градиентом левый цвет #DD9907, правый цвет #F7E805.

Все вместе выглядит примерно так. Для точного совмещения фигур может быть полезна кнопка в боковой панели прилипания "прилипать к контурам". Так при нажатой этой кнопке при перемещении отдельных узлов, они будут стремиться "прилипнуть" к ближайшему контуру.

Нарисуем еще одну окружность - это будет дно стакана. Переведем ее в контуры и немного вытянем дно. Обводка у окружности бело цвета. Заливка линейным градиентом. Нижний цвет #CD8F06, а верхний #FCF2BE.

Все вместе выглядит примерно так.

Еще один эллипс, что бы подчеркнуть белую обводку внизу стакана. Этот эллипс можно сделать копированием из предыдущей фигуры Ctrl+D. Эллипс имеет тонкую обводку с цветом #7d7556 и заливку из сплошного цвета #a57e28.

В стакане последний эллипс чуть-чуть вылезает из под предыдущего.

Теперь, когда стакан готов, придадим ему стеклянный эффект.

Во-первых, блики по краю стакана. Это две нарисованные пером линии, без заливки, обводка которых представляет собой радиальный градиент из трех точек. Крайние точки градиента абсолютно прозрачный белый цвет, а точка посередине просто белая. Пример линии с контурами и градиентом показан на рисунке ниже в центре. А результат без узлов виден на зеленом круге.

Большой блик представляет контур следующего плана (роще всего сделать его из оконтуренной окружности, добавив в нее несколько новых узлов):

Так теперь должен выглядеть наш стакан. Непрозрачность фигуры блика 25%. Изменять непрозрачность можно в диалоге "заливка и обводка".

И еще один блик для стакана из окружности, даже без добавления узлов. Непрозрачность фигуры блика 25%. Схема фигуры блика на рисунке слева, расположение блика на стакане справа.

Пузырьки воздуха

Сам по себе пузырек представляет собой несложную конструкцию. Это окружность с заливкой #C1890D и обводкой #FFF29F, а также двух кривых фигурок белого цвета, которые несложно сделать из окружностей.

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

Чтобы заполнить пятно пузырьками, воспользуемся возможностью inkscape "Создать узор из клонов", которая находится в меню "Правка" - "Клоны".

Inkscape запоминает последние настройки, поэтому, на всякий случай, нажмите кнопку "Сбросить", что бы отменить старые настройки.

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

А на закладке "Масштаб" параметры случайности 100%.

Теперь нажмите кнопку "Создать" и если результат примерно соответствует вашим ожиданиям, то придайте некий хаос, нажимая кнопку "Разровнять". Если получилось совсем не то, что вы ожидали, поэкспериментировав с размером исходного пузырька и ли настройками узора. Для того что бы отменить неправильный узор, нажмите кнопку "Удалить".

Если все готово, в меню "Правка" - "Клоны" при выделенном исходном пузырьке нажмите пункт - отсоединить клон. Сам исходный пузырек можно теперь либо удалить, либо поместить вручную, куда-нибудь на нашу конструкцию. Выделите пятно с пузырьками и сгруппируйте объекты Ctrl+G. Переместите пятно на стакан.

Тень от стакана

Сделаем тень. Основная тень представляет собой контур. С плавным переходом градиента из прозрачного белого цвета в непрозрачный черный. Тень надо разместить на самом нижнем уровне (клавиша End). Вспомогательный серый прямоугольник, нам, пожалуй, больше не нужен, можно его удалить.

Сделаем еще одну вспомогательную фигуру для тени -стекло прозрачное и тень от него редко бывает равномерной. Заливка вспомогательной фигуры линейный градиент. Слева белый цвет с непрозрачностью 50%, справа абсолютно прозрачный белый цвет. Вспомогательную фигуру тени нужно разместить ниже стакана, но выше тени.

Соломинка

Соломинка это обычная прямая линия, нарисованная пером и залитая линейным градиентом с цветами #048904 и #28AE29.

Добавьте к соломинке тени, белый блик, овал на верхушке. Готовый стакан выглядит так:

Задание: Создайте свое изображение с использованием "клонов" и других возможностей inkscape 

Государственное бюджетное общеобразовательное учреждение Самарской области средняя общеобразовательная школа № 4

городского округа Чапаевск Самарской области

_____________________________________________________________

Методическое пособие

Г.Ю. Зинина

Авторская программа курса внеурочной деятельности «Компьютерная графика» по предметам «Технология» и «Изобразительное искусство»

(с методическим обеспечением)

Чапаевск

2020

Рецензент:

Вихриева Е.Н., заместитель директора ГБУ ДПО СО «Чапаевский ресурсный центр»

Рецендент:

Филатова И.М., директор ГБОУ СОШ № 4 г.о. Чапаевск Самарской области

Зинина Г.Ю., учитель технологии и изобразительного искусства, высшей категории ГБОУ СОШ № 4 г.о. Чапаевск

Авторская программа внеурочной деятельности «Компьютерная графика» по предмету технология и изобразительное искусство с методическим обеспечением: Методическое пособие – Чапаевск: ГБОУ СОШ №4, 2020. - 150с.

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

 Методическое пособие содержит программу внеурочной деятельности «Компьютерная графика» для учащихся 6 классов.

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

   Методическое обеспечение содержит разработанные занятия по каждому разделу программы с кратким самоанализом и разработанный лабораторный практикум для учащихся.

СОДЕРЖАНИЕ

1. Пояснительная записка………………………….……..4
2. Планируемые результаты……………………….…….10
3. Содержание программы …………………..………….17
4. Тематическое планирование ………………………….22
5. Методические рекомендации реализации программы внеурочной деятельности по курсу «Компьютерная графика» в 6-х классах средствами технологии проблемного обучения……………………………….24

6. Список используемой литературы……………….….25

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

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

Данный курс рассчитан на школьников 6-х классов, направлен на развитие и ориентирован на удовлетворение и поощрение любознательности учащихся. Содействует воспитанию нового поколения, отвечающего по своему уровню развития и образу жизни условиям информационного общества.

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

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

  В ходе данного курса необходимо сформировать умения создавать и редактировать объекты, составлять из простых объектов сложные, освоить приемы взаимного расположения объектов, выравнивания и распределения.

Несмотря на огромное многообразие векторных графических редакторов, основные приемы работы с векторными изображениями остаются неизменными.

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

В программе на изучение данного курса отводится 34 часа. Рабочая программа составлена на 34 часа, где:

• на теоретическую часть отводится 11 ч.,
• на практическую часть – 23 ч.  

Изучение теоретического материала сочетается с выполнением практических работ. Контроль осуществляется практически на каждом уроке (визуальный контроль либо самоконтроль).

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

Образовательные задачи:

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

Развивающие задачи:

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

Воспитательные задачи:

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

В рамках курса «Работа с векторным графическим редактором Inkscape» предполагается использование следующих форм обучения:

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

Особое внимание в курсе «Работа с векторным графическим редактором Inkscape» уделяется содержанию практических работ. Их подбор направлен на развитие ассоциативного и образного видов мышления, абстрактного, пространственного, операционного.

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

Поэтому в работе используются следующие методы обучения:

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

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

2.  ПЛАНИРУЕМЫЕ РЕЗУЛЬТАТЫ

Предметные результаты

Учащиеся должны овладеть основами компьютерной графики, а именно, должны знать:

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

В результате освоения свободно векторного графического редактора Inkscape учащиеся должны уметь:

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

Программа обеспечивает достижение следующих личностных, метапредметных и предметных результатов:

Личностные результаты:

• учебно-познавательного интерес к графическому творчеству;
• навык самостоятельной работы и работы в группе при выполнении практических творческих работ;
• выработка навыков применения средств ИКТ в повседневной жизни, при выполнении индивидуальных и коллективных проектов, в учебной деятельности, дальнейшем освоении профессий, востребованных на рынке труда;
• способность к самооценке на основе критерия успешности деятельности;
• заложены основы социально ценных личностных и нравственных качеств: трудолюбие, организованность, добросовестное отношение к делу, инициативность, любознательность, потребность помогать другим, уважение к чужому труду и результатам труда;
• обучение здоровье сберегающим технологиям при работе на личном компьютере и при работе в компьютерном классе: организация рабочего места, режима работы, порядка и способов умственной деятельности.

Школьники получат возможность для формирования:

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

Метапредметные результаты:

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

• развитие познавательных интересов, интеллектуальных и творческих способностей средствами ИКТ;
• умение при помощи информационных технологий самостоятельно искать, отбирать, анализировать и сохранять информацию по заданной теме;
• умение оформлять и представлять материал с помощью средств презентаций, проектов;
• осуществлять итоговый и пошаговый контроль в своей деятельности;
• адекватно воспринимать оценку своих работ окружающими;
• вносить необходимые коррективы в действие после его завершения на основе оценки и характере сделанных ошибок.

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

• освоение знаний, составляющих основу компьютерной графики;
• овладение навыками работы с различными видами графической информации с помощью компьютера и других средств информационных и коммуникационных технологий (ИКТ);
• знание мультимедийных технологий.

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

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

Учащиеся должны знать и уметь:

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

Способы проверки результатов

В процессе обучения детей по данной программе отслеживаются три вида результатов:

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

Выявление достигнутых результатов осуществляется:

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

В работе по программе используются педагогические принципы:

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

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

• принцип учёта возрастных и индивидуальных особенностей.  

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

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

• принцип наглядности.

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

Основные формы педагогического общения:

• монолог;
• диалог.

При создании условий для внутреннего диалога проектируются ситуационные задачи следующего характера:

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

Для создания условий внешнего диалога проектируются:

• вопросительный образ общения;
• обмен мнениями, идеями, позициями.

Для стимулирования учебной активности воспитанников применяются следующие методы воспитания:

• метод поощрения.

Похвала, одобрение, положительные отметки, награждение лучших.  Методы поощрения направлены на закрепления положительного поведения детей.

• метод оценки.

Положительная оценка словом, взглядом, жестом стимулирует ребёнка учиться, трудиться, играть, творить. Чтобы проверить и оценить результаты, после выполнения задания необходимо показать лучшие работы, отмечая те, где наиболее удачно выполнена задача. Обратить внимание детей на положительные стороны тех или иных работ. Не захваливать, но и стараться не обойти вниманием каждого ребенка. Такой способ оценки результатов детских работ даёт стимул к совершенствованию и желание достичь большего. Важно также, чтобы оценивался труд, а не личность, особенно если оценка педагогом даётся отрицательная.

Дети 6-х классов уже способны оценивать свои действия самостоятельно. Поэтому необходимо привлекать детей к проведению самоанализа (сравнивая свою работу с образцом), учить анализировать работу, давать адекватную собственную самооценку своей деятельности и одноклассников. Тем самым у детей развивается аналитическое мышление.

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

• ПК, мультимедийный проектор, экран;
• интерактивная доска.

Содержание элективного курса предполагает следующие виды деятельности:

Репродуктивные:

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

Продуктивные:

• работа с информацией (поиск, анализ и обработка материала);
• изучение материалов СМИ, Интернет-материалов;
• разработка и создание собственного программного продукта.

4. СОДЕРЖАНИЕ ПРОГРАММЫ

1 ГОД ОБУЧЕНИЯ

Раздел 1. Знакомство с графическим редактором Inkscape

Тема 1.1 Введение в компьютерную графику

Основные формы работы. Техника безопасности в компьютерном классе. История развития компьютерной графики. Виды компьютерной графики.

Тема 1.2. Интерфейс программы

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

Тема 1.3. Создание, изменение и сохранение рабочего окна программы Inkscape

        Создание нового документа в векторном графическом редакторе Inkscape. Изменение свойств документа. Знакомство с клавишами быстрого доступа. Сохранение документа.

Практическое занятие: выполнение практической работы: «Создание и изменение рабочего окна».

Раздел 2. Основы работы с объектами

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

Создание и редактирование фигур: «Квадрат и прямоугольник», «Круг эллипс и дуга». Изучение возможностей инструмента «Звездочки и многоугольники». Искажение фигур. Инструмент «Спирали».

Практическое занятие: изображение собственной фигуры «Я так вижу» в векторном графическом редакторе Inkscape.

Тема 2.2. Выравнивание, дублирование и распределение. Группировка объектов

Группировка и разгруппировка нарисованных фигур. Выравнивание, дублирование и распределение объекта на рабочем листе программы Inkscape.

Практическое занятие: нарисовать персонажа с помощью группировки объектов.

Тема 2.3. Заливка и штрих

Изучение вкладок: заливка, цвет штриха, стиль штриха. Виды градиентов. Регулирование альфа-канала. Установка толщины и других параметров штриха.

Практическое занятие: применение градиентной заливки к персонажу, созданному на прошлом занятии.

Тема 2.4. Клонирование объектов

Клонирование и копирование объекта на рисунке. Создание узоров из клона. Применение команды «продублировать» на изображенных объектах.

Практическое занятие: самостоятельно создать рисунок «цветочная поляна», используя авторские кисти для создания цветов и травы.

Раздел 3. Создание и редактирование контуров объекта

Тема 3.1. Закраска рисунков и контуров

Знакомство с понятием «контур» в векторном графическом редакторе Inkscape. Изменение контура. Смещение узлов. Текстурная заливка.

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

Тема 3.2. Изменение стиля градиента и толщины контура

Создание цвета на фигуре. Применение радиальной и линейной градиентной заливки. Создание прозрачности и размытия контура. Изменение толщины контура. Изменение вида угла контура. Установка маркеров цвета на линии.

Практическое занятие: выполнение практической работы «Домик в деревне».

Раздел 4. Создание изображений с помощью кривых

Тема 4.1. Элементы кривых. Редактирование формы кривой.

Элементы кривых: узлы и траектории. Редактирование кривых.

Тема 4.2. Особенности рисования с помощью контурных кривых

Создание иллюстраций из кривых. Знакомство с определением «траектория». Объединение кривых.

Практическое занятие: нарисовать предложенные объекты с помощью кривых.

Раздел 4. Создание изображений с помощью кривых

Тема 4.3. Создание рисунков при помощи кривых Спиро и Распылитель

Кривые Безье и Спиро на панели инструментов. Рисование абстрактных рисунков при помощи кривых Спиро и кривых Безье. Рисование прямой и ломаной линии.

Практическое занятие: выполнение практической работы «Работа с фоном».

Раздел 5. Работа с текстом

Тема 5.1. Работа по созданию текстового объекта

Создание и правка текстовых объектов в векторном графическом редакторе Inkscape. Выделение и трансформация объектов. Изменение полиграфических параметров текста.

Практическое занятие: написать поздравительную открытку, применив полиграфические параметры текста. 

Тема 5.2. Расположение текста вдоль прямой и кривой

Создание и правка текстовых объектов. Расположение символов относительно друг друга по высоте. Распределение текста вдоль траектории. Ввод текста по контору.

Практическое занятие: создание эффекта «землетрясение» для букв текста.

Тема 5.3. Заверстывание текста в блок

Геометрические фигуры и объекты в векторном графическом редакторе Inkscape. Изучение команды «Заверстать в блок».

Практическое занятие: добавление текста в объект.

Тема 5.4. Кёрнинг текста в Inkscape

Знакомство с определением «Кёрнинг». Изучение комбинаций клавиш для поворота букв текста. Изменение параметров ручного кёрнинга.

Раздел 6. Растровые и векторные изображения

Тема 6.1. Вставка растровых фрагментов

Векторный формат Inkscape – SVG. Способы добавления изображений на холст. Команда «Импортировать». Применение к изображению разные трансформации.

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

Тема 6.2. Перевод из векторного в растровое изображение

Знакомство с автоматической векторизацией. Режимы одиночного и множественного сканирования. Использование режима сокращения яркости. Ручная векторизация. Заливка вектором. Растеризация.

Практическое занятие: выполнение лабораторной работы «Перевод изображения из векторного в растровое»

Раздел 7. Творческая работа с использованием графического редактора Inkscape

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

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

3. ТЕМАТИЧЕСКОЕ ПЛАНИРОВАНИЕ

1 год обучения

5. МЕТОДИЧЕСКИЕ РЕКОМЕНДАЦИИ РЕАЛИЗАЦИИ ПРОГРАММЫ ВНЕУРОЧНОЙ ДЕЯТЕЛЬНОСТИ ПО КУРСУ «КОМПЬЮТЕРНАЯ ГРАФИКА» в 6-х КЛАССАХ СРЕДСТВАМИ ТЕХНОЛОГИИ ПРОБЛЕМНОГО ОБУЧЕНИЯ

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

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

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

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

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

Рассмотрим примеры побуждающего диалога.

Пример 1: Клонирование объектов (таблица 1).

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

6.СПИСОК ИСПОЛЬЗУЕМОЙ ЛИТЕРАТУРЫ

1. Внеурочная деятельность [Электронный ресурс]. – Режим доступа: http://www.dub-sh.ru/index.php/action/extracurricular-activities 
2. Внеурочная деятельность по ФГОС [Электронный ресурс]. – Режим доступа: http://nsportal.ru/forum/nachalnayashkola/2012/02/26/vneurochnaya-deyatelnost-po-fgos 
3. Григорьев, Д.В. Внеурочная деятельность школьников / Д.В. Григорьев. – М.: Просвещение, 2010 г.
4. Громыко, Ю.В. Мыследеятельностная педагогика (теоретико-практическое руководство по освоению высших образцов педагогического искусства) / Ю.В. Громыко. – М.: Минск, 2000 г.184 с.
5. Демакова, И.Д. Перспективы развития внеурочной деятельности в контексте построения новой модели образования / И.Д. Демакова. – М.: Методист, 2008 г. – № 7. С. 14 - 19.
6. Какрамова, К. Проблемное обучение: проблема образования или общества? / К. Карамова, Н. Терещенко. – М.: Наука и школа. – 2002 г. –№ 11. – С. 35-37.
7. Махмутов, М.И. Теория и практика проблемного обучения / М.И. Махмутов. – М.: Казань: Таткнигоиздат,1972 г. – 551 с.
8. Обучающие материалы векторного графического редактора Inkscape [Электронный ресурс]. – Режим доступа: https://inkscape.org/ru/#

СПИСОК ЛИТЕРАТУРЫ ДЛЯ УЧАЩИХСЯ:

1. Бутакова, Н.Г. Компьютерная графика / Н.Г. Бутакова. - М.: МГИУ, 2008. - 216 c.
2. Залогова, Л.А. Компьютерная графика. Элективный курс: Учебное пособие / Л.А. Залогова. - М.: Бином. ЛЗ, 2009. - 213 c.
3. Миронов, Д. Компьютерная графика в дизайне / Д. Миронов. - СПб.: BHV, 2014. - 560 c.
4. Тозик, В.Т. Компьютерная графика и дизайн: Учебник / В.Т. Тозик. - М.: Academia, 2016. - 672 c.

ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ

ИНТЕРНЕТ-РЕСУРСЫ

1) Программы графических редакторов: Inkscape.

2) базы данных, информационно-справочные и поисковые системы: информационно-поисковые системы сети Интернет, в том числе Yandex, Google, Yahoo, Rambler и др.;

3)  Иллюстрированные лекции в электронном виде.