Share
Dette er det andre i en todelt opplæringsserie om å designe en iPhone-bankapplikasjon. I denne delen av serien skal vi utforme hovedoppsettet / innholdet på hver av disse sidene: menyen / hjemmesiden, setningssiden og tilleggsskjermer. Savnet del ett? Bli raskere ved å lese den her.
Følg av hvorfra vi sluttet, velg Rektangulært markeringsverktøy. Fra verktøylinjens overhead velger du fast størrelse fra rullegardinmenyen og bruker innstillingene 50 x 50 piksler. Klikk et sted på lerretet ditt for å lage et 50 x 50 pikselvalg. Dra valget ditt opp til kanten av lerretet ditt, og dra en veiledning fra linjalen din (Vis> Linjal) og klikk den opp mot valget ditt. Gjenta prosessen til du har to guider på hver side av lerretet ditt.
Sett en guide i midten av lerretet ditt - du bør kunne få det automatisk til å få det til.
Nå dra ut guider og gjør dem sentrale mellom de to vi allerede har laget, som nedenfor:
Vi har nå et veldig enkelt rutenett klar til å plassere vårt ikon / knapper når vi har designet dem. Velg Rektangulær markørverktøy og stilmenyen, velg normal i stedet for fast størrelse. Dra ut en firkant (hold Shift-Key for å holde den kvadret) i mellom våre venstre guider. Fyll den med svart.
Gjenta prosessen to ganger, sørg for å fylle ut hver form på et nytt lag.
Dupliser alle tre lagene og plasser dem 50 piksler under dine tidligere figurer.
Ved hjelp av Rectangular Marquee Tool, opprett en solid svart blokk nederst på menyskjermbildet og gi nytt navn til laget til «annonse».
Med hovedstrukturen på startskjermbildet er det på tide å begynne å legge til alle de små detaljene som gjør at designet kommer til liv. Cmd + Click (Ctrl + Click on Windows) på de første ikonene laget miniatyrbildet for å velge det på nytt. Gå til Velg> Endre> Glatt og skriv inn 4 piksler, og klikk deretter OK. Høyreklikk og velg Velg Inverse fra menyen.
Trykk Slett-tasten på tastaturet for å fjerne hjørner av ditt valg. Gå til Vis> Slett veiledninger for å fjerne alle guider.
Åpne vinduet Lagformat for ditt første ikon. Påfør en dråpeskygge, et fargelegg og et slag. Alle innstillingene kan ses på skjermbildene nedenfor:
Dupliser laget ditt og gå til Rediger> Transform> Skala. Mens du holder både Shift-Key og Alt-Key, skal du forme figuren litt.
Åpne vinduet Lagformat for det nye laget, og bruk følgende innstillinger til våre eksisterende effekter, og fjern fullstendig dråpeskyggen ...
Dupliser laget enda en gang, og fjern helt lagstiler ved å høyreklikke på laget og velg klart lagstil fra menyen. Gå til Filter> Støy> Legg til støy. Jeg la til 10% støy og senket lagens opasitet til 5%.
Gjenta hele prosessen til alle ikonene dine.
Det er på tide å begynne å lage ikonene som vi deretter plasserer på toppen av knappene våre. Opprett et nytt lag og velg Rectangular Marquee Tool. Det første ikonet vi skal designe er en stabel med mynter som representerer «balanse». Opprett et lite rektangel med markeringsverktøyet og fyll det deretter med svart.
Nudge ditt valg opp noen få hakk og deretter til høyre - fyll dette valget med svart på samme lag. Fortsett å gjenta trinnet til du har noe som ser ut nedenfor.
Åpne lagformatvinduet for ditt nye myntslag. Legg til en ganske subtil gyllen gradient overlegg til mynter.
Legg nå en dråpeskygge og indre skygge til formen din, du kan se innstillingene jeg brukte i skjermbildene nedenfor.
Bruke teknikker vi har brukt gjennom begge deler av denne opplæringen, fullfør alle de andre ikonene. Jeg skal lage følgende ikoner: Papirerklæring (for utsagn), Konvolutt (for varsler), Mobiltelefon (for telefonoppgraderinger), Kredittkort (for kredittkortopplysninger) og Silhouette (for tilleggskonto).
Etter at jeg har fullført ikonene, har jeg bestemt at fallskyggen under våre viktigste hvite figurer trenger mørkere opp litt. Åpne lagformatvinduet og opp skyggens opasitet til 15%. Jeg økte også størrelsen på skyggen fra 2px til 5px.
Gjør det samme for alle dine andre knappformer.
I stedet for å bruke det nederste rektangelet for en annonse tror jeg det ville være et flott lite tillegg for å ha en enkel graf på plass, noe som gir brukerne et raskt overblikk om deres kontosaldo er oppe (eller ned). Bruk den samme teknikken vi brukte tidligere, dra ut noen guider fra linjalen.
Ta tak i Elliptical Marquee Tool og dra ut en liten sirkel mens du holder Shift-Key for å holde i16t rundt. Fyll den med svart på et nytt lag.
Dupliser laget og legg en prikk på neste vertikale guide. Gjenta trinnet til du har noe som ser slik ut:
Gå til Vis> Tøm guider å fjerne støttelinjene på lerretet vårt. Åpne alternativet Lagstiler for den første blokken, og bruk følgende stiler:
Kopier lagestilene ved å høyreklikke på laget ditt og velg Kopier lagestil. Velg alle de andre sirkelagene dine, Høyreklikk og velg Lim inn lagstil. Dette skal automatisk legge til stilene du nettopp har opprettet til alle de andre lagene dine.
Ta tak i Linjeverktøyet og dra en linje fra en prikk til den andre. Gjør dette under prikklagene dine.
Med det gjort, så er vår navigasjonsskjerm! Sett alle dine siste lag i en mappe som heter "Navigasjonsskjerm" for å holde ting rent og ryddig!
Trekk ut lagene til kanten av ikonene dine på navigasjonsskjermen, og skjul deretter hele mappen. Opprett en ny mappe og ring den "Statement Screen."
Velg Linjeverktøyet, og fra verktøylinjen klikker du på rullegardinmenyen og kontroller at pilenheiter (ende) er valgt.
Dra ut en veldig liten pil, som nedenfor:
Høyreklikk på pilene laget, velg rasterise, og deretter gi nytt navn til laget til "grønn pil". Åpne lagvalgsvinduet for pilen din, og bruk en dråpeskygge, indre skygge, gradientoverlegg og slag. Alle innstillingene kan sees nedenfor:
Som du sikkert har gjettet, vil denne pilen være det ikonet vi bruker for innkommende transaksjoner (penger betalt inn på brukerkontoen). Dupliser laget og trykk det ned noen få mellomrom ved hjelp av Shift-Key og Markør-taster. Gå til Rediger> Transform> Roter og mens du holder Shift-Key, roter du pilen slik at den peker mot venstre.
Endre lagnavnet til rød pil, og åpne deretter lagestilvinduet og bruk en rød gradient til den.
Fortsett å duplisere de to pilene og plassere dem under hverandre i en tilfeldig rekkefølge.
Velg Single Row Marquee Tool og velg et utvalg under din første pil, fyll den med svart på et nytt lag kalt "separator".
Dupliser laget, flytt deretter det ned en piksel ved å trykke på ned-knappen på markørknappene dine. Recolor linjen til hvit.
Slå sammen de to lagene ved å velge dem begge, Høyreklikk og velg Flett lag fra menyen. Endre lagets ugjennomsiktighet til 15%, og kutt deretter slutten av linjene opp til retningslinjene ved å bruke Rektangulær markørverktøy og Slett-nøkkel.
Dupliser laget og plasser det mellom de neste to pilene. Fortsett å gjenta trinnet til du har en linje mellom alle pilene. Gå til Vis> Tøm guider.
Ta tak i tekstverktøyet, og trekk ut en tekstboks mellom de to to skillelinjene dine, og sørg for at den er sentral. Skriv inn noe. Jeg har brukt teksten "$ 107.62 fra firmanavn på 04/06/2010." Jeg brukte Helvetica for dette, satt til 4pt.
Sørg for at visse biter av teksten skiller seg ut ved å bruke forskjellige underfelt, for eksempel fet og kursiv.
Dupliser tekstlaget og flytt det ned til neste transaksjon - fortsett dette trinnet til du har fylt alle hullene.
For å gjøre designmock-up ser mer realistisk ut, gå gjennom tekstlagene dine og endre beløp, firmanavn og datoer.
Ved å bruke teknikker du allerede har brukt i begge deler av opplæringen, start og fullfør skjermbildet for tilleggskonto. Nedenfor er flere skjermbilder tatt under utformingen av den endelige skjermen av opplæringen.
Hjem / Navigasjonsskjerm:
Statement Screen:
Legg til konto skjerm:
Accentsconagua