Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Design & Illustration
  2. Game Design
Design

Як стварыць гульнявы экран "3 у шэраг" у Affinity Designer  

by
Difficulty:IntermediateLength:LongLanguages:

Belarusian (беларуская мова) translation by Katharina Nevolina (you can also view the original English article)

Final product image
What You'll Be Creating

У гэтым уроку мы будзем распрацоўваць гульнявы экран для гульні "3 у шэраг". Мы будзем трансфармаваць асноўныя геаметрычныя фігуры, каб стварыць мілыя абразкі жывёл і прымяніць розныя тыпы градыентных заліванняў, каб зрабіць аб'екты яркімі і трохмернымі.  Мы скончым стварэннем фону для налады шаблону гульнявога экрана.

Гульні "3 у шэраг" вельмі папулярныя, асабліва для мабільных устройств.  Гульня даволі простая, але захоплівае: трэба змясціць тры аднолькавых аб'екта запар, каб набраць усё больш і больш ачкоў.  У гэтым уроку мы будзем распрацоўваць яркую гульнявую панэль з шматколернымі квадратнымі жывёламі.  Больш за тое, гэты ўрок дапаможа вам натхніцца і спраектаваць любы іншы тып гульнявых экранаў "3 у шэраг", напрыклад гульня з каштоўнымі камянямі або плоскімі фруктамі.  Не саромеціся праглядаць Envato Market для новых ідэй дызайну плоскага гульнявога экрана, і давайце пачнем!

1. Стварэнне квадратнага мядзведзя

Крок 1

Пачніце са стварэння новага файла памерам 600 x 800 пк. Калі вам не падабаецца працаваць на белым фоне, выкарыстоўвайце інструмент Rectangle Tool (M), каб стварыць фігуру, якая пакрывае палатно, і запоўніць яе жоўтым колерам. Заблакуйце яе на панэлі Layers, пстрыкнуўшы па абразку мініяцюры.  Мы захаваем гэтую фігуру ў ніжняй частцы, і зможам перафарбаваць яе пазней.

Start by creating a New File

Крок 2

Давайце пачнем фарміраваць галаву нашай першай жывёліны: мілага мядзведзя.  Вазьміце Rounded Rectangle Tool (M) і зрабіце базавую фігуру 200 x 200 пк.  Памятайце, што вы можаце наладзіць Corner Radius вашай фігуры на панэлі кіравання зверху. Давайце захаваем яго на ўзроўні 25%.

Вазьміце інструмент Fill Tool (G), ўтрымлівайце Shift і змясціце паўзунок Fill вертыкальна папярок фігуры, ужываючы двухколернае заліванне Linear gradient.

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

shape the head from rectangle with linear fill

Крок 3

Давайце пачнем фарміраваць вока.  Вазьміце інструмент Ellipse Tool (M), ўтрымлівайце Shift і зрабіце роўны круг памерам 50 x 50 пк.  Пераключыцеся на інструмент Fill Tool (G) і змяніце Fill Type на Radial на панэлі кіравання зверху.  Прымяніце белы колер да цэнтра фігуры і шэры па краю, что зробіць вока сферычным.

Зараз давайце сфармуем радужную абалонку.  Скапіруйце і ўстаўце (Command-C> Command-V) вочны яблык, ўтрымлівайце Command-Shift і паменшыце копію, да 35 x 35 пк з дапамогай Move Tool (V). Запоўніце яе радыяльным заліваннем бірузовага колеру ў цэнтры і цёмна-бірузовым па краю.

Дублюйце (Command-C> Command-V) радужную абалонку і паменшыце копію, утвараючы зрэнка.  Запоўніце яе цёмна-бірузовым суцэльным колерам.  Зрабіце маленькі белы блік на воку, выкарыстоўваючы інструмент Ellipse Tool (M).

make an eye from circle with radial fill

Крок 4

Цяпер, калі вока гатова, згрупуйце (Command-G) ўсе яго элементы, ўтрымлівайце Option-Shift і перацягніце направа, что зробіць копію.  Згрупуйце абодва вока, выберыце іх разам з фігурай галавы і выкарыстоўвайце панэль Align зверху, каб выраўнаваць фігуры гарызантальна па цэнтры.

Працягвайце выкарыстоўваць інструмент Ellipse Tool (M), каб зрабіць пляскаты нос памерам 50 x 15 пк.  Вырабіце вертыкальнае лінейнае заліванне ад светла-ружовага колеру зверху да цёмна-ружовага ўнізе.  Зрабіце меншы цёмна-ружовы эліпс зверху і пераключыце яго Blend Mode на Screen на панэлі Layers, тым самым фармуючы паўпразрысты блік.

