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

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

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

Крок 1

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

Крок 2

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

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

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

Крок 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).

Крок 4

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

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

Крок 5

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

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

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

Крок 6

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

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

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

Крок 7

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

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

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

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

Крок 1

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

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

Крок 2 

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

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

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

Крок 3

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

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

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

Крок 1

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

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

Крок 2 

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

Крок 3

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

Крок 4

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

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

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

Крок 1

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

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

Крок 2

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

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

Крок 3 

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

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

Крок 4

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

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

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

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

Крок 5 

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

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

Крок 1

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

Крок 2

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

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

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

Крок 3

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

Крок 4

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

Крок 5 

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

Крок 6 

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

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

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

Крок 7

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

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

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

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

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

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

• Як стварыць пракручваючыся фон у Affinity Designer 
• Як стварыць гульнявога персанажа Sprite Sheet ў Affinity Designer