Как создать яркий фон к видеоигре в CorelDRAW
This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.
() translation by (you can also view the original English article)



Получите свою пробную 30-дневную версию сейчас! Вы будете
скачивать 30-дневную полноценную, функциональную пробную версию CorelDRAW
Graphics Suite X7. Эта пробная программа доступна в 32-битной и
64-битной версиях. 64-битная версия была
оптимизирована для пользователей 64-битной версии Microsoft Windows 8/8.1 или Windows 7.
Визуальное оформление – один из главных аспектов любой игры наравне
с сюжетом. В этом руководстве мы выступим в роли дизайнера видеоигры и создадим
наш собственный повторяющийся фон с изображением цветного фруктового сада. Мы поработаем с фигурами и используем
сетчатую заливку для оживления наших объектов в CorelDRAW® X7. Начнём!
1. Готовим основу для фона фруктового сада
Шаг 1
Для начала создадим Новый документ размером 1280 х 768 пикселей.



Шаг 2
Найдите Инструмент «Прямоугольник» (F6) на панели Инструментов и дважды кликните для создания прямоугольника по центру страницы такого же размера, как документ.
Выберите Инструмент «Интерактивная заливка» (G) и примените линейный градиент к созданной фигуре. Если вы только начали изучать инструменты CorelDRAW или что-то забыли, перейдите на панель Подсказок (Окно > Докеры > Подсказки), где вы найдёте несколько информативных советов с иллюстрациями и описаниями по использованию каждого инструмента.



Шаг 3
Давайте оживим картинку, создав яркое летнее небо. Выделите верхний квадратный узел нашей градиентной заливки и примените цвет голубого неба (R=0, G=204, B=255) из стандартной цветовой палитры, которая расположена в верхней части нашей рабочей области. Вы сможете увидеть вариации цвета, если нажмёте и удержите кнопкой квадратик палитры.
Другой способ применить желаемый цвет к узлам – кликнуть на квадрате интерактивной заливки и выбрать цвет на появившейся панели Цвета узла. Примените чистый белый цвет к нижнему узлу. Можете кликнуть правой кнопкой мыши на перечёркнутом квадрате в верхней части панели Цветовой палитры, чтобы изменить цвет Контура на отсутствующий и сделать то же самое с цветом Заливки левой кнопкой мыши.



Шаг 4
Дважды кликните на Инструменте «Прямоугольник» (F6), нажмите Shift-Page Up, чтобы поместить созданную фигуру наверх и сжать её, сформировав узкую полоску в нижней части страницы. Заполните фигуру ярко-зелёным цветом, создав травяную лужайку. Преобразуйте прямоугольник в Кривые (Control-Q) и поместите несколько дополнительных узлов в верхней части фигуры, дважды кликнув на Инструменте «Форма» (F10). Сдвиньте точки вверх и вниз, создав зигзагообразную линию.



Шаг 5
Скопируйте и Вставьте (Control-C > Control-V) фигуру и Отразите её по горизонтали, нажав на соответствующую кнопку на верхней панели управления, удерживая фигуру выделенной. Заполните копию тёмно-зелёным цветом, кликнув на иконку Заливки в нижней части рабочей области для вызова окна с настройками «Редактировать заливку».



2. Создаём облака Инструментами «Произвольная» и «Сетчатая заливка»
Шаг 1
Начнём заполнять пустое пространство, добавив облаков на небе. Возьмите Инструмент «Произвольная» (F5) и нарисуйте изогнутую фигуру, изображающую пушистое кучевое облако. Заполните фигуру белым цветом и примените Инструмент «Сетчатая заливка» (М), кликнув на фигуре облака. Давайте избавимся от центрального узла, который появился после превращения фигуры в сетку. Для этого дважды кликните на нём, удерживая выделенным Инструмент «Сетчатая заливка» (М).



Шаг 2
Давайте сформируем сетчатую заливку, добавив новые строки и колонки нашему облаку. Можем сделать это несколькими способами. Первый способ сформировать сетку – добавить несколько рядов и колонок на панели «Размер сетки», которую можно найти на Панели свойств в верхней части вашей рабочей области.



Нажимайте на стрелки, добавляя желаемое
количество клеток в сетке.



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



