Create en Mobile Vær App Interface i Photoshop

Mobile app design er en av de raskest voksende felt i designbransjen. I denne opplæringen vil vi vise deg hvordan å designe en mobil app utforming grensesnitt ved hjelp av mange av verktøyene i Adobe Photoshop. Vi vil begynne med å vise deg hvordan du setter opp et rutenett og lage en enkel bakgrunn. Vi vil da vise deg hvordan du kan dra nytte av Fest til rutenett funksjonen og bruke grunnleggende maskering og vektor figurer for å lage et sett med flat ikoner. Til slutt vil vi bruke rektangelverktøyet, litt tekst, og grunnleggende blending og samkjøre teknikker for å skape de ekstra komponentene i en vær app grensesnitt. La oss komme i gang!

1. Opprett et nytt dokument & Oppsett et rutenett

Åpne Photoshop og trykke Kommando /Ctrl + N for å opprette et nytt dokument. Sett bredden på 640px og høyde på 1136px, angi resten av attributtene 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å Grid delen. Tast 5 i linjenettet Hver boks og en i Subdivision boksen. Sett også grid farge på # a7a7a7. Når du har satt alle disse egenskapene klikk OK. Ikke mist motet av alt som rutenett. Det vil lette arbeidet ditt, og du kan enkelt deaktivere /aktivere den ved hjelp av Kommando /Ctrl + " tastatursnarveien. Du bør også åpne infopanelet (Vindu > Info) for en live forhåndsvisning med størrelsen og plasseringen av figurer

2.. Endre fargen på bakgrunnen og Opprett værikonene

Trinn 1

Fokus på Lag-panelet (Vindu > Layers), hold Alt-tasten på tastaturet og bare dobbeltklikk på eksisterende " Bakgrunn
" Laget til unclock det. Sørg for at ditt lag forblir valgt og flytte til verktøylinjen. Klikk på forgrunnsfargen og erstatter de eksisterende fargeattributter med #BEBEBE. Grip Paint Bucket Tool og klikker inni lerret. Til slutt ting skal se ut i følgende bilde.

Trinn 2

