Create en mobil Checkers spillet grensesnittet i Photoshop

I denne opplæringen vil jeg vise deg hvordan du kan lage et grensesnitt for en mobil dam spillet i Photoshop. Jeg vil begynne med å vise deg hvordan du setter opp et enkelt rutenett. Deretter vil jeg forklare hvordan du oppretter de viktigste komponentene i grensesnittet ved hjelp av vektorfigurer og Photoshop Fest til rutenett funksjonalitet. Til slutt vil jeg vise deg hvordan du legger til skyggelegging, høydepunkter, og tekstur ved hjelp av Layer Styles. La oss komme i gang!

1. Opprett et nytt dokument & Oppsett et rutenett

Åpne Photoshop og traff Kommando /Ctrl-N for å opprette et nytt dokument. Skriv inn alle dataene vist i følgende bilde og klikk på OK. Aktiver Grid (View > Show > Grid) og Fest til rutenett (View > Fest til > Grid). For det første trenger du et rutenett hver 5px, så bare gå til Rediger > Preferanser > Guides, Grid & Skiver og fokus på seksjonen Grid. Tast 5 i linjenettet Hver boks og en i Subdivision boksen. Sett også fargen på rutenettet til # a7a7a7. Når du har satt alle disse egenskapene klikk på OK. Ikke mist motet av alle de nett. Det vil lette arbeidet senere. Du bør også åpne infopanelet (Vindu > Info) for en live forhåndsvisning med størrelsen og plasseringen av figurer. Du vil ikke alltid trenger gird, så husk at du enkelt kan deaktivere /aktivere den ved hjelp Kommando /Ctrl hurtigtast.

2. Bakgrunn og First To Tre former

Trinn 1

Velg den rektangelverktøyet (M) og fokus på kontrollpanelet. Sett fyllfarge på # 925016 deretter klikker du bare på lerretet. Skriv inn 640 i boksen Bredde og 1136 i Høyde boksen så bare OK for å opprette din brun vektor form. Flytt til Lag-panelet, er det bare å dobbeltklikke på navnet på denne formen og endre navnet bakgrunn.

Trinn 2

Hit Kommando /Ctrl-A for å laste inn en markering rundt hele lerretet. Sørg for at din brun vektorform er valgt, ta tak i Selection Tool (V) og bare klikk på Juster Vertikale Centers og Juster Horisontal Centers fra kontrollpanelet. Til slutt vektoren form bør dekke hele lerretet, som vist i det andre bildet. Når det ikke treffer Kommando /Ctrl-D for å kvitte seg med det valget.

Trinn 3

Sørg for at rutenettet er aktivert og plukke den rektangelverktøyet. Sett fyllfarge på # e2a066, lage en 15 x 940px rektangel og plassere det nøyaktig som vist i følgende bilde. Rutenettet og Fest til rutenett funksjonen bør lette arbeidet ditt.

Trinn 4

Fokus på Lag-panelet (Vindu > Layers) og bare dobbeltklikk på den tynne vektor form laget i forrige trinn for å åpne Lagstil vinduet. Sjekk mønster Overlay, og angi egenskapene som vises i følgende bilde. Her kan du laste ned mønsteret som brukes for denne stilen. Sørg for at din tynn vektor formen er fortsatt valgt og kopiere den ved hjelp Kommando /Ctrl-J hurtigtast. Velg kopiere, dra den til høyre og plassere den som vist i det andre bildet. Nok en gang, vil rutenettet og Fest til rutenett funksjonen komme til nytte.

3. Lag den siden av brettet

Trinn 1

Velg den rektangelverktøyet, sett fyllfargen på # e2a066, opprette en 610 x 20 piksler vektor form og legg den som vist i det første bildet. Åpne Lagstil vinduet for denne nye formen, aktivere Gradient Overlay og angi egenskapene som vises i følgende bilde (husk at den hvite nummeret står for Location prosent). Flytt til Lag-panelet, er det bare å dobbeltklikke på navnet på denne nye vektorform og endre navnet underside.

Trinn 2

Fokus på Lag-panelet, må du sørge for at din underside vektor formen er fortsatt valgt og kopiere den (Kommando /Ctrl-J). Høyreklikk på denne friske kopien og gå til Clear Layer stil å fjerne de eksisterende Layer stil attributter. Sørg for at denne kopien forblir valgt, senke Fyll til 0% deretter åpne Layers stil vinduet. Aktiver Pattern Overlay og bare skriv egenskapene som vises i følgende bilde.

