Вы находитесь на странице: 1из 26

Урок № 11

Создание
загрузочного
экрана

Н
а этом занятии мы рассмотрим, как созда-
вать загрузочную страницу для игры Bloons
TD Battle – подобную той, что на рисунке 1.

Рисунок 1

МАТЕРИАЛЫ К УРОКУ ПРИКРЕПЛЕНЫ К ДАННОМУ PDF-ФАЙЛУ.


Для доступа к материалам урок необходимо открыть в программе
Adobe Acrobat Reader.

2
Создание загрузочного экрана

Для начала создаем новый проект стандартного раз-


мера 1920 × 1080. Ранее мы делали простые фоновые изо-
бражения, заливая их одним цветом. На этот раз давайте
применим переход от темного оттенка к светлому. Для
этого выбираем инструмент Gradient (Градиент –   ).
На панели слева выберем из палитры два цвета. В
нашем случае это синий и голубой (рис. 2).

Рисунок 2

Кликаем левой кнопкой мыши у верхнего края изо-


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

Рисунок 3

3
Урок № 11

Изменим параметры применения инструмента во


вкладке Tool Options. Зададим другой тип градиента,
форму (Shape) и резкость перехода (Offset) (рис. 4).

Рисунок 4

4
Создание загрузочного экрана

Создадим слой, на котором рисуем контуры гори-


зонта и местности (рис. 5).

Рисунок 5

Заливаем созданные элементы цветом (рис. 6).

Рисунок 6

5
Урок № 11

Чтобы сделать изображение более интересным, да-


вайте применим градиент и к холмам.
Выбираем в палитре второй цвет оттенком немно-
го темнее первого. Затем выбираем инструмент Fuzzy
Select (   ), кликаем один раз по зеленому участку,
он автоматически выделится. Выбираем инструмент
Gradient и по аналогии с фоном закрашиваем выделен-
ный участок (рис. 7).

Рисунок 7

Повторяем заливку градиентом и для второго бере-


га (см. рис. 8 на стр. 7).

6
Создание загрузочного экрана

Рисунок 8

Тем же способом закрашиваем реку. Старайтесь ис-


пользовать близкие по температуре оттенки, чтобы пе-
реход выглядел более аккуратно и естественно (рис. 9).

Рисунок 9

7
Урок № 11

Добавляем в проект новый слой, на котором рисуем


темные кусты на переднем плане (рис. 10).

Рисунок 10

Давайте сделаем так, чтобы они были слегка раз-


мыты. Это создаст эффект того, что внимание зрителя
будет сразу фокусироваться на центр изображения, где
будут размещены игроки.
Выбираем инструмент Blur/Sharpen (Размытие /
Резкость –   ). Применяем его к краю черного изобра-
жения, чтобы он стал слегка размытым (см. рис. 11 на
стр. 9).

8
Создание загрузочного экрана

Рисунок 11

Создадим новый слой. Давайте слегка затеним


участки изображения по бокам. Изменяем тип наложе-
ния градиента, чтобы переход был от черного цвета к
прозрачному (рис. 12).

Рисунок 12

9
Урок № 11

Справа и слева применяем градиент по аналогии с


фоновым изображением (рис. 13).

Рисунок 13

Теперь давайте нарисуем персонажей. Поскольку


мы создаем прелоадер для игры Bloons TD Battle, пу-
скай центральными образами загрузочного экрана бу-
дут главные персонажи – обезьяны.
Для удобства давайте отрисуем одну из них в новом
проекте. С помощью инструмента Path на новом слое
рисуем базовую форму и задаем контур, как на рисун-
ке 14 (см. стр. 11).
Затем заливаем цветом и детализируем нашего
персонажа с помощью бликов и тени (см. рис. 15-16 на
стр. 11).

10
Создание загрузочного экрана

Рисунок 14

Рисунок 15-16

11
Урок № 11

Чтобы использовать этого персонажа как готовый


ассет для других проектов, обрежем размер холста по
размеру самой обезьяны. Для этого переходим во вклад-
ку Image > Crop to Content (рис. 17).

Рисунок 17

12
Создание загрузочного экрана

В результате, мы «подогнали» размер фона под раз-


мер рисунка (рис. 18).

Рисунок 18

Давайте также уберем белый фон, чтобы рисунок


можно было импортировать на загрузочный экран.

13
Урок № 11

По уже знакомой схеме выбираем инструмент Fuzzy


Select (   ) и кликаем по белому фону. Переходим во
вкладку Layer > Transparency > Add Alpha Channel. За-
тем во вкладке Colors выбираем Color to Alpha.
Как видим на рисунке 19, белый фон пропал. Самое
время экспортировать изображение обезьянки в фор-
мате .png.

