Share
I dagens veiledning skal jeg vise deg hvordan du lager et brukergrensesnitt for et smart telefonquiz-spill i Adobe Illustrator CS6. Jeg skal skape et brukergrensesnitt som ligner på et kalkbord i offentlige hus og skape et tremønster med mønsterverktøyet for å legge til en treramme. Denne opplæringen er den første delen av en Tuts + kryssover, hvor du kan finne ut hvordan du bygger spillet over på Mobiletuts+.
Før jeg begynte å lage brukergrensesnittet, trengte jeg å vite hvilke elementer som var nødvendig fra spilldesigneren for å skape det de lette etter. Jeg var på en fast frist, så jeg brukte tidligere kommunikasjons- og konseptbilder for å hjelpe.
Det første konseptbildet ble opprettet av spilldesigneren, som uttalt at de ønsket et bakgrunnsbilde, knapper, område for et banner / overskrift, område for et spørsmål og variasjoner av hvordan teksten kunne se ut når svaret ble besvart riktig / feil.
Jeg ble deretter gitt en mock up av en annen designer som tidligere hadde blitt enige om et krittbrett tema for quizet, og det ble godkjent av spilldesigneren.
Så nok chatter, la oss fortsette med det, vi har en frist for å gjøre! Siden jeg ikke har fått bestemte dimensjoner for brukergrensesnittet, har jeg gått på en 600 x 800 piksler, RGB, Tilknyttet til Pixel Grid, New Document. Å være som det er vektor, det vil være enkelt å endre dimensjonene senere når klienten kommer tilbake til meg. Inntil da, la oss jobbe med vårt design og få mesteparten av arbeidet ut av veien.
Med den informasjonen vi har fått, la vi trekke opp en serie med svart slag, hvite fyllformer som er opprettet med rektangulærverktøyet (M). Jeg vet at jeg vil ha en treramme, en bakgrunn, et område for topptekst og spørsmål. Det er også muligheten at designeren kan ønske å ha en popup og et lanseringsikon. Jeg har bestemt meg for å gå i retning av et kalkstapel i offentlige hus, i stedet for en skolestil en. Forskjellen er at offentlig husversjon vil være litt grittier og mer tradisjonell utseende.
Jeg skal begynne med de mest statiske elementene først hvilke sjanser ikke vil bli endret under spillet. Områder som tekst og knapper endres, men rammen, overskriften og bakgrunnen vil ikke. Så jeg skal begynne med trerammen. Tegn en lang rektangel (M) med en middels brun fylle og gå til Objekt> Mønster> Lag for å åpne dialogboksen Mønsteralternativer. Jeg har ikke endret bredden og høyden på mønsteret som jeg skal tegne direkte på toppen av området som allerede er definert.
Vi satser på et organisk likt tremønster med varierende tykkelser i kornet. Et av mine favorittverktøy for dette er Blob Brush Tool (Shift + B) med en grafikkbrett. Begynn med å tegne en knute i treet ved å tegne en virvel, og utvide virvelen over mønsterområdet. Denne overlappende enden vil da vises nederst på mønsterområdet.
Bruk denne enden til å kurve rundt den opprinnelige knuten. Jeg har deretter endret Tile Type to Brick etter kolonne slik at knuten er motvirket til hverandre.
Med en lignende metode for å overlappe kornet utover mønstergrensen, tegne ytterligere linjer i samme farge. Legg til en linje som overlapper inn i siden av mønstergrensen slik at den kobler seg i de andre flisene horisontalt.
Når du er glad, legg til en lysere farge for nærmere detaljer. Når du er ferdig med mønsteret ditt, klikker du på Ferdig og det lagrer det automatisk i fargepanelet.
Tegn en 600 x 800 rektangel (M) over tavlen. Hvis du har aktivert Smart Guides (Ctrl + U), finner du alt i opplæringen enklere å opprette som elementer klikker på plass. Da vi ikke ønsker å gå utover kunstglasset, gir rektangelet en 45pt slagvekt som er innstilt for å justere strekk til innsiden.
Mens du er valgt, går du til Objekt> Utvid for å konvertere strekket til en fylt form.
Bruk linjesegmentverktøyet (\) til å tegne diagonale linjer over rammens hjørner med 45 grader vinkler. Velg Alle (Ctrl + A) av komponentene og bruk Pathfinder> Divide for å dele formen i fire.
Påfør ditt tremønster på rammen. Når jeg har brukt det, har det vært for stort for å hente alle detaljene. For å rette opp dette, har jeg redusert størrelsen på bare mønsteret ved å gå til Objekt> Transform> Skala og bare tikkende Transform Pattern. Dette vil redusere størrelsen på mønsteret, ikke objektet.
Jeg skal jobbe i Utseendepanelet nå for å gi en subtil grense til rammens former. Ved å bruke de mørke og lyse fargene i tremønsteret, har jeg lagt to filler under tremønsterfyllingen. Den første er mørk, den andre er lettere og dette er Offset-banen med -2pt. Jeg har da satt mønsteret fylt til en offsetvei på -4pt.
Grunnen til at jeg har gjort dette er om du skulle bruke et slag til figurene som det er, kan formen hjørner produsere punkter i slaget som rager ut av rammenes område. Jeg vil at dette til alle skal være inne i tavlen hvis du husker det, så i stedet for å fla med mitres og justere vinklene i hjørnene, har jeg valgt å lage et "falskt" slag ved å bruke Offset Paths. Det er et hendig tips hvis du jobber med de stædige hjørnene som ikke spiller rettferdig eller hvis du vil bruke en "falsk" gradient til et slag uten å ha Adobe Illustrator CS6.
Jeg vedder på at du tenkte jeg skulle forlate de øverste og nedre delene av rammen med samme mønsterretning riktig? Vel som du kan skalere mønsteret uten å endre formen, kan du også rotere et mønster uten å rotere formen. Velg formene du ønsker å endre fyllingen av og gå til Objekt> Transform> Rotere. Jeg har gått inn i en 90 graders vinkel og bare krysset Transform Patterns.
Tilbake i Utseendepanelet, velg siderammer og Duplicate Item på mønsterfyllingen. Dette vil opprettholde offset-banen-verdiene. Fyll deretter med en brun gjennomsiktig lineær gradient. Gjør det samme for toppen og bunnen av rammen og bare endre vinkelen på graden til 90 grader.
I panelet Grafiske stiler, mens topp og nederste rammevalg er valgt, legger du til den nye grafiske stilen. Bruk deretter dette til formen som skal brukes til toppteksten / banneret til brukergrensesnittet. Endre gradientfyllingen deretter til en radial gradient.
Jeg skal lage krittbrettbakgrunnen nå ved hjelp av Utseendepanelet og en 100% vektorversjon av en indre glød. Du kan finne ut hvordan du gjør dette ved å sjekke ut følgende videoopplæring.
I børstepanelet klikker du på bore-menyen og går til Åpenbørstebibliotek> Kunstnerisk> Artistic_ChalkCharcoalPencil og bruk Kalkbørsten til å tegne hvite streker på tvers av brettet satt til Blending Mode Screen, Opacity 5%. Når du er ferdig, grupper dem sammen (Ctrl + G).
Dupliser krittbrettbakgrunnen og bruk dette med krittstrekkgruppen for å lage en Clipping Mask (Ctrl + 7).
Jeg skal bruke en Freeware font for spørsmålet og svarene på tavlen. Bruk Typeverktøyet (T) til å legge til teksten. Jeg har brukt "Film Cryptic" ved skriftstørrelse 48pt.
Jeg har lagt til andre elementer som en boks rundt svarene, et kryss og en linje på tvers av et svar ved hjelp av trekull-penselbørsten. For den nederste boksen har jeg satt Opacity til 30%.
Nå for å legge til en subtil dropshadow under overskriften / bannerplaten. Bruk linjesegmentverktøyet (\) til å tegne en horisontal linje over bunnen av brettet, og dupliser den deretter. Sett bunnslaget til Stroke Weight 18pt og Opacity 0% og toppen til 1pt, 100%. Begge stroker skal bruke Profil: Breddeprofil 1 og har en svart slagfarge.
Velg begge slag og lag en blanding (Ctrl + Alt + B). Deretter går du til Objekt> Blend> Blandingsalternativer og endrer mellomrom til angitte trinn og verdi til 10. Klikk på OK en gang ferdig. Endre deretter blandingsmodusen for blandingen til Multiply og flytt den på plass.
Dupliser den og legg den under toppen av topptekst / bannerplank.
Jeg skal legge til noen små nagler på sidene av brettet som kobles til rammen. Dette bruker igjen utseendepanelet med innstillingene under en jevn sirkel ved hjelp av Ellipse Tool (L).
Legg inn et innspill i nitten ved å tegne en diagonal linje over bolten og sette den til Blending Mode Multiply. Grupper sammen nitten og innrykket (Ctrl + G), og dupliser den deretter tre ganger og flytt på plass. For å sikre at alt er parallelt og justert, bruk Juster-panelet.
Vår spilldesigner har kommet i kontakt! Åh nei, vi har feil dimensjoner for spillet vårt, og det er ikke i samme forhold. Dimensjonene vi har fått er 480 x 800 piksler. Dette er ikke en stor sak fordi vi jobber i vektor og det er enkelt å fikse. Første ting å gjøre er å endre Artboard-størrelsen til den nye dimensjonen, og deretter tegne et rektangulært rektangel med rektangelverktøyet (M) på 480 x 800.
Dupliser sidene av rammen og lag en sammensatt sti av dem (Ctrl + 8). Bruk deretter denne formen til Pathfinder> Divide fra topp- og bunnrammen og slett overskytende former.
Flytt sideelementene på plass, slik at Smart Guides (Ctrl + U) kan hjelpe deg.
For topptekstpanelet legger du til utseendepanelattributtene i panelet Grafiske stiler og bruker dem deretter til en ny form. Kretskortets bakgrunn kan endres ved hjelp av Free Transform Tool (E), men husk å også endre Clipping Mask-gruppen med Kalkstroppene. Jeg har redusert skriftstørrelsen tilsvarende for å kompensere for den nye bredden. Denne endringen i dimensjon tok meg hele 5 minutter, inkludert dobbeltklikking av forhåndsvisningen for å sikre at jeg har de riktige dimensjonene.
La oss fortsette med topptekst / banner. Jeg skal leke på offentlig husstil og legge til en messingplate til designen. Tegn et rektangel (M) med det er hjørner som møter nittenes nitter. Deretter tegner du en jevn sirkel (L) på en av nitens sentre og dupliserer / plasserer for de andre naglene. Bruk Pathfinder> Minus Front til å danne formen på messingplaten.
Bruk den grafiske stilen til boltene til platen og deretter Legg til ny fyll og bruk en lineær gradient med en rekke grays inn. Det spiller ingen rolle hvor du plasserer glidebryterne for denne gradienten, så lenge du viser kontrast av høydepunkter og skygge i gradienten.
Jeg har da endret attributter for å legge til en messing / gylden tone gjennom ut.
Jeg var ikke fornøyd med nagelfargene, så jeg gikk videre og endret nitarens farger med samme farger som messingplaten. Nå passer de bedre sammen.
Til slutt skal jeg legge til topptekst / bannertekst. Spilldesigneren ønsker tittelen "Android Game" i bannertittelen, så jeg skal legge til en rask gravert effekt på teksten ... og dette er så lett å gjøre. Først legg til teksten, jeg har brukt "Graver MT" og sett den til Blending Mode Multiply. Gi den samme messingfarge som du har brukt i platen. Dupliser teksten og bruk piltastene på tastaturet, trykk på teksten to steder ned og to steder til høyre. Endre deretter blendingsmodus til skjerm.
Du har nå opprettet ditt offentlige hus stil kritisk bord UI for et smart telefon spill! Det er nå over til Mobiletuts + for den andre delen av denne opplæringen om hvordan du lager det aktuelle spillet. Du kan laste ned grafikken som kreves for å lage spillet selv der borte. Ha det gøy!
Accentsconagua