Lag en Block Game Interface i Illustrator

Create en Block Game Interface i Illustrator

I det følgende opplæringen vil du lære hvordan du kan lage en blokk spillet grensesnittet i Adobe Illustrator CS5. Vector spillgrafikk tillate allsidig kunstverk. Arbeidsflyten som presenteres i denne opplæringen vil lære deg hvordan å lage spillgrafikk i Illustrator. Disse teknikkene kan brukes på flere grensesnitt design og spilldesignprosjekter. Det er på tide å hoppe i, lære å lage disse figurene, og gi dem fargerik grafisk dybde.

Trinn 1

Hit Command + N for å opprette et nytt dokument. Skriv inn 660 i boksen Bredde og 600 i høyden, og klikk deretter på knappen Avansert. Velg RGB, Screen (72ppi), og sørge for at Align nye objekter være Pixel Grid er merket før og klikk på OK. Nå, slå på Grid (View > Grid) og Fest til rutenett (View > Fest til rutenett).

Deretter trenger du et rutenett hver 5px. Gå til Rediger > Preferanser > Guides > Grid, skriv 5 i linjenettet hver boks og en i underinndelinger boksen. Du kan også åpne infopanelet (Vindu > Info) for en live forhåndsvisning med størrelsen og plasseringen av figurer. Ikke glem å bytte måleenhet for å piksler fra Rediger > Preferanser > Enhet > General. Alle disse alternativene vil øke arbeidshastigheten.

Trinn 2

Velg den rektangelverktøyet (M) og lage en 350 ved 490px form. Fest til rutenett vil lette arbeidet ditt. Fyll den med R = 50, G = 50, B = 50. Nå fjerne fargen fra hjerneslag og gå til Effect > Stylize > Avrundede hjørner. Skriv inn et 5px radius, klikk OK, og gå til Object > Utvid Utseende

Trinn 3

Deaktiver Grid (View > Vis rutenett). Og Fest til rutenett (View > Fest til rutenett). Gå til Rediger > Preferanser > Generelt og sørge for at tastaturet Økning er satt til 1px. Reselect formen opprettet i forrige trinn og gå til Object > Sti > Offset Path. . Skriv en -3px Offsettrykk, og klikk på OK

Velg den resulterende formen og lage en kopi i front (Command + C > Command + F). Velg denne kopien og traff pil ned én gang. Reselect de to figurer som er opprettet i dette trinnet og klikk på Minus Front knappen fra Pathfinder-panelet (Vindu > Pathfinder). Fyll den resulterende form med R = 109, G = 110, B = 113

Trinn 4

Igjen, velge formen skapt i det andre trinnet og gå til Object >.; Sti > Offset Path. Skriv inn et -3px Offsettrykk, og klikk på OK. Velg den resulterende formen og lage en kopi i front (Command + C > Command + F).

Velg denne kopien og traff pil opp en gang. Reselect de to figurer som er opprettet i dette trinnet og klikk på Minus Front knappen fra Pathfinder-panelet. Fyll den resulterende form med R = 109, G = 110, B = 113.

Trinn 5

Velg det formen skapt i det andre trinnet, gå til Lag-panelet, dobbeltklikk på den og gi den navnet " Main ". Kontroller at denne formen er valgt, flytt til Utseende panelet (Vindu > Utseende) og klikk på Legg til ny Fyll knappen. Det er den lille hvite firkanten fra bunnen av Utseende panel.

Selvsagt, dette vil legge til en ny fyll for formen. Velg det fra Utseende panelet og bruke lineær gradient vist nedenfor. Den gule null fra gradienten bildet står for Opacity prosent

Trinn 6

reselect ". Main ", legge til en tredje fyll og velge det fra Utseende panel. Gjør det svart, dra den i bunnen av Utseende panel, senke Opacity til 15%, og gå til Effect > Sti > Offset Path. Skriv en 1px Offset, klikk på OK og gå til Effect > Forvrenge & Transform > Transform. Oppgi dataene nedenfor og klikk på OK

Trinn 7

reselect ". Main " og fokus på utseendet panel. Sett strek farge til R = 167, G = 169, B = 172. Gjør det 4PT bred og justere den til inne

Trinn 8

reselect ". Main " og fokus på utseendet panel. Velg hjerneslag lagt i forrige trinn, og klikk på Duplicate valgte elementet. Det er den lille filikonet fra bunnen av Utseende panel. Selvfølgelig vil dette legge en kopi av hjerneslag. Velg denne nye slag, satt sin farge på R = 35 G = 31 B = 32, og redusere størrelsen til 3pt

Trinn 9

reselect ". Main ", fokusere på utseendet panel, og legge til to nye Stokes. Velg den første, satt sin farge til R = 128 G = 130 B = 133, og størrelsen på 1.5pt. Velg det andre nye slag, gjør det svart, justere den til utenfor, og angi størrelsen på 1pt

