Share
I den følgende opplæringen lærer du hvordan du oppretter et blokkspillgrensesnitt i Adobe Illustrator CS5. Vector spillgrafikk tillater allsidig kunstverk. Arbeidsflyten som presenteres i denne opplæringen, vil lære deg hvordan du lager spillgrafikk i Illustrator. Disse teknikkene kan brukes til flere grensesnittdesign og spilldesignprosjekter. Det er på tide å hoppe inn, lære å lage disse figurene, og gi dem fargerik grafisk dybde.
Hit kommando + N for å opprette et nytt dokument. Skriv inn 660 i breddeboksen og 600 i høydeboksen, og klikk deretter på Avansert-knappen. Velg RGB, Skjerm (72ppi), og kontroller at boksen Juster nye objekter til pixelruten er fjernet fra merket før du klikker OK. Nå slår du på rutenettet (Vis> Rutenett) og Snap to Grid (Vis> Snap to Grid).
Deretter trenger du et rutenett hver 5px. Gå til Rediger> Innstillinger> Veiledninger> Rutenett, skriv inn 5 i Rutenettlinjen hver boks og 1 i Retningslinjene. Du kan også åpne Info-panelet (Vindu> Info) for et forhåndsvisning med størrelsen og plasseringen av figurene dine. Ikke glem å bytte måleenheten til piksler fra Rediger> Innstillinger> Enhet> Generelt. Alle disse alternativene øker arbeidshastigheten betydelig.
Velg rektangulærverktøyet (M) og opprett en form for 350 til 490 px. Snap to Grid vil lette arbeidet ditt. Fyll det med R = 50, G = 50, B = 50. Fjern nå fargen fra streken og gå til Effekt> Stylize> Avrundede hjørner. Skriv inn en radius på 5px, klikk OK, og gå til Objekt> Utvid utseende.
Deaktiver gridet (Vis> Vis grid) og Snap to Grid (Vis> Snap to Grid). Gå til Rediger> Innstillinger> Generelt og sørg for at Tastaturøkningen er satt til 1px. Tilbakestill formen som ble opprettet i forrige trinn, og gå til Objekt> Sti> Offset-vei. Skriv inn en -3px Offset og klikk OK.
Velg den resulterende formen og lag en kopi foran (Kommando + C> Kommando + F). Velg denne kopien og trykk pil ned en gang. Velg de to figurene som er opprettet i dette trinnet, og klikk på Minus Front-knappen fra Pathfinder-panelet (Vindu> Pathfinder). Fyll den resulterende formen med R = 109, G = 110, B = 113.
Igjen, velg formen som ble opprettet i det andre trinnet, og gå til Objekt> Path> Offset Path. Skriv inn en -3px Offset og klikk OK. Velg den resulterende formen og lag en kopi foran (Command + C> Command + F).
Velg denne kopien og trykk pil opp en gang. Velg de to figurene som er opprettet i dette trinnet, og klikk på Minus Front-knappen fra Pathfinder-panelet. Fyll den resulterende formen med R = 109, G = 110, B = 113.
Tilbakestill formen som ble opprettet i det andre trinnet, flytt til lagpanelet, dobbeltklikk på det og navnet "Hoved". Kontroller at denne formen fortsatt er valgt, flytt til Utseendepanelet (Vindu> Utseende) og klikk på Legg til ny fyll-knapp. Det er det lille hvite torget fra bunnen av Utseendepanelet.
Selvfølgelig vil dette legge til en ny fylling for din form. Velg den fra Utseendepanelet og bruk den lineære gradienten som vises nedenfor. Den gule nullen fra gradientbildet står for Opacity-prosentandel.
Velg "Hoved", legg til en tredje fylling og velg den fra Utseendepanelet. Gjør det svart, dra det i bunnen av Utseendepanelet, senk Opacity til 15%, og gå til Effekt> Sti> Offset Path. Skriv inn en 1px Offset, klikk OK og gå til Effect> Distort & Transform> Transform. Skriv inn dataene som er vist nedenfor, og klikk OK.
Velg "Main" og fokus på Utseendepanelet. Sett slagfargen til R = 167, G = 169, B = 172. Gjør det 4pt bredt og juster det innvendig.
Velg "Main" og fokus på Utseendepanelet. Velg strekningen lagt til i forrige trinn og klikk på Duplicate Selected Item. Det er det lille filikonet fra bunnen av Utseendepanelet. Selvfølgelig vil dette legge til en kopi av strekket. Velg dette nye taket, sett fargen på R = 35 G = 31 B = 32, og senk størrelsen til 3pt.
Velg "Main", fokus på Utseendepanelet, og legg til to nye stokes. Velg den første, sett fargen til R = 128 G = 130 B = 133, og størrelsen på 1,5pt. Velg det andre nye slagverket, gjør det svart, juster det til utenfor, og sett størrelsen på 1pt.
Velg "Main" og fokus på Utseendepanelet. Pass på at ingen fylling eller strekk er valgt, og gå til Effekt> Stylize> Drop Shadow. Skriv inn dataene som er vist nedenfor, og klikk OK.
Aktiver gridet (Vis> Vis grid) og Snap to Grid (Vis> Snap to Grid). Velg rektangulærverktøyet (M), opprett 20 til 20 px form og fyll det med R = 88, G = 89, B = 91. Velg denne torget og gå til Objekt> Sti> Offset-vei. Skriv inn en -1px Offset og klikk OK.
Velg den resulterende formen og gå igjen til Objekt> Path> Offset Path. Skriv inn en -3px Offset og klikk OK. Velg den resulterende formen sammen med den tidligere opprettede formen og klikk på Minus Front-knappen fra Pathfinder-panelet. Fyll den resulterende formen med R = 65, G = 64, B = 66.
Plukk pennverktøyet (P) og tegne en enkel horisontal bane som vist i det første bildet. Snap to Grid skal lette arbeidet ditt. Velg denne friske banen sammen med den mørkere formen som ble opprettet i forrige trinn, og klikk på Divide-knappen fra Pathfinder-panelet.
Dette vil opprette en gruppe med fire enkle former. Ta en titt på lagpanelet og fokus på denne gruppen. Først velger du de to trekanter og sletter dem. Deretter ungroup de resterende to figurene (Shift + Command + G). Til slutt fyller du den øverste, venstre formen med R = 109, G = 110, B = 113. Pass på at den andre formen fortsatt er fylt med R = 65, G = 64, B = 66.
Velg den grå firkanten som er opprettet i det ellevte trinnet, lag en kopi foran (Kommando + C> Kommando + F), og ta den til forsiden (Shift + Kommando + Høyre brakettast). Fyll denne nye formen med svart, senk Opacity til 7%, endre blandemodus til Multiply og gå til Effect> Artistic> Film Grain. Skriv inn dataene som er vist nedenfor, og klikk OK.
Tilbakestill formen som ble opprettet i forrige trinn, og lag en kopi foran (Kommando + C> Kommando + F). Velg Ellipseverktøyet (L), opprett en form av 40 x 20 px, og legg den som vist i det andre bildet. Velg denne klemt sirkelen sammen med den ferske kopien, og klikk på Intersect-knappen fra Pathfinder-panelet. Fyll den resulterende formen med hvit og senk Opacity til 25%.
Velg den grå firkanten som er opprettet i det ellevte trinnet, og fokus på Utseendepanelet. Legg til en 2pt, svart slag og juster den innvendig. Velg alle figurene som er opprettet i de siste fire trinnene, og grupp dem (Command + G).
Velg gruppen som ble opprettet i forrige trinn, og legg den som vist i bildet nedenfor. Igjen, vil Snap to Grid lette arbeidet ditt.
Velg gruppen som ble flyttet i forrige trinn, senk Opacity til 15%, og gå til Effect> Distort & Transform> Transform. Skriv inn dataene som vises i det venstre vinduet, klikk OK, og gå deretter til Effekt> Forvreng og overfør> Transform. Skriv inn dataene som vises i det høyre vinduet, og klikk OK.
Velg rektangulærverktøyet (M), opprett 20 til 20 px form, og fyll det med R = 0, G = 165, B = 224. Velg dette blå firkantet og gå til Objekt> Sti> Offset-vei. Skriv inn en 4px Offset og klikk OK. Velg den resulterende formen, lag en kopi foran (Kommando + C> Kommando + F), og deaktiver Snap to Grid (Vis> Snap to Grid).
Velg denne kopien og trykk pil opp og pil høyre. Velg denne kopien sammen med den opprinnelige formen, og klikk på Minus Front-knappen fra Pathfinder-panelet. Fyll den resulterende formen med hvit, senk Opacity topp 25%, og ta tak i Slett ankerpunktsverktøyet (-).
Pass på at denne tynne, hvite formen fortsatt er valgt, og klikk på de to ankerpunktene (vist med piler i det fjerde bildet som vises). Til slutt skal formen din se ut som det femte bildet som vises.
Velg det blå torget og gå til Objekt> Sti> Offset-vei. Skriv inn en -1px Offset og klikk OK. Velg den resulterende formen og gå igjen til Objekt> Path> Offset Path. Skriv inn en -3px Offset og klikk OK. Velg de to figurene du har laget så langt, og klikk på Minus Front-knappen fra Pathfinder-panelet. Fyll den resulterende formen med R = 28, G = 117, B = 188.
Aktiver Snap to Grid (Vis> Snap to Grid) igjen. Plukk pennverktøyet (P) og tegne en horisontal bane som vist i det første bildet. Velg den, sammen med formen som ble opprettet i forrige trinn, og klikk på Divide-knappen fra Pathfinder-panelet.
Ta en titt på lagpanelet og fokus på den resulterende gruppen. Først sletter du trekantformene, og deretter grupperer du de resterende to figurene (Shift + Command + G). Til slutt fyller du øverste, venstre form med R = 0, G = 224, B = 255.
Velg den blå firkanten, legg til en 2pt, svart slag og juster den innvendig. Velg alle figurene som er opprettet i de tre siste trinnene, og grupp dem (Command + G). Flytt til lagpanelet, dobbeltklikk på denne friske gruppen og kaller den "BlueBlock".
Velg "BlueBlock", lag seks kopier og juster dem i en enkel kolonne (som vist i det følgende bildet). Fokuser på disse gruppekopiene og erstatt eksisterende farger med de som er vist nedenfor. Når du er ferdig, gå til Lagpanelet og endre navn på disse nye gruppene, avhengig av fargen på den totale blokken.
Nå som du har alle blokkene du trenger, la oss lage de faktiske blokkene. Start med de blå blokkene og fortsett med resten. Grupper alltid blokkene som utgjør et blokkstykke. Det vil lette arbeidet ditt i senere trinn.
Legg til noen av disse blokkene som vist nedenfor.
Velg rektangulærverktøyet (M), opprett en form for 100 til 20 px, og legg den som vist i bildet nedenfor. Fyll den nå med R = 65, G = 64, B = 66. Fjern fargen fra streken og gå til Effect> Stylize> Rounded Corners. Skriv inn en radius på 10 px, klikk OK, og gå til Objekt> Utvid utseende.
Deaktiver Snap to Grid (Vis> Snap to Grid). Velg formen som ble opprettet i forrige trinn, send den til baksiden (Skift + Kommando + Venstre braketsnøkkel), og lag to eksemplarer foran (Kommando + C> Kommando + F> Kommando + F). Velg toppkopien og trykk pil opp og venstre pil en gang. Velg begge kopier og klikk på Minus Front-knappen fra Pathfinder-panelet. Fyll den resulterende formen med svart.
Velg den grå formen som ble opprettet i trinn 25, og lag to nye eksemplarer foran. Igjen, velg toppkopien, og denne gangen treffer du pil opp og venstre pil to ganger. Velg begge kopier og klikk på Minus Front-knappen fra Pathfinder-panelet. Fyll den resulterende formen med R = 147, G = 149, B = 152.
Vellgjør det runde rektangel som er opprettet i trinn 25, og fokus på utseendepanelet. Legg til en ny fyll og bruk den lineære gradienten som vises i det første bildet. Legg til en tredje fylling for denne formen, gjør den svart, senk Opacity til 10%, endre blandemodus til Multiply, og gå til Effect> Artistic> Film Grain. Skriv inn dataene som er vist nedenfor, og klikk OK.
Fortsett i Utseende-panelet og legg til første slag. Gjør det 2pt bredt, sett fargen på R = 209 G = 211 B = 212, og juster den inn på innsiden. Legg til et sekundslag for denne banen, gjør det 1pt bredt, og sett fargen på R = 147, G = 14, B = 152. Pass på at den er justert til innsiden.
Vellgjør det avrundede rektangelet redigert i forrige trinn og lag en kopi foran. Velg denne kopien og trykk D-tasten fra tastaturet. Dette vil legge til standardegenskapene for formen din (hvit fyll og en 1pt, svart slag). Fjern fargen fra strekningen.
Nå, velg denne hvite formen, sammen med det opprinnelige avrundede rektangelet, og gå til gjennomsiktighetspanelet. Åpne fly-out-menyen, og klikk på Make Opacity Mask.
Aktiver Snap to Grid igjen. Velg alle figurene du har opprettet i de siste fem trinnene, og grupper dem. Lag to kopier av denne gruppen, og legg dem som vist på bildet nedenfor.
Fokuser på den øverste gruppen som ble opprettet i forrige trinn, og velg Rektangulærverktøyet (M). Lag en form av 90 x 80 px og legg den som vist på bildet nedenfor. Fyll det med R = 65 G = 64 B = 66, fjern fargen fra streken, og bruk Effekt> Stylize> Rounded Corners. Skriv inn en radius på 10 px, klikk OK, og gå til Objekt> Utvid utseende.
Deaktiver Snap to Grid. Velg formen som ble opprettet i forrige trinn, og gå til Objekt> Path> Offset Path. Skriv inn en -2px Offset og klikk OK. Velg den resulterende formen og lag en kopi foran. Velg denne kopien og trykk pil opp en gang. Velg de to figurene som er opprettet i dette trinnet, og klikk på Minus Front-knappen fra Pathfinder-panelet. Fyll den resulterende formen med R = 209, G = 211, B = 212.
Vellgjør det runde rektangel som er opprettet i trinn 31, og fokus på Utseendepanelet. Legg til en ny fyll og bruk den lineære gradienten som vises nedenfor. Legg til en tredje fylling for denne formen, gjør den svart, senk Opacity til 10%, endre blandemodus til Multiply, og gå til Effect> Artistic> Film Grain. Skriv inn dataene som er vist nedenfor, og klikk OK.
Fortsett i Utseende-panelet og legg til første slag. Gjør det 2pt bredt, sett fargen på R = 147 G = 149 B = 152, og juster den inn på innsiden. Legg til et nytt slag for denne banen, gjør det 1pt bredt, sett fargen på R = 0 G = 0 B = 0, og sørg for at den er justert til innsiden.
Vellgjør det avrundede rektangelet redigert i forrige trinn og lag en kopi foran. Velg denne kopien og trykk D-tasten fra tastaturet. Igjen, fjern fargen fra streken og bruk den gjenværende hvite formen for å maskere det opprinnelige avrundede rektangel.
Velg alle figurene som er opprettet i de siste fire trinnene, og grupper dem. Send denne nye gruppen tilbake.
Aktiver Snap to Grid igjen. Ta tak i den lilla blokkeringsgruppen, lag en kopi, og legg den som vist på bildet nedenfor. Velg den og gå til Effekt> Stylize> Drop Shadow. Skriv inn dataene som er vist nedenfor, og klikk OK.
Velg rektangulærverktøyet (M), opprett en form for 90 til 50 px, og legg den som vist på bildet nedenfor. Fyll det med R = 65 G = 64 B = 66, fjern fargen fra slaget, og gå til Effekt> Stylize> Avrundede hjørner. Skriv inn en radius på 10 px, klikk OK, og gå til Objekt> Utvid utseende.
Deaktiver Snap to Grid. Velg formen som ble opprettet i forrige trinn, og gå til Objekt> Path> Offset Path. Skriv inn en -2px Offset og klikk OK. Velg den resulterende formen og lag en kopi foran. Velg denne kopien og trykk pil opp en gang. Velg de to figurene som er opprettet i dette trinnet, og klikk på Minus Front-knappen fra Pathfinder-panelet. Fyll den resulterende formen med R = 209, G = 211, B = 212.
Vellgjør det runde rektangel som er opprettet i trinn 31, og fokus på Utseendepanelet. Legg til en ny fyll og bruk den lineære gradienten som vises nedenfor. Legg til en tredje fylling for denne formen, gjør den svart, senk Opacity til 10%, endre blandemodus til Multiply, og bruk Effect> Artistic> Film Grain. Skriv inn dataene som er vist nedenfor, og klikk OK.
Fortsett i Utseende-panelet og legg til første slag. Gjør det 2pt bredt, sett fargen på R = 147 G = 149 B = 152, og juster den inn på innsiden. Legg til et nytt slag for denne banen, gjør det 1pt bredt, sett fargen på R = 0 G = 0 B = 0, og sørg for at den er justert til innsiden.
Vellgjør det avrundede rektangelet redigert i forrige trinn og lag en kopi foran. Velg denne kopien og trykk D-tasten fra tastaturet. Igjen, fjern fargen fra streken og bruk den gjenværende hvite formen for å maskere det opprinnelige avrundede rektangel.
Velg alle figurene som er opprettet i de siste fire trinnene, og grupper dem. Send nå denne nye gruppen tilbake.
Aktiver Snap to Grid og dupliser gruppen som ble opprettet i forrige trinn. Velg denne gruppekopien og flytt den ned som vist i det andre bildet. Igjen, vil snap to grid lette arbeidet ditt.
Deaktiver Snap to Grid. Velg typeverktøyet (T) og legg til litt hvit tekst og tall. Bruk Courier New-skrift og gjør den fet. For teksten settes størrelsen på 13 og for tallet øke den til 20pt. Velg både teksten og tallene og gå til Effekt> Stylize> Drop Shadow. Skriv inn dataene som er vist nedenfor, og klikk OK. Til slutt gruppere dem alle sammen.
Velg alle figurene som er opprettet i de siste nitten trinnene, og grupper dem. Send denne nye gruppen tilbake og gå til Effekt> Stylize> Drop Shadow. Skriv inn dataene som er vist nedenfor, og klikk OK.
Til slutt, la oss legge til en enkel bakgrunn. Velg Rectangle Tool (M), lag en form på størrelsen på tavlen, og send den til baksiden. Fyll den med hvit, legg deretter til en ny fyll, og bruk den radiale gradienten som vises nedenfor.
Velg formen som ble opprettet i forrige trinn, og legg til en tredje fylling. Velg den fra Utseendepanelet, senk Opacity til 10%, og endre blandemodus til Multiply.
Deretter trenger du et innebygd mønster for denne nye fyllingen. Gå til panelet Swathes (Vinduer> Fargeprøver), åpne flytmenyen, og gå til Open Swatch Library> Mønster> Grunnleggende grafikk> Grunnleggende grafikk_tekster.
Et nytt vindu med en rekke fine mønstre skal åpnes. Se etter "USGS 19 Land Inundation" -mønsteret. Velg den tredje fyllingen, legg til mønsteret og gå til Effekt> Kunstnerisk> Filmkorn. Skriv inn dataene som vises nedenfor, klikk OK, og du er ferdig.
Nå er arbeidet ditt ferdiggjort. Slik ser det ut.
Accentsconagua