Рисунок 19

14
Создание загрузочного экрана

Теперь создадим противника этой обезьяны. Да-


вайте отобразим изображение по горизонтали, нажав
Image > Transform > Flip Horizontally (рис. 20).

Рисунок 20

Как видим на рисунке 21, обезьяна смотрит в проти-


воположную сторону.

Рисунок 21

15
Урок № 11

Изменим цвет шлема и нарисуем персонажу наду-


тые губы. Противник готов (рис. 22)!

Рисунок 22

16
Создание загрузочного экрана

Давайте нарисуем кувшин с золотом, который раз-


местим между игроками, как трофей за победу. Для на-
чала создаем базовую форму (рис. 23).

Рисунок 23

Закрашиваем и детализируем изображение с по-


мощью бликов и тени. По аналогии с персонажем уби-
раем белый фон и сохраняем элемент в формате .png
(рис. 24-25).

Рисунок 24-25

17
Урок № 11

Теперь возвращаемся к проекту с фоном и добав-


ляем в него все ранее отрисованные объекты, как по-
казано на рисунке 26. Также объекты можно найти в ре-
ференсах, архив папки с которыми прикреплен к уроку.
Наконец, добавим в проект логотип игры из рефе-
ренсов (рис. 27).

Рисунок 26-27

18
Создание загрузочного экрана

Добавим прелоадер. Рисуем его с помощью инстру-


мента Rectangle Select и закрашиваем с помощью гра-
диента (рис. 28).

Рисунок 28

Обратите внимание, чтобы добавить объемность,


следует закрасить внутреннюю часть прелоадера от
темного к светлому (сверху-вниз), а внешнюю – от свет-
лого к темному (сверху-вниз) (рис. 29).

Рисунок 29

19
Урок № 11

Перейдем к созданию строки загрузки (рис. 30).

Рисунок 30

Закрасим ее с помощью градиента, но при этом вы-


ставим его форму на Bi-linear. То есть заливка будет
применяться с двух сторон выделенной области (рис. 31).

Рисунок 31

Это создает эффект объемности, как видно на изо-


бражении 32.

Рисунок 32

20
Создание загрузочного экрана

Посмотрим, что получилось. Задний план загрузоч-


ного экрана немного пустоват (см. рис. 33).
Давайте добавим к нему горы. Создадим новый
слой. Горы отрисуем самостоятельно или же добавим
готовое изображение из референсов.
Отключим видимость лишних слоев и поместим
горы так, чтобы они были на линии горизонта (рис. 34).

Рисунок 33-34

21
Урок № 11

Наконец, включаем отображение всех слоев. Добав-


ляем текст Loading... 49% под строкой загрузки. Проект
готов!
На созданное изображение можно добавлять под-
сказки для игроков и другие текстовые сообщения, ко-
торые помогут игроку понять, что ему нужно сделать на
новом уровне (рис. 35).

Рисунок 35

Можно создавать от самых простых до невероятно


детализированных загрузочных экранов.
Главное, чтобы они отображали основную идею
игры и были созданы в одном стиле с другими эле-
ментами игры, например, главным меню и игровыми
уровнями (рис. 36-38).

22
Создание загрузочного экрана

Рисунок 36

Рисунок 37

23
Урок № 11

Рисунок 38

24
Урок № 11
Создание загрузочного экрана

© Компьютерная Академия ШАГ


www.itstep.org

Все права на охраняемые авторским правом фото-, аудио- и видеопроизведения,


фрагменты которых использованы в материале, принадлежат их законным владель-
цам. Фрагменты произведений используются в иллюстративных целях в объёме,
оправданном поставленной задачей, в рамках учебного процесса и в учебных целях,
в соответствии со ст. 1274 ч. 4 ГК РФ и ст. 21 и 23 Закона Украины «Про авторське
право і суміжні права». Объём и способ цитируемых произведений соответствует
принятым нормам, не наносит ущерба нормальному использованию объектов
авторского права и не ущемляет законные интересы автора и правообладателей.
Цитируемые фрагменты произведений на момент использования не могут быть
заменены альтернативными, не охраняемыми авторским правом аналогами, и
как таковые соответствуют критериям добросовестного использования и честного
использования.
Все права защищены. Полное или частичное копирование материалов запрещено.
Согласование использования произведений или их фрагментов производится
с авторами и правообладателями. Согласованное использование материалов
возможно только при указании источника.
Ответственность за несанкционированное копирование и коммерческое исполь-
зование материалов определяется действующим законодательством Украины.

Вам также может понравиться