How Design en Video Game Interface Vindu i Photoshop
En av de viktigste aspektene ved å spille et spill er hvordan informasjonen blir presentert. Hvordan grafikken presenteres gjør en stor forskjell i hvordan spillerne vil oppfatte spillet under avspilling. I dagens ’ s opplæringen vil vi vise hvordan du kan designe et spill grensesnitt vinduet. Under prosessen vil vi vise hvordan du kan tegne manuelt visse aspekter, gjelder lagstiler, teksturer, og selv hvordan å innlemme Adobe Illustrator. La ’!. S komme i gang
Instruksjons Eiendeler
Følgende eiendeler ble brukt under produksjonen av denne opplæringen
Papir Tekstur fra Vandelay Premier
Vintage Bestill Tekstur fra Tapt og Tatt
gamle papir Tekstur fra WeGraphics
oppskrapet Metallic Tekstur fra WeGraphics
Rust teksturer fra WeGraphics
Carivan Set png fra mysticmorning
Trinn 1: Bakgrunn
Opprett ny fil med størrelse 1152 px x 864 px. Vårt første skritt er å skape bakgrunn for vår grensesnitt. Denne prosessen er rett og slett er bare å eksperimentere med tekstur. I utgangspunktet, jeg bare kastet noen teksturer jeg fant og eksperimentere med sin blanding modus. Mitt første forsøk er en papir teksturer.
Trinn 2
Legg et papir teksturer igjen, denne gangen endrer sin blanding modus med Multipliser.
Trinn 3
Legg justeringslag Hue /Saturation for å gjøre den mørkere.
Trinn 4
Legg til en vintage bok teksturer med blanding modus Multipliser og Opacity 48%.
Trinn 5
Legg til gamle papir teksturer. Denne gangen bruk Blend Mode Overlay med Opacity 58%.
Trinn 6
Legg justeringslag Black &White.
Trinn 7
< p> Opprett nytt lag. Hit D for å sette forgrunn og bakgrunnsfargen til svart og hvitt. Klikk Filter> Render> Clouds.
Trinn 8
Sett sin blanding modus til Multipliser og redusere opacity til 8%.
Trinn 9
Opprett nytt lag. Fyll den med hvitt til svart radial gradient.
Step 10
Sett sin blanding modus til skjerm med Opacity 67%.
Trinn 11
Legg til justeringslag Hue /Saturation. Velg Fargelegg til å gi det en farge.
Step 12
Til slutt legger en fin ripete metalliske teksturer. Satt sin blanding modus til Multipliser og redusere Opacity til 20%
Trinn 13:. Industrial Linje
Åpne Adobe Illustrator. Tegn et gult rektangel.
Step 14
På toppen av rektangelet, tegne en mindre svart rektangel. Velg topp poeng med Direct Selection Tool og flytte dem.
Step 15
Velg form og Alt-dra for å kopiere den.
Trinn 16
Hit Kommando /Ctrl + D for å gjenta duplisering prosessen.
Step 17
Velg alle former. Hit Kommando /Ctrl + C. Lim den i Photoshop, Kommando /Ctrl + V. Velg smart objekt i dialogboksen Lim-boksen.
Trinn 18
Dobbelklikk lag for å gi åpen Layer style dialogboksen. Legg Pattern Overlay, legger Color Paper, og velg en skitten mønster.
Trinn 19
Legg rektangel form på toppen og bunnen av stripe.
Trinn 20
Legg følgende lagstiler
Trinn 21:. Basic Vindu Interface
Vi vil begynne med å lage bunnen av vinduet. Lag et rektangel form med Color: # # 313029, Opacity: 100%, og Fyll: 50%. Legg følgende lag stil.
Step 22
lagstilen vi nettopp har lagt er for flat. Vi vil bruke en enkel teknikk for å fikse det. I dialogboksen Lagstil aktivere Layer Mask Skjuler Effects.
Trinn 23
Legg til lagmaske. Kommando /Ctrl-klikk banen for å lage utvalg. Inverter valg ved å trykke Kommando /Ctrl + Shift + I. Legg en myk mørk gradient på toppen og male svart på den industrielle linje for å skjule skyggen.
Trinn 24
Du kan se forskjellen før og etter modifisering av skygge i bildet nedenfor.
Step 25
Tegn en firkant. Denne gangen mindre enn den forrige.
Step 26
Legg rust teksturer på toppen av det. Bruk lagmaske til å skjule unødvendige områder. Satt sin blanding modus til Multipliser og redusere Opacity til 10%.
Step 27
Opprett ny rektangel som dekker hele formen. Legg mindre rektangel inne i formen, sett den for å trekke.
Step 28
Duplicate forrige form. Resize indre bane.
Trinn 29
Legg følgende lagstiler.
Trinn 30
Det er for mye skygge på øvre del av vinduet. I lag stil dialogboksen aktivere Layer Mask Skjuler Effects.
Trinn 31
Kommando /Ctrl-klikk banen. Inverter valg (Kommando /Ctrl + Shift + I) og male skygger på øvre del av vinduet med grå.
Trinn 32
Nedenfor kan du se forskjellen før og etter skyggen er delvis skjult.
Step 33
Tegn et rektangel som dekker hele vinduet grensesnittet. Sette sitt Fill til 0% og legge følgende lagstiler.
Step 34
Vår siste trinnet bare legge subtile høydepunkt på vindusgrensesnittet.
Trinn 35: Holes
Tegn en mørk sirkel og sted på hjørnet. Legg skygge.
Step 36
Bruk en myk børste til å male litt hvitt på toppen av hullet.
Trinn 37
Her er resultatet i 100% visning.
Step 38
Sett alle lag som skaper hullet på et lag gruppe. Duplisere gruppen og sette den på hver hjørner
Trinn 39:.. Window Title
I Illustrator, lage halvparten av Window tittel form
Trinn 40
Høyreklikk form og velg Transform> Reflect. Velg Axis: Vertikal og klikk Kopier
Trinn 41
Flytt duplisert form
Trinn 42
Velg punkter som er.. overlapping. Høyreklikk og velg Delta.
Step 43
Lim inn banen til Photoshop som et formlag.
Trinn 44
Maling høydepunkt og skygge på formen. Du kan se fremgangen jeg har gjort nedenfor. Jeg bruker veldig myk børste (Hardhet: 0%, Opacity: 5-10%). Og ca 10 lag
Step 45
Legg til spilltittel og legge følgende lagstiler. Font brukt her er Celtic Garamond den andre
Trinn 46:. Accessorize
Tegn et avrundet rektangel på venstre side av grensesnittet. Bruk color: # 605847. Legg subtil Gradient Overlay fra grå til hvit.
Step 47
Duplicate tidligere form og endre størrelsen. Se bildet under for referanse.
Step 48
Tegn en firkant. Denne gangen bruker lysere farge. Legg Gradient Overlay. Duplisere og plassere den på nedre del av større rektangel.
Step 49
Tegn en px linje for sin høydepunkt og skygge. Vi kommer til å konvertere denne formen til en 3D-form. Til slutt, vil du se at denne lille 1 px detaljer er nødvendig for å få et realistisk resultat.
Step 50
Tegn formen under for å legge til 3D-perspektiv på formen.
Step 51
Tegn skygge under formen.
Step 52
Tegn formen under og legge til følgende Gradient Overlay. Komplett skyggen. Legg Gradient Overlay på formen.
Step 53
Her er resultatet i 100% visning.
Trinn 54
Velg alle lag og sette den på en gruppe lag. Duplisere gruppen, snu den horisontalt, og sette den på motsatt side
Trinn 55:. Accessorize
Tegn formen som vist nedenfor. Maling høydepunkt og skygge på toppen av det. Ikke glem å legge myk skygge av formen på grensesnittet vinduet.
Trinn 56
Nedenfor kan du se resultatet i 100% visning. Duplisere formen to ganger.
Step 57
Opprett nytt lag under form og male noen svart piksel bruker liten myk børste.
Trinn 58
Duplicate hele formen. Vend den horisontalt og flytte den til den andre siden av grensesnittet
Trinn 59:. Legg Rust Texture
Legg rust teksturer som dekker hele grensesnittet. Kommando /Ctrl-klikk-grensesnitt grensen og vindustittelen for å skape et valg basert på deres form. Legg til et nytt layer mask. Male svart tittelen form med lav opasitet pensel fordi vi ikke ønsker å se for mye rust tekstur på den. Nedenfor kan du se masken jeg laget
Step 60
Reduser sin opacity til 15%
Trinn 61:.. Vehicle Preview
Lag en ramme inne i vinduet grensesnittet. Dette er laget av to bane med den indre bane er satt til Subtraher. Legg følgende lagstiler.
Step 62
Lim PNG-bilde av et kjøretøy inne i rammen.
Trinn 63
Behind rammen legge et nytt lag og fyll den med en grå til kvit.
Step 64
Paint noen skygger under kjøretøyet.
Trinn 65: Vehicle data
Legg til en annen ramme under forhåndsvisnings kjøretøy. Bruk lignende teknikk i forrige trinnene
Step 66
Legg litt informasjon på rammen
Trinn 67:.. Forskning og oppgradere data
Tegn en annen ramme, denne gang større.
Step 68
Tegn et enkelt rektangel inne i rammen. Legg følgende lag stil.
Step 69
Legg til litt tekst på rektangelet.
Step 70
Duplicate rektangelet for ytterligere data. Fjern lagstilen Ytre glød og redusere opacity til 30% fra inaktiv nivå.
Trinn 71
Duplicate all form for å skape et annet datasett.
< h2> Trinn 72: Tegning Knapper
Gå tilbake til Illustrator, skape denne formen
Trinn 73
Lim inn formen til Photoshop som et formlag.. Legg følgende lagstiler.
Trinn 74
Paint høydepunkt og skygge manuelt med myk børste, hardhet 0% og Opacity 5-10%.
Trinn 75
Duplicate formen og snu den horisontalt.
Step 76
Tegn en lys blå firkant og satte den bak figurene. Legg følgende lagstiler.
Step 77
Tegn noen høydepunkter inne i formen. Legg knappen tittel. Maling lys glød på toppen av knappen.
Step 78
Duplicate knappen og endre tittelen.
Final Bildeanmeldelser