Share
En av de viktigste aspektene ved å spille et videospill er hvordan informasjon presenteres. Hvordan grafikken presenteres gjør en stor forskjell i hvordan spillerne vil oppleve spillet under spill. I dagens veiledning vil vi demonstrere hvordan du designer et videospill-grensesnittvindu. Under prosessen vil vi vise hvordan du manuelt trekker visse aspekter, bruker lagestiler, teksturer, og til og med hvordan du integrerer Adobe Illustrator. La oss komme i gang!
Følgende eiendeler ble brukt under produksjonen av denne opplæringen.
Opprett ny fil med størrelse 1152 px x 864 px. Vårt første skritt er å skape bakgrunn for grensesnittet vårt. Denne prosessen er ganske enkelt bare å eksperimentere med tekstur. I utgangspunktet kastet jeg bare noen teksturer jeg fant og eksperimenterte med blandingsmodus. Mitt første forsøk er en papirstruktur.
Legg igjen en papirstruktur igjen, denne gangen endrer du blandingsmodus med Multiply.
Legg til justeringslag Hue / Saturation for å mørke det.
Legg til en vintage bok teksturer med blanding modus Multiply og Opacity 48%.
Legg til gamle papirstrukturer. Denne gangen bruker Blend Mode Overlay med Opacity 58%.
Legg til justeringslaget Black & White.
Lag nytt lag. Trykk D for å sette forgrunns- og bakgrunnsfarge til svart og hvitt. Klikk på Filter> Render> Clouds.
Sett blandemodus til Multiply og reduser opaciteten til 8%.
Lag nytt lag. Fyll den med hvit til svart radial gradient.
Still blendmodus til skjerm med opasitet 67%.
Legg til justeringslag Hue / Saturation. Velg Colorize for å gi den en farge.
Til slutt legger du til en fin riper metallic teksturer. Sett blandemodus til Multiply og reduser opaciteten til 20%.
Åpne Adobe Illustrator. Tegn et gult rektangel.
På toppen av rektangelet tegner du et mindre svart rektangel. Velg toppunkter med Direct Selection Tool og flytt dem.
Velg formen og Alt-dra for å duplisere den.
Hit Command / Ctrl + D for å gjenta dupliseringsprosessen.
Velg alle fasene. Hit Command / Ctrl + C. Lim inn det i Photoshop, Command / Ctrl + V. Velg Smart Object i Paste dialogboksen.
Dobbeltklikkslag for å åpne dialogboksen for åpen lagstilstand. Legg til mønsteroverlegg, legg inn fargepapir og velg et skittent mønster.
Legg til rektangelform på toppen og bunnen av stripen.
Legg til følgende lagstiler.
Vi starter med å lage base av vinduet. Lag en rektangelform med Farge: # # 313029, Opacity: 100%, og Fill: 50%. Legg til følgende lag stil.
Lagstilen vi nettopp har lagt til er for flat. Vi vil bruke en enkel teknikk for å fikse det. I Layer Style dialogboksen aktivere Layer Mask Hides Effects.
Legg til lagmaske. Kommando / Ctrl-klikk-bane for å lage valg. Omvendt valg ved å trykke på Command / Ctrl + Shift + I. Legg en myk mørk gradient på toppen og mal svart på industrilinjen for å skjule skyggen.
Du kan se forskjellen før og etter å endre skyggen i bildet nedenfor.
Tegn et annet rektangel. Denne gangen er mindre enn forrige.
Legg på rustte teksturer på toppen av det. Bruk lagmaske for å skjule unødvendige områder. Sett blandemodus til Multiply og reduser opaciteten til 10%.
Opprett nytt rektangel som dekker hele formen. Legg til mindre rektangel inne i formen, sett den til å trekke fra.
Dupliser tidligere form. Endre størrelsen på den indre banen.
Legg til følgende lagstiler.
Det er for mye skygge på toppen av vinduet. I dialogboksen Lagformat aktiveres Lagmasker Skjul effekter.
Kommando / Ctrl-klikk-bane. Inverter markering (Command / Ctrl + Shift + I) og mal skygger på øvre del av vinduet med grått.
Nedenfor kan du se forskjellen før og etter at skyggen er delvis skjult.
Tegn et rektangel som dekker hele vinduets grensesnitt. Sett fyllingen til 0% og legg til følgende lagstiler.
Vårt siste skritt legger bare til subtile høydepunkt på vinduets grensesnitt.
Tegn en mørk sirkel og sett på hjørnet. Legg til dråpeskygge.
Bruk myk børste til å male litt hvitt på toppen av hullet.
Her er resultatet i 100% visning.
Sett alle lag som lager hullet på en laggruppe. Dupliserer gruppen og legger den på hvert hjørne.
I Illustrator lager du halvparten av Windows tittelform.
Høyreklikk form og velg Transform> Reflektere. Velg Akse: Vertikal og klikk Kopier.
Flytt duplisert form.
Velg punkter som overlapper. Høyreklikk og velg Bli med.
Lim inn banen til Photoshop som et formlag.
Mal høydepunkt og skygge på formen. Du kan se fremgangen jeg laget nedenfor. Jeg bruker veldig myk børste (Hardhet: 0%, Opacity: 5-10%) og ca 10 lag.
Legg til spilltittel og legg til følgende lagstiler. Skrift brukt her er Celtic Garamond den andre.
Tegn et avrundet rektangel på venstre side av grensesnittet. Bruk farge: # 605847. Legg til subtil Gradient Overlay fra grått til hvitt.
Dupliser forrige form og endre størrelsen på den. Se bildet nedenfor for referanse.
Tegn et annet rektangel. Denne gangen bruker lysere farge. Legg til graderingsoverlegg. Dupliser og legg den på den nedre delen av det større rektangel.
Tegn 1 px linje for høydepunkt og skygge. Vi skal konvertere denne formen til en 3D-form. Til slutt ser du at denne lille 1 px detaljer er nødvendig for å få et realistisk resultat.
Tegn form under for å legge til 3D-perspektiv på formen. Legg til følgende Gradient Overlay.
Tegn skygge under formen.
Tegn figuren under og fullfør skyggen. Legg gradvis overlegg på formen.
Her er resultatet i 100% visning.
Velg alle lag og sett det på et gruppelag. Dupliserer gruppen, flip den horisontalt og sett den på motsatt side.
Tegn form som vist under. Paint høydepunkt og skygge på toppen av det. Ikke glem å legge til myk skygge av formen på grensesnittvinduet.
Nedenfor kan du se resultatet i 100% visning. Dupliser formen to ganger.
Lag nytt lag under formen og lakk litt svart piksel med liten, myk børste.
Dupliser hele formen. Vri den horisontalt og flytt den til den andre siden av grensesnittet.
Legg til rust teksturer som dekker hele grensesnittet. Kommando / Ctrl-klikk grensesnitt grense og vindu tittel for å lage et valg basert på deres form. Legg til ny lagmaske. Mal svart tittelform med lav opacitet børste fordi vi ikke vil se for mye rusttekst på den. Nedenfor ser du masken jeg opprettet.
Reduser opaciteten til 15%.
Lag en ramme inne i vinduets grensesnitt. Dette er laget av to baner med den indre banen er satt til å trekke fra. Legg til følgende lagstiler.
Lim inn PNG-bilde av et kjøretøy inne i rammen.
Bak rammen legger du til et nytt lag og fyller det med en grå til hvit gradient.
Mal noen skygger under kjøretøyet.
Legg til en annen ramme under forhåndsvisningen av bilen. Bruk lignende teknikk i tidligere trinn.
Legg til litt informasjon på rammen.
Tegn en annen ramme, denne gangen større.
Tegn et enkelt rektangel inne i rammen. Legg til følgende lag stil.
Legg litt tekst på rektangelet.
Kopier rektangelet til en annen data. Fjern lagstil Outer Glow og reduser opaciteten til 30% fra inaktivt nivå.
Dupliser all form for å opprette et annet datasett.
Gå tilbake til Illustrator, opprett denne formen.
Lim inn formen til Photoshop som et formlag. Legg til følgende lagstiler.
Mal høyde og skygge manuelt med myk børste, Hardhet 0% og Opacity 5-10%.
Dupliser formen og vri den horisontalt.
Tegn et lyseblått rektangel og sett det bak fasongene. Legg til følgende lagstiler.
Tegn noen høydepunkter inne i formen. Legg til knappens tittel. Mal lysstyrke på toppen av knappen.
Dupliser knappen og endre tittelen.
Accentsconagua