make a nose from ellipse

Крок 5

Затым мы сфармуем рот.  Выкарыстоўвайце Pen Tool (P) і ўтрымлівайце Shift, каб стварыць квадратную лінію.  Усталюйце колер залівання на none на панэлі Colour і нанесіце цёмна-ліловы колер на Stroke.  Накіроўвайцеся на панэль Stroke і ўсталюйце шырыню 2 пт, усе астатнія параметры пакіньце па змаўчанні.

Вазьміце інструмент Corner Tool (C) і закругліце куты фігуры, пацягнуўшы за кутнія пункты ўверх.

Дублюйце фігуру і выкарыстоўвайце функцыю Flip Horizontal з панэлі кіравання інструментаў зверху, каб адлюстраваць фігуру.

shape the mouth with pen tool

Крок 6

Цяпер мы дададзім вушы.  Выкарыстоўвайце Ellipse Tool (M), каб зрабіць круг 70 x 70 пк.  Давайце зробім, каб яны добра спалучаліся з галавой, выбраўшы правільны колер.  Знайдзіце інструмент Color Picker на панэлі Colour, утрымлівайце і перацягніце яго над галавой мядзведзя.  Вы ўбачыце лупу, якая дапаможа вам знайсці патрэбны колер.  Выберыце светла-ліловы колер побач з вухам і адпусціце кнопку мышы.  Цяпер вы можаце выбраць вуха і прымяніць колер узору побач з Color Picker.  Вось, што ў нас палучылася!

Зараз давайце паглядзім, як мы можам скапіраваць складаны стыль залівання іншых аб'ектаў.  Дублюйце (Command-C> Command-V) вуха і паменшыце копію. Скапіруйце (Command-C) галаву, абярыце верхні элемент вуха і перайдзіце ў Edit> Paste Style.  Змяніце становішча залівання з дапамогай Fill Tool (G).  Дадайце другое вуха на супрацьлеглым баку галавы.

Як вы бачыце, мы можам капіраваць не толькі самі аб'екты, але і іх знешні выгляд.

shape the ears from circles

Крок 7

Давайце скончым мядзведзя, дадаўшы яшчэ адзін элемент: стылізаваны жывоцік.  Выкарыстоўвайце Ellipse Tool (M), каб зрабіць авал і запоўніце яго цёмна-ліловым колерам, пераключыце Blend Mode на Screen на панэлі Layers.

Мы можам размясціць створаны эліпс унутры фігуры галавы, такім чынам хаваючы непатрэбныя часткі.  Вылучыце створаны авал на панэлі Layers і расцягніце яго па фігуры галавы, пакуль не ўбачыце вузкую сінюю паласу, як паказана на малюнку ніжэй.  Адпусціце эліпс, размясціўшы яго на пласце галавы. 

Мы скончылі!  Пяройдзем да наступнага абразку жывёлы. 

place one object inside the other

2. Стварэнне квадратнай панды

Крок 1

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

Нарэшце, адрэгулюйце колер вачэй, змяніўшы радыяльнае заліванне на светла-карычневы колер у цэнтры і цёмна-карычневы па краю, прямяніце цёмна-карычневы колер да зрэнкі. 

recolor the bear icon

Крок 2 

Далей мы дададзім цёмныя плямы вакол вачэй, каб наш персанаж больш быў падобны на сапраўдную панду.  Выкарыстоўвайце інструмент Ellipse Tool (L), каб зрабіць постаць памерам 75 x 95 пк, запаўняючы яе лінейным заліваннем цёмна-шэрага адцення. 

Павярніце фігуру на 45 градусаў і змясціце яе ніжэй вока, перацягнуўшы фігуру на панэль Layers

Адзначце розніцу паміж размяшчэннем адной фігуры ўнутры іншай і размяшчэннем адной фігуры ніжэй іншай.  На гэты раз вы ўбачыце больш доўгі сіні маркер, як паказана на малюнку ніжэй. 

add a spot around the eye

Крок 3

Дублюйце (Command-C> Command-V) пляму і павярніце яе гарызантальна з другога боку, выкарыстоўваючы функцыю Transforms на панэлі кіравання інструментаў зверху.  Перамесціце копію плямы, каб яна адпавядала другому воку. 

І вось у нас ёсць панда!  Давайце рухацца далей. 

Flip the spot Horizontal

3. Стварыце квадратнага янота

Крок 1

Давайте прадублюем персанажа панду і ператворым яго ў мілага янота!  Перш за ўсё, змяніце колер фігуры галавы вертыкальным лінейным заліваннем ад светла-блакітнага зверху да больш цёмнага сіняга колеру ў ніжняй часткі. 