Trinn 10

reselect ". Main " og fokus på utseendet panel. Sørg for at ingen fyll eller hjerneslag er valgt og gå til Effect > Stylize > Drop Shadow. Oppgi dataene nedenfor og klikk på OK

Step 11

Re-aktivere Grid (View > Vis rutenett). Og Fest til rutenett (View > Fest til rutenett). Plukk rektangel Tool (M), opprette en 20 ved 20px form og fylle det med R = 88, G = 89, B = 91. Velg denne plassen og gå til Object > Sti > Offset Path. Skriv inn et -1px Offsettrykk, og klikk på OK

Velg den resulterende formen og går igjen til Object >.; Sti > Offset Path. Skriv inn et -3px Offsettrykk, og klikk på OK. Velg den resulterende formen sammen med laget tidligere form og klikk på Minus Front knappen fra Pathfinder-panelet. Fyll den resulterende form med R = 65, G = 64, B = 66.

Trinn 12

Velg den Pen Tool (P) og tegne en enkel horisontal bane som vist i det første bildet . Fest til rutenett skulle lette arbeidet ditt. Velg denne friske banen, sammen med mørkere form opprettet i forrige trinn, og klikk på Divide knappen fra Pathfinder-panelet.

Dette vil skape en gruppe med fire enkle figurer. Ta en titt inn i Lag-panelet og fokus på denne gruppen. Først velger de to trekanter og slette dem. Deretter dele opp de resterende to figurer (Shift + Kommando + G). Til slutt, fylle toppen, venstre form med R = 109, G = 110, B = 113. Sørg for at den andre formen er fortsatt fylt med R = 65, G = 64, B = 66.

Trinn 13

Velg det grå firkant opprettet i ellevte trinn, lage en kopi i front (Command + C > Command + F), og bringe den til fronten (Shift + Kommando + Høyre Bracket nøkkel). Fyll denne nye formen med svart, senke Opacity til 7%, endre blending mode til Multipliser og gå til Effect > Kunstnerisk > Film Grain. Oppgi dataene nedenfor og klikk på OK

Trinn 14

Velg det formen opprettet i forrige trinn, og lage en kopi i front (Command + C > Command + F).. Plukk Ellipse Tool (L), opprette en 40 ved 20px form, og plasser den som vist i det andre bildet. Velg dette presset sirkel, sammen med ny kopi, og klikk på Skjæring knappen fra Pathfinder-panelet. Fyll den resulterende form med hvit og senke Opacity til 25%.

Trinn 15

Velg det grå firkant opprettet i ellevte trinn og fokus på utseendet panel. Legg en 2PT, svart strek og justere den til innsiden. Velg alle figurene som er opprettet i løpet av de siste fire trinn og gruppere dem (Kommando + G).

Trinn 16

Velg gruppen ble opprettet i forrige trinn, og plasser den som vist i følgende bilde . Igjen, vil Fest til rutenett lette arbeidet ditt

Trinn 17

Velg det gruppen flyttet i forrige trinn, senke Opacity til 15%, og gå til Effect >.; Forvrenge & Transform > Transform. Legg inn dataene som vises i det venstre vinduet, klikk OK, og deretter gå tilbake til Effect > Forvrenge & Transform > Transform. Legg inn dataene som vises i vinduet til høyre og klikk på OK.

Trinn 18

Velg den rektangelverktøyet (M), opprette en 20 ved 20px form, og fyll den med R = 0, G = 165, B = 224. Velg denne blå firkant og gå til Object > Sti > Offset Path. Skriv inn et -4px Offsettrykk, og klikk på OK. Velg den resulterende form, lage en kopi i front (Command + C > Command + F), og deaktivere Fest til rutenett (View > Fest til rutenett).

Velg denne kopien og traff pil opp og høyre pil en gang. Reselect denne kopien, sammen med den opprinnelige formen, og klikk på Minus Front knappen fra Pathfinder-panelet. Fyll den resulterende form med hvit, senke Opacity topp 25%, og ta tak i Slett Anchor Point Tool (-).

Kontroller at dette tynne, hvite formen er fortsatt valgt, og klikk på de to ankerpunkter ( er vist med piler i det fjerde bildet vist). Til slutt formen din skal se ut som den femte bildet som vises

Trinn 19

Velg det blå firkant og gå til Object >.; Sti > Offset Path. Skriv inn et -1px Offsettrykk, og klikk på OK. Velg den resulterende form og gå igjen til Object > Sti > Offset Path. Skriv inn et -3px Offsettrykk, og klikk på OK. Velg de to figurer laget så langt og klikk på Minus Front knappen fra Pathfinder-panelet. Fyll den resulterende form med R = 28, G = 117, B = 188

Trinn 20

