Открыть Электронные книги
Категории
Открыть Аудиокниги
Категории
Открыть Журналы
Категории
Открыть Документы
Категории
ФЕДЕРАЦИИ
ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ
ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ
«ТЮМЕНСКИЙ ИНДУСТРИАЛЬНЫЙ УНИВЕРСИТЕТ»
МНОГОПРОФИЛЬНЫЙ КОЛЛЕДЖ
КОМПЬЮТЕРНАЯ ГРАФИКА
Составитель М. Н. Шибеко,
преподаватель высшей квалификационной категории
Тюмень
ТИУ
2021
Компьютерная графика: методические указания по выполнению
практических занятии для обучающихся по специальностям 09.02.03
Программирование в компьютерных системах, 09.02.04 Информационные
системы (по отраслям), очной формы обучения 4 часть / сост. М. Н.
Шибеко; ТИУ. – Тюмень: Издательский центр БИК, ТИУ, 2021. – 48 с. –
текст: непосредственный
Аннотация
2
СОДЕРЖАНИЕ
ПОЯСНИТЕЛЬНАЯ ЗАПИСКА........................................................................4
ОБЩИЕ ТРЕБОВАНИЯ ПО ВЫПОЛНЕНИЮ И ОФОРМЛЕНИЮ
ПРАКТИЧЕСКИХ ЗАНЯТИЙ...........................................................................6
КРИТЕРИИ ОЦЕНКИ ПРАКТИЧЕСКИХ ЗАНЯТИЙ....................................6
ТЕМАТИЧЕСКИЙ ПЛАН ПРАКТИЧЕСКИХ ЗАНЯТИЙ.............................7
ПО КОМПЬЮТЕРНОЙ ГРАФИКЕ..................................................................7
Практическое занятие №9..................................................................................8
Практическое занятие №10..............................................................................39
СПИСОК ЛИТЕРАТУРЫ.................................................................................46
3
ПОЯСНИТЕЛЬНАЯ ЗАПИСКА
4
отчетной документации, принимать участие в разработке проектной
документации на модификацию информационной системы.
ДК 12.1. Выполнять обработку графических изображений и
анимационных роликов с помощью специализированных программных
продуктов.
ДК 12.2. Выполнять проектирование и моделирование трехмерных
объектов с помощью специализированных программных продуктов.
Знать:
базовые понятия и виды компьютерной графики;
цветовые модели, применяемые в различных видах
компьютерной графики;
основы компьютерного моделирования;
алгоритм создания анимации растровых изображений;
различные способы моделирования трехмерных объектов;
правила расстановки источников освещения в трехмерной сцене;
основы визуализации трехмерных сцен;
способы создания анимации трехмерных объектов и ее
сохранения;
принципы динамического трехмерного моделирования;
принципы создания и настройки характеристик графических
изображений растровой и векторной и 3D графики.
Уметь:
разрабатывать собственные программные средства, применяя
средства компьютерной графики;
выбирать инструментальную среду для представления
графического объекта;
трансформировать элементы изображения с помощью векторного
графического редактора;
использовать растровые эффекты растрового графического
редактора;
работать в выбранной среде разработки графических
иллюстраций;
назначать цвета однородной заливки;
группировать и разгруппировать различные объекты;
использовать законы освещения, цвета и формы при создании
графических образов;
использовать основные команды и режимы системы трехмерного
моделирования;
3D Max при создании трехмерной модели изделия.
Иметь практический опыт:
разработка собственных программных средств, применяя средства
компьютерной графики;
5
работа в выбранной среде разработки графических иллюстраций;
использование основных команд и режимов системы трехмерного
моделирования.
На выполнение практического занятия отводится определенное
количество часов в соответствии с тематическим планом учебной
дисциплины Компьютерная графика.
Методические указания к практическим занятиям по дисциплине
Компьютерная графика для обучающихся по специальности 09.02.03
Программирование в компьютерных системах, 09.02.04 Информационные
системы (по отраслям) очной формы обучения окажут помощь
преподавателям в организации и управлении работой обучающихся в
процессе занятий, а также обучающиеся могут использовать их как
пособие для повторения изученного материала, подготовке к
дифференцированному зачету и экзамену.
6
61 - 75 % – «удовлетворительно»;
60 % и менее – «неудовлетворительно».
Оценка «отлично» (максимальное количество баллов) выставляется
обучающемуся, представившему работу, в которой логично и
последовательно изложен теоретический материал, квалифицированно
выполнен анализ, грамотно выполнены необходимые расчеты, даны четкие
выводы, графический материал выполнен с полным соблюдением
установленных требований. В процессе защиты обучающийся
продемонстрировал глубокие знания по теме занятия и четко ответил на
все поставленные вопросы. Преподавателем не обнаружено
принципиальных ошибок.
Оценка «хорошо» выставляется обучающемуся, представившему
работу с соблюдением вышеотмеченных требований при наличии
несущественных замечаний в оформлении, и в том случае, если при защите
имели место неполные ответы.
Оценка «удовлетворительно» выставляется обучающемуся,
представившему работу, которая содержит поверхностно выполненный
анализ изучаемого объекта. Также просматривается непоследовательность
изложения материала, имеются существенные замечания по расчетам и
оформлению. В ходе защиты обучающимся даны неполные или
неаргументированные ответы;
Оценка «неудовлетворительно» выставляется обучающемуся,
представившему работу, которая выполнена со значительными
отступлениями от требований, предъявляемых к практическим занятиям. В
процессе защиты обнаружены принципиальные ошибки в проведенных
расчетах, выводах, имеются значительные нарушения требований по
оформлению и при защите обучающийся практически не смог ответить на
поставленные вопросы.
Отчет по практическому занятию должен быть сдан в конце занятия.
Несвоевременное представление отчета отрицательно влияет на оценку.
7
Практическое занятие №9
Разработка дизайна Web-страниц в Photoshop
Цель: научиться применять технические элементы дизайна при
разработке макетов сайтов, а также изучить возможные способы
компоновки информационных блоков сайта.
Теоретический материал
Дизайн-макет сайта — это прототип интернет-ресурса (портала,
блога, торговой площадки и т. д.), отдельно взятой его странички,
лэндинга, графический образ с прорисованными деталями различных
уровней. Картинка может быть общей, а может достаточно подробно
давать представление обо всем структурном наполнении сайта, навигации
и даже информационном контенте.
Задания к практическому занятию
Задание 4. Разработка дизайна для сайта-портфолио
1. Создайте новый документ и установите размеры Ширины
(Width) и Высоты (Height) так, как это показано на скриншоте ниже.
Залейте фон белым цветом (#ffffff).
8
клавиш CTRL + SHIFT + N, и нарисуйте фигуру, аналогичную той, что
изображена на скриншоте ниже. Залейте ее цветом #ffffff.
9
какой-нибудь текст в наш блок, размер для заголовка возьмите 18 пунктов,
а для самого контента 14. Выделите все слои, задействованные в
формировании данного блока, объедините их в группу, нажав сочетание
клавиш CTRL + G.
10
PT Sans размером 20 пунктов и цвет #212121, для нижней части текста
возьмите размер поменьше, например, 17 пунктов. Выделите все слои,
относящиеся к блоку портфолио, и объедините их в группу (CTRL + G).
11
15. Выделите оставшееся снизу пространство с помощью
инструмента Прямоугольная область выделения (rectangular marquee
tool(М)) и залейте ее цветом #333333.
16. Для футера (нижней части макета сайта), создайте три колонки
и поместите туда какой-нибудь текст, например, такой как на скриншоте.
Для него используйте шрифт PT Sans размером 17 пунктов и цветом
#777777.
12
С помощью инструмента Прямоугольник (Rectangle Tool)
нарисуйте фигуру в центре шаблона используя цвет #7f7f7f.
13
Инструментом Прямоугольник (Rectangle Tool) создайте шапку
сайта.
14
Инструментом Линия (Line Tool) добавьте 1 пиксельную линию,
как на скриншоте ниже.
15
Возьмите инструмент Эллипс (Ellipse Tool) и создайте фигуру.
Трансформируйте эту фигуру так, чтобы получилось что-то вроде этого:
16
Затем добавьте тень под кнопкой, используя ту технику, которую
использовали в слайд-шоу.
17
К этому прямоугольнику примените фильтр Шум и добавьте стили
слоя указанные ниже.
18
Примените фильтр Размытие по Гауссу (Gaussian Blur) и удалите
левую часть фигуры.
Финальный результат:
19
выберите Градиент (Gradient), установите параметры, как показано на
скриншоте. Для градиента используйте цвета #3F4042 и #303133.
20
4. Под группой «Status Bar» создайте группу с названием
«Navigation Bar». Выберите инструмент Прямоугольник со скругленными
углами (Rounded Rectangle Tool) (U) и на панели свойств выберите те
параметры, которые показаны на скриншоте.
Для градиента используйте цвета #5F8F1D и #99B83D. Кликните в
любом месте документа, чтобы открыть всплывающее окно настройки
будущего прямоугольника.
21
Не меняя инструмента Выделение контура (Path Selection Tool)
(A) на панели свойств выберите параметр Вычитание передней фигуры
(Subtract Front Shape).
22
Примените некоторые стили слоя:
23
однородную заливку (Solid Color) из окна настройки Тип заливки фигуры
(Shape Fill Type). Назовите этот слой «Back Bg».
24
Добавьте на кнопку текст, используя параметры, указанные на
скриншоте. Я использовал шрифт Helvetica Neue. Выровняйте текст по
центру фигуры и скопируйте на него стили слоя со слоя «Settings».
25
Назовите слой «Position Empty» и выровняйте его по горизонтали и
вертикали относительно центра слоя «Position Bg».
26
10. Выберите инструмент Эллипс (Ellipse Tool) (U), установите
для него параметры, как показано на скриншоте и кликните в любом месте
документа. Для градиента используйте цвета #444547 и #5C5E61. Назовите
этот слой «Handle».
27
С обеих сторон от слайдера напишите время. Для написания текста
используйте шрифт Helvetica Neue, Bold, размер 10 пунктов и цвет
#B2B2B2. Разместите текст, как показано на скриншоте:
28
Примените стили слоя:
29
Назовите слой «Playback Bg» и выровняйте его по горизонтали и
вертикали слоя «Play Bg».
30
К импортируемым иконкам примените градиент. Инструментом
Выделение контура (Path Selection Tool) (A) выделите слой
«Speaker» и установите параметры, как на скриншоте. Для градиента
используйте цвета #6B6C70 и #797B80.
31
Выровняйте горизонталь слоя по центру документа и по вертикали
опустите его ниже слоя «Play Bg» на 20 пикселов.
32
Инструментом Прямоугольник со скругленными углами
(Rounded Rectangle Tool) (U) нарисуйте фигуру с параметрами, которые
показаны на скриншоте. Установите размер фигуры 160х160 пикселов. В
окне Тип заливки фигуры (Shape Fill Type) установите параметр Нет
цвета (No Color) и установите радиус в 3 пиксела.
33
Инструментом Текст (Т) напишите название проигрываемой песни.
Поместите текст на несколько пикселов ниже центральной части обложки.
34
Сдвиньте дубликат в нижний правый угол документа. Убедитесь в
том, что между двумя фигурами нет зазора.
35
Удалите ненужные опорные точки инструментом Удалить опорные
точки (Delete Anchor Point Tool), кликнув по этим двум точкам.
36
20. Из файла icons.psd перетащите слой «Home».
37
22. Инструментом Прямоугольник (Rectangle Tool) (U)
нарисуйте фигуру с теми параметрами, которые Вы видите на скриншоте.
Для создания градиента используйте цвета #5F8F1D и #99B83D.
38
Напишите текст «Now Playing» с такими параметрами:
39
Цель: освоение возможностей графического редактора CorelDraw,
получение навыков создания изображений в векторном редакторе.
Теоретический материал
Все графические объекты можно разбить на две категории: линии и
примитивы. На рис. 1 представлены несколько экземпляров объектов,
относящихся к классу прямоугольников.
40
9. Выполнить построение многоугольников различных типов и их
модификаций.
10. Воспроизвести фигуры.
11. Построить симметричные и логарифмические спирали с
различным количеством витков.
12. Построить сетку.
Примечание. При построении сетки не меняйте принятых по
умолчанию значений управляющих параметров и обратите внимание на
сообщение в строке состояния: (Группа из 12 объектов на слое 1).
13. Построить плакат с образцами:
вставьте в документ страницу альбомной ориентации, назовите ее
Плакат и постройте плакат в виде таблицы, строки которой соответствуют
освоенным вами инструментам, а в ячейках располагаются образцы
объектов, которые можно с их помощью построить (рис. 1);
сетку для самой таблицы постройте с помощью инструмента Graph
Paper (Диаграммная сетка) во всю ширину страницы, оставив некоторое
место наверху под заголовок.
14. По окончании работы сохраните документ CorelDRAW.
41
5. Зубчики на лучах. На одной стороне луча инструментом Форма,
ближе к вершине, ставим 3 управляющие точки (двойной щелчок, точка
42
3. Голову, лапки, нос, глаз рисуем с помощью эллипса.
− Чтобы преобразовать эллипс выберите инструмент Указатель
(стрелочка) и щелкните внутри эллипса, чтобы появились двойные
стрелочки. С помощью стрелок поверните эллипс.
рисование
5. Нарисуйте кривую, изображающую ухо. С помощью инструмента
Форма добейтесь нужного вида кривой (добавляя и удаляя узлы в
контекстном меню), и выберите в контекстном меню команду Авто-
закрытие (кривая замкнется и ухо можно будет покрасить).
43
8. Соберите все части, изменяя порядок объектов при необходимости
Контекстное меню Порядок…
44
1. Используя любые инструменты построения кривых - ,
например, Свободная форма, рисуем простенькие веточки и листочки.
Контрольные вопросы
45
1. Какие возможности существуют в CorelDRAW для создания
прямоугольников, многоугольников?
2. Какие возможности существуют для создания эллипсов, дуг?
3. Какие возможности существуют для создания спиралей, сеток?
Рекомендуемая литература: 2 [c. 245-254], 4 [c. 125-165], 8 [c. 45-
66], 9 [c. 568-600]
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