How å lage en Pub Chalk Board UI i Adobe Illustrator
Dette innlegget er en del av en serie som heter Vector Mobile App Design.Quick Tips: Hvordan lage iOS Kart Indikatorer med Graphic StylesHow til Lag en Soccer App Interface i Adobe Illustrator
I dagens tutorial jeg skal vise deg hvordan du oppretter et brukergrensesnitt for en smart telefon quiz spillet i Adobe Illustrator CS6. Jeg skal lage et brukergrensesnitt som ligner på et offentlig hus kritt bord og lage en tre mønster med mønster Tool til å legge til en treramme. Denne opplæringen er første del av en Tuts + krysse over, der du kan finne ut hvordan du kan lage spillet over på Mobiletuts +.
Oppdrags Spesifikasjoner
Før jeg begynte å lage UI, jeg trengte å vite hvilke elementer ble pålagt fra spilldesigner for å lage hva de var ute etter. Jeg var på en stram tidsfrist, så jeg brukte tidligere kommunikasjon og konseptbilder for å hjelpe.
Det første konseptet bildet ble skapt av spilldesigner, som har uttalt at de ønsket et bakgrunnsbilde, knapper, område for en banner /header , område for et spørsmål og varianter av hvordan teksten kan se når du svarer på spørsmålene rett /galt.
Jeg ble deretter gitt en uekte opp av en annen designer som tidligere hadde blitt enige om en kritt bord tema for quiz og det ble godkjent av spilldesigner.
Trinn 1
Så nok skravling, la oss komme videre med det, har vi en frist til å gjøre! Som jeg ikke har fått konkrete mål for UI, har jeg gikk for en 600 x 800 pikslers RGB, justert til Pixel Grid, Nytt dokument. Å være som det er vektor, vil det være enkelt å modifisere dimensjonene senere når kunden kommer tilbake til meg. Inntil da, la oss arbeide på vår design og få mesteparten av arbeidet ut av veien.
Trinn 2
Med den informasjonen vi har fått, la oss trekke en uekte opp med en serie med sort strek, hvite fyll figurer laget med rektangel Tool (M). Jeg vet at jeg vil ha en treramme, bakgrunn, område for header image og spørsmål. Det er også mulighet for designeren kan ønske å ha en pop-up og en lansering ikon. Jeg har bestemt meg for å gå i retning av en offentlig stil kritt bord i stedet for en skole stil ett. Forskjellen er at public house versjonen vil være litt grovere og mer tradisjonell jakt.
Trinn 3
Jeg kommer til å starte med de mest statiske elementer første som sjansene er vil ikke være endret i løpet av spillet. Områder som tekst og knapper vil endre men rammen, header og bakgrunn vil ikke. Så jeg kommer til å starte med treramme. Tegn en lang rektangel (M) med en mellombrun fyll og deretter gå til Objekt > Pattern > Gjør å åpne mønsteret dialogboksen Alternativer. Jeg har ikke endret bredde og høyde på mønsteret som jeg kommer til å være tegning direkte på toppen av området allerede er definert.
Trinn 4
Vi tar sikte på en organisk ser tre mønster med varierte tykkelser i korn. En av mine favoritt-verktøy for dette er den Blob Brush Tool (Shift + B) med en tegnebrett. Begynn med å tegne en knute i treet ved å tegne en virvel, og deretter forlenge virvel over området av mønsteret. Denne overlapp slutt vil da vises på bunnen av mønsteret ditt område.
Bruk denne slutt på da kurven rundt den opprinnelige knute. Jeg har deretter endret Tile Type til Brick by kolonne slik at knuten er forskjøvet til hverandre.
Trinn 5
Med en lignende metode for overlapp kornet utover mønsteret grensen, tegne ytterligere linjer i samme farge. Legg til en linje som overlapper inn i siden på mønsteret grensen så det linker i de andre flisene horisontalt.
Når du er fornøyd, legger du til en lysere farge for videre detaljering. Når du er ferdig med mønsteret, klikk på Utført og det vil spare det automatisk til fargekartpanelet.
Trinn 6
Tegn en 600 x 800 rektangel (M) over artboard. Hvis du har Smart Guides aktivert (Ctrl + U), finner du alt i opplæringen enklere å lage som elementer effektivt klikker på plass. Som vi ikke har lyst til å gå utover artboard, gi rektangelet en 45pt Stroke Vekt som er satt til Juster Stroke til Inside
Mens valgt, gå til Objekt >.; Utvid for å konvertere slag til en fylt form.
Trinn 7
Ved hjelp av Line Segment Tool (\\), tegne diagonale linjer på tvers hjørnene av rammen på 45 graders vinkler. Velg alle (Ctrl + A) av komponentene og bruke Pathfinder > Divide å splitte formen inn i fire.
Trinn 8
Bruk dine tre mønster til rammen. Når jeg har brukt den, det har vært for store til å plukke opp alle detaljene. For å rette på dette, har jeg redusert omfanget av bare mønsteret ved å gå til Objekt > Transform > Skala og bare tikker Transform Mønster. Dette vil redusere omfanget av mønsteret, ikke objektet.
Trinn 9
Jeg kommer til å jobbe i Utseende-panelet nå å gi en subtil grensen til figurer av rammen. Ved hjelp av de mørke og lyse farger i tre mønster, har jeg lagt til to fyllinger under tre mønsterfyll. Den første er mørk, den andre er lettere og dette er motvirket Path -2pt. Jeg har så sette mønsteret fylle en Offset Path of -4pt.
Grunnen til at jeg har gjort dette er hvis du skulle bruke et slag til figurer som den er, vil formen hjørnene produsere poeng i slag som stikker ut av området av rammen. Jeg ønsker at dette skal alle være inneholdt i artboard hvis du husker, så i stedet for å fikle med mitres og justere vinkler av hjørnene, har jeg valgt å lage en " falsk " hjerneslag ved hjelp Offset Paths. Det er et nyttig tips hvis du arbeider med disse sta hjørner som ikke spiller rettferdig eller hvis du ønsker å bruke en " falsk " gradient til et slag uten å ha Adobe Illustrator CS6.
Trinn 10
Jeg vedder du tenkte jeg skulle forlate den øvre og nedre deler av rammen med samme mønster orientering rett? Vel som du kan skalere mønsteret uten å endre form, kan du også rotere et mønster uten å rotere figuren. Velg de figurene du ønsker å endre fylle av og gå til Objekt > Transform > Rotere. Jeg har lagt inn i en 90 graders vinkel, og da bare haket Transform Patterns.
Trinn 11
Tilbake i Utseende-panelet, velger du siderammene og Duplicate varen på mønsterfyll. Dette vil opprettholde Offset Sti verdier. Deretter fylle med en brun gjennomsiktig lineær gradient. Gjør det samme for toppen og bunnen av rammen og bare endre vinkelen på graderingen til 90 grader.
I grafikk Styles panelet, mens de øvre og nedre rammeformer er valgt, legger ny grafisk stil . Da gjelder denne formen som vil bli brukt til header /banner av UI. Alter graderingsfyllet deretter til en radial gradient.
Trinn 12
Jeg skal lage kritt styret bakgrunnen nå bruker Utseende panel og en 100% vektorversjon av en indre glød. Du kan finne ut hvordan du gjør dette ved å sjekke ut følgende video tutorial
Step 13
I Børster panelet klikker du på bore down menyen og gå til Open Brush Library >.; Artistic > Artistic_ChalkCharcoalPencil og bruke Chalk pensel til å trekke hvite streker over hele linja satt til Blending Mode Screen, Opacity 5%. Når dette er gjort, Gruppe dem sammen (Ctrl + G).
Trinn 14
Duplicate kritt styret bakgrunnen og bruke dette med Chalk slag gruppe for å opprette en Clipping Mask (Ctrl + 7).
Trinn 15
Jeg kommer til å bruke en Freeware font for spørsmål og svar på tavlen. Bruk Type Tool (T) for å legge inn tekst. Jeg har brukt " Film Cryptic " på skriftstørrelsen 48pt
Trinn 16
Jeg har lagt til andre elementer som for eksempel en boks rundt svarene, en hake og en linje over et svar ved hjelp av Charcoal -. Pencil Art Brush. For den nederste boksen, har jeg satt Opacity til 30%.
Trinn 17
Nå vil legge til en subtil skygge under header /banner bord. Bruk linje Segment Tool (\\) for å trekke en horisontal linje over bunnen av brettet, og deretter kopiere det. Angi bunnslag til Stroke Vekt 18 pkt og Opacity 0% og toppen til 1pt, 100%. Begge slagene bør bruke Profil: Bredde profil 1 og har en svart strek farge
Trinn 18
Velg begge slagene og skape et Blend (Ctrl + Alt + B).. Så gå til Objekt > Blend > Blend Valg og endre avstanden til Spesifiserte Trappen og verdi til 10. Klikk på OK når du er ferdig. Deretter endre Blending Mode av blandingen til Multipliser og flytte den på plass.
Duplicate den og legger den under toppen av header /banner styret.
Trinn 19
Jeg kommer til å legge noen små nagler til sidene av brettet som kobles til rammen. Dette er igjen med Utseende panel med innstillingene nedenfor innenfor en enda sirkel ved hjelp av Ellipse Tool (L).
Trinn 20
Legg til et innrykk i nagle ved å tegne en diagonal linje over bolt og sette den til Blending Mode Multiply. Gruppe sammen naglen og innrykk (Ctrl + G), og deretter kopiere det tre ganger og flytte på plass. Å sørge for at alt er parallell og justert, bruker Align panel.
Trinn 21
Vår spilldesigner har fått kontakt! Oh noes, vi har feil dimensjoner for spillet vårt, og det er ikke av samme forhold. Dimensjonene vi har fått er 480 x 800 piksler. Dette er ikke en stor avtale, fordi vi jobber i vektor og det er lett å fikse. Første tingen å gjøre er å endre vår Artboard størrelse til den nye dimensjonen og deretter tegne en guide rektangel med rektangel Tool (M) av 480 x 800.
Trinn 22
Duplicate sidene av ramme og lage en sammensatt bane av dem (Ctrl + 8). Deretter bruker du denne formen til Pathfinder > Divide fra toppen og bunnrammen og slette de overflødige former.
Flytt sideelementer på plass, slik at Smart Guides (Ctrl + U) for å hjelpe deg.
Trinn 23
< p> For header styret, legger Utseende panel attributter til Graphic Styles panelet og deretter bruke dem til en ny form. Kritt styret bakgrunnen kan bli endret ved hjelp av Free Transform Tool (E), men husk å også endre Clipping Mask gruppen med Chalk slag i. Jeg har redusert skriftstørrelsen tilsvarende for å kompensere for den nye bredden. Denne endringen i dimensjon tok meg hele 5 minutter, inkludert dobbelt sjekke forhåndsvisnings å sørge for at jeg har riktige dimensjoner.
Trinn 24
La oss fortsette med header /banner. Jeg kommer til å spille på public house stil og legge en messingplate til design. Tegn et rektangel (M) med sine hjørner møte sentrene av nagler. Deretter tegne et enda sirkel (L) på ett av sentrene for nagler og duplisere /sted for de andre nagler. Bruk Pathfinder > Minus Front å deretter lage formen på messingplate.
Trinn 25
Bruk den grafiske stilen for boltene til platen og deretter Legg til ny Fill og bruke en lineær gradient med en rekke gråtoner i. Det spiller ingen rolle hvor du plasserer glidere for gradient, så lenge du viser kontrasten høydepunkter og skygge i graderingen.
Jeg har deretter endret attributtene for å legge en messing /golden tone gjennom ut.
Trinn 26
Jeg var ikke fornøyd med nagle farger, så jeg gikk videre og endret fargene på nagler som bruker de samme fargene som messingplate . Nå er de sams bedre.
Trinn 27
Til slutt kommer jeg til å legge til header /banner tekst. Spillet designeren ønsker tittelen " Android Game " i banneret tittel, så jeg kommer til å legge en rask Inngravert effekt til teksten ... og dette er så lett å gjøre. Først legge til tekst, har jeg brukt " Grav MT " og sett den til Blending Mode Multiply. Gi det samme messing farge som du har brukt i platen. Duplisere teksten og bruke piltastene på tastaturet ditt, nudge teksten to steder nedover og to steder riktige. Deretter endre Blending Mode til Screen.
Konklusjon
Du har nå opprettet din public house stil kritt bord UI for en smart telefon spill! Det er nå over til Mobiletuts + for den andre delen av denne opplæringen på hvordan du skal lage selve spillet. Du vil være i stand til å laste ned grafikken som kreves for å lage spillet selv der borte. Ha det gøy! Anmeldelser