Працягвайце, змяняючы колеры вачэй на ружавата-чырвоны, і давайце заменім рот.  Выкарыстайце Pen Tool (P) для стварэння вуглавой формы рота цёмна-шэрым штрыхом

change the color of the head shape

Крок 2 

Зараз давайце мадыфікуем вушы.  Выберыце большае кола фігуры вуха і Convert to Curves, выкарыстоўваючы кнопку на панэлі кіравання інструментаў зверху.  Вазьміце інструмент Node Tool (A) і абярыце верхнюю кропку фігуры.  Convert у Sharp з панэлі кіравання зверху, робячы вуха завостраным.  Зрабіце тое ж самае для ўнутранай часткі вуха: Convert to Curves і Convert верхнюю кропку ў Sharp.

modify the ears making them pointed

Крок 3

Змяніце колер вуха, каб ён падыходзіў да галавы і павярніце вуха на 45 градусаўДублюйце вуха і павярніце гарызантальна, змясціўшы копію на процілеглы бок. 

Duplicate the ear and Flip Horizontal

Крок 4

Выберыце пляму вакол вока з дапамогай Fill Tool (G) і адрэгулюйце колер залівання, змяніўшы яго на больш светлыя і цёмныя адценні сіняга.  Скапіруйце (Command-C) пляму, абярыце другую пляму і Edit> Paste Style, прямяніце новы знешні выгляд. 

Завершыце персанажа, дадаўшы светла-шэры эліпс у вобласць пад носам.  З янотам гэта ўсё!  Перайдзём да нашага апошняга абразку! 

recolor the elements and finish the icon

4. Стварыце квадратнага попугая

Крок 1

Давайце дублюем наш самы першы абразок - фіялетавага мядзведзя - і выкарыстаем яго, каб зрабіць пацешнага папугая.  Змяніце колер галавы лінейным заліваннем ад светла-зялёнага зверху да больш цёмнага зялёнага ў ніжняй часткі.  Выдаліце эліптычную фігуру жывоціка і рот мядзведзя, бо яны нам больш не патрэбны. 

Змяніце колер вачэй на аранжава-карычневы. 

recolor the head to green

Крок 2

Давайте ператворым нос мядзведзя ў дзюбу папугая!  Павярніце яго на 90 градусаў і Convert to Curves.  Выберыце ніжнюю кропку з дапамогай Node Tool (A) і Convert to Sharp з панэлі кіравання інструментаў зверху. 

Змяніце колер лінейнага залівання на жоўты зверху і аранжавы знізу. 

turn the bears nose into a beak

Крок 3 

Вазьміце інструмент Ellipse Tool (M) і зрабіце вузкую фігуру памерам 15 x 40 пк. Залейце яе светла-зялёным колерам і змяніце Blend Mode на Multiply, зрабіўшы цёмнае паўпразрыстае пяро. 

Ўтрымлівайце Option-Shift і перацягніце пяро ўправа, зрабіўшы копію. Націсніце Command-J пару раз, каб зрабіць яшчэ дзве копіі. 

make feathers in multiply blend mode

Крок 4

Давайте дададзім апошнюю дэталь нашаму папугаю. Выкарыстайце Ellipse Tool (M), каб зрабіць фігуру памерам 40 x 70 пк пасярэдзіне лба, выбраўшы прыдатны колер з самай светлай плямы на лбе і ўжываючы светла-зялёны колер да фігуры. 

Дадайце два меншых эліпса з абодвух бакоў ад сярэдняй фігуры.  Абярыце ўсе тры фігуры і выкарыстоўвайце Add Operation з панэлі кіравання зверху, каб аб'яднаць усе эліпсы ў адну фігуру. 

Дублюйце (Command-C> Command-V) фігуру і перамесціце ніжнюю копію трохі ўніз, націснуўшы клавішу Стрэлка ўніз некалькі разоў.  Змяніце колер фігуры на цёмна-зялёны, ствараючы плоскую цень. 

add elliptical feathers to the forehead

І вось ён гатовы!  Наш абразок папугая гатовы! 

Our parrot icon is ready

Крок 5 

Вось наш набор сімпатычных квадратных жывёл, якіх мы будзем выкарыстоўваць у якасці элементаў гульні "3 у шэраг".  Давайце перамясцімся і створым просты гульнявы экран, каб убачыць, як яны будуць працаваць разам! 

set of square flat animal icons is finished

5. Стварэнне ігравога экрана "3 у шэраг" 

Крок 1

Давайте разблакіруем нашу фігуру фону і зменім яе колер на пяшчотны аранжавы.  Выкарыстайце Rounded Rectangle Tool (M), каб зрабіць жоўтую фігуру памерам 415 x 600 пк з Corner Radius 10%.