Trinn 3

Velg den rektangelverktøyet, sørg for at fyllfargen er satt til # e2a066, opprette en 610 x 35px vektor form og legg den som vist i det første bildet. Åpne Lagstil vinduet for denne nye formen, aktivere Gradient Overlay og angi egenskapene som vises i følgende bilde. Flytt til Lag-panelet, og bare endre navn på denne nye vektorform topside.

Trinn 4

Fokus på Lag-panelet, må du kontrollere at topside vektor formen er fortsatt valgt og kopiere den (Kommando /Ctrl-J). Høyreklikk på denne friske kopien og gå til Clear Layer Style. Sørg for at denne kopien forblir valgt, senke Fyll til 0% deretter åpne Layers stil vinduet. Aktiver Pattern Overlay og bare skriv egenskapene som vises i følgende bilde.

Trinn 5

Deaktiver Grid (View > Show > Grid) og aktivere Pixel Grid (View > Show > Pixel Grid). Plukk rektangelverktøyet, sett fyllfargen på # ba4715, lage en 1 x 35px vektor form og legg den som vist i det første bildet. Kontroller at rektangelverktøyet er fortsatt aktiv, sett fyllfargen på # e0965f, lage en ny 1 x 35px vektor form og legg den som vist i det andre bildet.

Trinn 6

Marker på nytt både vektorfigurer laget i forrige trinn og konsern dem (Kommando /Ctrl-G). Flytt til Lag-panelet, dobbeltklikk på navnet til denne friske gruppen og endre navnet separatorLong. Kopiere den (Kommando /Ctrl-J), velge kopi og dra det flere piksler til venstre som vist i det andre bildet. Sørg for at din gruppe kopien er fortsatt valgt og gå til Rediger > Transform > Vend vannrett. Dra denne venda kopi til venstre og plasser den som vist i fjerde bildet.

Trinn 7

Velg den rektangelverktøyet, sett fyllfargen på # ba4715, lage en 1 x 20px vektor form og legg den som vist i det første bildet. Kontroller at rektangelverktøyet er fortsatt aktiv, sett fyllfargen på # e0965f, skape et sekund, 1 x 20px vektor form og legg den som vist i det andre bildet.

Trinn 8

Marker på nytt både vektorfigurer laget i forrige trinn og konsern dem (Kommando /Ctrl-G). Flytt til Lag-panelet, dobbeltklikk på navnet til denne friske gruppen og endre navnet separatorShort. Kopiere den (Kommando /Ctrl-J), velge kopi, snu den horisontalt (Edit > Transform > Vend vannrett), drar den til venstre og plasser den som vist i det andre bildet.

Trinn 9

Deaktiver Pixel Grid (View > Show > Pixel Grid) og aktivere Grid (View > Show > Grid). Plukk rektangelverktøyet, sett fyllfargen på # ba783e, opprette en 610 x 110px vektor form og legg den som vist i det første bildet. Åpne Lagstil vinduet for denne nye formen, aktivere Pattern Overlay og bare skriv egenskapene som vises i følgende bilde. Flytt til Lag-panelet og bare endre navnet på denne nye vektorform middleSide.

Trinn 10

Fokus på Lag-panelet, må du kontrollere at middleSide vektor formen er fortsatt valgt og kopiere den (Kommando /Ctrl-J). Tømme Layer stil attributter som brukes for denne kopien, sørg for at det forblir valgt, senke Fyll til 0% deretter åpne Layers stil vinduet. Aktiver Indre skygge, den indre glød, Ytre glød og Skygge så bare skriv egenskapene som vises i følgende bilder. Gå tilbake til Lag-panelet og endre navn på kopien gjort i dette trinnet middleSideFront.

Trinn 11

