How å lage en Pixel spill UI i Adobe Photoshop
Hva du skal lage
Det er mye du kan gjøre når du oppretter en meny eller et f de mange grensesnitt som eksisterer innenfor et videospill. I tilfelle av denne opplæringen, vil vi ta deg tid til å leke med pixel art en gang å gjøre noe RPG-inspirert blikk som strekker seg tilbake til 16-bits menyskjermene.
1. Sett opp din Document og Bakgrunn
Trinn 1
Pixel art er liten. I tilfellet med denne designen, er vi ikke altfor bekymret med hva dette ville passe inn i eller hvordan det ville bli vist (i tilfelle du arbeider på et bestemt spill design, vil du arbeide innenfor disse begrensningene, selvfølgelig) .
Åpne opp Adobe Photoshop Hotell og skape en Nytt dokument
at tiltak 254 px
av 117 px Anmeldelser på 72 ppi
. Dette vil være den viktigste arbeidsfila vi bruker i hele opplæringen.
Trinn 2
Jeg valgte å bidra til å sette tonen i denne designen ved å starte med bakgrunnen mønster først.
Lag en Nytt dokument
det er 10px
av 10px
på 72 ppi
. Jeg valgte nyanser av grønt i mynte og salvie (# daf5d2, # 8ca784 og # 748f6c fra lyseste til mørkeste).
Ved hjelp av Pencil Tool (B)
med standard børste på < b> 1px
starte i midten av design med den lyseste grønne. Tegn en liten boks med fire piksler
med to piksler
på hver side (holde hjørnene åpen). Tre piksler
opp starter de diagonale linjene som strekker 5 piksler
, diagonalt på hver side av den lille dokumentet. Til slutt opp minty grønne, plasserer tre piksler i hvert hjørne av dokumentet. For de to nyanser av salvie, fylle opp plassen rundt hver med diagonale striper av farge
La oss starte med strektegninger for kjeden. Det vil koble lærreim til farbare menyen Den tegneserie hanske markøren vises to ganger innenfor design. Opprett en Nytt lag Hotell og la oss tegne en hånd. Plasser hånden over din valgte menyvalg. Uansett hanske poeng til på denne menyen vil korrelerer direkte med andre menyen. Hold hånden på en egen senere for nå, så vi trenger en kopi av det senere. Bruk Type Tool (T) Kopier (Ctrl-C) Hotell og Lim inn (Ctrl + V) Skattekisten er en modifisert rektangel (den har en avrundet topp). Nok en gang, lage en Nytt lag Lag en Nytt lag Hotell og la oss få tegne øksen. Vårt endelige ikonet for den andre menyen er gullmynt. Nok en gang, lage en Nytt lag Sett din ferdige ikoner i en linje i midten av andre menyen. Kopier Hotell og Lim Hver måler starter med samme ramme design. Opprett en Nytt lag Hotell og fullføre følgende: Kopier Hotell og Lim Hver nivåmåler får en linje eller to av piksler i et høydepunkt farge og i en skygge farge. Bruk følgende for hver enkelt: Det er over! Vis For flere pixel art tutorials, sjekk ut følgende:
For å gjøre dette design i et enkelt mønster, gå til Rediger >.; Definer Mønster
og gi din mønsteret et nytt navn. Gå tilbake til dokument som er opprettet i Trinn 1 Hotell og bruke Paint Bucket Tool (G)
å fylle bakgrunnslaget av UI med mønster
valgt i stedet for forgrunnen
i verktøyets alternativer. Du kan enten lagre eller slette det opprinnelige mønsteret dokument laget i dette trinnet.
2. Skaper Leather Strap
Trinn 1
Lag en New Layer (Ctrl-N) Hotell og ta tak i Pencil Tool
og tegne en diagonal linje av 20
enkeltpiksler og en vinkelrett linje med 11
piksler
i brunt (# 6c0e04).
på hver side av den korte , vinkelrett linje, tegne 3
ekstra piksler plakater (se nedenfor for vinkel).
Skip to linjer med diagonale piksler og trekke en ekstra linje med 9
piksler
.
Hopp annen linje med diagonale piksler og lukke liten diagonal rektangel (se nedenfor). Tegn den andre siden av lærreim med 20
ekstra diagonal piksler
(uten tvil, kan du tegne dette etter den første delen av dette avsnittet).
Trinn 2
Fyll bunnen av stroppen med 7
piksler
(går fra venstre mot høyre, diagonalt).
På toppen av stroppen, hoppe over en piksel på hver side av låsen og trekke 3
piksler
mot høyre hjørne av dokumentet og 1 pixel
på hver side kommer fra venstre til høyre.
Den diagonal linje langs toppen av låsen er 11 piksler
over.
For å avslutte låsen, tegne 1 pixel
på hver side og legge til en annen 11 piksler
over i en vinkelrett linje.
Trinn 3
Avslutt stropp med to enkeltpiksel diagonale linjer .
Enten fylle ut deler av stroppen med lys brun (# bb5f15) med Pencil Tool
eller gjøre det med Paint Bucket Tool
.
< li> Ikke glem å fylle i sentrum av stroppen.
For låsen, jeg brukte gyllen gul (# fbc423).
Trinn 4
På dette tidspunktet bestemte jeg meg for å lage en Nytt lag
for skyld for å jobbe på rendering lærreim. Start med høydepunkter å bruke en lysere brun enn basefarge (# d67b1b) med diagonale linjer består av 2
eller 3 piksler
tykk.
Gjenta på den andre siden av tropp.
Bruk mørk brun på midten av stroppen, fôr topp og nedre kant av den delen av piksler. For gull lås, tegne diagonale linjer med okergul (# c27b17) på toppen og nederste kanten og krem (# f8dd92) forskjøvet i sentrum delen av låsen. Merge (Ctrl-E)
stroppen lagene sammen (hold den atskilt fra bakgrunnslaget).
3. Kjede og Papir
Trinn 1
Start med toppen av den første linken:. 2 piksler
i tråd med 2 piksler
kommer nedover diagonalt på to rader.
Koble den første raden med diagonale piksler 2 piksler Hotell og tegne 3 piksler
ned i fire kolonner hoppe én eller to linjer med plass ( se nedenfor). Fullføre formen (før vi jobber videre til neste lenke) med 2 diagonale piksler
på hver side går innover mot midten av formen.
med slep øverst i høyre hjørne pixel fjernet og lagt til nederst i venstre hjørne.
Herfra skal vi gjenta den grunnleggende form av kjeden adresse skapt i de to første delene av dette trinnet med 4 piksler bred
, en enkelt diagonal pixel
på hver side, 3 piksler ned
, og 2 piksler
nedover diagonalt som fører inn i neste kjedeleddet.
Gjenta pkt 3-4
av dette trinnet så det er 8 kjedeledd
totalt (se nedenfor ).
Trinn 2
Fra og med skyggefargen (
# c27b17), fokus fargen på nedre venstre for hver av sirkulære kjedeledd.
Deretter fylle i den midtre delen av design med gyllen gul (# fbc423).
Til slutt trekke noen piksler i øvre høyre for hver kjede i kremgul (# f8dd92).
For papir kjeden er koblet til, vil du være å tegne et rektangel som mangler de beste hjørne piksler. Den totale størrelsen jeg brukte er 53 piksler BY 36 piksler
. Jeg fant det best å tegne rektangelet på en Nytt lag
, flytte kjedet til det øvre sentrum av rektangelet. Hullet i papiret er 4 piksler BY 5 piksler
.
"fold" i avisen er 6 piksler
oppover og innover til høyre. Slett hjørne piksler eller unødvendige piksler med Eraser Tool (E)
satt enten til Blyant
(standard børste på 1px
) eller Blokker product: ( Zoom (Z)
inn for å slette én eller noen få piksler på en gang).
Trinn 3
Slå sammen
kjedet lag på papirlaget. Bruk Paint Bucket Tool (G)
å fylle papir på med lys krem (# fefbd8).
igjen, og en mørkere krem farge (# f8de93).
Legg kjedet under lærreim i Layers
panel. Kjeden er ment å henge ut av stroppen er låsen.
4. Meny Elements
Trinn 1
Start med Pencil Tool, etter brun (# 6c0e04) som forgrunnsfarge, og 7 piksler ned
.
Den øverste linjen er 13 piksler over
, er 11 piksler tvers
, og den vertikale linjen som angir hansken sin mansjetten bunnlinjen er 7 piksler ned
.
For pekefingeren, legge 2 piksler
ned fra enden av den øverste linjen og 4 piksler
til Igjen. I sentrum av fingeren form nettopp opprettet, tegne 3 ekstra piksler ned
å lukke formen.
å definere to fingre inne i hansken (se nedenfor).
For tommelen, tegne en liten firkant 5 piksler
fra venstre som er BY 5 piksler
med hjørne piksler 2 piksler slettet.
Endelig skyggen under hånden er den samme brune fargen redusert til 50% Opacity
. Fyll hånden og mansjett med hvitt ved hjelp av Paint Bucket Tool
.
Trinn 2
å skrive ut tekst med liten skrift Vanlig, eller en annen liten pixel-vennlig skrift, på 10pt
størrelse. Hvert ord var en egen tekst lag. Sjekk ut deres innretting under.
Trinn 3
papiret og en halv av kjeden ved hjelp av Rectangular Marquee Tool (M)
. Forlenge midten av papir enten ved redrawing det eller Kopiere Hotell og Lime
deler av den allerede trukket papir for å fylle rommet. Den andre menyen er i hovedsak doble størrelsen på den første menyen.
5. Tegn Red Heart
Trinn 1
For hjertet, skape en Nytt lag Hotell og starte på utleid side av hjertet med 4 piksler
tvers
, i brunt.
Tegn en liten V-form består av 3 piksler
i sentrum og 4 piksler
over igjen å fullføre helt til toppen av hjertet.
Så kommer 2 piksler diagonalt
på hver side, gå ut og ned.
Legg til 5 piksler Anmeldelser på hver side går ned for de sidene av hjertet.
Tegn 6 diagonale piksler
vinklet mot midten av hjertet.
Fyll hjertet med 3 piksler
over
på bunnen av formen.
Start fylle hjertet på med mørk rød (# bb0708) i de indre hjørnene av toppen av formen.
Fortsett fôr hjertet langs høyre side og bunn.
Trinn 2
Fyll hjertet på med lyse rødt (# fa0000) og linje hjerte med et andre lag av medium rød (# e10507) (mellom lyse rødt og mørkerødt fra forrige trinn).
Start høydepunktene med lys rød (# fa6964) på venstre side av hjertet.
Tegn små sirkler i lys rød beveger seg mot venstre.
Ved hjelp av hvit, legge til et par hot spot piksler i sentrum (eller nær det) på høylys former (se nedenfor). Anmeldelser
6. Tegn Treasure Chest
Trinn 1
.
For venstre side av brystet, tegne en vertikal linje med Pencil Tool
bestående av 17 piksler
. Toppen starter med 2 piksler på tvers
, etterfulgt av 3 piksler
på neste linje opp, 19 piksler
på neste linje opp, 3 piksler
på neste linje ned, og 2 piksler
på neste linje ned.
Fullfør høyre side med 17 piksler
i en vertikal linje, som går nedover. Hopp hjørne piksler og koble til to sider med 30 piksler
over. For sentrum split, tegne 30 piksler
over på rad som er 8 piksler
ned fra toppen av sidelinjene.
over Hotell og 4 piksler ned
, møte på deres diagonaler. For starten på midten av låsen, Slett
1 pixel
på hver side av to.
av gult på hver side av brystet 3 piksler
i fra og høyre henholdsvis venstre. Bruk brun (# bb5f15) til bunnen av splitten i brystet, hopper gule piksler underveis.
linje i bunnen av brystet med den samme brune brukt tidligere. Fullfør brystet lås med 4
gylne gule piksler
på bunnen av låsen form og 6 brune piksler
under disse.
Trinn 2
Fyll i sentrum og toppen av brystet med lys brun (# fbc423) ved hjelp av Paint Bucket Tool
.
Fyll ut de sidene av brystet med samme lys brun.
Tegn en linje med brune piksler under splittelsen i brystet, samt i hjørnene på den øverste kanten.
Tegn medium brun (# a84913 ) loddrette linjer fra topp til midten av brystet. Linjen midt på kistebunnen med middels brune linjer med piksler også (merk både piler og pikslene de peker til for plassering).
7. Tegn Axe
Trinn 1
Draw 3 piksler på tvers
i medium grå (# 5c5c5c).
Kurven av venstre side av øksen er 5 piksler ned
, etterfulgt av 2 piksler ned
, deretter 2 piksler på tvers
, og 5 piksler over
. Mye av linjer og former innenfor dette ikonet er speilet, så det er fullt av gjentakelser.
grå (#afafaf), tegne en opp-ned L-form som består av 3 piksler tvers Anmeldelser og 5 piksler ned
starter på midten av den øverste linjen. Med mørk grå (# 333333), får vi en litt fancy i form, men det er 1 pixel
diagonalt og til høyre for bunnlinjen, 2 piksler
til venstre
, 2 flere piksler
opp
, og 1 pixel
til høyre diagonalt.
Fra hjørnet av grå L -form, tegne en diagonal linje av 4 piksler
. Koble mørkegrå piksler til den grå form med 3 piksler over Anmeldelser og 1 pixel diagonalt
.
på diagonalen i de to øverste og lengst til høyre bildepunkter (se nedenfor for nøyaktig plassering). Fortsett på med lys grå legge 1 pixel
til høyre for den grå og 2 ned
diagonalt.
For starten av øksen håndtak, tegne to diagonale linjer med 7 piksler
i brunt (# 6c0e04). Bruk white å legge noen høydepunkter til venstre side av øksen bladet.
vinkel.
Trinn 2
Fyll i sentrum av håndtaket med mellombrun (# 993511).
Fyll i resten av håndtaket med en enda lysere brun (# bb5f16). La oss arbeide på høyre side av øks. Rett over fra venstre side, tegne 3 piksler opp
, 5 piksler over
, 2 piksler på tvers plakater (på nivået under den siste), 2 piksler ned
, Hotell og 5 piksler ned
alt i grått. Med mørk grå, lukke figuren med 1 pixel
på diagonalen av siste lien trukket, to piksler opp
, og legge til 2 flere piksler
tvers
til venstre. Speil de to mørkegrå piksler som møtes i håndtaket midt (se nedenfor for nøyaktig plassering).
, 5 piksler over
, 1 pixel diagonalt
, og 3 piksler ned
. Deretter
tegne en diagonal linje av 4 piksler
i sentrum av øksen fulgt ved å plassere 3 piksler
av lys grå langs håndtaket side (se nedenfor).
Fyll i resten av øksen med lysere grå (hex kode i forrige trinn) og bruke hvit for høydepunkter.
For toppen av øks, bruk et utvalg av gull, brun og gule piksler (samme farger som brukes til skattekisten).
Gjenta på bunnen (i mer en lukket form enn det som er på toppen) med diverse gråtoner som brukes i øksebladet. Anmeldelser
8. Tegn Gold Coin
Trinn 1
og få din Pencil Tool
klar.
Tegn 7 piksler over
for den øverste kanten av mynten.
På hver side av den øverste linjen, vil du gå 2 piksler på tvers
, 1 pixel diagonalt plakater (ytre),
og 2 piksler ned
.
Sidene er 6 piksler ned
i denne designen og den nederste er en gjentakelse av den øverste halvdelen av piksler (jeg fant det enklest å bare Kopier
, Lim
, og
Vend vertikalt
, deretter Merge
myntens lineart lag). Anmeldelser
I hjørnene av sirkelens kurve, sted piksler i okergul (# bb6403).
Fortsett å bruke gul oker i å skape en mindre sirkel i midten av mynten. Hver side består av 5 piksler
i sentrum og 2 piksler
på hver side. Gjenta rundt for å lukke mindre sirkel.
i nedre midten av design.
Trinn 2
I midten av mynten er en stor bokstav G. Arbeide ut av 3 piksler
trukket i forrige trinn, fortsetter du med gul oker, mørk oker og brunt. Se under for nøyaktig plassering av hver farge. Formen består av 4 vertikale piksler
, 2 piksler
på hver side
, 5 piksler over
danner nedre kant
og 2 piksler opp
.
For den øverste kanten av G, tegne 4 piksler over Anmeldelser og 1 pixel
på diagonalen.
Fullfør
G med 3 piksler over
armen av brevet. Fyll den andre linjen mellom G med gylne gule piksler.
Bruk krem (# fff7b6) for høydepunkter i øverst til høyre på mynten design for å fullføre den.
Trinn 3
hånden ikonet og sørge for at det peker på ikonet som korresponderer med første menyen (i dette tilfellet "element" korresponderer med skattekisten).
8. Inventar nivåmålere
Trinn 1
Tegn en lang rektangel med Pencil Tool
i samme brune brukt til andre lineart elementer og dekker det meste av resten av UI sin plass. Hold det avrundet ved å slette hjørne piksler.
av 2 fra Golden gule piksler i hvert hjørne av det store rektangelet.
< li> Plasser en enkelt gul piksel i hvert hjørne. Bruk brun å tegne et mindre rektangel, og etterlater en linje 1 pixel
bredt på hver side.
.
Fyll i rammen med lys brun (# c45d12).
Bruk medium brun (# 9e3e14) for å legge til 2 piksler
på hver side av hvert hjørne av rammen design. Linjen nederst på innsiden av rammen med en tan farge (# cfa984).
rundt rammen.
Trinn 2
ramme design 3 ganger
. Velg en vilkårlig nivå for hver måler og fylle på med hvert element tilsvarende farge:
Red (# fe0211) for hjertet
Brown (# d47d1e) for skattekisten..
Gray (# B1B1B1) for øksen.
Gold (# ffc643) for mynten.
Trinn 3
Red Høydepunkt: # ff6563; Red Shadow: # bd0704
Brown Høydepunkt: # f4912c; Brown Shadow: # f4912c
Gray Høydepunkt: # dee4e0; Gray Shadow: # 5c5a5d
Gold Høydepunkt: # ffe33a; Gold Shadow: # d87e06
Well Done, Du
bakgrunnslaget i Layers
panel og stille opp nivåmålere på den måten som vist nedenfor. Push pixel art design ytterligere ved å lage en mock-up av spillet denne UI kommer fra, endre mengden av informasjon som vises, eller velge din egen farge for den generelle stykke. Vis oss din versjon, enten trofast mot denne opplæringen design eller din egen vri på konseptet, i kommentarfeltet nedenfor
Lag en isometrisk Pixel Art Character i Adobe Photoshop
Hva er greia med Pixel Art
Kandi Runner: Lag en Pixel Art Sprite fra Scratch