МИНИСТЕРСТВО НАУКИ И ВЫСШЕГО ОБРАЗОВАНИЯ РОССИЙСКОЙ

ФЕДЕРАЦИИ
ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ
ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ
«ТЮМЕНСКИЙ ИНДУСТРИАЛЬНЫЙ УНИВЕРСИТЕТ»
МНОГОПРОФИЛЬНЫЙ КОЛЛЕДЖ

Отделение информационных технологий

и вычислительной техники

КОМПЬЮТЕРНАЯ ГРАФИКА

Методические указания по выполнению практических занятии по

дисциплине Компьютерная графика для обучающихся по специальностям
09.02.03 Программирование в компьютерных системах,
09.02.04 Информационные системы (по отраслям)
очной формы обучения
Часть 3

Составитель М. Н. Шибеко,
преподаватель высшей квалификационной категории

Тюмень
ТИУ
2021
 Компьютерная графика: методические указания по выполнению
практических занятии для обучающихся по специальностям 09.02.03
Программирование в компьютерных системах, 09.02.04 Информационные
системы (по отраслям), очной формы обучения 3 часть / сост. М. Н.
Шибеко; ТИУ. – Тюмень: Издательский центр БИК, ТИУ, 2021. – 48 с. –
текст: непосредственный

Ответственный редактор: Р. Ф. Ахатова, председатель ЦК ЕНиОПД

информационных технологий и вычислительной техники

Методические указания рассмотрены и рекомендованы к изданию на

заседании цикловой комиссии математических, естественнонаучных и
общепрофессиональных дисциплин отделения информационных
технологий и вычислительной техники
«__» ________ 20__ года, протокол № _

Аннотация

Методические указания по выполнению практических занятии по

дисциплине Компьютерная графика предназначены для обучающихся по
специальностям 09.02.03 Программирование в компьютерных системах,
09.02.04 Информационные системы (по отраслям). Данная дисциплина
изучается в двух семестрах.
Приведены перечень и темы практических занятий. Представлены
требования к выполнению и оформлению практических занятий. Даны
методические указания для практических занятий. Представлен список
рекомендуемой литературы.
Методические указания к практическим занятиям окажут помощь
преподавателям в организации и управлении работой обучающихся в
процессе занятий, а также обучающиеся могут использовать их как
пособие для повторения изученного материала, подготовке к
дифференцированному зачету и экзамену.

2
 СОДЕРЖАНИЕ

ПОЯСНИТЕЛЬНАЯ ЗАПИСКА........................................................................4
ОБЩИЕ ТРЕБОВАНИЯ ПО ВЫПОЛНЕНИЮ И ОФОРМЛЕНИЮ
ПРАКТИЧЕСКИХ ЗАНЯТИЙ...........................................................................6
КРИТЕРИИ ОЦЕНКИ ПРАКТИЧЕСКИХ ЗАНЯТИЙ....................................6
ТЕМАТИЧЕСКИЙ ПЛАН ПРАКТИЧЕСКИХ ЗАНЯТИЙ.............................7
ПО КОМПЬЮТЕРНОЙ ГРАФИКЕ..................................................................7
Практическое занятие №7..................................................................................8
Практическое занятие №8................................................................................29
СПИСОК ЛИТЕРАТУРЫ.................................................................................46

3
 ПОЯСНИТЕЛЬНАЯ ЗАПИСКА

Методические указания по выполнению практических занятии

составлены в соответствии с программой учебной дисциплины
Компьютерная графика и предназначены для обучающихся по
специальности 09.02.03 Программирование в компьютерных системах,
09.02.04 Информационные системы (по отраслям).
Практические занятия занимают важное место при изучении
дисциплины Компьютерная графика.
Целями и задачами выполнения практических занятий являются:
 обобщение, углубление, систематизация и закрепление
полученных теоретических знаний;
 формирование практических умений и навыков работы в Corel-
Draw, Adobe Photoshop, 3DS Max.
 формирование умений применять полученные знания на практике;
 развитие таких профессионально значимых качеств личности, как
наблюдательность, умение сравнивать, обобщать, ответственность,
творческая инициатива.
В результате освоения дисциплины, у обучающихся формируются
общие, профессиональные компетенции и дополнительные компетенции:
ОК 1. Понимать сущность и социальную значимость будущей
профессии, проявлять к ней устойчивый интерес.
ОК 2. Организовывать собственную деятельность, выбирать типовые
методы и способы выполнения профессиональных задач, оценивать их
эффективность и качество
ОК 3. Принимать решения в стандартных и нестандартных
ситуациях и нести за них ответственность.
ОК 4. Осуществлять поиск и использование информации,
необходимой для постановки и решения профессиональных задач,
профессионального и личностного развития.
ОК 5. Использовать информационно-коммуникационные технологии
в профессиональной деятельности.
ОК 6. Работать в коллективе и команде, эффективно общаться с
коллегами, руководством, потребителями.
ОК 7. Брать на себя ответственность за работу членов команды
(подчинённых), результат выполнения заданий.
ОК 8. Самостоятельно определять задачи профессионального и
личностного развития, заниматься самообразованием, осознанно
планировать повышение квалификации.
ОК 9. Ориентироваться в условиях частой смены технологий в
профессиональной деятельности.
ПК 1.1. Собирать данные для анализа использования и
функционирования информационной системы, участвовать в составлении

4
отчетной документации, принимать участие в разработке проектной
документации на модификацию информационной системы.
ДК 12.1. Выполнять обработку графических изображений и
анимационных роликов с помощью специализированных программных
продуктов.
ДК 12.2. Выполнять проектирование и моделирование трехмерных
объектов с помощью специализированных программных продуктов.
Знать:
 базовые понятия и виды компьютерной графики;
 цветовые модели, применяемые в различных видах
компьютерной графики;
 основы компьютерного моделирования;
 алгоритм создания анимации растровых изображений;
 различные способы моделирования трехмерных объектов;
 правила расстановки источников освещения в трехмерной сцене;
 основы визуализации трехмерных сцен;
 способы создания анимации трехмерных объектов и ее
сохранения;
 принципы динамического трехмерного моделирования;
 принципы создания и настройки характеристик графических
изображений растровой и векторной и 3D графики.
Уметь:
 разрабатывать собственные программные средства, применяя
средства компьютерной графики;
 выбирать инструментальную среду для представления
графического объекта;
 трансформировать элементы изображения с помощью векторного
графического редактора;
 использовать растровые эффекты растрового графического
редактора;
 работать в выбранной среде разработки графических
иллюстраций;
 назначать цвета однородной заливки;
 группировать и разгруппировать различные объекты;
 использовать законы освещения, цвета и формы при создании
графических образов;
 использовать основные команды и режимы системы трехмерного
моделирования;
 3D Max при создании трехмерной модели изделия.
Иметь практический опыт:
 разработка собственных программных средств, применяя средства
компьютерной графики;

5
  работа в выбранной среде разработки графических иллюстраций;
 использование основных команд и режимов системы трехмерного