unlock our background shape and change its color

Крок 2

Дубліруйте (Command-C> Command-V) фігуру і зрабіце копію менш, змяніўшы колер залівання на больш цёмны жоўты. 

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

Нарэшце, дубліруйце самы вялікі закруглены прамавугольнік і трохі перамясціце ніжнюю копію ўніз, націснуў клавішу Стрэлка ўніз некалькі разоў. Зрабіце копію некалькі буйней і змяніце Blend Mode на Multiply на панэлі Layers, утвараючы няўлоўную цень.  У цэлым у нас ёсць чатыры закругленых прамавугольніка для гульнявой панели.

make a game panel from rounded rectangles

Крок 3

Выкарыстайце Ellipse Tool (M) і ўтрымлівайце Shift, каб зрабіць вялікі зялёны круг у ніжняй частцы палатна. Змясціце яго паміж экранам гульні і фігурай фону.  Дадайце больш колаў, якія зачыняюць ніжнюю частку палатна. 

add circles in the bottom of the screen

Крок 4

Выберыце больш светлае зялёнае адценне і працягвайце выкарыстоўваць Ellipse Tool (M), каб зрабіць меншыя і больш светлыя колы, малюючы простыя стылізаваныя кусты. 

continue using the Ellipse Tool to make circles

Крок 5 

Працягвайце выкарыстоўваць тую ж тэхніку і запоўніце верхнюю частку палатна светла-аранжавымі коламі, якія паказваюць стылізаваныя аблокі. 

depict stylized clouds from circles

Крок 6 

Зараз мы можам пачаць размяшчаць абразкі жывёл на гульнявой панэлі. Тут я выкарыстоўваю просты трук, каб усе элементы былі роўныя.  Як вы, напэўна, заўважылі, наш папугай крыху менш астатніх персанажаў, таму што ў яго няма вушэй.  Гэта можа зрабіць выраўноўванне фігур крыху больш складана, і менавіта таму я капірую вушы з абразка панды і прымацоўваю іх папугаю.  Зрабіце вушы цалкам празрыстымі, усталяваўшы колер Fill і Stroke на none, а затым згрупуйце элементы разам. 

Цяпер мы можам змясціць абразкі ў шэраг і паменшыць памер, каб яны адпавядалі гульнявому экрану. Захоўваючы выбраныя абразкі, перайдзіце да панэлі кіравання інструментаў зверху і адкрыйце панэль Arrange.  З гэтага пункта пстрыкніце Space Horizontally і зніміце флажок з Auto Distribution, усталяваўшы значэнне прабелу роўным 0 пк. 

Вы таксама можаце выраўнаваць фігуры ў ніжняй часткі, выкарыстоўваючы тую ж панэль Arrange.

start arranging the icons

Крок 7

Сгрупіруйце (Command-G) шэраг абразкоў, ўтрымлівайце Option-Shift і перацягніце яго, стварыўшы копію.  Націсніце Command-J некалькі разоў, запаўняючы экран гульні абразкамі.  Абярыце ўсе шэрагі, перайдзіце на панэль Arrange і націсніце Space Vertically.  Зніміце флажок з Auto Distribute і ўсталюйце значэнне прабелу ў 2 пк, робячы вузкія прамежкі паміж бакамі абразкоў. 

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

Адразу пасля гэтага мы можам выпадковым чынам ператасоўваць абразкі, что зробіць ўсю сцэну падобнай на сапраўдны гульнявы экран.  Двойчы пстрыкніце шэраг абразкоў, каб ізаляваць групу і перамяшчаць значкі ўнутры групы па гарызанталі, утрымліваючы Shift

add icons and shuffle them

Віншую!  Вы падняліся на ўзровень вышэй! 

Выдатная праца!  Наш гульнявой экран "3 у шэраг" гатовы!  Спадзяюся, вам спадабалася прытрымлівацца гэтага ўроку, і вы знайшлі карысныя парады і прыёмы, працуючы з асноўнымі фігурамі, градыентнымі заліваннямі і рознымі трансфармацыйнымі аперацыямі Affinity Designer.  Не сароміцеся прымяняць свае веды, ствараць новыя гульнявыя і персанальныя праекты, і не забывайце дзяліцца сваімі ўзрушаючымі вынікамі! 

Калі вы зацікаўлены ў тым, каб навучыцца ствараць іншыя элементы дызайну гульняў у Affinity Designer, абавязкова паглядзіце наступныя ўрокі: 

Match Three Games Screen with Flat Animals in Affinity Designer is ready
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.