1. Design & Illustration
  2. Drawing/Illustration
  3. Illustration

Как создать яркий фон к видеоигре в CorelDRAW

Scroll to top
Read Time: 9 min
Sponsored Content

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)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Получите свою пробную 30-дневную версию сейчас! Вы будете скачивать 30-дневную полноценную, функциональную пробную версию CorelDRAW Graphics Suite X7.  Эта пробная программа доступна в 32-битной и 64-битной версиях. 64-битная версия была оптимизирована для пользователей 64-битной версии  Microsoft Windows 8/8.1 или Windows 7. 

Визуальное оформление – один из главных аспектов любой игры наравне с сюжетом. В этом руководстве мы выступим в роли дизайнера видеоигры и создадим наш собственный повторяющийся фон с изображением цветного фруктового сада. Мы поработаем с фигурами и используем сетчатую заливку для оживления наших объектов в CorelDRAW® X7. Начнём! 

1. Готовим основу для фона фруктового сада

Шаг 1

Для начала создадим Новый документ размером 1280 х 768 пикселей. 

create a New Documentcreate a New Documentcreate a New Document

Шаг 2

Найдите Инструмент «Прямоугольник» (F6) на панели Инструментов и дважды кликните для создания прямоугольника по центру страницы такого же размера, как документ. 

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

use the rectangle tool and Interactive Fill tooluse the rectangle tool and Interactive Fill tooluse the rectangle tool and Interactive Fill tool

Шаг 3

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

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

 creating a vivid summer sky with interactive fill creating a vivid summer sky with interactive fill creating a vivid summer sky with interactive fill

Шаг 4

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

add green square for the grassadd green square for the grassadd green square for the grass

Шаг 5

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

add a darker grass shapeadd a darker grass shapeadd a darker grass shape

2. Создаём облака Инструментами «Произвольная» и «Сетчатая заливка» 

Шаг 1

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

draw a cloud with freehand tooldraw a cloud with freehand tooldraw a cloud with freehand tool

Шаг 2

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

use the Grid size panel to add rows and columns 1use the Grid size panel to add rows and columns 1use the Grid size panel to add rows and columns 1

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

use the Grid size panel to add rows and columns 2use the Grid size panel to add rows and columns 2use the Grid size panel to add rows and columns 2

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

use the Grid size panel to add rows and columns 3use the Grid size panel to add rows and columns 3use the Grid size panel to add rows and columns 3

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

add some rows and columns manuallyadd some rows and columns manuallyadd some rows and columns manually

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

use the Add intersection function in the Property Baruse the Add intersection function in the Property Baruse the Add intersection function in the Property Bar

Шаг 3

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

use the Freehand selection marquee to select inner nodesuse the Freehand selection marquee to select inner nodesuse the Freehand selection marquee to select inner nodes

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

add color to the cloud with the Color Dockeradd color to the cloud with the Color Dockeradd color to the cloud with the Color Docker

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

add color to the cloud with the Color Docker 2add color to the cloud with the Color Docker 2add color to the cloud with the Color Docker 2

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

Cloud made with the Mesh fill toolCloud made with the Mesh fill toolCloud made with the Mesh fill tool

Шаг 4

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

create smaller cloud with mesh fillcreate smaller cloud with mesh fillcreate smaller cloud with mesh fill

Шаг 5

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

Add a mesh fill to the skyAdd a mesh fill to the skyAdd a mesh fill to the sky

Шаг 6

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

create a feather effect with white colorcreate a feather effect with white colorcreate a feather effect with white color

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

make a bright tranquil sky make a bright tranquil sky make a bright tranquil sky

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

make more clouds and group themmake more clouds and group themmake more clouds and group them

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

rename the objects in the Object managerrename the objects in the Object managerrename the objects in the Object manager

3. Формируем яблочное дерево Инструментом «Сетчатый градиент» и изображаем фруктовый сад 

Шаг 1

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

form the tree baseform the tree baseform the tree base

Шаг 2

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

make a mesh grid on the tree crownmake a mesh grid on the tree crownmake a mesh grid on the tree crown

Шаг 3

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

Lets add a tree trunk using the Rectangle toolLets add a tree trunk using the Rectangle toolLets add a tree trunk using the Rectangle tool

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

use the object manager to reorder the objects 1use the object manager to reorder the objects 1use the object manager to reorder the objects 1

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

use the object manager to reorder the objects 2use the object manager to reorder the objects 2use the object manager to reorder the objects 2

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

apply the mesh fill to the trunkapply the mesh fill to the trunkapply the mesh fill to the trunk

Шаг 4

Давайте сделаем наше дерево более детальным, добавив простую тень.

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

Наконец, выделите созданный элемент, возьмите Инструмент «Прозрачность» и снизьте непрозрачность нашего объекта, подвинув ползунок. 

make the tree more detailed by adding a shadowmake the tree more detailed by adding a shadowmake the tree more detailed by adding a shadow

Шаг 5

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

make a red apple basemake a red apple basemake a red apple base

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

make the apple glossymake the apple glossymake the apple glossy

Шаг 6

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

add shiny highlight to the treeadd shiny highlight to the treeadd shiny highlight to the tree

Шаг 7

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

add more apple treesadd more apple treesadd more apple trees

4. Добавляем в композицию второстепенные детали 

Шаг 1

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

add mountains in the background 1add mountains in the background 1add mountains in the background 1

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

add mountains in the background 1add mountains in the background 1add mountains in the background 1

Шаг 2

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

add spots to the groundadd spots to the groundadd spots to the ground

Шаг 3

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

add tree branchesadd tree branchesadd tree branches

Шаг 4

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

add leaves to the treesadd leaves to the treesadd leaves to the trees

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

video game backgroundvideo game backgroundvideo game background

Шаг 5

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

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

align the nodes at the edgesalign the nodes at the edgesalign the nodes at the edges

Шаг 6

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

duplicate the background duplicate the background duplicate the background

Отлично! Наш живой фон для видеоигры завершён! 

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

Video Game Background Video Game Background Video Game Background
Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Design & Illustration tutorials. Never miss out on learning about the next big thing.
One subscription. Unlimited Downloads.
Get unlimited downloads