Aktiver Fest til rutenett (View > Fest til rutenett).. Plukk Pen Tool (P) og tegne en horisontal bane som vist i det første bildet. Velg den, sammen med formen opprettet i forrige trinn, og klikk på Divide knappen fra Pathfinder-panelet.

Ta en titt inn i Lag-panelet og fokusere på den resulterende gruppen. Først slette trekant former, deretter dele opp de resterende to figurer (Shift + Kommando + G). Til slutt, fylle toppen, venstre form med R = 0, G = 224, B = 255.

Trinn 21

Velg det blå firkant, legg en 2PT, svart strek og justere den til inne i. Velg alle figurene som er opprettet i de tre siste trinnene og gruppere dem (Kommando + G). Flytt til Lag-panelet, dobbeltklikk på denne friske gruppen og gi den navnet " BlueBlock ".

Trinn 22

Velg den " BlueBlock ", lag seks kopier og justere dem i en enkelt kolonne (som vist i følgende bilde). Fokus på disse gruppe kopier og erstatte de eksisterende fargene med de som er vist nedenfor. Når du er ferdig flytte til lagpanelet og endre navn på disse nye grupper avhengig av fargen av den samlede blokken.

Trinn 23

Nå som du har alle de blokkene som du trenger la oss skape selve blokk stykker. Start med de blå blokkene og fortsette med resten. Alltid gruppe blokkene som utgjør en blokk stykke. Det vil lette arbeidet i de senere trinn.

Trinn 24

Legg til noen av de blokk stykker som vist nedenfor.

Trinn 25

Velg den rektangel Tool (M), opprette en 100 ved 20px form, og plasser den som vist i følgende bilde. Nå fyller den med R = 65, G = 64, B = 66. Fjern fargen fra hjerneslag og gå til Effect > Stylize > Avrundede hjørner. Skriv inn et 10px radius, klikk OK, og gå til Object > Utvid Utseende

Trinn 26

Deaktiver Fest til rutenett (View > Fest til rutenett).. Velg formen opprettet i forrige trinn, send den til å sikkerhets (Shift + Kommando + Venstre Bracket nøkkel), og lage to kopier foran (Command + C > Command + F > Command + F). Velg den øverste kopien og traff pil opp og pil venstre samtidig. Reselect begge eksemplarene og klikk på Minus Front knappen fra Pathfinder-panelet. Fyll den resulterende form med svart.

Trinn 27

Velg det grå form opprettet i trinn 25 og lage to nye kopier i front. Igjen, velg den øverste kopien og denne gangen traff pil opp og pil venstre to ganger. Reselect begge eksemplarene og klikk på Minus Front knappen fra Pathfinder-panelet. Fyll den resulterende form med R = 147, G = 149, B = 152.

Trinn 28

Velg det avrundet rektangel opprettet i trinn 25 og fokus på utseendet panel. Legg til en ny fyll og bruke lineær gradient vist i det første bildet. Legg en tredje fyll for denne formen, gjør det svart, senke Opacity til 10%, endre blending mode til Multipliser, og gå til Effect > Kunstnerisk > Film Grain. Oppgi dataene nedenfor og klikk på OK.

Fortsett i Utseende-panelet og legge den første slag. Gjør det 2PT bred, setter sin farge på R = 209 G = 211 B = 212, og justere den til innsiden. Legg et andre strøk for denne banen, gjør det 1pt bred, og sette farge på R = 147, G = 14, B = 152. Sørg for at det er justert til innsiden.

Trinn 29

Velg det avrundet rektangel redigeres i forrige trinn, og lage en kopi i front. Velg denne kopien og traff D-tasten på tastaturet. Dette vil legge til standardegenskaper for din form (hvit fyll- og en 1pt, svart strek). Fjern fargen fra hjerneslag.

Nå velger denne hvite form, sammen med det opprinnelige avrundet rektangel, og gå til Transparency panel. Åpne fly-out menyen og klikk på Make Opacity Mask.

Trinn 30

Aktiver Fest til rutenett. Velg alle figurene som er opprettet i løpet av de siste fem trinn og gruppere dem. Lag to kopier av denne gruppen og plassere dem som vist i følgende bilde.

Trinn 31

Fokus på den øverste gruppen ble opprettet i forrige trinn, og plukke den rektangelverktøyet (M). Lag en 90 ved 80px form og legg den som vist i følgende bilde. Fyll den med R = 65 G = 64 B = 66, fjerne fargen fra slaget, og bruke Effect > Stylize > Avrundede hjørner. Skriv inn et 10px radius, klikk OK, og gå til Object > Utvid Utseende.

Trinn 32

Deaktiver Fest til rutenett. Velg formen opprettet i forrige trinn og gå til Object > Sti > Offset Path. Skriv inn et -2px Offsettrykk, og klikk på OK. Velg den resulterende formen og lage en kopi i front. Velg denne kopien og traff pil opp en gang. Reselect de to figurer som er opprettet i dette trinnet og klikk på Minus Front knappen fra Pathfinder-panelet. Fyll den resulterende form med R = 209, G = 211, B = 212.

