ФЕДЕРАЦИИ
ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ
ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ
«ТЮМЕНСКИЙ ИНДУСТРИАЛЬНЫЙ УНИВЕРСИТЕТ»
МНОГОПРОФИЛЬНЫЙ КОЛЛЕДЖ
КОМПЬЮТЕРНАЯ ГРАФИКА
Составитель М. Н. Шибеко,
преподаватель высшей квалификационной категории
Тюмень
ТИУ
2021
Компьютерная графика: методические указания по выполнению
практических занятии для обучающихся по специальностям 09.02.03
Программирование в компьютерных системах, 09.02.04 Информационные
системы (по отраслям), очной формы обучения 3 часть / сост. М. Н.
Шибеко; ТИУ. – Тюмень: Издательский центр БИК, ТИУ, 2021. – 48 с. –
текст: непосредственный
Аннотация
2
СОДЕРЖАНИЕ
ПОЯСНИТЕЛЬНАЯ ЗАПИСКА........................................................................4
ОБЩИЕ ТРЕБОВАНИЯ ПО ВЫПОЛНЕНИЮ И ОФОРМЛЕНИЮ
ПРАКТИЧЕСКИХ ЗАНЯТИЙ...........................................................................6
КРИТЕРИИ ОЦЕНКИ ПРАКТИЧЕСКИХ ЗАНЯТИЙ....................................6
ТЕМАТИЧЕСКИЙ ПЛАН ПРАКТИЧЕСКИХ ЗАНЯТИЙ.............................7
ПО КОМПЬЮТЕРНОЙ ГРАФИКЕ..................................................................7
Практическое занятие №7..................................................................................8
Практическое занятие №8................................................................................29
СПИСОК ЛИТЕРАТУРЫ.................................................................................46
3
ПОЯСНИТЕЛЬНАЯ ЗАПИСКА
4
отчетной документации, принимать участие в разработке проектной
документации на модификацию информационной системы.
ДК 12.1. Выполнять обработку графических изображений и
анимационных роликов с помощью специализированных программных
продуктов.
ДК 12.2. Выполнять проектирование и моделирование трехмерных
объектов с помощью специализированных программных продуктов.
Знать:
базовые понятия и виды компьютерной графики;
цветовые модели, применяемые в различных видах
компьютерной графики;
основы компьютерного моделирования;
алгоритм создания анимации растровых изображений;
различные способы моделирования трехмерных объектов;
правила расстановки источников освещения в трехмерной сцене;
основы визуализации трехмерных сцен;
способы создания анимации трехмерных объектов и ее
сохранения;
принципы динамического трехмерного моделирования;
принципы создания и настройки характеристик графических
изображений растровой и векторной и 3D графики.
Уметь:
разрабатывать собственные программные средства, применяя
средства компьютерной графики;
выбирать инструментальную среду для представления
графического объекта;
трансформировать элементы изображения с помощью векторного
графического редактора;
использовать растровые эффекты растрового графического
редактора;
работать в выбранной среде разработки графических
иллюстраций;
назначать цвета однородной заливки;
группировать и разгруппировать различные объекты;
использовать законы освещения, цвета и формы при создании
графических образов;
использовать основные команды и режимы системы трехмерного
моделирования;
3D Max при создании трехмерной модели изделия.
Иметь практический опыт:
разработка собственных программных средств, применяя средства
компьютерной графики;
5
работа в выбранной среде разработки графических иллюстраций;
использование основных команд и режимов системы трехмерного
моделирования.
На выполнение практического занятия отводится определенное
количество часов в соответствии с тематическим планом учебной
дисциплины Компьютерная графика.
Методические указания к практическим занятиям по дисциплине
Компьютерная графика для обучающихся по специальности 09.02.03
Программирование в компьютерных системах, 09.02.04 Информационные
системы (по отраслям) очной формы обучения окажут помощь
преподавателям в организации и управлении работой обучающихся в
процессе занятий, а также обучающиеся могут использовать их как
пособие для повторения изученного материала, подготовке к
дифференцированному зачету.
6
61 - 75 % – «удовлетворительно»;
60 % и менее – «неудовлетворительно».
Оценка «отлично» (максимальное количество баллов) выставляется
обучающемуся, представившему работу, в которой логично и
последовательно изложен теоретический материал, квалифицированно
выполнен анализ, грамотно выполнены необходимые расчеты, даны четкие
выводы, графический материал выполнен с полным соблюдением
установленных требований. В процессе защиты обучающийся
продемонстрировал глубокие знания по теме занятия и четко ответил на
все поставленные вопросы. Преподавателем не обнаружено
принципиальных ошибок.
Оценка «хорошо» выставляется обучающемуся, представившему
работу с соблюдением вышеотмеченных требований при наличии
несущественных замечаний в оформлении, и в том случае, если при защите
имели место неполные ответы.
Оценка «удовлетворительно» выставляется обучающемуся,
представившему работу, которая содержит поверхностно выполненный
анализ изучаемого объекта. Также просматривается непоследовательность
изложения материала, имеются существенные замечания по расчетам и
оформлению. В ходе защиты обучающимся даны неполные или
неаргументированные ответы;
Оценка «неудовлетворительно» выставляется обучающемуся,
представившему работу, которая выполнена со значительными
отступлениями от требований, предъявляемых к практическим занятиям. В
процессе защиты обнаружены принципиальные ошибки в проведенных
расчетах, выводах, имеются значительные нарушения требований по
оформлению и при защите обучающийся практически не смог ответить на
поставленные вопросы.
Отчет по практическому занятию должен быть сдан в конце занятия.
Несвоевременное представление отчета отрицательно влияет на оценку.
7
Практическое занятие №7
Работа с масками и каналами
Цель: освоить принципы работы с масками и каналами
Теоретический материал
При работе с выделенными областями возникает ряд проблем.
Во-первых, очень часто использование Волшебной палочки или
группы инструментов Lasso (Лассо) не позволяет точно выделить
фрагмент изображения, например, группу людей, зверька с пестрой
окраской, букет цветов и т. д. Поэтому необходимы средства для
уточнения предварительно созданного выделения.
Во-вторых, выделенные области можно редактировать по порядку:
сначала первую, затем вторую, третью и т. д. Важно помнить, что каждый
раз, когда выделяется новая область, выделение старой пропадает.
Следовательно, необходимо иметь возможность сохранять выделенные
области для повторного использования.
Рассмотрим решение этих проблем в Photoshop.
Для работы с выделенными областями используются два режима:
- стандартный режим;
- режим быстрой маски.
В этих режимах выделенная и маскированная области отображаются
по-разному. В стандартном режиме выделение ограничено мерцающей
пунктирной линией. В режиме быстрой маски на изображение наложена
маска, содержащая прозрачную и непрозрачную области.
Задание к зрактическому занятию
Задание 1. Разработка обложки для компьютерной игры
1. Создайте новый документ со следующими размерами 1440 x
810 px, цвет заднего фона белый. Откройте исходное изображение с
моделью в программе Photoshop. Создайте выделение вокруг изображения
модели, а затем скопируйте / вклейте (Copy/Paste) выделенное
изображение на ваш рабочий документ. Расположите солдата в правой
части изображения:
8
В результате получится следующий эффект.
Уровни (Levels)
Кривые (Curves)
9
Результат на данный шаге:
10
Дайте название вашей кисти:
11
В результате получится следующий эффект.
12
6. Выборочный шаг: с помощью кистей Акварель / Гранж
(https://creativo.one/adds/brushes/10124-kist-dlya-fotoshopa-granj-.html),
можно добавить эффекты вокруг изображения солдата:
Итоговый результат:
13
Задание 2. Создание зимнего пейзажа
1. Откройте изображение «Рассвет в Финляндии» и измените
размеры изображения на: 2000 х 1333 px. Данный шаг является
необязательным, но для иллюстрации данного задания, этого размера
будет достаточно.
14
Размер (Size): 200 px
Жёсткость (Hardness): 0%
Поменяйте режим наложения для кисти на Перекрытие (overlay),
нажав клавиши Alt + Shift + O, убедитесь, что цвет переднего плана
выставлен на белом цветовом оттенке. Несколько раз плавно пройдитесь
кистью, чтобы удалить серые оттенки и старайтесь, не задевать деревья,
чтобы они оставались чёрными.
15
9. Далее, добавьте немного цвета к авансцене. Создайте новый
корректирующий слой, идём Слой- Новый корректирующий слой –
Фото Фильтр (Layer > New adjustment layer > Photo Filter). Данный
корректирующий слой будет применяться в качестве обтравочной маски,
расположите его поверх предыдущего корректирующего слоя. Примените
следующие настройки:
Цвет (Color): #bfd500
Плотность (Density): 93%
Сохранить свечение (Preserve Luminosity): Поставить галочку
(checked)
Поменяйте режим наложения на Осветление основы (Color dodge) и
уменьшите Заливку (fill) до 40%.
16
Поменяйте режим наложения на Перекрытие (Overlay) и уменьшите
Непрозрачность (opacity) слоя до 20%. Удерживая клавишу Alt, далее
потяните мышью слой - маску корректирующего слоя Фото Фильтр 1 и
отпустите на слой- маске корректирующего слоя Фото Фильтр 2.
Появится окно Заменить Слой- маску? (Replace Layer Mask?). Нажмите
Да (yes), далее нажмите клавиши Ctrl +I, для реверсии слой- маски.
17
15. Создайте новый корректирующий слой Карта Градиента
(gradient map), убедитесь, что он создан в качестве обтравочной маски.
Примените настройки, как на скриншоте ниже. Для цвета переднего плана
примените чёрный цветовой оттенок, а для цвета заднего плана
используйте #0ef0f8. Поменяйте режим наложения на Мягкий свет (Soft
Light) и уменьшите Непрозрачность (opacity) слоя до 40%.
18
применить трансформацию и далее нажмите Q, чтобы выйти из
режима быстрой маски. Для того, чтобы это работало соответствующим
образом, дважды щёлкните по иконке Быстрой маски в левой панели
настроек и выберите опцию Маскированные области (selected areas).
19
Установите Непрозрачность (opacity) кисти на 50% и убедитесь, что
слой-маска слоя Луны активна. Если слой- маска не активна, то просто
щёлкните по ней. Далее, аккуратно пройдитесь кистью по участкам, где
облака накладываются на Луну. На изображении видно, что Луна
немножко стала исчезать, поэтому увеличьте непрозрачность слоя с Луной
до 80%.
20
Вы можете использовать 50% непрозрачность кисти в тех местах, где
облака едва видны.
21
27. Откройте изображение «Полярный медведь Oso». Выделите
медведя с помощью ваших любимых инструментов выделения. Я
использовал инструмент Быстрое выделение (quick selection tool). Не
переживайте насчёт острых краёв, этот момент мы разрешим позже.
22
30. Удалите старый слой с медведем и переименуйте новый слой в
Полярного Медведя. Добавьте корректирующий слой Цветовой баланс
(color balance), в качестве обтравочной маски и примените настройки,
которые указаны на скриншоте ниже. Поменяйте режим наложения на
Цветность (color) и уменьшите Непрозрачность (opacity) слоя до 70%.
23
между слоем Цветовой баланс и слоем Полярный медведь. Нажмите
клавишу D, чтобы установить цвета по умолчанию.
Примечание переводчика: убедитесь, что вы стоите на слое Тень.
Сейчас нажмите Alt+Shift+Backspace, чтобы залить тусклые пиксели
чёрным цветом. Вы, возможно, не увидите какого-либо изменения, потому
что слой с тенью расположен ниже слоя с медведем. Нажмите Ctrl + T для
трансформации нашего слоя с тенью. Потяните центральную точку в
нижний левый угол. Трансформируйте тень, как показано на скриншоте
ниже.
Примечание: в режиме трансформация, для создания тени,
примените опцию Деформация или Перспектива.
24
35. Создайте следы от лап медведя. Создайте новый слой и
расположите этот слой поверх всех слоёв. Назовите этот слой Следы.
Выберите кисть Chalk 17 px и уменьшите непрозрачность кисти до 50%.
Нарисуйте следы за медведем на снегу, как показано на скриншоте ниже.
Примечание: в начале урока, автор не указал ссылку на кисти Chalk
/ Мел, возможно, автор использовал данные кисти из стандартного
набора кистей Photoshop.
25
Поменяйте режим наложения для слоя цветовой баланс на Цветность
(Color).
26
аккуратно пройдитесь в области деревьев. Попробуйте оставить снег и
небо без изменений. Также, аккуратно пройдитесь кистью по полярному
медведю. Уменьшите непрозрачность кисти до 70% и увеличьте размер
кисти. Аккуратно пройдитесь кистью поверх сияния и Луны. Также
произвольно пройдитесь кистью по белым облакам. Попробуйте не
задевать небо. Примените Фильтр - Размытие – Размытие по Гауссу
(Filter > Blur >Gaussian blur).
27
42. Сейчас примените старый композиционный трюк, чтобы
направить взгляд наблюдателя в центр нашего изображения: виньетку.
Создайте новый слой и поместите его поверх наших слоёв. Поменяйте
режим наложения для этого слоя на Умножение (multiply) и уменьшите
непрозрачность слоя до 30%. Выберите большую мягкую круглую кисть,
установите непрозрачность кисти на 50%. Аккуратно пройдитесь кистью
несколько раз по боковым сторонам и по верхней части изображения.
Меньше используйте кисть в нижней части изображения, т.к. нижняя часть
уже тёмная.
28
Итоговый результат
Контрольные вопросы
1. Что такое маска в Photoshop?
2. Для чего применяется маска?
3. Как можно создать Быструю маску?
4. Какими способами можно создать маску в альфа-канале?
Рекомендуемая литература: 2 [c. 21 - 25], 4 [c. 54 - 100], 8 [c. 23 -
54], 9 [c. 154 - 155]
Практическое занятие №8
Разработка gif-анимации в Adobe Photoshop
Цель: формирование навыков создания анимационных изображений.
Теоретический материал
Анимация – это оживление статичных изображений, сменяющих
друг друга в определенной последовательности. Мультипликация – это
покадровая анимация. Рисунки, выполненные на прозрачной пленке,
накладываются друг на друга c интервалом менее 1/10 секунды. Благодаря
инерционности зрения впечатления сливаются, создавая картину
движения. Тот же принцип действует в Adobe Photoshop: сначала
необходимо создать статичные кадры для анимации. Кадров этих может
быть 2-5, а может быть больше. Чем больше кадров, тем красочнее
анимация, но тем больше размер получаемого анимационного файла.
Задания к практическому занятию
Задание 1. Анимация блеска.
1. Этот эффект применяется к готовым изображениям, фото.
Загрузить документ, на котором хотим создать анимацию блеска. Далее
меняем цветовой режим изображения командой Image/Mode
(Изображение/Режим) на RGB Color (если уже так и было - оставляем
без изменения). Дублируем фоновый слой 2 раза. Активный слой -
29
фоновый. Команда Filter/Render/LensFlare (Фильтр/Рендеринг/Блик) с
параметрами: яркость - 45%; 35 мм, ставим первый блик.
30
Разместите направляющие. Они помогут позиционировать фигуру в
центре документа. Если у вас не видны линейки на верхней и левой части
рабочей области, нажмите комбинацию клавиш Ctrl+R и они появятся.
Вытащите направляющие. Если у вас в меню Вид (View) включена
Привязка (Snap), то направляющие при передвижении по горизонтали и
вертикали сами будут «цепляться» в центре документа.
31
Теперь измените цвет второй фигуры. Щёлкните дважды по
миниатюре слоя с фигурой и установите ей цвет со значением #262626,
который будет чуть светлее фона.
32
Как только произвольная фигура выбрана, нужно вычесть её из
круга. В верхнем меню установить опцию Вычесть переднюю фигуру
(Subtract Front Shape) и в появившемся окошке ввести свои настройки для
фигуры вычитания.
33
Этот градиент будет несколько иной, чем вы создали ранее. Для
начала поставьте ему стиль Радиальный (Radial).
34
Теперь перейдите к главному свечению, которое будет отображаться
в «окошке». Дублируйте слой со свечением Ctrl+J, которые вы создали
ранее, и с помощью Ctrl+T уменьшите его до размеров верхней фигуры.
Удерживая клавиши Shift и Alt, вы сможете масштабировать фигуру
пропорционально к центру.
35
слой свечения в отдельный Смарт Объект (Smart Object) из которых и
будете создавать анимацию. Щёлкните правой кнопкой мыши по первому
созданному слою со свечением и выберите в меню опцию Преобразовать
в смарт-объект (Convert to Smart Object).
36
После того, как первый ключевой кадр создан, перетащите
индикатор текущего времени (обозначается синим слайдером) немного
вправо на временной шкале. Это будет полпути анимации, где необходимо
сделать первый поворот.
37
Чтобы установить продолжительность вашей анимации, в правом
углу временной шкалы сдвиньте движок (задать конец рабочего участка) к
последнему ключевому кадру.
Итоговый результат
38
2. Добавьте на фон узор, а затем приступите к созданию загрузчика.
Создайте новый документ 7рх на 7рх с прозрачным фоном. Выберите
Pencil Tool (Карандаш) 1рх цвет чёрный и нарисуйте диагональную
линию. (Щёлкните в левом верхнем углу, зажмите Shift и щёлкните в
правом нижнем углу).
39
Поверните линию на 45° - меню Edit> Free Transform – Ctrl+T
(Редактирование-Свободное Трансформирование)
40
Примечание: щёлкните Стрелкой по контуру формы, далее
щёлкните по одной точке с какой-либо стороны формы и с зажатой Shift
щёлкните по второй. Обе точки выделятся. Далее стрелкой на
клавиатуре сдвиньте эти точки. То же проделайте и с двумя точками с
другой стороны формы, сдвиньте противоположной стрелкой на
клавиатуре на такое же количество сдвигов.
5. Стилизация форм
41
На созданной предварительной форме загрузчика, добавьте
несколько стилей слоя, чтобы немного его украсить.
Color Overlay (Перекрытие Цветом) цвет # 242424
42
7. Теперь добавьте стили для каждого слоя. На слой под названием
Shine-Active добавьте стиль слоя Outer Glow (Внешнее Свечение) цвет #
90dcfc:
43
На слое под названием Shine-Fading2 измените цвет в стиле Color
Overlay (Перекрытие Цветом) на цвет #0087c6 непрозрачность 80%.
На слое Shine-Fading3 изменим цвет в стиле Color Overlay
(Перекрытие Цветом) на цвет #0087c6 непрозрачность 25% (обратите
внимание на изменение непрозрачности).
Примечание: если форма этого слоя белая, смените её цвет на #242424
44
Загрузчик должен выглядеть примерно так:
9. Анимация загрузчика
Откройте панель анимации Window> Animation (Окно-Анимация).
Выключите видимость всех групп, кроме первой, затем нажмите кнопку
Duplicate Selected Frames (Дублировать Выбранные Кадры) в панели
анимации.
Примечание: в версиях CS6 и выше Window-Timeline –Сreate Frame
Animation (Окно-Шкала Времени-Создать Покадровую Анимацию)
Далее сохраните анимацию File > Save for Web & Devices.
Используйте следующие параметры для анимации GIF.
45
Откройте ваш GIF в веб-браузере для просмотра.
46
СПИСОК ЛИТЕРАТУРЫ
47
7. Новожилов, О. П. Информатика : учебник для среднего
профессионального образования / О. П. Новожилов. — 3-е изд., перераб. и
доп. — Москва : Издательство Юрайт, 2019. — 620 с. —
(Профессиональное образование). — ISBN 978-5-9916-8730-0. — Текст :
электронный // ЭБС Юрайт [сайт]. — URL: https://urait.ru/bcode/427004
(дата обращения: 15.06.2020).
8. Советов, Б. Я. Информационные технологии : учебник для
среднего профессионального образования / Б. Я. Советов, В. В.
Цехановский. — 7-е изд., перераб. и доп. — Москва : Издательство Юрайт,
2020. — 327 с. — (Профессиональное образование). — ISBN 978-5-534-
06399-8. — Текст : электронный // ЭБС Юрайт [сайт]. — URL:
https://urait.ru/bcode/450686 (дата обращения: 15.06.2020).
9. Таранцев, И. Г. Компьютерная графика : учебное пособие для
СПО / И. Г. Таранцев. — Саратов, Москва : Профобразование, Ай Пи Ар
Медиа, 2020. — 69 c. — ISBN 978-5-4488-0781-7, 978-5-4497-0445-0. —
Текст : электронный // Электронно-библиотечная система IPR BOOKS :
[сайт]. — URL: http://www.iprbookshop.ru/96014.html (дата обращения:
15.06.2020). — Режим доступа: для авторизир. пользователей.
10. Третьяк, Т. М. Photoshop. Творческая мастерская компьютерной
графики / Т. М. Третьяк, Л. А. Анеликова. — Москва : СОЛОН-ПРЕСС,
2017. — 175 c. — ISBN 978-5-91357-085-5. — Текст : электронный //
Электронно-библиотечная система IPR BOOKS : [сайт]. — URL:
http://www.iprbookshop.ru/90283.html (дата обращения: 15.06.2020). —
Режим доступа: для авторизир. пользователей.
11. Трофимов, В. В. Информационные технологии в 2 т. Том 1 :
учебник для вузов / В. В. Трофимов ; ответственный редактор В. В.
Трофимов. — Москва : Издательство Юрайт, 2020. — 238 с. — (Высшее
образование). — ISBN 978-5-534-01935-3. — Текст : электронный // ЭБС
Юрайт [сайт]. — URL: https://urait.ru/bcode/451790 (дата обращения:
15.06.2020).
48
Учебное издание
КОМПЬЮТЕРНАЯ ГРАФИКА
Составитель
Шибеко Марина Николаевна
Ответственный редактор
Р. Ф. Ахатова, председатель ЦК ЕНиОПД отделения ИТВТ
В авторской редакции
Библиотечно-издательский комплекс
федерального государственного бюджетного
образовательного учреждения высшего образования
«Тюменский индустриальный университет».
625000, Тюмень, ул. Володарского, 38.
49