Sett forgrunnsfargen på hvitt (#ffffff), plukke Avrundet rektangel Tool, fokus på den øverste linjen og sette Radius på 10px. Flytt til lerret og bare lage en 55 x 20px avrundet rektangel, Fest til rutenett vil lette arbeidet ditt. Sørg for at denne hvite formen forblir valgt, og bytt til Ellipse Tool. Sjekk knappen Legg fra toppen bar så bare legge en 30px sirkel som vist i det andre bildet. Sørg for at din hvite vektor form fortsetter å være aktiv og bruke Ellipse Tool, legge en 35px sirkel som vist int han tredje bilde. Til slutt, ved å bruke det samme verktøyet, tilsett 25px sirkel som vist i det fjerde bildet. Flytt til Lag-panelet, dobbeltklikk på vektorform gjort i dette trinnet og bare nevne det " cloudyIcon
".

Trinn 3

Ved hjelp av Ellipse Tool, lage en 25px sirkel. Sørg for at denne nye vektorform forblir valgt, fortsett med Ellipse Tool, sjekk knappen Legg fra topplinjen og bare legge en 5px sirkel som vist i det andre bildet. Bytt til Direct Selection Tool (eller Bane Selection Tool), hold Alt-tasten på tastaturet ditt, klikk inne som liten, 5px sirkel så bare dra den ned som vist i tredje bildet.

Trinn 4

Hold fokus på vektorform gjorde i forrige trinn og legge seks flere eksemplarer av at 5px sirkel som vist på følgende bilder. Når du er ferdig, gå til Lag-panelet og navn denne nye vektorform " sunnyIcon
".

Trinn 5

Marker på nytt din " cloudyIcon
" vektor form og kopiere det (Kommando /Ctrl + J). Velg denne kopien og dra det noen få piksler til høyre for å skille den fra den opprinnelige formen. Hold fokus på denne kopien og ta tak i Avrundet rektangel Tool. Kontroller at Radius er satt til 10px deretter opprette en 5 x 15px vektor form og legg den som vist i det andre bildet. Velg denne nye avrundet rektangel og trykke Kommando /Ctrl + T (eller gå til Rediger > Free Transform). Fokus på topplinjen, skriv en 30.00 grader vinkel og trykk på Enter. Til slutt ting skal se ut i det tredje bildet. Kontroller at Avrundet rektangel Tool er fortsatt aktiv, opprette en 5 x 25px vektor form og legg den som vist i fjerde bildet. Velg denne nye avrundet rektangel og roter den 30.00 grader som du gjorde med den forrige. Bruke Avrundet rektangel Tool, opprette en ny 5 x 15px vektor form, legg den som vist i den sjette bilde roter det 30.00 grader. Ved hjelp av det samme verktøyet, opprette en tredje 5 x 15px vektor form, legg den som vist i det åttende bildet roter det 30.00 grader. Til slutt thigs skal se ut i det niende bildet.

Trinn 6

Fokus på lagpanelet reeselect kopien av at " cloudyIcon
" vektor form sammen med de fire rotert avrundede rektangler og trykke Kommando /Ctrl + G for å Gruppe dem. Hold fokus på lagpanelet og slett kalle denne nye gruppen " rainyIcon
"

Trinn 7

Marker på nytt din " cloudyIcon
" vektor form og kopiere det (Kommando /Ctrl + J). Velg denne kopien og dra det noen få piksler til høyre for å skille den fra den opprinnelige formen. Hold fokus på denne kopien og ta tak i Direct Selection Tool. Velg de fire ankerpunktene fremhevet i det første bildet da bare trykke på knappen Slett fra ditt tastatur. Til slutt ting skal se ut i det andre bildet. Reselect yout " sunnyIcon
" vektor form og kopiere det (Kommando /Ctrl + J). Velg denne kopien og plassere den som vist i tredje bildet.

Trinn 8

Hold fokus på vektor former laget i forrige trinn. Flytt til Lag-panelet, holder Kommando /Ctrl-tasten på tastaturet og klikker på at kopi av " cloudyIcon
" vektor form å laste en markering rundt det. Sørg for at den holder seg aktiv og gå til Velg > Endre > Utvide. Skriv inn " 2 " i det nye vinduet, og klikk OK. Flytt til Lag-panelet velger kopien av " sunnyIcon
" vektor form, hold Alt-tasten på tastaturet og klikker på Legg til lagmaske knappen. Til slutt din maskert sol skal se ut i det tredje bildet. Hit Kommando /Ctrl + D for å bli kvitt det utvalget, gå til Lag-panelet, velger de to vektorform som utgjør denne nye ikonet og konsernet dem (Kommando /Ctrl + G). Hold fokus på lagpanelet og navn denne nye gruppen " mostlyCloudyIcon
".

Trinn 9

Marker på nytt din " cloudyIcon
" vektor form og kopiere det (Kommando /Ctrl + J). Velg denne kopien og dra det noen piksler til venstre for å skille den fra den opprinnelige formen. Sørg for at denne nye vektoren formen er valgt og traff Kommando /Ctrl + T (eller gå til Rediger > Free Transform). Fokus på den øverste linjen, sjekk mentain størrelsesforholdet knappen, skriv 50,00% i bredden (eller høyde) boksen og trykk Enter. Reselect yout " sunnyIcon
" vektor form og kopiere det (Kommando /Ctrl + J). Velg denne kopien og plassere den som vist i tredje bildet.

Trinn 10

Hold fokus på vektor former laget i forrige trinn. Flytt til Lag-panelet og legg en enkel markering rundt den lille skyen. Sørg for at den holder seg aktiv og gå til Velg > Endre > Utvide. Skriv inn " 2 " i det nye vinduet, og klikk OK. Flytt til Lag-panelet reselect kopien av at " sunnyIcon
" vektor form, hold Alt-tasten på tastaturet og klikker på Legg til lagmaske knappen. Til slutt din maskert sol skal se ut i det tredje bildet. Bli kvitt det utvalget (Kommando /Ctrl + D), gå til Lag-panelet, velger de to vektorform som utgjør denne nye ikonet og konsernet dem (Kommando /Ctrl + G). Hold fokus på lagpanelet og kalle denne nye gruppen " mostlySunnyIcon
".

3. Opprett 7 Days Værmelding Side av App

Trinn 1

For de neste trinnene du trenger et rutenett hver 10px, så bare gå til Edit> Preferences> Guides, Grid &Slices og skriv 10 i linjenettet Hver boks. Sett forgrunnsfargen på # 00aeef, plukke rektangelverktøyet, lage en 640 x 100 piksler vektor form og plassere det nøyaktig som vist i følgende bilde. Rutenettet og snap til rutenett skal lette arbeidet ditt.

Trinn 2

Sett forgrunnsfargen på # FF0000, plukke rektangelverktøyet, opprette en 80px torg og plasser det nøyaktig som vist i følgende bilde.

Trinn 3

Fokus på Lag-panelet, og velg den blå firkant og den røde firkanten. Flytt til lerretet, ta tak i Move Tool (V), hold nede Alt og Shift-tastene på tastaturet så bare klikke og dra de valgte vektorfigurer 100px opp. Gå tilbake til Lag-panelet, fokus på kopien av det blå firkant og bare erstatte den blå med # 8dc63f. Til slutt ting skal se ut i følgende bilde.

Trinn 4

Multipliser de blå, grønne og røde vektorfigurer og spre kopiene som vist i følgende bilde. Dra full nytte av Fest til rutenett funksjon og sørg for at du unngå overlapping eller hull.

Trinn 5

Fokus på toppen, rød firkant. Velg " mostlySunnyIcon
" gruppe og plassere den omtrent som vist i det første bildet. Flytt til Lag-panelet, legger en markering rundt det røde firkanten og sørge for at " mostlySunnyIcon
" Konsernet er fortsatt valgt. Grab Move Tool (V), fokus på den øverste linjen og klikker på Juster vertikale sentre og Juster horisontale sentre knapper. Til slutt din " mostlySunnyIcon
" grupper bør plasseres i sentrum av den røde firkanten som vist i tredje bildet. Ikke glem å bli kvitt det utvalget (Kommando /Ctrl + D).

Trinn 6

Velg resten av ikonene én etter én og bruke teknikker som er nevnt i forrige trinn å justere dem, som vist i følgende bilde.

Trinn 7

Fokus på lagpanelet velger du alle røde firkanter og bare trykke på slettetasten på tastaturet for å fjerne dem. Neste, må du endre fargene som brukes for de grønne og blå rektangler. I utgangspunktet vil vi knytte en farge med hvert ikon. Fokus på rektangelet som ligger bak " sunnyIcon
" vektor form og erstatte den eksisterende farge med # ffbc53. Flytt til rektanglene som ligger bak din " mostlySunnyIcon
" gruppe og erstatte den eksisterende farge med # ffda71. Fortsett med rektanglene som ligger bak " mostlyCloudyIcon
" gruppe og erstatte de eksisterende fargene med # c9caa3. Flytt til rektangelet som ligger bak " cloudyIcon
" vektor form og erstatte den eksisterende farge med #bccccc. Til slutt velger rektangelet som ligger bak " rainyIcon
" gruppe og erstatte den eksisterende farge med # a8b8b8.

Trinn 8

Sett forgrunnsfargen til svart (# 000000), plukke rektangelverktøyet, lage en 110 x 700px vektor form og plassere den som vist i det første bildet. Sørg for at denne svarte rektangelet forblir valgt, fokus på Lag-panelet, og senk Opacity til 3%.

Trinn 9

Sett forgrunnsfargen til hvit, plukke rektangelverktøyet, opprette en ny 110 x 700px vektor form og legg den som vist i det første bildet. Sørg for at denne hvite rektangelet forblir valgt, fokus på Lag-panelet, og senk Opacity til 7%.

Trinn 10

For de følgende trinnene vil du trenge et rutenett hver 5px, så bare gå til Edit> Preferences> Guides, Grid &Slices og skriv 5 i linjenettet Hver boks. Fokus på venstre side av toppen, gult rektangel og plukke den Horisontal Type Tool (T). Bare klikk på lerret og legger til " Tirsdag
" tekstdel. Sørg for at denne nye stykke tekst forblir valgt og åpne Tegn-panelet (Vindu > Character). Plukk Calibri font, sette stil på Fet størrelsen på 35pt og fargen på hvitt. Komme tilbake til lerretet og sørg for at din del av teksten er plassert som vist i det første bildet. Gå tilbake til Lag-panelet, og dobbeltklikk på din del av teksten for å åpne Lagstil vinduet. Sjekk Drop Shadow boksen angir egenskapene som vises i følgende bilde og klikk på OK. Hold fokus på Lag-panelet, høyreklikk på din del av teksten og gå til Copy Layer stil. Vi vil bruke disse lagstilen attributter for teksten som vil bli lagt til senere.

Trinn 11

Kontroller at Horizontal Type Tool er fortsatt aktiv, legge de resterende dag navnene som vist i følgende bilde og bruker samme tegnattributter. Sørg for at disse nye biter av tekst er valgt, fokus på Lag-panelet, høyreklikker du på en av disse tekstene og bare gå til Paste Layer stil.

Step 12

Kontroller at Horizontal Type Tool er fortsatt aktiv, legge temperaturverdiene som vist i følgende bilde og bruk samme Character attributten brukt for dagen navnene. Også legge lagstilen attributtene som bruker den samme Paste Layer stil alternativet.

Step 13

Kontroller at Horizontal Type Tool er fortsatt aktiv og legg til " hi
" og " lo
" biter av tekst, som vist i følgende bilde. Bruk samme skrifttype, stil og farge, men redusere størrelsen til 14 pkt. Velg alle disse delene av teksten og legge den subtile Layer stil attributter ved hjelp av Paste Layer stil alternativet.

Step 14

For de følgende trinnene vil du trenge et rutenett hver 1px, så bare gå til Edit> Preferences> Guides, Grid &Slices og skriv en i linjenettet Hver boks. Sett forgrunnsfargen til hvit, plukke Ellipse Tool og skape en 20px sirkel. Sørg for at denne nye vektorform forblir valgt, og bytt til rektangelverktøyet. Sjekk Trekk knappen fra toppen bar så bare tegne en 10 x 7px rektangel som vist i det andre bildet. Grab Slett Anchor Point Tool og klikk på ankerpunktet markert i det andre bildet for enkelt å fjerne det. Plukk Direct Selection Tool, velger ankerpunkt markert i tredje bildet og bare dra det 5PX til høyre. Til slutt ting skal se ut i det fjerde bildet. Flytt til Lag-panelet finner vektoren formen gjort i dette trinnet og name it " arrow
".

Step 15

Marker på nytt din " pilen
" vektor form, legg den som vist i følgende deretter fokusere på Lag-panelet. Først endre Blending Mode til Soft Light senk Opacity til 75%.

Step 16

Multiply (Kommando /Ctrl + J) på " pilen
" vektor form og spre kopiene, som vist i følgende bilde.

4.Create Today Værmelding Side of the App

Trinn 1

For de neste trinnene du trenger et rutenett hver 10px, så bare gå til Edit> Preferences > Guides, Grid &Slices og skriv 10 i linjenettet Hver boks. Sett forgrunnsfargen på # ffbc53, plukke rektangelverktøyet, opprette en 320 x 400 piksler vektor form og legg den som vist i følgende bilde.

Trinn 2

Sett forgrunnsfargen på # ffda71, plukke rektangelverktøyet, opprette en 320 x 100 piksler vektor form og legg den som vist i følgende bilde. Sett forgrunnsfargen på # ffbc53, opprette en ny 320 x 100 piksler vektor form og legg den som vist i følgende bilde. Sett forgrunnsfargen på # c9caa3, opprette en tredje 320 x 100 piksler vektor form og legg den som vist i følgende bilde. Sett forgrunnsfargen på # a3d1ff, lage en fjerde 320 x 100 piksler vektor form og legg den som vist i følgende bilde.

Trinn 3

Fokus på Lag-panelet og åpne Lagstil vinduet for den gule vektorform gjorde i forrige trinn. Aktiver Indre skygge, skriv egenskapene som vises i følgende bilde og klikk på OK. Fokus på Lag-panelet, hold Alt-tasten på tastaturet ditt, klikk på den lille fx ikonet som står for gul rektangel, bare dra det til den khaki rektangel og slipper museknappen. Gjenta denne teknikken for den grå rektangelet. Til slutt ting skal se ut i det andre bildet.

Trinn 4

For de neste trinnene du trenger et rutenett hver 5px, så bare gå til Edit> Preferences> Guides, Grid &skiver og skriv 5 i linjenettet Hver boks. Bruke Horizontal Type Tool, legger " Morning
", " Afternoon
", " Evening
" og " Night
" biter av tekst og plassere dem som vist i følgende bilde. Bruk Calibri font, sette stil på Fet, størrelsen på 30pt og hvit farge. Kontroller at alle fire biter av tekst er valgt og gå til Paste Layer stil.

Trinn 5

Kontroller at Horizontal Type Tool er fortsatt aktiv, legge temperaturverdiene og bruk samme tegn attributter som brukes for teksten. Velg alle disse tallene og gå til Paste Layer stil

Trinn 6

Kontroller at Horizontal Type Tool er fortsatt aktiv og legg til ". hi
" og " lo
" biter av tekst, som vist i følgende bilde. Bruk samme skrifttype, stil og farge, men redusere størrelsen til 14 pkt. Velg alle disse delene av teksten og gå til Paste Layer stil.

Trinn 7

Fokus på Lag-panelet reselect din " sunnyIcon
" vektor form og kopiere det (Kommando /Ctrl + J). Velg denne kopien, plasser den som vist i det første bildet, og trykke Kommando /Ctrl + T. Fokus på den øverste linjen, sjekk mentain størrelsesforholdet knappen, skriv 200.00% i bredden (eller høyde) boksen og trykk Enter. Til slutt ting skal se ut i det andre bildet.

Trinn 8

Bruke Horizontal Type Tool og " Melbourne, etter ", " Australia
", " Sunny
" og " 25 ° C
" biter av tekst. Bruk Character attributter vise under og plassere dem omtrent som vist i følgende bilde. Når du er ferdig, reselect alle disse delene av teksten og gå til Paste Layer stil.

Trinn 9

Fokus på Lag-panelet reselect en av dine " pilen
" vektor former og kopiere den (Kommando /Ctrl + J). Velg denne kopien og plassere den som vist i følgende bilde.

5. Lag bunnen Mørk Bar

Trinn 1

For de siste trinnene du trenger et rutenett hver 1px, så bare gå til Edit> Preferences> Guides, Grid &Slices og skriv en i linjenettet Hver boks. Sett forgrunnsfargen på # 323232, plukke rektangelverktøyet, lage en 640 x 32px vektor form og legg den som vist i følgende bilde.

Trinn 2

Bruke Horizontal Type Tool, legger " Daglig Værmelding Brakt til deg av: Lorem Ipsum Bureau of Meteorology
" tekstdel og plassere den som vist i det første bildet. Bruk Calibri font deretter sette størrelsen på 15pt og fargen på # 505050. Gå tilbake til Lag-panelet og åpne Lagstil vinduet for denne mørke stykke tekst. Sjekk Drop Shadow boksen angir egenskapene som vises i følgende bilde, klikker du OK og du er ferdig.

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.