Trinn 33

Velg det avrundet rektangel opprettet i trinn 31 og fokus på utseendet panel. Legg til en ny fyll og bruke lineær gradient vist nedenfor. Legg en tredje fyll for denne formen, gjør det svart, senke Opacity til 10%, endre blending mode til Multipliser, og gå til Effect > Kunstnerisk > Film Grain. Oppgi dataene nedenfor og klikk på OK.

Fortsett i Utseende-panelet og legge den første slag. Gjør det 2PT bred, setter sin farge på R = 147 G = 149 B = 152, og justere den til innsiden. Legg et andre strøk for denne banen, gjør det 1pt bred, sette farge på R = 0 G = 0 B = 0, og sørg for at det er justert til innsiden.

Trinn 34

Velg det avrundet rektangel redigeres i forrige trinn, og lage en kopi i front. Velg denne kopien og traff D-tasten på tastaturet. Igjen, fjerne fargen fra slaget og bruke den gjenværende hvite form til å maskere den opprinnelige avrundet rektangel.

Trinn 35

Velg alle figurene som er opprettet i løpet av de siste fire trinn og gruppere dem. Send denne nye gruppen til rygg.

Trinn 36

Aktiver Fest til rutenett. Ta tak i lilla blokken stykke gruppe, lage en kopi, og plasser den som vist i følgende bilde. Velg den og gå til Effect > Stylize > Drop Shadow. Oppgi dataene nedenfor og klikk på OK.

Trinn 37

Velg den rektangelverktøyet (M), lage en 90 x 50 piksler form, og plasser den som vist i følgende bilde. Fyll den med R = 65 G = 64 B = 66, fjerne fargen fra slaget, og gå til Effect > Stylize > Avrundede hjørner. Skriv inn et 10px radius, klikk OK, og gå til Object > Utvid Utseende.

Trinn 38

Velg det avrundet rektangel opprettet i trinn 31 og fokus på utseendet panel. Legg til en ny fyll og bruke lineær gradient vist nedenfor. Legg en tredje fyll for denne formen, gjør det svart, senke Opacity til 10%, endre blending mode til Multipliser, og bruke Effect > Kunstnerisk > Film Grain. Oppgi dataene nedenfor og klikk på OK.

Velg alle figurene som er opprettet i løpet av de siste fire trinn og gruppere dem. Nå sender denne nye gruppen til rygg.

Trinn 42

Aktiver Fest til rutenett og duplisere gruppen ble opprettet i forrige trinn. Velg denne gruppen kopiere og flytte det ned som vist i det andre bildet. Nok en gang, vil snap til rutenett lette arbeidet ditt.

Trinn 43

Deaktiver Fest til rutenett. Plukk Type Tool (T) og legg til litt hvit tekst og tall. Bruk Courier New skriften og gjøre den fet skrift. For tekst angi størrelsen på 13 og for det antall heve den til 20 pkt. Velg både tekst og tallene og gå til Effect > Stylize > Drop Shadow. Oppgi dataene nedenfor og klikk på OK. Til slutt, gruppere dem alle.

Trinn 44

Velg alle figurene som er opprettet i de siste nitten trinn og gruppere dem. Send denne nye gruppen til tilbake og gå til Effect > Stylize > Drop Shadow. Oppgi dataene nedenfor og klikk på OK.

Trinn 45

Til slutt, la oss legge til en enkel bakgrunn. Plukk rektangel Tool (M), skape en form størrelsen på artboard, og sende den til rygg. Fyll den med hvit, deretter legge til en annen fylling, og bruke radial gradient vist nedenfor.

Trinn 46

Velg det formen opprettet i forrige trinn, og legge til en tredje fyll. Velg det fra Utseende panel, senke Opacity til 10%, og endre overgangsmodus til Multipliser.

Deretter trenger du en innebygd mønster for denne nye fyll. Gå til Skår panelet (Vindu > Fargeprøver), åpner fly-out menyen, og gå til Open Swatch Library > Patterns > Grunnleggende Grafikk > Grunnleggende Graphics_Textures.

Et nytt vindu med en haug med fine mønstre bør åpnes. Se etter " USGS 19 Land oversvømmelse " mønster. Reselektere den tredje fyll, legger mønsteret, og gå til Effect > Kunstnerisk > Film Grain. Oppgi dataene nedenfor, klikk OK, og du er ferdig.

Konklusjon

Nå arbeidet er sluttført. Her er hvordan det skal se ut.

Previous:Quick Tips: Lag en utenomjordisk karakter Bruke Bredde Tool

Next Page:Lag en detaljert overvåkingskamera Illustration