Давайте попробуем добавить ряды и колонки вручную. Убедитесь, что у вас выбран Инструмент «Сетчатая заливка» (М), сдвиньте курсор в нижнюю левую область нашего облака и дважды кликните для создания точки пересечения, сформировав первый ряд и колонку нашей сетки.



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



Шаг 3
Теперь, когда у нас достаточно
рядов и колонок, давайте найдём меню «Режим выбора» на верхней панели управления
и изменим на Произвольную область выделения, пока Инструмент «Сетчатый
градиент» (М) всё ещё выделен. Затем выделите все узлы внутри облака за
исключением тех узлов, которые будут располагаться вдоль края.



Откройте Цветной докер (Окно >
Докеры > Цвет) и заполните выделенные узлы светло-голубым цветом, установив
нужный цвет в палитре и нажав на кнопку Заливка для применения новой заливки.



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



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



Шаг 4
Давайте создадим облако поменьше и заполним его ярко-лиловым и голубым цветами при помощи тех же техник с Инструментом «Сетчатая заливка» (М).



Шаг 5
Расположите облака в верхней части нашей картинки и перейдите к фону. Давайте сделаем его более замысловатым, добавив несколько деталей. Добавьте сетчатый градиент и создайте несколько дополнительных рядов и колонок. Сделайте одну из созданных сетчатых линий слегка закруглённой, перетащив её части вверх и вниз Инструментом «Сетчатая заливка» (М), сформировав волну.



Шаг 6
Выделите узел закруглённой линии и измените его цвет на белый, создав размытие. Также согните нижние линии сетки.



Теперь у нас есть яркое спокойное небо с мягкими воздушными потоками. Перейдём к следующему элементу нашей композиции!



Несколько раз скопируйте облака (Control-D) и разместите копии, как показано на снимке экрана ниже, чтобы сделать композицию более интересной. Можете зеркально отразить объекты, выбрав Инструмент «Выделение» и затем удерживая и перетаскивая край облака на противоположную сторону. Сгруппируйте облака, нажав комбинацию клавиш Control-G или применив функцию «Сгруппировать объекты» на Панели свойств.



Диспетчер объектов (Окно > Докеры > Диспетчер объектов) достаточно полезен, если вы хотите сохранить работу чистой, а объекты – организованными. Щёлкните правой кнопкой мыши на объекте или группе объектов в Диспетчере объектов и примените функцию «Переименовать» из выпадающего меню либо дважды кликните на объекте, чтобы дать ему подходящее имя и чтобы его легко можно было найти среди других объектов и групп.



3. Формируем яблочное дерево Инструментом «Сетчатый градиент» и изображаем фруктовый сад
Шаг 1
Для начала возьмите Инструмент «Эллипс» (F7) и создайте ровный круг, удерживая клавишу Control. Создайте несколько кругов размером поменьше и разместите их вокруг первоначального круга. Заполните фигуры сочным зелёным цветом и объедините круги в единую фигуру при помощи функции Объединения на панели управления выше (или перейдя в Объект > Формообразование > Объединить), сформировав корону дерева.



Шаг 2
Возьмите Инструмент «Заливка сетки» (М) и дважды кликните на объекте, чтобы добавить пересечение ряда и колонки, сформировав сетку таким же образом, как мы сделали это для облаков. Выделите группу узлов внутри фигуры при помощи Произвольной области выделения и заполните её светло-зелёным цветом, сделав корону дерева более сферической и объёмной.



Шаг 3
Давайте добавим ствол при помощи Инструмента «Прямоугольник» (F6) и заполним его красно-коричневым древесным цветом.



Нам нужно поместить ствол под купол дерева. Мы легко можем изменить порядок расположения объектов, кликнув и перетащив их вправо в докер Диспетчера объектов или при помощи комбинации клавиш Control-Page Down, чтобы сдвинуть объект назад на одну позицию. Можете найти настройки Построения в выпадающем меню, если кликните правой кнопкой на объекте в Диспетчере объектов.