моделирования.
На выполнение практического занятия отводится определенное
количество часов в соответствии с тематическим планом учебной
дисциплины Компьютерная графика.
Методические указания к практическим занятиям по дисциплине
Компьютерная графика для обучающихся по специальности 09.02.03
Программирование в компьютерных системах, 09.02.04 Информационные
системы (по отраслям) очной формы обучения окажут помощь
преподавателям в организации и управлении работой обучающихся в
процессе занятий, а также обучающиеся могут использовать их как
пособие для повторения изученного материала, подготовке к
дифференцированному зачету.

ОБЩИЕ ТРЕБОВАНИЯ ПО ВЫПОЛНЕНИЮ И ОФОРМЛЕНИЮ

ПРАКТИЧЕСКИХ ЗАНЯТИЙ

Каждое практическое занятие в соответствии с требованиями

преподавателя предусматривает защиту.
Каждое занятие оформляется в специальной тетради для
практических занятий.
Ход выполнения работ:
 выполнить задания;
 аккуратно оформить предложенные задания и рисунки в отчеты по
практическому занятию;
 письменно ответить на контрольные вопросы;
 защитить работу.
Форма отчетности:
Результатом выполнения практического занятия является устная
защита с предъявлением оформленной работы в отчете.

КРИТЕРИИ ОЦЕНКИ ПРАКТИЧЕСКИХ ЗАНЯТИЙ

Практическое занятие оценивается по рейтинговой системе в

соответствии с приложением к рабочей программе.
Оценка за практическое занятие выставляется по совокупности:
 правильность и полнота выполнения практического занятия;
 соответствие предъявляемым требованиям;
 своевременность представления отчета.
Принята следующая градация выполнения занятий:
91 - 100 % – «отлично»;
76 - 90 % – «хорошо»;

6
 61 - 75 % – «удовлетворительно»;
60 % и менее – «неудовлетворительно».
Оценка «отлично» (максимальное количество баллов) выставляется
обучающемуся, представившему работу, в которой логично и
последовательно изложен теоретический материал, квалифицированно
выполнен анализ, грамотно выполнены необходимые расчеты, даны четкие
выводы, графический материал выполнен с полным соблюдением
установленных требований. В процессе защиты обучающийся
продемонстрировал глубокие знания по теме занятия и четко ответил на
все поставленные вопросы. Преподавателем не обнаружено
принципиальных ошибок.
Оценка «хорошо» выставляется обучающемуся, представившему
работу с соблюдением вышеотмеченных требований при наличии
несущественных замечаний в оформлении, и в том случае, если при защите
имели место неполные ответы.
Оценка «удовлетворительно» выставляется обучающемуся,
представившему работу, которая содержит поверхностно выполненный
анализ изучаемого объекта. Также просматривается непоследовательность
изложения материала, имеются существенные замечания по расчетам и
оформлению. В ходе защиты обучающимся даны неполные или
неаргументированные ответы;
Оценка «неудовлетворительно» выставляется обучающемуся,
представившему работу, которая выполнена со значительными
отступлениями от требований, предъявляемых к практическим занятиям. В
процессе защиты обнаружены принципиальные ошибки в проведенных
расчетах, выводах, имеются значительные нарушения требований по
оформлению и при защите обучающийся практически не смог ответить на
поставленные вопросы.
Отчет по практическому занятию должен быть сдан в конце занятия.
Несвоевременное представление отчета отрицательно влияет на оценку.

ТЕМАТИЧЕСКИЙ ПЛАН ПРАКТИЧЕСКИХ ЗАНЯТИЙ

ПО КОМПЬЮТЕРНОЙ ГРАФИКЕ
Количество
Название практического занятия
часов
Практическое занятие №7. Работа с масками и каналами 2
Практическое занятие №8. Разработка gif-анимации в
2
Adobe Photoshop

7
 Практическое занятие №7
Работа с масками и каналами
Цель: освоить принципы работы с масками и каналами
Теоретический материал
При работе с выделенными областями возникает ряд проблем.
Во-первых, очень часто использование Волшебной палочки или
группы инструментов Lasso (Лассо) не позволяет точно выделить
фрагмент изображения, например, группу людей, зверька с пестрой
окраской, букет цветов и т. д. Поэтому необходимы средства для
уточнения предварительно созданного выделения.
Во-вторых, выделенные области можно редактировать по порядку:
сначала первую, затем вторую, третью и т. д. Важно помнить, что каждый
раз, когда выделяется новая область, выделение старой пропадает.
Следовательно, необходимо иметь возможность сохранять выделенные
области для повторного использования.
Рассмотрим решение этих проблем в Photoshop.
Для работы с выделенными областями используются два режима:
- стандартный режим;
- режим быстрой маски.
В этих режимах выделенная и маскированная области отображаются
по-разному. В стандартном режиме выделение ограничено мерцающей
пунктирной линией. В режиме быстрой маски на изображение наложена
маска, содержащая прозрачную и непрозрачную области.
Задание к зрактическому занятию
Задание 1. Разработка обложки для компьютерной игры
1. Создайте новый документ со следующими размерами 1440 x
810 px, цвет заднего фона белый. Откройте исходное изображение с
моделью в программе Photoshop. Создайте выделение вокруг изображения
модели, а затем скопируйте / вклейте (Copy/Paste) выделенное
изображение на ваш рабочий документ. Расположите солдата в правой
части изображения:

К слою с солдатом, добавьте слой-маску и с помощью большого

мягкого Ластика (eraser tool), создайте мягкое обесцвечивание,
щёлкнув слева от солдата.
Примечание: с помощью мягкой чёрной кисти, находясь на маске
слоя, щёлкните слева от солдата, поиграйте с непрозрачностью кисти.

8
 В результате получится следующий эффект.

Далее, к слою с моделью, примените следующие 3 корректирующих

слоя в качестве обтравочных масок.
Чёрно-белый (Black and White)

