Share
I dagens handledning ska jag visa dig hur man skapar ett användargränssnitt för ett smart telefonquiz-spel i Adobe Illustrator CS6. Jag ska skapa ett användargränssnitt som liknar ett offentligt hus kritkort och skapa ett trämönster med mönsterverktyget för att lägga till en träram. Denna handledning är den första delen av en Tuts + cross cross, där du kan ta reda på hur man bygger spelet över på Mobiletuts+.
Innan jag började skapa användargränssnittet, behövde jag veta vilka element som krävdes från speldesignern för att skapa det de letade efter. Jag var på en kort tidsfrist så jag använde tidigare kommunikations- och konceptbilder för att hjälpa till.
Den första konceptbilden skapades av speldesignern, som uppgav att de ville ha en bakgrundsbild, knappar, område för en banner / rubrik, område för en fråga och variationer av hur texten kunde se ut när svaret på frågorna var rätt / fel.
Jag fick då en mock up av en annan formgivare som tidigare hade kommit överens om ett krittbräda tema för quiz och det godkändes av speldesignern.
Så mycket chattar, låt oss fortsätta med det, vi har en deadline att göra! Eftersom jag inte har fått specifika dimensioner för användargränssnittet har jag gått för en 600 x 800 pixel, RGB, anpassad till Pixel Grid, New Document. Att vara som vektor är det lätt att ändra dimensionerna senare när klienten kommer tillbaka till mig. Fram till dess, låt oss arbeta med vår design och få större delen av arbetet ur vägen.
Med den information vi fått, låt oss rita en serie med svarta slag, vita fyllningsformer skapade med rektangelverktyget (M). Jag vet att jag vill ha en träram, en bakgrund, ett område för huvudbilden och frågorna. Det finns också möjlighet att designern kanske vill ha en pop-up och en lanseringsikon. Jag har bestämt mig för att gå i riktning mot ett offentligt hus stil krita bräda istället för en skolstil. Skillnaden är att public house versionen kommer att bli lite grittier och mer traditionell utseende.
Jag ska börja med de mest statiska föremålen först vilka chanser inte kommer att ändras under spelet. Områden som text och knappar ändras men rammen, rubriken och bakgrunden kommer inte att. Så jag ska börja med träramen. Rita en lång rektangel (M) med en medium brun fyllning och gå sedan till Objekt> Mönster> Gör för att öppna dialogrutan Mönsteralternativ. Jag har inte modifierat bredden och höjden på mönstret eftersom jag kommer att rita direkt ovanför det område som redan definierats.
Vi strävar efter ett organiskt snyggt trämönster med olika tjocklekar i spannmålen. Ett av mina favoritverktyg för detta är Blob Brush Tool (Shift + B) med en grafikkort. Börja med att dra en knut i träet genom att dra en virvel och förläng virveln över mönstret. Den här överlappande änden kommer då att visas längst ner i ditt mönsterområde.
Använd den här änden och kurva runt din ursprungliga knut. Jag har sedan ändrat Tile Type to Brick efter kolumn så att knuten är motsatt till varandra.
Med en liknande metod att överlappa kornet bortom mönstergränsen, rita ytterligare linjer i samma färg. Lägg till en linje som överlappar in i mönsterkanten så att den länkar i de andra plattorna horisontellt.
När du är lycklig lägger du till en ljusare färg för ytterligare detaljer. När du är klar med ditt mönster klickar du på Klar och det sparar det automatiskt i fönstret Färger.
Rita en 600 x 800 rektangel (M) över tavlan. Om du har aktiverat Smart Guides (Ctrl + U) hittar du allt i handledningen lättare att skapa som element på ett effektivt sätt. Eftersom vi inte vill gå utöver tavlan, ger rektangeln en 45pt slagvikt som är inställd på att justera streck till insidan.
Medan du valt, gå till Objekt> Expandera för att konvertera stroke till en fylld form.
Använd linjesegmentverktyget (\) genom att dra diagonala linjer över hörnen av ramen i 45 graders vinklar. Välj alla (Ctrl + A) av komponenterna och använd sökväg> divide för att dela formen i fyra.
Applicera ditt trämönster på ramen. När jag har applicerat det har det varit för stort att hämta alla detaljer. För att rätta till detta har jag reducerat skalaen för endast mönstret genom att gå till Objekt> Transformera> Skala och bara tickande Transform Pattern. Detta kommer att minska mönsterskalan, inte objektet.
Jag kommer att arbeta i Utseendepanelen nu för att ge en subtil ram till formerna av ramen. Med de mörka och ljusa färgerna i trämönstret har jag lagt till två fyllningar under trämönstret. Den första är mörkret, den andra är ljusare och detta är förskjutningsväg med -2pt. Jag har sedan satt mönstervyllningen till en offsetväg på -4pt.
Anledningen till att jag har gjort det här är att om du skulle applicera en stroke på formerna, så kan formen hörn producera punkter i stroke som sticker ut ur rammens område. Jag vill att detta alla ska vara inne i tavlan om du kommer ihåg, snarare än att fitta med mitres och justera vinklarna på hörnen, har jag valt att skapa en "falsk" stroke med hjälp av offsetvägar. Det är ett praktiskt tips om du arbetar med de envisa hörnen som inte spelar rättvisa eller om du vill tillämpa en "falsk" gradient till en stroke utan att ha Adobe Illustrator CS6.
Jag slår vad om att du tänkte att jag skulle lämna de översta och nedre delarna av ramen med samma mönsterriktning rätt? Tja, som du kan skala mönstret utan att ändra formen, kan du också rotera ett mönster utan att rotera formen. Välj de former du vill ändra fyllningen av och gå till Objekt> Transformera> Rotera. Jag har skrivit in 90 graders vinkel och kryssade sedan bara Transform Patterns.
Tillbaka i panelen Utseende, välj dina sidoramar och Duplicate Item på mönsterfyllningen. Detta kommer att bibehålla förskjutningsvägvärdena. Fyll sedan med en brun transparent linjär gradient. Gör samma för rammens övre och nedre del och justera vinkeln på lutningen till 90 grader.
I panelen Grafiska format, medan de översta och nedre ramformerna väljs, lägg till den nya grafiska stilen. Applicera sedan den form som kommer att användas för användarens rubrik / banner. Ändra gradientfyllningen sedan till en radiell gradient.
Jag ska skapa bakgrundsskivan nu med hjälp av Utseendepanelen och en 100% vektorversion av en inre glöd. Du kan ta reda på hur du gör det genom att kolla in följande videohandledning.
Klicka på borstpanelen på borrmenyn och gå till Öppna borstebiblioteket> Konstnärligt> Artistic_ChalkCharcoalPencil och använd Chalkborsten för att dra vita streck över bordet som är inställd på Blending Mode Screen, Opacity 5%. När du är klar, gruppera dem tillsammans (Ctrl + G).
Duplicera bakgrundsskivans bakgrund och använd detta med gruppen Krittslagsgrupper för att skapa en Clipping Mask (Ctrl + 7).
Jag ska använda en Freeware-typsnitt för frågan och svaren på tavlan. Använd typverktyget (T) för att lägga till din text. Jag har använt "Film Cryptic" vid teckenstorlek 48pt.
Jag har lagt till andra element som en låda runt svaren, ett fält och en linje över ett svar med hjälp av Charcoal - Pencil Art Brush. För bottenlådan har jag satt upp opaciteten till 30%.
Nu lägger du till en subtil droppskugga under rubriken / rubriken. Använd linjesegmentverktyget (\) för att rita en horisontell linje över botten av panelen och duplicera sedan den. Ställ bottenslaget på Stroke Weight 18pt och Opacity 0% och topp till 1pt, 100%. Båda strokarna ska använda Profil: Breddsprofil 1 och ha en svart slagfärg.
Välj båda streck och skapa en blandning (Ctrl + Alt + B). Gå sedan till Objekt> Blanda> Blandningsalternativ och ändra mellanslag till angivna steg och värdet till 10. Klicka på OK en gång gjort. Ändra sedan blandningsläget för blandningen till Multiplicera och flytta den på plats.
Duplicera det och placera det under toppen av rubriken / bannerbrädet.
Jag ska lägga till några små nitar på sidorna av brädet som ansluter till ramen. Detta använder återigen panelen Utseende med inställningarna nedan inom en jämn cirkel med hjälp av Ellipse Tool (L).
Lägg in ett streck i niten genom att dra en diagonal linje över bulten och ställ in den till blandningsläge Multiplicera. Gruppera nitten och strecket (Ctrl + G) och duplicera det tre gånger och flytta på plats. För att se till att allt är parallellt och inriktat, använd panelen Justera.
Vår speldesigner har kommit i kontakt! Åh nej, vi har felaktiga dimensioner för vårt spel och det är inte av samma förhållande. Dimensionerna som vi har fått är 480 x 800 pixlar. Det här är inte så mycket eftersom vi arbetar i vektor och det är lätt att fixa. Första sak att göra är att ändra vår Artboard-storlek till den nya dimensionen och dra sedan en ledarrektangel med Rektangelverktyget (M) på 480 x 800.
Duplicera sidorna på ramen och skapa en sammanhängande sökväg (Ctrl + 8). Använd sedan den här formen till Pathfinder> Divide från topp- och bottenramen och ta bort överflödiga former.
Flytta sidelementen på plats, så att Smart Guides (Ctrl + U) kan hjälpa dig.
För topparket lägger du till attributen Utseendepanel på panelen Grafiska format och applicerar dem sedan på en ny form. Kritbordet kan ändras med hjälp av Free Transform Tool (E), men kom ihåg att även ändra klippmaskgruppen med Kalkstropparna. Jag har minskat teckensnittet i enlighet därmed för att kompensera för den nya bredden. Denna förändring i dimensionen tog mig hela 5 minuter, inklusive dubbelkontroll av förhandsvisningen så att jag har rätt dimensioner.
Låt oss fortsätta med rubrik / banner. Jag ska spela på allmänhusstilen och lägga till en mässingsplatta till designen. Rita en rektangel (M) med hörnen som möter nitarna. Dra sedan en jämn cirkel (L) på en av nitarnas centra och duplicera / placera för de andra nitarna. Använd Pathfinder> Minus Front för att sedan skapa formen på din mässingsplatta.
Applicera den grafiska stilen för bultarna på plattan och sedan Lägg till ny fyllning och använd en linjär gradient med en mängd olika grayer. Det spelar ingen roll om du placerar reglagen för denna gradient, så länge du visar kontrast av höjdpunkter och skugga i lutningen.
Jag har sedan ändrat attributen för att lägga till en mässing / gyllene ton genom hela.
Jag var inte nöjd med nitarfärgen, så jag gick vidare och ändrade nitarna på samma sätt som mässingsplattan. Nu matchar de bättre.
Slutligen kommer jag att lägga till rubrik / bannertext. Speldesignern vill ha titeln "Android Game" i banderaltiteln, så jag ska lägga till en snabb graverad effekt på texten ... och det här är så enkelt att göra. Lägg först till din text, jag har använt "Graverar MT" och ställ in den till blandningsläge Multiplicera. Ge den samma mässingsfärg som du har använt i plattan. Duplicera texten och använd piltangenterna på tangentbordet, skjut texten två platser ner och två ställen åt höger. Ändra sedan blandningsläge till skärm.
Du har nu skapat ditt offentligt hus stil krita bräde UI för ett smart telefonspel! Det är nu över till Mobiletuts + för den andra delen av denna handledning om hur man skapar det aktuella spelet. Du kan ladda ner grafiken som krävs för att skapa spelet själv där borta. Ha så kul!
Accentsconagua