Помещать один объект позади или напротив другого (Order > Behind и Order > In Front Of в выпадающем меню Диспетчера объектов) – это ещё одна удобная опция, если у вас есть несколько объектов. Выберите функцию "Позади" и вы заметите, что курсор превратился в жирную чёрную стрелку. Кликните на объекте, который вы хотите оставить наверху (в нашем случае это крона дерева) и – вуаля! – объекты изменили своё положение.



Преобразуйте ствол в Кривые (Control-Q) и сделайте верхнюю часть более узкой, сдвинув верхние узлы ближе друг к другу. Продолжайте накладывать сетчатую заливку, чтобы сделать среднюю часть ствола светлее и чтобы фигура стала похожа на цилиндр.



Шаг 4
Давайте сделаем наше дерево более детальным, добавив простую тень.
Скопируйте и Вставьте (Control-C > Control-V > Control-V) фигуру кроны дважды, сдвинув верхнюю копию вверх и слегка вправо. Выделите обе созданные копии и Очистите сетку, кликнув на иконке с перечёркнутым кругом на верхней панели управления, превратив фигуры в плоские силуэты. Выделите копии и примените функцию «Передние минус задние», отрезав ненужные части.
Наконец, выделите созданный элемент, возьмите Инструмент «Прозрачность» и снизьте непрозрачность нашего объекта, подвинув ползунок.



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



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



Шаг 6
Давайте сделаем наше дерево более живым, добавив мягкое касание солнечного света на кроне. Создайте копию кроны и Очистите сетку, превратив её в плоскую фигуру. Поместите эллипс наверху и примените функцию Пересечения, выделив обе фигуры. Заполните созданную фигуру светло-жёлтым цветом и используйте Инструмент «Прозрачность», чтобы фигура мягко сливалась с кроной дерева.



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



4. Добавляем в композицию второстепенные детали
Шаг 1
Давайте углубим наш фон, добавив ещё деталей. Дважды кликните на Инструменте «Прямоугольник» (F6) и поместите фигуру между небом и лужайкой при помощи клавиш Control-Page Up для изменения положения объектов. Сожмите фигуру и Преобразуйте её в Кривые (Control-Q). Заполните фигуру серовато-синим цветом, сделав её темнее неба. Создайте плавную кривую при помощи Инструмента «Фигура» (F10), сформировав дальний силуэт горного хребта.



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



Шаг 2
Добавьте группу тёмно-зелёных эллиптических пятен Инструментом «Эллипс» (F7) для создания пятен на земле, сделав её более детальной.



Шаг 3
Давайте сформируем несколько простых ветвей на деревьях. Создайте прямоугольник и поверните его приблизительно на 45 градусов, кликнув на нём дважды Инструментом "Выделение", чтобы выделенные края превратились во вращающиеся стрелки. Преобразуйте фигуру в Кривые (Control-Q) и используйте Инструмент «Фигура» (F10) для изгиба фигуры в лёгкую арку. Добавьте ветви каждому дереву таким же образом, варьируя длину и положение – это сделает нашу картинку более динамичной.



Шаг 4
Сделайте деревья более детальными и реалистичными, сформировав сочную, зелёную листву. Сформируйте эллипс и затем выделите его боковые узлы Инструментом «Фигура» (F10), превратив их в острые углы при помощи функции «Острый узел». Поместите листья на крону возле яблок.



Вот как на данном этапе выглядит наш фон. Почти завершён!



Шаг 5
Т.к. мы создаём фон для видеоигры, нам нужно помнить о том, что он будет двигаться с персонажем или при движении сквозь него. Давайте убедимся, что края фона совпадают друг с другом, создавая непрерывные повторы.
Для этого выделите верхний левый и правый узлы первой фигуры горы. Найдите функцию «Выровнять узлы» на панели управления выше и примените «Выровнять по горизонтали» к выбранным узлам, поместив их на такой же высоте. Повторите то же действие для всех узлов, которые есть по краям нашей картинки (горы и обе зелёные лужайки).



Шаг 6
Наконец, снимите выделение со всех объектов и перейдите на верхнюю панель управления. Найдите окно «Копировать расстояние» и измените параметры на 1280 пикселей для оси Х и 0 пикселей для оси Y. Теперь выделите наш фон и Скопируйте (Control-D) его несколько раз, чтобы увидеть, как выглядит повторение.



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



