Share
Hva du skal skapeI denne opplæringen skal vi designe et spillskjermbilde for en "match tre" slags spill. Vi skal transformere grunnleggende geometriske former for å lage nydelige dyrsikoner og bruke ulike typer gradientfyll for å gjøre objektene levende og tredimensjonale. Vi vil avslutte ved å lage en bakgrunn for å sette opp en spillskjermmal.
"Match tre" spill er veldig populære, spesielt for mobile enheter. Spillet er ganske enkelt, men likevel vanedannende: sett tre identiske objekter på rad for å score flere og flere poeng. I denne opplæringen skal vi utforme et levende spillpanel med fancy firkantede dyr. I tillegg vil denne leksjonen hjelpe deg med å bli inspirert og designe en hvilken som helst annen type tre spillskjerm, for eksempel et spill med dyrebare edelstener eller flate frukter. Du er velkommen til å bla gjennom Envato Market for flere ideer om flatskjermdesign, og la oss komme i gang!
Begynn med å opprette en Ny fil av 600 x 800 px. Hvis du ikke liker å jobbe på en hvit bakgrunn, bruk Rektangelverktøy (M) å lage en form som dekker lerretet og fyll det med gul. Låse det i lag panel ved å klikke en liten låsikonet på toppen. Vi beholder denne formen i bunnen og vil kunne sette den på nytt senere.
La oss begynne å danne hodet til vårt første dyr: en søt bjørn. Ta Avrundet rektangelverktøy (M) og lag en 200 x 200 px lilla form. Husk at du kan justere Hjørne Radius av formen din fra kontrollverktøylinjen øverst. La oss holde det på 25%.
Ta Fyllverktøy (G), holde Skifte og plasser Fylle glidebryteren vertikal på tvers av formen, ved å bruke en tofarget lineær gradient fylling.
Vi kan justere farge på fyllingen ved å klikke på glidebryterens tips og velge riktig farge i Farge panel. La oss velge en lys lilla farge for den øvre spissen og en mørkere farge for bunnen av formen, og dermed legge til dimensjon.
La oss begynne å danne øyet. Ta Ellipseverktøy (M), holde Skifte og lag en jevn sirkel av 50 x 50 px. Bytt til Fyllverktøy (G) og endre Fyll type til radial i kontrollpanelet på toppen. Påfør en hvit farge til midten av formen og den grå fargen til kanten, noe som gjør øye sfærisk.
La oss nå forme irisene. Kopiere og Lim inn (Command-C> Command-V) øyeeball, hold Kommando-Skift og gjør kopien mindre, krympe den ned til ca. 35 x 35 px med hjelp av Flytt verktøyet (V). Fyll den med radial fylle turkisfarge i midten og mørk turkis på kanten.
Duplisere (Command-C> Command-V) iris og gjøre kopien mindre, danner en elev. Fyll den med mørk turkis farge. Lag et lite, hvitt høydepunkt på toppen av øyet ved å bruke Ellipseverktøy (M).
Nå som øyet er klart, Gruppe (Command-G) alle dens elementer, hold Option-Shift og dra til høyre, lag en kopi. Gruppe begge øynene, velg dem sammen med hodeformen og bruk Rette inn panel på toppen til Rette inn figurene Horisontal til Senter.
Fortsett å bruke Ellipseverktøy (M) å lage en knust nese av 50 x 15 px størrelse. Påfør en vertikal lineær fylling fra lyserød på toppen til mørkere rosa nederst. Lag en mindre mørk-rosa ellipse på toppen og bytt den Blend Mode til Skjerm i lag panel, og danner dermed et halvt gjennomsiktig høydepunkt.
Neste danner vi en munn. Bruke Pennverktøyet (P) og hold Skifte å lage en rutet linje. Sett Fylle farge til ingen i Farge panel og bruk en mørk-lilla farge til Stroke. Hodet til Stroke panelet og sett inn Bredde til 2 pt, forlater alle andre alternativer som standard.
Ta Hjørneverktøyet (C) og gjør hjørnene i formen fullstendig avrundet ved å trekke hjørneknutene opp.
Duplisere formen og bruk Snu horisontalt Funger fra kontrollverktøylinjen på toppen for å speile formen.
Nå legger vi til ørene. Bruke Ellipseverktøy (M) å lage en 70 x 70 px sirkel. La oss få det til å blandes pent med hodet ved å velge riktig farge. Finn Fargevelger verktøyet i Farge panel, hold og dra det over bjørnens hode. Du vil se en forstørrelsesglass, som hjelper til å finne fargen du trenger. Velg lys-lilla fargen ved siden av øret og slipp museknappen. Nå kan du velge øret og bruke fargen fra prøven ved siden av Fargevelger. Der har vi det!
La oss nå se hvordan vi kan kopiere komplekse fyllestilen fra andre objekter. Duplisere (Command-C> Command-V) øret og gjør kopien mindre. Kopier (Command-C) hodet, velg toppelementet i øret og gå til Rediger> Lim inn stil. Rediger posisjonen til fyllingen ved hjelp av Fyllverktøy (G). Legg til et andre øre på motsatt side av hodet.
Som du kan se, kan vi ikke bare kopiere objektene selv, men også deres utseende.
La oss avslutte bjørnen ved å legge til et annet element: en stilisert mage. Bruke Ellipseverktøy (M) å lage en oval og fylle den med mørk-lilla farge, bytte den Blend Mode til Skjerm i lag panel.
Vi kan plassere den skapt ellipse innsiden Hodet form, på den måten gjemmer de unødvendige brikkene. Velg det opprettede ovale i lag panel og dra den over hodestilen til du ser en smal blå stripe som vist på bildet nedenfor. Slipp ellipsen, plasser den inne i hodelaget.
Og vi er ferdige! La oss flytte til neste dyreikon.
La oss bruke bjørnikonet som vi allerede har opprettet for å lage et nytt element. Duplisere det og la oss endre fargene på den lineære fyllingen til hvit på toppen og grå på bunnen. Deretter lær eyrene fra lilla til en veldig mørk grå. Endre den lineære fyllingen av nesen til mørkegrå, og juster fargen på munnen Stroke, bytte den til rosa.
Endelig juster fargene på øynene ved å endre den radielle fyllingen til lysebrun i midten og mørkere brun på kantene, og bruk den mørkbrune fargen til eleven også.
Deretter legger vi til mørke flekker rundt øynene for å få vår karakter til å se ut som en ekte panda. Bruke Ellipseverktøyet (L) å lage en 75 x 95 px form, fyll den med lineær fylling av mørkegråtoner.
Roter formen rundt 45 grader og legg den under øyet ved å dra formen ned i lag panel.
Legg merke til forskjellen mellom å plassere en form innsiden den andre og plasserer en form under den andre. Denne gangen ser du en lengre blå markør, som i bildet nedenfor.
Dupliser (Command-C> Command-V) stedet og Vend det horisontalt til den andre siden, ved hjelp av Transforms Funger i kontrollverktøylinjen øverst. Flytt kopien av stedet, slik at den passer det andre øyet.
Og der har vi vår panda! La oss gå videre.
la oss duplisere panda karakteren og slå den til en søt vaskebjørn! Først og fremst, endre farge på hodestrukturen til en vertikal lineær fylling fra lyseblå på toppen til mørkere blå nederst.
Fortsett ved å bytte fargene til øynene til rosa, og la oss bytte ut munnen. Bruke Pennverktøyet (P) å skape en hjørnet munnform med mørkegrå Stroke.
La oss nå endre ørene. Velg den større sirkelen av øreformen og Konverter til kurver, bruker knappen i kontrollverktøylinjen øverst. Ta Nøkkelverktøy (A) og velg toppnoden i formen. Konverter til Sharp fra kontrollpanelet på toppen, noe som gjør at øret peker. Gjør det samme for den indre delen av øret: Konverter til kurver og Konvertere den øverste noden til skarp.
Bytt farge på øret, slik at det passer hodet og roter øret 45 grader. Duplisere øret og Snu horisontalt, plasserer kopien på motsatt side.
Velg stedet rundt øyet med Fyllverktøy (G) og juster fargene på fyllingen, skift dem til lettere og mørkere blåtoner. Kopier (Command-C) stedet, velg det andre stedet og Rediger> Lim inn stil, bruke et nytt utseende.
Avslut med tegnet ved å legge til en lysegrå ellipse under nesen. Og det er det for vaskebjørn! La oss fortsette til vårt siste ikon!
La oss kopiere vårt aller første ikon - den lilla bjørnen - og bruk den til å lage en morsom papegøye. Bytt farge på hodet til lineær fylling fra lysegrønn på topp til mørkere grønt nederst. Slett den elliptiske muggformen og bjørnens munn, da vi ikke trenger dem lenger.
Bytt fargene på øynene til oransje-brun.
La oss slå bjørnens nese inn i en papegøyes nebb! Roter det 90 grader og Konverter til kurver. Velg nederste node med Nøkkelverktøy (A) og Konverter til Sharp fra kontrollverktøylinjen på toppen.
Endre fargene på den lineære fyllingen til gul på toppen og oransje på bunnen.
Ta Ellipseverktøy (M) og få en smal form av 15 x 40 px. Fyll den med lys grønn farge og endre Blend Mode til Multiplisere, gjør en mørk halvtransparent fjær.
Holde Option-Shift og dra fjæren til høyre, og ta en kopi. trykk Kommando-J et par ganger for å lage to eksemplarer.
La oss legge til en endelige detalj i papegøyen vår. Bruke Ellipseverktøy (M) å lage en 40 x 70 px form i midten på pannen, velg riktig farge fra det letteste stedet på pannen og påfør en lysegrønn farge til formen.
Legg til to mindre ellipser på begge sider av midtformen. Velg alle tre figurene og bruk Legg til bruk fra kontrollpanelet på toppen for å slå sammen alle ellipser i en enkelt form.
Dupliser (Command-C> Command-V) formen og flytt bunnen av kopien litt ved å trykke på Pil ned tast noen ganger. Bytt farge på formen til mørkegrønn, og gjør en flat skygge.
Og der har vi det! Vår papegøyeikon er klar!
Her er vårt sett med søte kvadratiske dyr som vi skal bruke som elementene i et "tre match" -spill. La oss gå videre og lage en enkel spillskjerm for å se hvordan det fungerer sammen!
la oss låse opp vår bakgrunnsform og endre fargen til en mild oransje. Bruke Avrundet rektangelverktøy (M) å lage en 415 x 600 px gul form med 10% hjørne radius.
Dupliser (Command-C> Command-V) formen og gjør kopien mindre, skift fyllfarge til mørkere gul.
Duplisere den nye formen og redusere størrelsen på kopien igjen, bytte fargen til den samme lysegul som vi har for det større avrundede rektangelet.
Endelig, duplisere det største avrundede rektangelet og flytt bunnkopien ned litt ved å trykke på Pil ned tast noen ganger. Gjør kopien noe større og endre Blend Mode til Multiplisere i lag panel, danner en subtil skygge. Alt i alt har vi fire avrundede rektangler for spillpanelet.
Bruke Ellipseverktøy (M) og hold nede Skifte å lage en stor grønn sirkel i bunnen av lerretet. Plasser den mellom spillskjermbildet og bakgrunnsformen. Legg til flere sirkler, som dekker den nederste delen av lerretet.
Velg en lysere grønn fargetone og fortsett å bruke Ellipseverktøy (M) å lage mindre og lettere sirkler, som viser enkle stiliserte busker.
Fortsett å bruke samme teknikk og fyll toppen av lerretet med lyse oransje sirkler, som viser stiliserte skyer.
Nå kan vi begynne å plassere dyrens ikoner på spillpanelet. Her bruker jeg et enkelt triks for å gjøre alle elementene like. Som du sikkert har lagt merke til, er vår papegøye litt mindre enn resten av tegnene, fordi den ikke har ører. Dette kan gjøre tilpasning av figurene litt komplisert, og derfor kopierer jeg ørene fra pandaikonet og fester dem til papegøyen. Gjør ørene helt gjennomsiktige ved å sette Fylle og Stroke farger til ingen, og grupper deretter elementene sammen.
Nå kan vi plassere ikonene på rad og redusere størrelsen, slik at de passer til spillskjermbildet. Ved å holde ikonene valgt, gå til kontrollverktøylinjen øverst og åpne Arrangere panel. Herfra klikker du Space Horisontalt og slett av Automatisk distribusjon avkrysningsboks, angi gapverdien til 0 px.
Du kan Rette inn former til Bunn også, bruker det samme Arrangere panel.
Gruppe (Command-G) rad av ikoner, hold Option-Shift og dra den opp og lage en kopi. trykk Kommando-J flere ganger, fylle spillskjermbildet med ikoner. Velg alle rader, hodet til Arrangere panelet, og klikk Space vertikalt. Fjern merkingen Auto distribuere og sett gapverdien til 2 px, gjør smale hull mellom kantene på ikonene.
Du kan justere oppsettet ved å gjøre ikonene mindre eller større og justere avstanden mellom radene, slik at ikonene passer til spillpanelet.
Like etter det kan vi blande tilfeldigvis ikonene, slik at hele scenen ser ut som en ekte spillskjerm. Dobbeltklikk på raden med ikoner for å isolere gruppen og flytt ikonene inne i gruppen horisontalt mens du holder Skifte.
God jobb! Vår kamp tre spill skjermen er klar! Jeg håper du har likt å følge denne opplæringen og oppdaget noen nyttige tips og triks mens du jobber med grunnleggende former, gradientfyll og ulike transformasjonsoperasjoner av Affinity Designer. Du er velkommen til å bruke kunnskapen din mens du lager nye spill og tegneserier, og ikke glem å dele dine fantastiske resultater!
Hvis du er interessert i å lære å lage flere spilldesignsprodukter i Affinity Designer, må du også sjekke følgende opplæringsprogrammer:
Accentsconagua