Share
Ce veți creaÎn acest tutorial vom proiecta un ecran de joc pentru un joc de tip "meci de trei". Vom transforma formele geometrice de bază pentru a crea icoane frumoase pe animale și pentru a aplica diferite tipuri de umpluturi de gradient pentru a face obiectele vii și tridimensionale. Vom termina prin crearea unui fundal pentru a configura un șablon de ecran pentru jocuri.
Jocurile "Match three" sunt foarte populare, în special pentru dispozitivele mobile. Modul de joc este destul de simplu dar captivant: puneți trei obiecte identice într-un rând pentru a marca mai multe puncte. În acest tutorial vom proiecta un panou de joc viu cu animale pătrate fantezie. Mai mult, această lecție vă va ajuta să vă inspirați și să proiectați orice alt tip de meci de ecran cu trei jocuri, de exemplu un joc cu pietre prețioase sau fructe plate. Simțiți-vă liber să răsfoiți Envato Market pentru mai multe idei despre designul de ecran plat și să începem!
Începeți prin crearea unui Fișier nou de 600 x 800 px. Dacă nu vă place să lucrați pe un fond alb, utilizați Instrumentul dreptunghiular (M) pentru a crea o formă care acoperă panza și completați-o cu galben. Blocare aceasta în straturi făcând clic pe un mic pictograma blocare deasupra. Vom păstra această formă în partea de jos și o vom putea recolora mai târziu.
Să începem să formăm capul primului nostru animal: un urs drăguț. Luați Instrument rotunjit dreptunghiular (M) și fă un a 200 x 200 px forma de liliac. Amintiți-vă că puteți ajusta Raza de colț a formei dvs. din bara de instrumente de control din partea de sus. Hai să ne păstrăm 25%.
Luați Instrumentul de umplere (G), deține Schimb și plasați Completati culisorul vertical peste formă, aplicând un culori în două culori Liniar gradient fill.
Putem ajusta culoarea umpluturii făcând clic pe vârful glisorului și selectând culoarea potrivită în Culoare panou. Să alegem o culoare liliac ușoară pentru vârful superior și o culoare mai închisă pentru fundul formei, adăugând astfel o dimensiune.
Să începem să formăm ochiul. Luați Instrument de elipsă (M), deține Schimb și a face un cerc uniform 50 x 50 px. Treceți la Instrumentul de umplere (G) și schimbați Completați tipul la Radial în panoul de control din partea de sus. Aplicați o culoare albă spre centrul formei și culoarea gri la margine, făcând ochiul sferic.
Acum să formăm irisul. Copie și Pastă (Command-C> Command-V) globul ocular, țineți Command-Shift și faceți copia mai mică, micșorând-o până la aproximativ 35 x 35 px cu ajutorul Mutați instrumentul (V). Umpleți-l cu umplere radială de culoare turcoaz în centru și turcoaz întunecat la margine.
Duplicat (Command-C> Command-V) irisul și face copia mai mică, formând un elev. Umpleți-l cu o culoare solidă de culoare turcoaz. Efectuați o lumină albă albă pe partea superioară a ochiului, utilizând tasta Instrument de elipsă (M).
Acum că ochiul este gata, Grup (Command-G) toate elementele sale, țineți Option-Shift și trageți spre dreapta, făcând o copie. grup ambele ochi, selectați-le împreună cu forma capului și folosiți Alinia panou de sus la Alinia formele Orizontală la Centru.
Continuați să utilizați Instrument de elipsă (M) pentru a face un nas înfundat 50 x 15 px mărimea. Aplicați o umplutură verticală verticală, de la roz deschis până la roz, mai întunecat în partea de jos. Faceți o elipsă mai închisă și mai întunecată și schimbați-o Mod amestec la Ecran în straturi panou, formând astfel o lumină semi-transparentă.
Înainte vom forma o gură. Folosește Instrument Pen (P) și țineți Schimb pentru a face o linie pătrată. Seteaza Completati culoare la nici unul din Culoare și aplicați o culoare liliac întunecată Accident vascular cerebral. Deplasați-vă la Accident vascular cerebral panou și setați Lăţime la 2 pt, lăsând toate celelalte opțiuni ca implicite.
Luați Instrument de colț (C) și face colțurile formei rotunjite complet prin tragerea nodurilor de colț în sus.
Duplicat forma și utilizarea Flip orizontal funcția de pe bara de instrumente de control deasupra pentru a reflecta forma.
Acum vom adăuga urechile. Folosește Instrument de elipsă (M) pentru a face o 70 x 70 px cerc. Să facem să se amestece frumos cu capul prin alegerea culorii potrivite. Găsi Selector de culoare instrument în Culoare panou, țineți și trageți peste capul ursului. Veți vedea o lupă, ajutând la localizarea culorii de care aveți nevoie. Alegeți culoarea liliac deschisă lângă ureche și eliberați butonul mouse-ului. Acum puteți selecta urechea și puteți aplica culoarea din exemplul de lângă Selector de culoare. Acolo o avem!
Acum, să vedem cum putem copia stilul complet de umplere de la alte obiecte. Duplicat (Command-C> Command-V) urechea și face copia mai mică. Copiați (Command-C) capul, selectați elementul de sus al urechii și mergeți la Editați> Paste stil. Modificați poziția umplerii folosind Instrumentul de umplere (G). Adăugați oa doua ureche în partea opusă a capului.
După cum puteți vedea, putem copia nu numai obiectele însăși, ci și aspectul lor.
Să terminăm cu ursul adăugând încă un element: o burtă stilizată. Folosește Instrument de elipsă (M) pentru a face o ovală și a umple-o cu culoarea liliac închis, comutând Mod amestec la Ecran în straturi panou.
Putem plasa elipsa creată interior forma capului, ascunzand astfel piesele inutile. Selectați ovalul creat în straturi panou și trageți-l peste forma capului până când vedeți o bandă albastră îngustă așa cum se arată în imaginea de mai jos. Puneți elipsa, plasându-o în interiorul stratului capului.
Și am terminat! Să trecem la următoarea pictogramă a animalului.
Să folosim pictograma ursului pe care am creat-o deja pentru a face un nou element. Duplicat și să modificăm culorile umplerii liniare în alb pe partea de sus și gri în partea de jos. Apoi recolorează urechile de la liliac până la un gri foarte închis. Modificați umplerea liniară a nasului și gri-închis și reglați culoarea gurii Accident vascular cerebral, trecerea la roz.
În cele din urmă, ajustați culoarea ochilor prin schimbarea umplerii radiale până la maro deschis în centru și maronie mai închisă la margini, aplicând culoarea maro închis și elevului.
Apoi, vom adăuga petele din jurul ochilor pentru a face ca personajul nostru să arate mai mult ca un adevărat panda. Folosește Instrument de elipsă (L) pentru a face o 75 x 95 px forma, umplând-o cu umplutură liniară de nuanțe gri-închis.
Rotiți forma aproximativă 45 de grade și plasați-o sub ochi tragând forma în jos straturi panou.
Observați diferența dintre plasarea unei forme interior celălalt și plasarea unei forme sub celălalt. De această dată veți vedea un marcaj albastru mai lung, ca în imaginea de mai jos.
Duplicat (Command-C> Command-V) spotul și Flip-o orizontal la cealaltă parte, folosind transformări funcția din bara de instrumente de control din partea de sus. Deplasați copia locului, făcându-l să se potrivească celui de-al doilea ochi.
Și acolo avem panda noastră! Sa trecem peste.
hai duplicat personajul panda si transforma-l intr-un raton! Mai întâi, schimbați culoarea formei capului într-o umplutură verticală verticală de la albastru deschis până la albastru mai întunecat în partea de jos.
Mergeți prin schimbarea culorilor ochilor spre roșu roz și înlocuiți gura. Folosește Instrument Pen (P) pentru a crea o formă de gură în colț cu gri-închis Accident vascular cerebral.
Acum, să modificăm urechile. Selectați cercul mai mare al formei urechii și Conversia în Curbe, folosind butonul din bara de instrumente de control din partea de sus. Luați Instrument de noduri (A) și selectați nodul superior al formei. Conversia la Sharp de la panoul de control din partea de sus, făcând urechea îndreptată. Faceți același lucru și pentru partea interioară a urechii: Conversia în Curbe și Convertit nodul superior la Sharp.
Schimbați culoarea urechii, potrivind-o cu capul și rotiți urechea 45 de grade. Duplicat ureche și Flip orizontal, plasând copia pe partea opusă.
Selectați punctul din jurul ochiului cu ajutorul funcției Instrumentul de umplere (G) și ajustați culorile umplerii, schimbându-le în nuanțe mai deschise și mai întunecate de albastru. Copiați (Command-C) la fața locului, selectați cel de-al doilea spot și Editați> Paste stil, aplicând un aspect nou.
Finisați-vă cu personajul adăugând o elipsă gri deschis sub zona nasului. Și asta e pentru raton! Să mergem la ultima noastră icoană!
Să duplicăm prima noastră icoană - ursul violet - și să o folosim pentru a face un papagal amuzant. Schimbați culoarea capului în umplutură liniară de la verde deschis până la verde mai închis la partea inferioară. Ștergeți forma de burtă eliptică și gura ursului, deoarece nu mai avem nevoie de ele.
Modificați culoarea ochilor în portocaliu-maroniu.
Să-i întoarcem nasul ursului în ciocul unui papagal! Rotiți-l 90 de grade și Conversia în Curbe. Selectați nodul inferior cu Instrument de noduri (A) și Conversia la Sharp din bara de instrumente de control din partea de sus.
Modificați culorile umplerii liniare în galben în partea de sus și portocaliu în partea de jos.
Luați Instrument de elipsă (M) și face o formă îngustă de 15 x 40 px. Umpleți-l cu culoarea verde deschis și schimbați-l Mod amestec la Multiplica, făcând o pene semi-transparentă întunecată.
ține Option-Shift și trageți peneul spre dreapta, făcând o copie. presa Command-J de câteva ori pentru a face două copii.
Să adăugăm un ultim detaliu papagalului nostru. Folosește Instrument de elipsă (M) pentru a face o 40 x 70 px forma pe mijloc pe frunte, alegerea culorii potrivite din cel mai ușor loc de frunte și aplicarea unei forme de culoare verde deschis în formă.
Adăugați două elipse mai mici pe ambele fețe ale formei medii. Selectați toate cele trei forme și utilizați Adăugați o operație de la panoul de control de deasupra pentru a îmbina toate elipsurile într-o singură formă.
Duplicat (Command-C> Command-V) forma și deplasați o copie de jos în jos apăsând pe Sageata in jos cheie de câteva ori. Modificați culoarea formei în verde închis, făcând o umbră plată.
Și acolo avem! Pictograma noastră de papagal este gata!
Iată setul nostru de animale pătrate drăguțe pe care le vom folosi ca elemente ale unui joc "meci de trei". Să mergem mai departe și să facem un simplu ecran de joc pentru a vedea cum funcționează împreună!
hai descuia forma noastră de fundal și schimbarea culorii sale într-o portocală blândă. Folosește Instrument rotunjit dreptunghiular (M) pentru a face o 415 x 600 px forma galbenă cu 10% Radius colț.
Duplicat (Command-C> Command-V) forma și face copia mai mică, schimbând culoarea de umplere la galben mai închis.
Duplicat noua formă și micșorarea din nou a dimensiunii copiei, schimbând culoarea pe aceeași culoare galbenă pe care o avem pentru cel mai mare dreptunghi rotunjit.
In cele din urma, duplicat cel mai mare dreptunghi rotunjit și deplasați copia de jos în jos, apăsând pe Sageata in jos cheie de câteva ori. Faceți o copie mai mare și schimbați-o Mod amestec la Multiplica în straturi panou, formând o umbră subtilă. În general, avem patru dreptunghiuri rotunjite pentru panoul de joc.
Folosește Instrument de elipsă (M) și țineți-vă jos Schimb pentru a face un cerc verde mare în partea de jos a pânzei. Plasați-l între ecranul jocului și forma de fundal. Adăugați mai multe cercuri, care acoperă partea de jos a pânzei.
Selectați o nuanță verde mai deschisă și continuați să utilizați Instrument de elipsă (M) pentru a face cercuri mai mici și mai ușoare, reprezentând tufișuri simple stilizate.
Continuați să utilizați aceeași tehnică și umpleți partea superioară a pânzei cu cercuri lumino-portocalii, reprezentând nori stilizați.
Acum putem începe plasarea icoanelor animale pe panoul de joc. Aici folosesc un truc simplu pentru a face toate elementele egale. După cum probabil ați observat, papagalul nostru este puțin mai mic decât restul personajelor, pentru că nu are urechi. Acest lucru poate face alinierea formelor un pic complicat, de aceea copiez urechile din pictograma panda și le atașez la papagal. Asigurați-vă urechile complet transparente prin setarea Completati și Accident vascular cerebral culori pentru nici unul, apoi grupați elementele împreună.
Acum putem plasa icoanele într-un rând și micșora dimensiunea, făcându-le să se potrivească ecranului de joc. Ținând pictogramele selectate, accesați bara de instrumente de control din partea de sus și deschideți Aranja panou. De aici, faceți clic pe Spațiu orizontal și desfaceți Distribuția automată bifați caseta de selectare, setând valoarea gap la 0 px.
Poti Alinia forme la Fund de asemenea, folosind același lucru Aranja panou.
Grup (Command-G) rândul de icoane, țineți Option-Shift și trageți-o în sus, făcând o copie. presa Command-J de mai multe ori, umplând ecranul de joc cu pictograme. Selectați toate rândurile, mergeți la Aranja panou și faceți clic pe Spațiu vertical. Debifați Distribuie automat și setați valoarea gap-ului la 2 px, făcând lacune înguste între marginile icoanelor.
Puteți ajusta aspectul făcând pictogramele mai mici sau mai mari și ajustând distanța dintre rânduri, făcând pictogramele să se potrivească cu panoul de joc.
Imediat după aceea, putem să amestecăm icoanele în mod aleatoriu, făcând ca întreaga scenă să pară un ecran real de joc. Faceți dublu clic pe rândul de pictograme pentru a izola grupul și a muta în timp ce țineți apăsat pictogramele din grup Schimb.
Buna treaba! Meu ecran de joc trei este gata! Sper că v-ați bucurat să urmați acest tutorial și ați descoperit câteva sfaturi și trucuri utile în timp ce lucrați cu forme de bază, umpluturi de gradient și diverse operațiuni de transformare ale Affinity Designer. Simțiți-vă liber să vă aplicați cunoștințele în timp ce creați noi modele de jocuri și personaje, și nu uitați să împărtășiți rezultatele minunate ale dvs.!
Dacă sunteți dornici să învățați cum să creați mai multe chestii de design al jocului în Affinity Designer, asigurați-vă că verificați și următoarele tutoriale:
Accentsconagua