Перейдите на маску корректирующего слоя Чёрно-белы (Black and

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

Уровни (Levels)

Кривые (Curves)

9
 Результат на данный шаге:

2. В этом шаге необходимо добавить рендеринг C4D к сцене.

Откройте набор C4D в программе Photoshop. Выделите рендеринг, как
показано на скриншоте ниже.

Скопируйте / вклейте (Copy / Paste) выделенный рендеринг на свой

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

Добавьте осколки вокруг изображения солдата, как показано на

скриншоте ниже.
Не забывайте корректировать размер рендеринга.

3. В этом шаге необходимо создать свою кисть. Создайте новый

документ со следующими размерами 300 х 300 px, создайте новый слой.
Нарисуйте фигуру, как показано на скриншоте ниже. Далее, отключите
видимость слоя с задним фоном:

Далее Редактирование – Определить кисть (Edit > Define Brush

Preset):

10
 Дайте название вашей кисти:

Нажмите клавишу «F5», чтобы появилось окно настроек кисти.

Примените следующие настройки, которые указаны скриншотах ниже:

Примените созданную кисть. Нарисуйте абстрактный узор, как

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

4. Откройте исходное изображение с городским пейзажем в

программе Photoshop. Выделите часть изображения, как показано на
скриншоте ниже.

Скопируйте / вклейте (Copy / Paste) выделенную часть

изображения с городским пейзажем. Расположите слой с фрагментом
города поверх слоя с абстрактным узором. Далее, преобразуйте слой с
городским пейзажем в обтравочную маску.
Примечание: щёлкните правой кнопкой мыши по слою с городским
пейзажем и в появившемся окне выберите опцию Создать обтравочную
маску (Create clipping mask).

11
 В результате получится следующий эффект.

5. Откройте исходное изображение со сценой сражения в

программе Photoshop. Используйте отдельные фрагменты данного
изображения для усиления драматического эффекта дизайна:

Скопируйте / вклейте (Copy / Paste) выделенный фрагмент

изображения на рабочий документ. Поменяйте режим наложения на
Осветление (Screen):

Расположите слой с выделенным фрагментом поверх слоя с

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

Выделите ещё один фрагмент сцены сражения:

Скопируйте / вклейте выделенный фрагмент изображения на

рабочий документ. Поменяйте режим наложения на Осветление (Screen).
Расположите данный фрагмент изображения возле ног солдата:

12
 6. Выборочный шаг: с помощью кистей Акварель / Гранж
(https://creativo.one/adds/brushes/10124-kist-dlya-fotoshopa-granj-.html),
можно добавить эффекты вокруг изображения солдата:

В заключение, создайте объединённый слой, затем продублируйте

полученный объединённый слой. К дубликату слоя, примените фильтр
Контурная резкость (Unsharp Mask filter), чтобы слегка усилить резкость
изображения:
Примечание: 1. Чтобы создать объединённый слой из всех видимых
слоёв, убедитесь, что вы находитесь на самом верхнем слое, а затем
нажмите клавиши (Ctrl+Shift+Alt+E)
2. Для активации фильтра Контурная резкость (Unsharp Mask filter),
идём Фильтр – Усиление резкости - Контурная резкость (Filter –
Sharpen – Unsharp Mask).

Добавьте следующие корректирующие слои, в качестве цветовой

коррекции всего изображения:
Цветовой Баланс (Color Balance)

Фото Фильтр (Photo Filter) уберите галочку в окошке Сохранить

свечение (Preserve Luminosity)

Итоговый результат:

13
 Задание 2. Создание зимнего пейзажа
1. Откройте изображение «Рассвет в Финляндии» и измените
размеры изображения на: 2000 х 1333 px. Данный шаг является
необязательным, но для иллюстрации данного задания, этого размера
будет достаточно.

2. Удалите небо с помощью маски канала. Зайдите в закладку

Каналы (channels) и создайте копию красного канала (red channel).
Можно просто щёлкнуть правой кнопкой мыши по каналу и выбрать
опцию Создать дубликат канала (Duplicate channel). Теперь выделите
только копию красного канала и далее перейдите Изображение –
Внешний канал (Image > Apply Image). Установите режим наложения
Яркий свет (vivid light), непрозрачность (opacity) 100%.

3. Выделите нижнюю часть копии красного канала, как показано на

скриншоте ниже. Нажмите клавишу D, чтобы выставить по умолчанию
цвета переднего и заднего плана, далее нажмите клавиши Ctrl + Backspace,
чтобы залить выделение чёрным цветом.
Примечание: Для выделения можно использовать любой
инструмент выделения на своё усмотрение.

4. Выделите верхнюю часть копии красного канала и нажмите

клавиши Alt + Backspace, чтобы залить выделение белым цветом.

5. Нажмите клавиши Ctr + D, чтобы снять выделение. Выберите

круглую кисть и установите следующие настройки:

14
 Размер (Size): 200 px
Жёсткость (Hardness): 0%
Поменяйте режим наложения для кисти на Перекрытие (overlay),
нажав клавиши Alt + Shift + O, убедитесь, что цвет переднего плана
выставлен на белом цветовом оттенке. Несколько раз плавно пройдитесь
кистью, чтобы удалить серые оттенки и старайтесь, не задевать деревья,
чтобы они оставались чёрными.

6. Нажмите клавиши Ctrl + I, чтобы провести реверсию канала.

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

7. Ctrl + щёлкните по копии красного канала, чтобы загрузить

выделение, затем нажмите клавиши Ctrl + 2. Далее, нажмите клавиши Ctrl
+ J, чтобы создать новый слой с изображением того, что было выделено.
Вы искусно вырезали объект с помощью маски канала. Теперь, вы можете
отключить видимость фонового слоя.
Примечание: перед тем, как вы нажмёте Ctrl+J, перейдите в закладку
Слои.

8. Создайте новый слой - заливку Слой – Новый слой заливка –

Цвет (Layer > New Fill Layer > Solid Color). Выберите следующий
цветовой оттенок для заливки: #434952. Щёлкните правой кнопкой по
слою – заливке и выберите опцию Создать обтравочную маску (Create
clipping mask). Поменяйте режим наложения на Цветность (color). Это
позволит удалить оранжевые оттенки на изображении.

15
 9. Далее, добавьте немного цвета к авансцене. Создайте новый
корректирующий слой, идём Слой- Новый корректирующий слой –
Фото Фильтр (Layer > New adjustment layer > Photo Filter). Данный
корректирующий слой будет применяться в качестве обтравочной маски,
расположите его поверх предыдущего корректирующего слоя. Примените
следующие настройки:
Цвет (Color): #bfd500
Плотность (Density): 93%
Сохранить свечение (Preserve Luminosity): Поставить галочку
(checked)
Поменяйте режим наложения на Осветление основы (Color dodge) и
уменьшите Заливку (fill) до 40%.

10. Нажмите клавишу D, чтобы выставить цвета по умолчанию,

далее нажмите клавишу G, чтобы выбрать инструмент Градиент
(gradient tool). В настройках градиента установите Линейный градиент.
Удерживая клавишу Shift, создайте градиент, как показано на скриншоте
ниже.

11. Создайте ещё один корректирующий слой Фото Фильтр (Photo

Filter) и расположите его поверх предыдущих корректирующих слоёв,
примените следующие настройки:
Цвет (Color): #08eefc
Плотность (Density): 93%
Сохранить свечение (Preserve Luminosity): Поставить галочку
(checked)

16
 Поменяйте режим наложения на Перекрытие (Overlay) и уменьшите
Непрозрачность (opacity) слоя до 20%. Удерживая клавишу Alt, далее
потяните мышью слой - маску корректирующего слоя Фото Фильтр 1 и
отпустите на слой- маске корректирующего слоя Фото Фильтр 2.
Появится окно Заменить Слой- маску? (Replace Layer Mask?). Нажмите
Да (yes), далее нажмите клавиши Ctrl +I, для реверсии слой- маски.

12. Далее, создайте ещё один корректирующий слой Цветовой

баланс (Color Balance) и примените настройки, как показано на скриншоте
ниже. Поменяйте режим наложения Мягкий свет (Soft Light) и уменьшите
Непрозрачность (opacity) слоя до 44%.

13. Выделите слой переднего плана или авансцены и все

корректирующие слои, далее нажмите клавиши Ctrl + G, чтобы
сгруппировать их. Назовите эту группу Передний план.

14. Идём Файл – Открыть (File > Оpen), откройте изображение

«Панорама неба с облаками». Далее, перенесите изображение с облаками
на рабочий документ, масштабируйте и расположите, как показано на
скриншоте ниже, нажимаем Enter. Убедитесь, что изображение с небом
расположено ниже группы «Передний план». Переименуйте слой с небом
в «Небо».
Примечание: для применения масштабирования, используйте
инструмент Трансформация (Transform).

17
 15. Создайте новый корректирующий слой Карта Градиента
(gradient map), убедитесь, что он создан в качестве обтравочной маски.
Примените настройки, как на скриншоте ниже. Для цвета переднего плана
примените чёрный цветовой оттенок, а для цвета заднего плана
используйте #0ef0f8. Поменяйте режим наложения на Мягкий свет (Soft
Light) и уменьшите Непрозрачность (opacity) слоя до 40%.

16. Создайте новый корректирующий слой, в качестве обтравочной

маски к слою небо. Примените настройки, как показано на скриншоте
ниже. Режим наложения не меняйте, оставьте Нормальный (normal).

17. Выделите слой с небом и все корректирующие слои, далее

нажмите клавиши Ctrl+G, чтобы сгруппировать их. Назовите эту группу
Небо. Можно выделять множество слоёв, путём удержания клавиши Ctrl +
щелчком мыши выделять слои, которые необходимо выделить.

18. Откройте изображение «Полной Луны». Выделите луну с

помощью инструмента Овальная область (round marquee selection
tool), далее нажмите клавиши Ctr+C, чтобы скопировать изображение, а
затем вклеить на рабочий документ. Расположите слой с луной между
слоем с небом и слоем переднего плана. Назовите этот слой Луна.
*Подсказка* Когда вам необходимо создать сложное выделение,
например, объектов в перспективе или в эллипсе: 1. Создайте выделение с
помощью инструментов выделения. 2.Нажмите клавишу Q, чтобы
перейти в режим быстрой маски. 3. Нажмите клавиши Ctrl+T для
трансформации созданного выделения. Итак, вы можете
откорректировать выделение как вашей душе угодно, используя
перспективу, искажение и т.д. 4. Нажмите Enter для того, чтобы

18
применить трансформацию и далее нажмите Q, чтобы выйти из
режима быстрой маски. Для того, чтобы это работало соответствующим
образом, дважды щёлкните по иконке Быстрой маски в левой панели
настроек и выберите опцию Маскированные области (selected areas).

19. Дважды щёлкните по слою с Луной, чтобы открыть стили слоя.

Примените настройки, как показано на скриншоте ниже.

20. Расположите Луну, как показано на скриншоте ниже. Добавьте

слой- маску, щёлкнув по иконке Добавить слой- маску (Add Layer
mask) в нижней панели слоёв.

21. Выделите слой-маску, чтобы слой-маска была активна. Выберите

инструмент Градиент (gradient tool) и в настройках установите
зеркальный градиент (reflected gradient). Нажмите клавишу D, чтобы
установить цвета по умолчанию. Потяните градиент от середины Луны к
нижней части. Итак, верхняя и нижняя часть Луны плавно смешались с
небом. Выберите инструмент Кисть (brush tool) со следующими
настройками:
Размер (Size): 100 px
Жёсткость (Hardness): 0%

19
 Установите Непрозрачность (opacity) кисти на 50% и убедитесь, что
слой-маска слоя Луны активна. Если слой- маска не активна, то просто
щёлкните по ней. Далее, аккуратно пройдитесь кистью по участкам, где
облака накладываются на Луну. На изображении видно, что Луна
немножко стала исчезать, поэтому увеличьте непрозрачность слоя с Луной
до 80%.

22. Нажмите Ctrl+Shift+N, чтобы создать новый слой, расположите

его поверх слоя с Луной. Нажмите Shift+F5, чтобы залить новый слой и
выберите 50% серого (gray). Далее, Фильтр – Шум – Добавить шум
(Filter > Noise > Add noise) и применяем значение Количества (Amount)
4%, далее, выберите по Гауссу (Gaussian) и ставим галочку в окошке
Монохромный (monochromatic). Нажмите Ctrl+M, чтобы провести
коррекцию Кривыми (curves), когда появится окно кривые, потяните
чёрный бегунок и белый бегунок навстречу друг другу, таким образом,
бегунки встретятся на середине. Теперь есть чёрное небо с белыми
звёздами. Если вы не можете увидеть звёзд, у вас масштаб изображения
сильно уменьшен. Это потому что Photoshop скрывает «ненужные»
пиксели при уменьшении масштаба, но это всего лишь временно. Когда вы
будете сохранять документ, то звёзды будут на изображении. Вы можете
также нажать Ctrl+1, чтобы масштабировать до фактического размера
изображения, и вы увидите звёзды.

23. Назовите этот слой Звёзды и поменяйте режим наложения на

Осветление (screen). Итак, чёрные оттенки исчезли и только видны белые
звёзды. Добавьте слой- маску, выберите кисть и примените следующие
настройки:
Размер (Size): 100 px
Жёсткость (Hardness): 0%
Установите Непрозрачность (opacity) кисти на 100%. Убедитесь,
что активна слой- маска слоя Звёзды. Аккуратно пройдитесь кистью на
слой- маске в тех местах, где звёзды накладываются на Луну или облака.

20
Вы можете использовать 50% непрозрачность кисти в тех местах, где
облака едва видны.

24. Поменяйте настройки кисти на следующие:

Размер (Size): 6 px
Жёсткость (Hardness): 100%
Щёлкните произвольно несколько раз по слою со звёздами, чтобы
создать несколько более крупных звёзд. Увеличьте размер кисти на 2 px и
ещё раз произвольно щёлкните несколько раз по всему слою со звёздами.

25. Сейчас, необходимо создать Северное Сияние. Загрузите кисти

Северное Сияние через Редактирование – Управление наборами (Edit >
Preset Manager). Создайте новый слой, назовите новый слой «Северное
сияние». Расположите этот слой поверх группы Небо. Выберите кисть 4 и
увеличьте размер до 1000 px. Выберите цветовой оттенок #da9c1c в
качестве цвета переднего плана, и нарисуйте сияние.

26. Дважды щёлкните по слою Северное сияние, чтобы появилось

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

21
 27. Откройте изображение «Полярный медведь Oso». Выделите
медведя с помощью ваших любимых инструментов выделения. Я
использовал инструмент Быстрое выделение (quick selection tool). Не
переживайте насчёт острых краёв, этот момент мы разрешим позже.

28. Нажмите Ctrl+C, чтобы скопировать выделение, далее

возвращаемся на наш документ и вклеиваем скопированное изображение
Ctrl+V. Расположите этот слой поверх всех слоёв, назовите его Полярный
медведь.

29. Удерживая клавишу Ctrl+ щёлкните по слою с медведем, чтобы

загрузить выделение, далее нажмите Ctrl+R, чтобы открыть окно
Уточнить край (refine edge). Вы можете использовать любые настройки,
для того, чтобы ваш медведь выглядел более реалистично или вы, можете
использовать настройки, которые указаны на скриншоте ниже.

22
 30. Удалите старый слой с медведем и переименуйте новый слой в
Полярного Медведя. Добавьте корректирующий слой Цветовой баланс
(color balance), в качестве обтравочной маски и примените настройки,
которые указаны на скриншоте ниже. Поменяйте режим наложения на
Цветность (color) и уменьшите Непрозрачность (opacity) слоя до 70%.

31. Выделите слой с медведем. Нажмите Ctrl+T, для активации

инструмента Свободная трансформация (free transform). Удерживая
клавишу Shift, потяните за квадратик к центру, чтобы пропорционально
масштабировать изображение медведя. Не выходя из режима свободной
трансформации, щёлкните правой кнопкой мыши и выберите Отразить
по горизонтали (Flip Horizontal). Расположите медведя, как показано на
скриншоте ниже.

32. Далее создадим тень, падающую от медведя, чтобы он не

выглядел подделкой. Выделите слой с медведем и нажмите Ctrl+J, чтобы
создать дубликат. Переименуйте дубликат в Тень и переместите этот слой
ниже слоя с медведем. Наш корректирующий слой Цветовой баланс
(color balance) больше не является обтравочной маской слоя Полярный
медведь, поэтому, удерживая клавишу alt + щёлкните кнопкой мыши

23
между слоем Цветовой баланс и слоем Полярный медведь. Нажмите
клавишу D, чтобы установить цвета по умолчанию.
Примечание переводчика: убедитесь, что вы стоите на слое Тень.
Сейчас нажмите Alt+Shift+Backspace, чтобы залить тусклые пиксели
чёрным цветом. Вы, возможно, не увидите какого-либо изменения, потому
что слой с тенью расположен ниже слоя с медведем. Нажмите Ctrl + T для
трансформации нашего слоя с тенью. Потяните центральную точку в
нижний левый угол. Трансформируйте тень, как показано на скриншоте
ниже.
Примечание: в режиме трансформация, для создания тени,
примените опцию Деформация или Перспектива.

33. Примените к тени Фильтр – Размытие – Размытие по Гауссу

(Filter > Blur > Gaussian blur). Далее, выберите кисть со следующими
настройками:
Размер (Size): 9px
Жёсткость (Hardness): 0%
Установите Непрозрачность (opacity) кисти на 30% и аккуратно
добавьте немного больше тени под лапами нашего медведя. Уменьшите
Непрозрачность (opacity) слоя до 30%.

34. Добавьте слой - маску к слою Тень. Нажмите клавишу D, чтобы

установить цвета по умолчанию. Нажмите клавишу G, чтобы активировать
инструмент Градиент (gradient tool). Выберите градиент, убедитесь,
что он установлен в режиме От основного к фоновому (Foreground to
Background). Щёлкните по слой- маске, что сделать его активным.
Нажмите клавишу X, чтобы переключить основной и фоновый цвет.
Потяните градиент, чтобы смешать самую верхнюю часть тени с
окружающей средой. Поменяйте режим наложения слоя с тенью на
Умножение (Multiply).
Примечание: относительно режима градиента, попробуйте
выбрать зеркальный градиент.

24
 35. Создайте следы от лап медведя. Создайте новый слой и
расположите этот слой поверх всех слоёв. Назовите этот слой Следы.
Выберите кисть Chalk 17 px и уменьшите непрозрачность кисти до 50%. 
Нарисуйте следы за медведем на снегу, как показано на скриншоте ниже. 
Примечание: в начале урока, автор не указал ссылку на кисти Chalk
/ Мел, возможно, автор использовал данные кисти из стандартного
набора кистей Photoshop.

36. К слою Следы примените Фильтр – Размытие – Размытие по

Гауссу (Filter > Blur > Gaussian blur). Уменьшите непрозрачность слоя со
следами до 60%. Удерживая клавишу Ctrl + щёлкните по слою со
следами, по слою с полярным медведем и Цветовым балансом, чтобы их
выделить. Нажмите Ctrl+G, чтобы сгруппировать их. Назовите эту группу
полярный медведь.

37. Сейчас необходимо добавить немного цвета нашему

изображению. Создайте новый корректирующий слой с настройками, как
на скриншоте ниже. Выберите круглую кисть со следующими
настройками:
Размер (Size): 60px
Жёсткость (Hardness): 0%
Убедитесь, что активна слой- маска, далее, нажмите клавишу D,
чтобы выставить цвета по умолчанию. Нажмите Ctrl+I для инвертирования
маски. Уменьшите непрозрачность кисти до 10% и аккуратно пройдитесь
кистью вокруг области деревьев. Оставьте некоторые деревья
нетронутыми и попытайтесь не расцвечивать небо. Увеличьте размер
кисти до 200 px и пройдитесь кистью пару раз по снегу впереди деревьев.
Далее, идём Фильтр – Размытие – Размытие по Гауссу (Filter > Blur
>Gaussian blur) и применяем настройки, как на скриншоте ниже.

25
Поменяйте режим наложения для слоя цветовой баланс на Цветность
(Color).

38. Уменьшите насыщенность изображения. Добавьте новый

корректирующий слой Цветовой тон / Насыщенность (Hue/Saturation)
и расположите его поверх всех наших слоёв. Примените настройки, как на
скриншоте ниже. Выберите мягкую круглую кисть, уменьшите её
непрозрачность до 90%. Встаньте на слой- маску, нажмите клавишу D,
чтобы выставить цвета по умолчанию. Далее нажмите X для
инвертирования. Произвольно пройдитесь кистью в области деревьев,
далее аккуратно пройдитесь по северному сиянию, Луне и медведю.
Уменьшите непрозрачность кисти до 50% и увеличьте размер кисти 200
px. Один или два раза пройдитесь кистью широкими мазками перед
деревьями, но не заходите далеко, оставьте нижнюю треть нашего
изображения нетронутым. Примените Фильтр - Размытие – Размытие
по Гауссу (Filter > Blur >Gaussian blur).

39. Сейчас, мы сделаем наше изображение более интересным, путём

добавления световых эффектов. Добавьте новый корректирующий слой
Кривые (curves) и расположите его поверх всех наших слоёв. Примените
настройки, как на скриншоте ниже. Щёлкните по слой- маске, чтобы
сделать слой- маску активной, далее нажмите Ctrl+I для инвертирования
маски. Выберите белый цвет, в качестве цвета переднего плана и выберите
мягкую круглую кисть. Уменьшите непрозрачность кисти до 90% и

26
аккуратно пройдитесь в области деревьев. Попробуйте оставить снег и
небо без изменений. Также, аккуратно пройдитесь кистью по полярному
медведю. Уменьшите непрозрачность кисти до 70% и увеличьте размер
кисти. Аккуратно пройдитесь кистью поверх сияния и Луны. Также
произвольно пройдитесь кистью по белым облакам. Попробуйте не
задевать небо. Примените Фильтр - Размытие – Размытие по Гауссу
(Filter > Blur >Gaussian blur).

40. Нажмите Ctrl+J, чтобы создать дубликат слоя Кривые (curves).

Убедитесь, что чёрный цвет у вас установлен в качестве цвета заднего
плана, далее нажмите Ctrl+Backspace для заливки маски чёрным цветом.
Выберите мягкую круглую кисть, установите цвет переднего плана –
белый. Уменьшите непрозрачность кисти до 50% и увеличьте размер кисти
до 500px. Аккуратно пройдитесь кистью несколько раз по снегу.
Уменьшите непрозрачность кисти и размер кисти и повторите операцию. В
основном мы хотим создать озеро мягкого белого света над областью
снега. Будьте аккуратны и не переусердствуйте. Далее, идём Фильтр -
Размытие – Размытие по Гауссу (Filter > Blur >Gaussian blur).
Используйте любые настройки, чтобы переход штрихов был плавный и
бесшовный.

41. Добавьте новый корректирующий слой Кривые (curves),

расположите его поверх всех наших слоёв. Примените настройки, как на
скриншоте ниже. Поменяйте режим наложения на Свечение (Luminosity) и
уменьшите непрозрачность слоя до 50%. Это добавит немного контраста
нашему изображению.

27
 42. Сейчас примените старый композиционный трюк, чтобы
направить взгляд наблюдателя в центр нашего изображения: виньетку.
Создайте новый слой и поместите его поверх наших слоёв. Поменяйте
режим наложения для этого слоя на Умножение (multiply) и уменьшите
непрозрачность слоя до 30%. Выберите большую мягкую круглую кисть,
установите непрозрачность кисти на 50%. Аккуратно пройдитесь кистью
несколько раз по боковым сторонам и по верхней части изображения.
Меньше используйте кисть в нижней части изображения, т.к. нижняя часть
уже тёмная.

43. Добавьте новый корректирующий слой Карта градиента

(gradient map). Поменяйте режим наложения на Свечение (luminosity) и
уменьшите непрозрачность слоя до 70%.

44. Давайте придадим нашему изображению мечтательный и

таинственный вид. Убедитесь, что самый верхний слой активен, нажмите
Ctrl+Alt+Shift+E. Мы объединим все видимые слои в один новый слой,
при этом остальные слои останутся без изменений. Примените Фильтр -
Размытие – Размытие по Гауссу (Filter > Blur >Gaussian blur), далее
поменяйте режим наложения на Перекрытие (overlay) и уменьшите
непрозрачность слоя до 40%.

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 мм, ставим первый блик.

2. Переходим на первый слой - копию. Используем тот же фильтр,

блик с настройками: яркость - 70%; 35 мм, для установки второго блика.

3. Переходим на второй слой - копию. Используем тот же фильтр,

блик с настройками: яркость - 30%; начало ролика, для установки третьего
блика.

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

- 0,2 сек.

Задание 2. Анимированная кнопка

Создайте новый документ размером 800х600 пикселей.

Для фона используйте тёмно-серый цвет, так как он наиболее

подходит к другим элементам дизайна. Установите этот цвет цветом
переднего плана и нажмите Alt + Delete или Alt + Backspace, после этого
залейте фон.

30
 Разместите направляющие. Они помогут позиционировать фигуру в
центре документа. Если у вас не видны линейки на верхней и левой части
рабочей области, нажмите комбинацию клавиш Ctrl+R и они появятся.
Вытащите направляющие. Если у вас в меню Вид (View) включена
Привязка (Snap), то направляющие при передвижении по горизонтали и
вертикали сами будут «цепляться» в центре документа.

Активируйте инструмент Эллипс (Ellipse Tool) и убедитесь, что

он находится в режиме Фигура (Shape).

Для того чтобы создать идеальный круг из центра, зажмите

комбинацию клавиш Shift+Alt, установите курсор инструмента в центр
пересечения направляющих и нарисуйте окружность.

К созданной фигуре добавьте градиент. Дважды щёлкните по слою с

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

За цвет нижней части фигуры будет отвечать левый движок

градиента в редакторе, а за цвет верхней части – правый. В результате –
нижняя часть круга будет немного светлее основного цвета фона, а
верхняя наоборот – немного темнее. Первая фигура завершена, займитесь
второй. Дублируйте круг Ctrl + J и очистите стили слоя на копии, которые
скопировались с оригинала. Просто нажмите правой кнопкой мыши и
выберите опцию Очистить стиль слоя (Clear Layer Style).

31
 Теперь измените цвет второй фигуры. Щёлкните дважды по
миниатюре слоя с фигурой и установите ей цвет со значением #262626,
который будет чуть светлее фона.

Как только настроили цвет фигуры, необходимо её уменьшить.

Воспользуйтесь комбинацией клавиш Ctrl + T для вызова свободной
трансформации и уменьшите круг, удерживая клавишу Shift, для
пропорционального уменьшения.

Сейчас необходимо создать «окошко», через которое будем видеть

двигающееся свечение на кнопке, с помощью инструмента Произвольная
фигура (Custom shape), вырезав отверстие в копии фигуры, которую мы
сделали раньше. И так, активируйте инструмент Произвольная фигура
(Custom shape).

В верхней панели настроек инструмента выберите фигуру,

указанную на скриншоте.

Если вы не находите эту фигуру у себя в наборе, то вам нужно

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

После этого появится всплывающее окно с вариантами команд.

Выбирайте Добавить (Append).

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

Второй вариант - просто нарисовать эту фигуру из центра,

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

Добавьте стили слоя к фигуре, которые добавят ей глубины. Это

будет Тиснение (Bevel&Emboss) и Тень (Drop Shadow).

Создание свечения. Их будет два – одно главное, которое будет

видно в «окошке», второе будет выступать в качестве отражения на задней
фигуре. Сначала создайте свечение – отражение. Дублируйте основную,
самую нижнюю фигуру ещё раз Ctrl+J и очистите стили слоя созданному
дубликату, которые скопировались с оригинала, как это делали раньше.

Откройте окно стилей слоя и установите Непрозрачность заливки

(Fill Opacity) на 0%. Это позволит скрыть видимость фигуры, но оставит
видимыми все эффекты от стилей слоя.
Добавьте стиль Наложение градиента (Gradient Overlay).

33
 Этот градиент будет несколько иной, чем вы создали ранее. Для
начала поставьте ему стиль Радиальный (Radial).

Откройте редактор градиента и установите левому движку, который

будет отвечать за основной цвет свечения, значение #00a8ff, а правому –
чёрный цвет и установите непрозрачность чёрного движка на 0%. Это
можно сделать, нажав на верхний движок, после чего появится
возможность редактирования непрозрачности.

Прямо сейчас вы вероятно думаете: «Ну где же градиент?» Всё

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

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

немного уменьшить. Закройте редактор градиента, отмасштабируйте
градиент примерно до 75% и переместите его в окончательное
местоположение.

34
 Теперь перейдите к главному свечению, которое будет отображаться
в «окошке». Дублируйте слой со свечением Ctrl+J, которые вы создали
ранее, и с помощью Ctrl+T уменьшите его до размеров верхней фигуры.
Удерживая клавиши Shift и Alt, вы сможете масштабировать фигуру
пропорционально к центру.

Отредактируем градиент. В окне стилей слоя откройте редактор

градиента. Сначала верните Непрозрачность (Opacity) на 100% правому
движку, а затем измените его цвет на тёмно-синий со значением #00193e.
Добавьте ещё один движок между левым и правым, подведя курсор к
полосе градиента. Его позиция примерно 30%. Установите среднему
движку светло-голубой цвет #76cdff.

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

основы (Color Dodge). И так же как в прошлый раз переместите его в
нужное местоположение.

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

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

35
слой свечения в отдельный Смарт Объект (Smart Object) из которых и
будете создавать анимацию. Щёлкните правой кнопкой мыши по первому
созданному слою со свечением и выберите в меню опцию Преобразовать
в смарт-объект (Convert to Smart Object).

Теперь так же преобразуйте в смарт объект второй слой со

свечением. Применённые ранее режимы наложения для градиента утратят
своё действие, но это легко измените, установив слою тот же режим
наложения Осветление основы (Color Dodge) прямо в палитре слоёв.
Именно поэтому конвертируют каждый слой по отдельности.

Чтобы открыть Шкалу времени (Timeline) дважды щёлкните по её

палитре внизу рабочего пространства программы. В том случае, если у вас
шкала не видна, откройте её в меню Окно (Window).

Нажмите кнопку Создать временную шкалу для видео (Create Video

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

Свечения-отражения. Когда вы выделите этот слой, то можете

раскрыть список опций, которые могут быть анимированы.

Анимируйте опцию Перспектива (Transform), которая включает в

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

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

Вызовите свободную трансформацию Ctrl+T и в верхней панели

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

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

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

Теперь то же самое сделаем для второй половины вращения

анимации. Снова перетащите индикатор текущего времени (синий
слайдер) немного вправо на временной шкале. Вызовите свободную
трансформацию Ctrl+T и в верхней панели настроек как в прошлый раз
введите значение угла 180 градусов. Подтвердите трансформацию.

Анимация слоя со свечением – отражением завершена! Теперь

сделайте то же самое с главным свечением в «окошке».

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

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

правом углу шкалы раскройте меню настроек и включите опцию Цикл
воспроизведения (Loop Playback).

Анимация готова! Теперь готовую анимацию можно рендерить как

видео, но лучше сохраните её в формате gif для использования в
Интернете. Сохраним её через меню Файл – Сохранить для Web (File –
Save for Web). Выберите для файла формат Gif. Внизу окна настроек также
можно выбрать параметры повторов – постоянно или однократно. В
данном задании должно быть Постоянно (Forever).

Итоговый результат

Задание 3. Создание анимированной иконки

1. Создание форм загрузчика
Создайте новый документ и добавьте фон. File>New (Файл - Новый
документ). Размер – 100рх на 100рх. Дважды щёлкните по слою и
преобразуйте в обычный слой. Залейте слой тёмно-серым цветом #3d3d3d.

38
 2. Добавьте на фон узор, а затем приступите к созданию загрузчика.
Создайте новый документ 7рх на 7рх с прозрачным фоном. Выберите
Pencil Tool (Карандаш) 1рх цвет чёрный и нарисуйте диагональную
линию. (Щёлкните в левом верхнем углу, зажмите Shift и щёлкните в
правом нижнем углу).

Далее в меню Edit > Define Pattern (Редактирование-Определить

Узор). Вернитесь в рабочий документ. Стоя на фоновом слое, меню Layer>
Layer Style> Pattern Overlay (Слой-Стиль Слоя-Перекрытие Узором). В
наборе узоров выберите созданный узор, уменьшите непрозрачность до
20%.

3. Теперь нужно установить несколько маркеров. Для этого

воспользуйтесь Transform Again – Shift+Ctrl+T (Повторить
Трансформацию), это ускорит процесс. Выберите инструмент Line Tool
(Линия) 1 рх в режиме фигур цвет белый и с зажатой Shift нарисуйте
вертикальную линию.

Чтобы выровнять линию по центру, выделите оба слоя, выберите

инструмент перемещения и на верхней панели нажмите на кнопку Align
Horizontal Centers (Выровнять Горизонтальные Центры). Вот так:

39
 Поверните линию на 45° - меню Edit> Free Transform – Ctrl+T
(Редактирование-Свободное Трансформирование)

Далее нажмите сочетание клавиш Ctrl+Shift+Alt+T. Нажимайте это

сочетание клавиш несколько раз, пока не получится, как на скриншоте
ниже.

4. Используя ту же технику, как описано выше, далее необходимо

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

Выберите инструмент Rounded Rectangle Tool (Прямоугольник со

Скруглёнными Углами) радиус 1 рх и создайте прямоугольник по
направляющим. Убедитесь, что включена опция Привязать к
Направляющим (View-Snap to Guides).

Используя инструмент Direct Selection Tool (Стрелка) переместите

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

40
 Примечание: щёлкните Стрелкой по контуру формы, далее
щёлкните по одной точке с какой-либо стороны формы и с зажатой Shift
щёлкните по второй. Обе точки выделятся. Далее стрелкой на
клавиатуре сдвиньте эти точки. То же проделайте и с двумя точками с
другой стороны формы, сдвиньте противоположной стрелкой на
клавиатуре на такое же количество сдвигов.

Используйте тот же трюк с копированием и поворотом на 45°,

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

Повторите эти действия несколько раз, пока форма не будет

скопирована по всему периметру следующим образом.

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

5. Стилизация форм

41
 На созданной предварительной форме загрузчика, добавьте
несколько стилей слоя, чтобы немного его украсить.
Color Overlay (Перекрытие Цветом) цвет # 242424

Drop Shadow (Тень)

Inner Shadow (Внутренняя Тень)

Загрузчик должен выглядеть так:

6. Дублируйте слой с предварительной формой четыре раза. Затем

начинайте удалять деления на каждом слое, оставляя только нужное, пока
не закончите. Для этого воспользуйтесь инструментом Path Selection Tool
(Выделение Контура).
Примечание: чёрной стрелкой выделяйте контур и нажимайте delete.
Советую назвать слои так же, как у автора.

42
 7. Теперь добавьте стили для каждого слоя. На слой под названием
Shine-Active добавьте стиль слоя Outer Glow (Внешнее Свечение) цвет #
90dcfc:

К этому же слою добавим стиль слоя Inner Glow (Внутреннее

Свечение) цвет #a2defd:

Затем изменим цвет в стиле Color Overlay (Перекрытие Цветом) на

цвет #0087c6

На слой под названием Shine-Fading1 добавьте те же стили, что

выше, опуская стиль слоя Outer Glow (Внешнее Свечение) и отключим
видимость стиля Inner Shadow (Внутренняя Тень).

43
 На слое под названием Shine-Fading2 измените цвет в стиле Color
Overlay (Перекрытие Цветом) на цвет #0087c6 непрозрачность 80%.
На слое Shine-Fading3 изменим цвет в стиле Color Overlay
(Перекрытие Цветом) на цвет #0087c6 непрозрачность 25% (обратите
внимание на изменение непрозрачности).
Примечание: если форма этого слоя белая, смените её цвет на #242424

Ваш загрузчик должен выглядеть примерно так (настройки стиля

слоя по своему вкусу)

8. На созданной базе стилей продублируйте слои. Выделите все

слои, кроме фонового и сгруппируйте их Layer > Group Layers (Слой-
Группа Слоёв) или Ctrl+G.

Сдублируйте группу, а затем повернем на 45° Edit > Free Transform

(Редактирование-Свободная Трансформация) или Ctrl+T. Снова
дублируйте верхнюю группу и поверните на 45° (в общей сложности у вас
будет восемь групп).

44
 Загрузчик должен выглядеть примерно так:

9. Анимация загрузчика
Откройте панель анимации Window> Animation (Окно-Анимация).
Выключите видимость всех групп, кроме первой, затем нажмите кнопку
Duplicate Selected Frames (Дублировать Выбранные Кадры) в панели
анимации.
Примечание: в версиях CS6 и выше Window-Timeline –Сreate Frame
Animation (Окно-Шкала Времени-Создать Покадровую Анимацию)

Отключите видимость первой группы и включите видимость второй.

Повторите предыдущий шаг для каждой из групп слоев. Выделите

все кадры в анимации (клик по первому кадру и с зажатой Shift по
последнему) и установите длительность кадра в 0,1 сек, проигрывание
Forever (Непрерывно).

Далее сохраните анимацию File > Save for Web & Devices.
Используйте следующие параметры для анимации GIF.

45
 Откройте ваш GIF в веб-браузере для просмотра.

Рекомендуемая литература: 3 [c. 21 - 25], 5 [c. 54 - 100], 7 [c. 23 -

54], 10 [c. 154 - 155]

46
 СПИСОК ЛИТЕРАТУРЫ

1. Баранов, С. Н. Основы компьютерной графики : учебное

пособие / С. Н. Баранов, С. Г. Толкач. — Красноярск : Сибирский
федеральный университет, 2018. — 88 c. — ISBN 978-5-7638-3968-5. —
Текст : электронный // Электронно-библиотечная система IPR BOOKS :
[сайт]. — URL: http://www.iprbookshop.ru/84276.html (дата обращения:
15.06.2020). — Режим доступа: для авторизир. пользователей.
2. Гаврилов, М. В. Информатика и информационные технологии :
учебник для среднего профессионального образования / М. В. Гаврилов, В.
А. Климов. — 4-е изд., перераб. и доп. — Москва : Издательство Юрайт,
2020. — 383 с. — (Профессиональное образование). — ISBN 978-5-534-
03051-8. — Текст : электронный // ЭБС Юрайт [сайт]. — URL:
https://urait.ru/bcode/449286 (дата обращения: 15.06.2020).
3. Зиновьева, Е. А. Компьютерный дизайн. Векторная графика :
учебно-методическое пособие / Е. А. Зиновьева. — Екатеринбург :
Уральский федеральный университет, ЭБС АСВ, 2016. — 116 c. — ISBN
978-5-7996-1699-1. — Текст : электронный // Электронно-библиотечная
система IPR BOOKS : [сайт]. — URL: http://www.iprbookshop.ru/68251.html
(дата обращения: 15.06.2020). — Режим доступа: для авторизир.
пользователей.
4. Информационные технологии в 2 т. Том 2 : учебник для среднего
профессионального образования / В. В. Трофимов, О. П. Ильина, В. И.
Кияев, Е. В. Трофимова ; ответственный редактор В. В. Трофимов. —
перераб. и доп. — Москва : Издательство Юрайт, 2020. — 390 с. —
(Профессиональное образование). — ISBN 978-5-534-03966-5. — Текст :
электронный // ЭБС Юрайт [сайт]. — URL: https://urait.ru/bcode/451184
(дата обращения: 15.06.2020).
5. Колесниченко, Н. М. Инженерная и компьютерная графика :
учебное пособие / Н. М. Колесниченко, Н. Н. Черняева. — Москва :
Инфра-Инженерия, 2018. — 236 c. — ISBN 978-5-9729-0199-9. — Текст :
электронный // Электронно-библиотечная система IPR BOOKS : [сайт]. —
URL: http://www.iprbookshop.ru/78267.html (дата обращения: 15.06.2020).
— Режим доступа: для авторизир. пользователей.
6. Конакова, И. П. Инженерная и компьютерная графика : учебное
пособие для СПО / И. П. Конакова, И. И. Пирогова ; под редакцией Т. В.
Мещаниновой. — 2-е изд. — Саратов, Екатеринбург : Профобразование,
Уральский федеральный университет, 2019. — 89 c. — ISBN 978-5-4488-
0449-6, 978-5-7996-2861-1. — Текст : электронный // Электронно-
библиотечная система IPR BOOKS : [сайт]. — URL:
http://www.iprbookshop.ru/87804.html (дата обращения: 15.06.2020). —
Режим доступа: для авторизир. пользователей.

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
 Учебное издание

КОМПЬЮТЕРНАЯ ГРАФИКА

Методические указания по выполнению практических занятии по

дисциплине Компьютерная графика для обучающихся по специальностям
09.02.03 Программирование в компьютерных системах,
09.02.04 Информационные системы (по отраслям),
очной формы обучения
3 часть

Составитель
Шибеко Марина Николаевна
Ответственный редактор
Р. Ф. Ахатова, председатель ЦК ЕНиОПД отделения ИТВТ

В авторской редакции

Подписано в печать . Формат 60х90 1/16. Усл. печ. л. 3,0

Тираж 10 экз. Заказ №.

Библиотечно-издательский комплекс
федерального государственного бюджетного
образовательного учреждения высшего образования
«Тюменский индустриальный университет».
625000, Тюмень, ул. Володарского, 38.

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

625039, Тюмень, ул. Киевская, 52.

49