Velg den rektangelverktøyet, sett fyllfargen på hvit (# ffffff), lage en 10 x 110px vektor form og legg den som vist i det første bildet. Fokus på høyre side av denne nye formen, sørg for at det forblir valgt, og bytt til Direct Selection Tool (A). Velg den øverste ankerpunktet og dra det 5PX ned og deretter velge nederste festepunktet og dra det 10px opp. Til slutt ting skal se ut i det andre bildet. Åpne Layers stil vindu for hvit vektor form, aktivere Indre skygge og Gradient Overlay deretter inn egenskapene som vises i følgende bilder. Pass på at du lagrer gradient brukes til Gradient Overlay. Bare klikk på Ny-knappen og din gradient vises i Presets-vinduet.

Trinn 12

Velg den rektangelverktøyet, sørg for at fyllfargen er satt til hvit, lage en 10 x 110px vektor form og legg den som vist i det første bildet. Fokus på venstre side av denne nye formen, sørg for at det forblir valgt, og bytt til Direct Selection Tool (A). Velg den øverste ankerpunktet og dra det 5PX ned og deretter velge nederste festepunktet og dra det 10px opp. Til slutt ting skal se ut i det andre bildet. Åpne Layers stil vindu for hvit vektor form, aktivere Indre skygge og Gradient Overlay deretter inn egenskapene som vises i følgende bilder. For Gradient Overlay bruke lagret gradient.

Step 13

Velg den rektangelverktøyet, sett fyllfargen på svart (# 000000), opprette en 610 x 10px vektor form og legg den som vist i det første bildet. Fokus på oversiden av denne nye formen, sørg for at det forblir valgt, og bytt til Direct Selection Tool (A). Velg den venstre ankerpunktet og dra det 10px til høyre og deretter velge riktig ankerpunktet og dra det 10px til venstre. Til slutt ting skal se ut i det andre bildet. Åpne Layers stil vindu for svart vektor form, aktivere Gradient Overlay deretter inn egenskapene som vises i følgende bilder. Igjen, bruke den lagrede gradient.

Trinn 14

Velg den rektangelverktøyet, sørg for at fyllfargen er satt til svart, opprette en 610 x 5px vektor form og legg den som vist i det første bildet. Fokus på undersiden av denne nye formen, sørg for at det forblir valgt, og bytt til Direct Selection Tool (A). Velg den venstre ankerpunktet og dra det 10px til høyre og deretter velge riktig ankerpunktet og dra det 10px til venstre. Til slutt ting skal se ut i det andre bildet. Åpne Lagstil vindu for svart vektor form, aktivere Gradient Overlay deretter inn egenskapene som vises i følgende bilder.

4.Create toppen Wooden side av brettet

Trinn 1

Fokus på Lag-panelet, reselect dine underside, topside, middleSide, middleSideFront vektorfigurer og fire separator grupper sammen med de fire svarte og hvite vektorfigurer og konsernet dem (Kommando /Ctrl-G). Hold fokus på Lag-panelet og endre navn på denne nye gruppen Bottom. Duplisere Bottom gruppe (Kommando /Ctrl-J), velge kopi, dra den opp og legg den som vist i det andre bildet. Kontroller at kopien er fortsatt valgt og gå til Rediger > Transform > Vend vannrett. Til slutt ting skal se ut i det tredje bildet. Gå tilbake til Lag-panelet og bare endre navnet ditt snudd gruppe kopi Top.

Trinn 2

Fokus på Lag-panelet og åpne Top gruppe. Åpne Lagstil vinduet for eksisterende topside vektorform og slett inverse Angle brukt for det Gradient Overlay.

Trinn 3

Hold fokus på Top gruppe. Åpne Lagstil vinduet for eksisterende middleSideFront vektorform og slett inverse Vinkel brukes til Indre skygge og Skygge.

Trinn 4

Hold fokus på Top gruppe. Åpne Lagstil vindu for de to, hvite vektorfigurer og slett inverse Vinkel brukes til Indre skygge.

Trinn 5

Hold fokus på Top gruppe. Åpne Lagstil vindu for de to, svarte vektorfigurer og slett inverse Vinkel brukes til Gradient Overlay.

5. Lag den svarte og hvite firkanter

Trinn 1

Velg den rektangelverktøyet, angi fyllfargen på # e7d2bd, skape en 610px torg og plasser den som vist i det første bildet. Åpne Lagstil vinduet for ny vektor form og angi egenskapene som vises i følgende bilder.

Trinn 2

Velg den rektangelverktøyet, sett fyllfargen på # fff0db, skape en 75px torg og plasser den som vist i det første bildet.

Trinn 3

Multiply (Kommando /Ctrl-J) dine 75px torg og spre kopier som vist i følgende bilde. Flytt til Lag-panelet, velger du alle seksten kvadrater, høyreklikker du på en av disse vektorfigurer og bare gå til Merge figurer. Hold fokus på Lag-panelet og endre navn på vektorform gjort i dette trinnet whiteSquares.

Trinn 4

Duplicate din whiteSquares vektor form (Kommando /Ctrl-J). Fokus på denne kopi, gi den blackSquares og erstatte den eksisterende fyllfarge (# fff0db) med # 282823. Sørg for at din blackSquares vektorform er valgt og bare gå til Rediger > Transform > Roter 90 ° CW.

Trinn 5

Åpne stil vinduet Layer for whiteSquares vektor form, aktiverer indre glød og angi egenskapene som vises i følgende bilde.

Trinn 6

Åpne stil vinduet Layer for blackSquares vektor form, aktiverer indre glød og angi egenskapene som vises i følgende bilde.

6. Legg Subtle Shading og høydepunkter for Board Din

Trinn 1

Velg den rektangelverktøyet, sett fyllfargen på hvitt # 000000, opprette en 640 x 940px vektor form og legg den som vist i første bildet.

Trinn 2

Duplicate (Kommando /Ctrl-J) black vector formen gjort i forrige trinn. Velg denne kopien og dra den i bunnen av Lag-panelet, rett ovenfor bakgrunn vektor form. Hold fokus på Lag-panelet og endre navn på vektorform gjort i dette trinnet skygge. Åpne stil vinduet Layer for din skygge vektor form, aktivere Ytre glød og angi egenskapene som vises i følgende bilde.

Trinn 3

Få tilbake til fronten, svart vektor form. Senke Fyll til 0% deretter åpne Lagstil vinduet, aktiverer indre glød og angi egenskapene som vises i følgende bilde.

Trinn 4

Velg den rektangelverktøyet, sett fyllfargen på # 000000, opprette en 640 x 5px vektor form og legg den som vist i det første bildet. Pass på at dette tynne rektangel forblir valgt, fokus på Lag-panelet og senke Opacity til 10%.

Trinn 5

Velg den rektangelverktøyet, sørg for at fyllfargen er satt til # 000000, opprette en ny 640 x 5px vektor form og legg den som vist i det første bildet. Sørg for at denne nye rektangelet forblir valgt, fokus på Lag-panelet og senke Opacity til 10%.

7. Opprett Checkers Pieces

Trinn 1

Velg den Ellipse Tool, satt fyllfargen på # d11812, opprette en 55 piksler sirkel og legg den som vist i det første bildet. Åpne Lagstil vinduet for ny vektor form og angi egenskapene som vises i følgende bilder.

Trinn 2

Velg den Ellipse Tool, satt fyllfargen på # bd0400, opprette en ny, 55 piksler sirkel og plasser den som vist i det første bildet. Sørg for at denne nye vektor form og Ellipse Tool forblir valgt, hold Alt-knappen på tastaturet og bare trekke en 45 piksler sirkel som vist i det andre bildet. Åpne Lagstil vindu for den resulterende vektor form og angi egenskapene som vises i følgende bilder.

Trinn 3

Deaktiver Grid (View > Show > Grid) og aktivere Pixel Grid (View > Show > Pixel Grid). Plukk Ellipse Tool, sørg for at fyllfargen er satt til # bd0400, skape en 41px sirkel og legg den som vist i det første bildet. Sørg for at denne nye vektor form og Ellipse Tool forblir valgt, hold Alt-knappen på tastaturet og bare trekke en 37px sirkel som vist i det andre bildet. Åpne Lagstil vindu for den resulterende vektor form og angi egenskapene som vises i følgende bilder. Gå tilbake til Lag-panelet, høyreklikker du på vektorform laget i dette trinnet og bare gå å kopiere Layer Style.

Trinn 4

Velg den Ellipse Tool, sørg for at fyllfargen er satt på # bd0400, skape en 33px sirkel og legg den som vist i det første bildet. Sørg for at denne nye vektor form og Ellipse Tool forblir valgt, hold Alt-knappen på tastaturet og bare trekke en 29px sirkel som vist i det andre bildet. Flytt til Lag-panelet, høyreklikk på denne nye vektor form og bare gå til Lim Layer Style.

Trinn 5

Velg den Ellipse Tool, sørg for at fyllfargen er satt til # bd0400, skape en 25px sirkel og legg den som vist i det første bildet. Sørg for at denne nye vektor form og Ellipse Tool forblir valgt, hold Alt-knappen på tastaturet og bare trekke en 21px sirkel som vist i det andre bildet. Flytt til Lag-panelet, høyreklikk på denne nye vektor form og bare gå til Lim Layer Style.

Trinn 6

Velg den Ellipse Tool, sørg for at fyllfargen er satt til # bd0400, skape en 17px sirkel og legg den som vist i det første bildet. Sørg for at denne nye vektor form og Ellipse Tool forblir valgt, hold Alt-knappen på tastaturet og bare trekke en 13 piksler sirkel som vist i det andre bildet. Flytt til Lag-panelet, høyreklikk på denne nye vektor form og bare gå til Lim Layer Style.

Trinn 7

Velg den Ellipse Tool, satt fyllfargen på # bd0400, skape en 7px sirkel og legg den som vist i det første bildet. Åpne Lagstil vinduet for ny vektor form og angi egenskapene som vises i følgende Images
Trinn 8

Deaktiver Pixel Grid (View > Show > Pixel Grid). Og aktiver Grid (View > Show > Grid). Reselect alle figurene som utgjør brikker brikke og konsernet dem (Kommando /Ctrl-G). Flytt til Lag-panelet og endre navn på denne nye gruppen redPiece. Kopiere den (Kommando /Ctrl-J), velge kopi og drar det flere piksler ned og til høyre. Gå tilbake til Lag-panelet, endre navn på denne gruppen kopi blackPiece og åpne den. Velg de vektorfigurer én etter én, og bare erstatte de eksisterende fylle farger med # 1e1e1e.

Trinn 9

Multipliser din redPiece og blackPiece grupper og spre kopier omtrent som vist i følgende bilde. Velg en av bitene fra utenfor brettet og traff Kommando /Ctrl-T. Hold Shift og bare gjøre din del 50 piksler bredt. Gjenta disse enkle teknikker for de andre brikkene fra utenfor brettet. Til slutt, fokus på Lag-panelet, drar de røde brikkene brikkene fra utenfor brettet mellom middleSide og middleSideFront vektorfigurer fra din Top gruppe og de svarte brikkene brikkene fra utenfor brettet mellom middleSide og middleSideFront vektorfigurer fra bunn gruppe .

Trinn 10

Marker på nytt en av dine redPiece og blackPiece grupper og kopiere dem (Kommando /Ctrl-J). Endre størrelsen på disse to kopier og plassere dem som vist i følgende bilde.

8. Opprett Knapper og målprotokollen

Trinn 1

Velg den Avrundet rektangelverktøyet, sett fyllfargen på # b06e34 og radiusen på 5px. Lag to, 155 x 55 piksler avrundede rektangler og to, 55 piksler avrundede firkanter. Plasser disse vektorfigurer som vist i det første bildet og åpne Lagstil vinduet og skriv egenskapene som vises i følgende bilder.

Trinn 2

Velg tekstverktøyet, klikker du bare på lerret, legger PLAYER en del av teksten og plassere den som vist i det første bildet. Prøv Tidal font, angi størrelsen på 35pt og fargen på # 6e2e0d. Ved hjelp av det samme verktøyet og tekstattributter legge de tre andre stykke tekst som vises i det første bildet. Fokus på Lag-panelet, åpner Lagstil vindu for de delene av teksten lagt i dette trinnet og legge egenskapene som vises i følgende bilder.

Trinn 3

Velg den Avrundet rektangel Tool og sørge for at fyllfargen er fortsatt satt på # b06e34 og radiusen på 5px. Lag en 100 x 55 piksler avrundet rektangel, en 200 x 55 piksler avrundet rektangel, en 120 x 55 piksler avrundet rektangel og en 145 x 55 px avrundet rektangel og plassere dem som vist i det første bildet. Kopier lag stil attributter som brukes for de andre fire avrundet rektangel og lime dem inn i disse nye vektorfigurer. Til slutt ting skal se ut i det andre bildet.

Trinn 4

Bruk tekstverktøyet legge til noen nye stykke tekst og plassere dem som vist i følgende bilde. Plukk de samme fonter og farger som du brukte for andre deler av teksten. Kopier lag stil attributter som brukes for de beste bitene av tekst og lime dem inn i disse nye biter av tekst. Til slutt ting skal se ut i det andre bildet.

9. Legg et enkelt mønster for bakgrunns Shape

Trinn 1

Til slutt åpner Lagstil vinduet for din bakgrunn vektor form, aktivere Pattern Overlay og angi egenskapene som vises i følgende bilde.

Trinn 2

Du kan også prøve denne skinnmønster i stedet for tre mønster.

Gratulerer! Du er ferdig!

Her er hvordan det skal se ut. Jeg håper du har hatt glede av denne opplæringen, og kan bruke disse teknikkene i din fremtidige prosjekter.

Her er hvordan det bør se på en skjerm.