Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Design & Illustration
  2. Affinity Designer
Design

Как создать фон с прокруткой в Affinity Designer

by
Difficulty:IntermediateLength:MediumLanguages:

Russian (Pусский) translation by Maria Kulaeva (you can also view the original English article)

Final product image
What You'll Be Creating

В этом уроке мы рассмотрим процесс создания горизонтального бесшовного фонового изображения, идеально подходящего для 2D игр с горизонтальной прокруткой (экшенов, приключений, слэшеров) для ПК, мобильных платформ и браузеров. Мы будем использовать базовые векторные инструменты Affinity Designer, и вы узнаете увлекательный и удобный способ сделать картинку бесшовной. Приступим!

В данном случае мы будем создавать стилизованный лес с таинственной цветовой гаммой, придавая ему соответствующую мрачноватую атмосферу, подходящую для мистических приключенческих игр или квестов. Тем не менее, вы можете применять эти методы для любого другого фона, будь то солнечный луг или берег моря для казуальных игр, или, может быть, темные, глубокие пещеры, или даже инопланетные самолеты для скролл-шутера или платформера. Это вам решать!

Соберите столько образцов для вдохновения, сколько сможете, и просмотрите раздел с фоновыми изображениями для игр на Envato Market, он поможет вам найти интересные решения и оригинальные идеи.

1. Построение композиции

Шаг 1

Начнем с создания нового документа. Выберите тип Web и найдите предустановку 800 x 600 пикселей.

create a New Document

Шаг 2

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

С помощью Инструмента «Эллипс» (M) создайте круг размером 170 x 170 пикселей, удерживая клавишу Shift.

start making the trees with the ellipse tool

Шаг 3

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

Выделите все круги и найдите верхнюю контекстную панель инструментов. Используйте операцию Добавить, чтобы объединить круги в единую форму.

merge the circles with the add operation

Шаг 4

Залейте фигуру темно-фиолетовым цветом, используя цветовой круг в панели Цвет.

apply color to the tree crowns

Шаг 5

Давайте снова выберем Инструмент «Эллипс» (М) и создадим еще один слой кругов, используя ту же технику и варьируя размеры. Объедините круги вместе с помощью операции Добавить.

add another layer of circles

Шаг 6

Залейте созданную фигуру светло-фиолетовым цветом и Переместите на задний план (Shift-Command-[), позади темно-фиолетового слоя.

color the shapes and move to back

Шаг 7

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

add ground with the rectangle tool

Шаг 8

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

edit the ground with node tool

Шаг 9

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

edit the ground with node tool 2

2. Визуализация деревьев

Шаг 1

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

make a tree trunk with rectangle tool

Шаг 2

Добавим немного маленьких веток к верхушке ствола. Используйте инструмент «Перо» (N), чтобы создать изогнутую линию. Установите ей Ширину в 10 пунктов в панели Обводка, делая ветки немного толще.

make branches with strokes

Шаг 3

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

edit details to the trees

Шаг 4

Продолжайте добавлять стволы, варьируя их ширину и меняя местами ветки, чтобы создать больше деревьев. Помните о том, чтобы Сгруппировать (Command-G) похожие объекты, так с ними легче работать.

add more trees

Шаг 5

Создайте еще одно дерево и залейте его тем же светло-фиолетовым цветом, что и дальний слой поверхности земли. Переместите это дерево на задний план (Shift-Command-[), чтобы элементы сравнялись. Таким образом, зрителю будет казаться, что это дерево дальше от него, чем темные деревья на переднем плане.

add trees in the background

Шаг 6

Дальняя область нашего фона все еще выглядит пустой. Давайте заполним ее дополнительными элементами. Для начала создадим круг размером 150 x 150 пикселей с помощью Инструмента «Эллипс» (М). Придадим этой фигуре более светлый цвет, чтобы создать больше воздуха и пространства между объектами. Этот контраст будет заметен, когда мы разместим новые элементы на заднем плане немного позже.

form the bushes from ellipses

Шаг 7

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

form the bushes from ellipses 2

Шаг 8

Теперь мы можем выделить наш куст и Переместить его на задний план (Shift-Command-[), спрятав позади деревьев. Добавьте больше кустов, создавая их из кругов, заполните пустые участки на фоне.

add more bushes in the background

Шаг 9

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

add more trees

Шаг 10

Белая область на заднем плане может быть очень отвлекающей, поэтому немного приглушим ее. Создайте прямоугольник размером 800 x 600 пикселей и Переместите его на задний план (Shift-Command-[), на самый дальний слой. Залейте форму серо-голубым цветом, добавив туманную атмосферу в наш фантастический лес.

add a rectangle background

Шаг 11

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

add more details to the ground

Шаг 12

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

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

add ellipse stones to the ground

3. Создание бесшовного фона

Шаг 1

Теперь давайте посмотрим, как мы можем сделать фон бесшовным и повторяющимся.

Прежде всего, выделите все (Command-A) и вырежьте (Command-X). Создайте прямоугольник 800 x 600 пикселей (любого цвета). Удерживая его выделенным, выберите Правка > Вставить внутри. Теперь наш лес обрамлен в прямоугольник, как в обтравочную маску, что позволяет нам легко перемещать его.

hide the scene inside the rectangle mask

Шаг 2

Переместим наше изображение влево на 400 пикселей. Чтобы это сделать, найдите панель Трансформация и задайте оси X значение -400 пикселей. Значение оси Y должно быть 0 пикселей.

move the image to the left

Шаг 3

Дублируем изображение (Command-C > Command-V), и переместим копию вправо. Задайте X  значение 400 пикселей в панели Трансформация.

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

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

copy the image and move to the right

Шаг 4

Теперь мы можем перетащить обе группы с лесом из их прямоугольников-масок в панели Слои. И давайте начнем соединять самый темный слой земли.

Выберите обе фигуры и объедините их с помощью операции Добавить. Выберите инструмент «Узел» (А) и выделите впадину, которая появилась на верхнем краю. Удалите (Backspace) ее, сделав фигуру гладкой.

merge the shapes with the add operation

Шаг 5

Если слои с поверхностью земли на левой стороне картинки оказались позади, найдите их в панели Слои и перетащите наверх.

rearrange the objects

Шаг 6

Повторите те же действия для следующих слоев земли – выберите две половины и объедините их с помощью операции Добавить. Удалите ненужные узлы, используя инструмент «Узел» (А).

merge the shapes with the add operation 2

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

merge the shapes with the add operation 3

Шаг 7

Выберите один из кустов, который оказался на переднем плане, и переместите его на задний план (Shift-Command-[). Затем переместите его на один уровень выше, чтобы он разместился как раз перед серо-голубым фоном (Command-]).

rearrange the objects

Шаг 8

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

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

add more details to the image

4. Используем градиенты, чтобы оживить фон

Наше фоновое изображение уже готово, вы можете оставить его как есть и экспортировать. Тем не менее, мы можем проработать его еще больше, отрегулировав цвета и оживив всю сцену. Давайте испробуем Инструмент «Заливка» (G)!

Шаг 1

Прежде всего, выделите верхний темно-фиолетовый слой крон деревьев и выберите Инструмент «Заливка» (G). Кликните и перетащите его над объектом, разместив градиент в вертикальном направлении.

Теперь вы можете выбрать верхний маркер ползунка градиентной заливки (кончик круга) и установить нужный цвет с помощью цветового круга на панели Цвет. Сделайте верхнюю часть фигуры светлее и ярче, выбрав розово-фиолетовый цвет.

apply gradients with the fill tool

Шаг 2

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

Великолепно! Теперь, если вы выделите любую ветку и проверите панель Цвет, то увидите, что цвет заливки применен. Но если вы заметите, что некоторые ветки до сих пор являются обводками, то их понадобится выделить внутри каждой группы-дерева, используя панель Слои. И применить к ним операцию Расширить обводку. Попробуйте оба способа, чтобы проверить, что сработает для вас.

apply gradients with the fill tool 2

Шаг 3

Используйте Инструмент «Заливка» (G), чтобы применить вертикальный градиент к деревьям. Вам не нужно применять его к каждому дереву по отдельности – просто выделите всю группу на переднем плане и перетащите ползунок Инструмента «Заливка» (G). Отрегулируйте цвета, сделав верх деревьев немного темнее, чем низ.

apply gradients with the fill tool 3

Шаг 4

Примените градиент к дальним кустам, сделав их верхушки немного светлее.

apply gradients with the fill tool 4

Шаг 5

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

apply gradients with the fill tool 5

Шаг 6

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

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

add more details to the trees

Вот, что должно получиться.

seamless game horizontal background

Шаг 7

Вы можете экспортировать изображение командой Файл > Экспортировать в желаемый формат и соединить несколько копий вместе, чтобы получить бесшовное изображение. Или можно увеличить ширину документа в Affinity Designer с помощью опции Настройка документа в верхней панели инструментов управления.

expand the width of the document

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

copy the background and make it long and seamless

Здорово! Наш бесшовный игровой фон завершен!

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

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

Если вы хотите получить этот конкретный фон в других векторных форматах, таких как EPS, готовых к импорту в игру, а также в альтернативных цветовых схемах, взгляните на этот набор бесшовных игровых фонов, который может быть полезен!

Удачи с Affinity Designer, и не забудьте поделиться своими результатами!

horizontal seamless scrolling background for video games
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.