Når du bruker fonter for applikasjoner eller annen grunn egentlig, må du huske å sjekke lisensavtalen. Fordi dette er bare en tutorial og applikasjonen i seg selv vil ikke være tilgjengelig for salg vi er greit med å bruke de nevnte skrifter. Men hvis du har tenkt å lage din egen, og ønsker å få en kommersiell lisens følger type designere instruksjoner om hvordan du gjør dette.

1. Sette opp dokumentet

Vi skal bruke flere kunst styret for de ulike visningene app har så når vi har bestemt dette med hjelp fra vår utvikler vi kan gå videre og få våre dokument som er opprettet.

Trinn 1

til å begynne med må vi opprette et dokument på størrelse med vår mobile enhet. Siden vi jobber med iOS-plattformen vi skal designe for iPhone 5 som har en høyere skjermstørrelse enn de tidligere inkarnasjoner av iPhone. Jeg finner arbeider på større størrelse det er lett å skalere ned senere for andre enheter. Siden de over all design er så minimal vil det være lettere å fjerne plass senere heller enn å prøve og skalere det opp. For dette formål våre dokumentet vil være 640 x 1136 pts (ikke piksler).

Mens brainstorming med utbygger ble det besluttet at det vil være en hovedskjermen som vil gli mot venstre eller høyre for å avsløre mer informasjon. Med dette i tankene vil vi også sette opp flere kunst boards på denne tiden også. Én for hver vinduet som vises. Husk å se over skjermbilde grundig for detaljene.

Trinn 2

Når dokumentet er opprettet vi må justere fargeprofilen. Så gå til Edit> Tildel profil og sørg for å deaktivere alle fargeprofiler. Når XCode forbereder dine eiendeler for å være sammen med app det helt fratar noen fargeprofiler knyttet til eiendeler. På grunn av dette er det best å bare fjerne eventuelle fargeprofiler fra dokumentet og regelmessig teste design på en mobilskjerm for å sikre riktig fargeutskrifter.

2. Lag bakgrunns

Trinn 1

Vår bakgrunn er ganske enkel. Fordi vi jobber med en mer eller mindre "flat 'design vil vi jobbe med solide farger og blande for å oppnå våre effekter.

Vi skal bruke midten art styret å representere vår hovedsiden av programmet. Den til venstre vil være hva som skjer når du velger plassering. Og en til høyre vises når du velger dato. Begynn med å tegne et rektangel i samme høyde og bredde av kunsten bord i midten og fylle den med våre grunnfarge

Trinn 2

Deretter oppretter du en sirkel som er nøyaktig 30 x 30pt og fylle den med fargen som er beskrevet nedenfor.

Trinn 3

Kopier denne nyopprettede sirkel og lim den inn bak den andre. Nå justere størrelsen til 2300 x 2300pt og slippe Opacity ned til 0%.

Trinn 4

Nå gå til Object> Blend> Blend alternativer ... og velg spesifikke trinn deretter sette den til 30 . deretter lage (Object> Blend> gjør) blandingen.

Trinn 5

med blanding likevel valgte senter den horisontalt på kunst styret og deretter sentrere sirkelen på toppen av art bord som vist nedenfor.

Trinn 6

Dupliser flat bakgrunn rektangel og lim den over blanding vi nettopp opprettet. Nå velger både rektangel og blandingen fra lagpaletten og velg Objekt> Beskjærings Mask> Lag. Denne måten vi ikke trenger å bekymre deg for våre ganske stor blanding blødning over til våre andre kunst boards.

Trinn 7

En fin funksjon som vi trodde ville legge litt teft til app ville være å ha den bakgrunnen skifter farge avhengig av temperaturen. Så mens bakgrunnen har vi gjort akkurat nå er for når det er "hot", vil vi nå kopiere disse elementene og justere farge og posisjon til å representere en mer "kald" følelse.

3. Tilsett Main Informasjon Text

Fordi vår blandet sirkel effekt har så mange skritt du kanskje legge merke til noen henger mens du fortsetter å lage din app design. Siden dette er bare av estetiske grunner, kan vi gå videre og deaktivere blanding lag og la flat bakgrunnsfarge for nå. Sørg for å aktivere blandingslag når du tester på den mobile enheten, slik at du kan se hvordan teksten fungerer med din bakgrunn.

Trinn 1

Vi skal stole tungt på typen til få informasjon om været på tvers. Av denne grunn har jeg valgt noen fine, rene, lett å lese skrifter som virkelig gir app noen personlighet. Jeg skal holde seg med to skriftfamilier og bruk av varierende bredde for å skape elementene sett.

For å begynne, må vi vise en dato av noe slag. Velg Type Tool (T) og skriv en dag i uken. Jeg skal bruke "tirsdag", og vår "Mission Gothic" font med vekten satt til "tynn". Teksten i seg selv vil være hvit, og vi vil legge til en Drop Shadow å hjelpe den skiller seg ut fra bakgrunnen. Deretter vil vi plassere den slik at den er sentrert på kunst styret og 20px fra toppen. For å gjøre dette, bare justere den helt til topps der markeringsrammen berører kanten av kunsten styret så hold Shift og trykk på ned-pilen på tastaturet to ganger.

Trinn 2

Velg Type Tool (T) igjen og la oss lage vår temperaturmåler. Jeg liker tanken på tallene selv blir sentrert mens "grad" -symbolet er av til høyre. Så, i stedet for sentretypen i Avsnitt-panelet jeg har holdt det igjen justert og bare skrev inn nummeret vi skal bruke for plassholderen. Jeg skal bruke "86" og skriften "Maven Pro" med følgende informasjon sett i skjermbildet nedenfor.

Når den er laget, justere den til midten av kunsten styret deretter toppen. Når de er rettet til toppen, høyreklikk teksten og Transformer> Flytt ... det ned 210pt. Nå velger type og legge den grad symbol

Tips:.. Husk å fortelle utvikleren om denne detalj slik at de kan finne ut hvordan å lage de ulike elementene i selve appen

Trinn 3

nå som vi har temperaturen la oss legge til et sted. Skriv ut din posisjon, for meg er det "Nassau, BAH" gjerne bruke din egen. For å gi byen og landet noen kontrast vi skal bruke to forskjellige vekter. The City vil være "Mission Gothic" satt til "vanlig", og landet vil være "Mission Gothic" satt til "tynn".

Når det gjelder plassering, sa jeg tidligere jeg liker tanken på temperaturen figuren blir sentrert, men for alle de andre teksten jeg vil den skal være justert til venstre basert på bredden av temperatur figuren. Så for nå vil jeg manuelt stille denne adressen til venstre for temperatur og legg det om 20 pkt fra bunnen. Føl deg fri til å justere denne avstanden som det passer deg. Å sørge for å alltid sjekke elementene på din mobile enhet.

Trinn 4

Vi kan stoppe her hvis vi vil, men utbygger ønsker å inkludere noen tilleggsinformasjon. Så vi vil opprette tre separate linjer med tekst. En for gjeldende tid, en for vindhastighet, og en annen for fuktighet. Sørg for å lage dem separat som vi skal bruke forskjellige skriftstørrelser og vekter, og dette kan kaste av linjen høyde for disse elementene.

Jeg liker tallformer fra vår "Maven Pro" font så jeg ' vil fortsette å bruke denne fonten for tallene i disse elementene bare vi vil bruke "Medium" vekt og kontrast dem med "Mission Gothic" font satt til "tynn" og for tynnere font vil vi også sette den til " kapitéler ". Du kan stille kapitéler ved å markere den aktuelle skriften og klikke på menyikonet øverst til høyre i tegnpanelet deretter velge kapiteler.

4. Tilsett Main Informasjon Ikoner

Vår typografi blir vår budskapet ganske godt, men vi trenger fortsatt å lage ikoner til å representere hva de forskjellige tallene og for å angi menyer i programmet. Jeg ble forelsket i form av grader symbol på vår "Maven Pro" font så jeg tenkte jeg skulle binde ikonet elementene sammen med den type ved å gjenbruke denne formen for å lage ikoner.

Trinn 1

Med Type Tool (T) aktivert skriver graden symbol. Den nøyaktige størrelsen spiller ingen rolle på dette punktet siden vi skal justere den til å passe våre ikonstørrelser. Deretter høyreklikk og velg "Create Outlines" for å konvertere typen til en redigerbar form. Nå aktivere Direct Selection Tool (A) og velg den mindre indre bane og fjerne det. Vi skal bruke et slag senere for å få riktig widget for våre ikoner. Når du har din buet kvadratisk form sørg for å justere høyden /bredden slik at de er akkurat det samme. De vil være litt av, og vi trenger å sikre at de er presise når du legger til elementer senere.

Trinn 2

Vi skal bruke og gjenbruke denne formen flere ganger så sørg for at du har en kopi av det i tilfelle du mister den opprinnelige mens du arbeider. For nå skal vi lage et ikon som representerer plasseringen menyen.

Med vår avrundet firkantet form kopiert, la oss krympe det ned til 32 x 32pt, og legge til en indre Stroke of 3px

Trinn 3

Aktiver Avrundet rektangel Tool og skape et rektangel som er 3 x 12 pkt og øke de avrundede hjørner slik at endene er helt runde. Nå kopiere denne formen tre ganger og roter den slik at den danner en slags kors formen deretter gruppere alle objektene sammen. Endelig med gruppen valgt, legger en skygge, og plassere den 30pt fra både toppen og venstre for kunst styret. Husk å sjekke avstanden på den mobile enheten og justere deretter.

Trinn 4

La oss kopiere vår avrundet firkantet form fra vår Location ikonet siden de andre ikonene vil være basert utenfor denne samme form og størrelse. Justere plasseringen av avrundet rektangel til å være ved siden av vår tid element. Mye som den faktiske grad symbol fra temperatur element jeg vil at ikonene for disse ekstra detaljer også å være utenfor temperaturen bare denne gangen vil det åpenbart være til venstre for elementene.

Som du kan forestille deg, for Time element vi skal opprettes et Klokke-ikonet. Vår avrundet firkantet form vil være klokken ansiktet, og nå må vi gjøre klokken hendene. Velg Avrundet rektangel Tool og skape et rektangel som er 10 x 4pt og justere den til midten av klokken. Kopiere denne prosessen bare denne gangen gjør det 4 x 12 pkt. Når du har klokken hendene i et behagelig sted gruppe elementene sammen og legge en skygge.

Trinn 5

Dupliser avrundet firkant igjen fra vår forrige ikonet og juster den ved siden av vår Wind element. For dette ikonet kommer vi til å prøve å oppnå en fin effekt der ikonet selv bidrar ytterligere vinden informasjon ved å gi en pil som indikerer direkte vinden er i ferd med å blåse i. Så som du kan gjette vi skal opprette en pil i sentrum for denne spesielle ikonet. Begynn med å lage en avrundet firkant som er 4 x 9pt og sentrere den i det runde torget. Deretter oppretter du en perfekt firkant med Avrundet rektangel Tool som er 12 x 12 pkt og fjerne ett av hjørnene. Nå nært at åpen bane og roter det slik at det skape opp poeng til vår pilen så sentrere det over stammen del av pilen, og pass på å skjule de beste avrundede hjørner helt.

Med vår pil fullført, gruppe stammen og punktet sammen deretter opprette syv eksemplarer. Roter hver av disse kopiene i trinn kvartal slik at du har en peker opp, en peker til øvre høyre, en annen til høyre, og så videre. Fordi vår viktigste formen er ikke en komplett sirkel å rotere figuren med pilen vil ikke fungere, så vi må ha en pil ikon for hver retning vinden kan blåse. Når disse er opprettet kan du skjule unødvendige piler og deretter gruppe pilene og avrundet firkant sammen og bruke en Drop Shadow.

Trinn 6

Lim inn en kopi av vår avrundet firkantet form en siste gang og line den opp med vår Fuktighet element. Nå opprette en sirkel som er 8 x 8 pkt og sentrum justere den i hovedformen og sette det mer til bunnen. Aktiver Direct Selection Tool (A) og velg den øverste forankringspunkt fra sirkelen og dra den opp for å skape en dråpe som form, også bringe inn håndtakene litt å gjøre en finere poeng å dråpen. Kopiere denne dråpe forme to ganger og redusere størrelsen og plassere dem nær toppen og på hver side av de større dråpene. Endelig Group (Ctrl + G) elementene sammen og legge en Drop Shadow.

Trinn 7

For den siste ikonet for denne hovedseksjonen vi trenger noe som representerer datoen. Vi kom opp med en kalender ikonet som også vil vise datoen i måneden.

For å begynne å lage en Avrundet rektangel som er 40 x 36 pkt og gi det en indre strøk av 3pt. Nå gå til Object> Utvid Utseende konvertere slaget til en faktisk form. Med Direct Selection Tool (A) aktivert, velger de beste indre ankerpunktene og dytte dem ned 9px ved hjelp av piltastene på tastaturet. Med Avrundet rektangel Tool lage to avrundede pille former som er 9pt bred og eventuelle høyden du ønsker og legg dem over større avrundet firkant slik at bunnen møter halvveis mellom den store hvite området. Så minus disse nye figurer fra den firkantede formen ved hjelp av Pathfinder-panelet. Lag to pill former, denne gangen vil de være 3 x 8 pkt og line dem opp inne i kutte ut deler. Til slutt vil vi legge til en plassholder date med følgende innstillinger, så får vi gruppe disse elementene og legge til en Drop Shadow.

5. Time Widgets

Når pitched, ønsket utbygger å ha et sett med rullbar widgets langs bunnen av app hovedsiden som viste anslått time været for den aktuelle dagen. Så for å fullbyrde vår hovedsiden app lar oss lage dem nå.

Trinn 1

Aktiver Avrundet rektangel Tool og skape en hvit firkant som er 165 x 250pt, senter justere det med kunsten styret og plassere den 40px fra bunnen av kunsten styret.

Duplicate denne rektangel og fylle den med svart. Kopiere det enda en gang og dytte den opp 4px deretter Minus Front i Pathfinder-panelet. Du kan deretter slippe Opacity til 15%.

Trinn 2

Duplicate vår hvite rektangelet igjen og fyll med svart som er redusert til 15% Opacity. Tegn en rektangel form over dette som er 79pt høy og noen bredde og linje det opp til toppen av den underliggende rektangel form. Velg hans nye rektangel og større svart fylt på under velg Snitt fra Pathfinder-panelet.

Trinn 3

Aktiver Type Tool (T) og skriver inn en temperatur som du selv velger. Jeg ønsket å sikre at jeg hadde nok plass til å utvide så jeg valgte tallet "100". For dette vil jeg være med "Missing Gothic" font i vekten av "Black". Teksten i seg selv vil også være en flat svart med Opacity falt til 15%. Vi vil deretter justere den nær toppen av den hvite delen av vår container.

Trinn 4

Siden dette er ment å bli projisert vær det vil ikke være så nøyaktig så vi vil også omfatte mulig "lav" og "høy". Med Type Tool (T) igjen skape skriver ut dine anslag og i stedet for å bruke "Black" vekt, vil vi i stedet bruke "tynn". Juster dette mot bunnen, noe som gjør at det er nok pusterom.

Trinn 5

Jo mørkere bar opp toppen blir vår tid indikator. Kopier klokkeikonet vi opprettet tidligere i denne opplæringen og plassere den sentrert og til venstre for denne mørkere bar området. Du kan også kopiere Tid teksten fra før også. Sørg for å fjerne Drop Shadow fra disse elementene som det ikke er nødvendig.

Trinn 6

Til slutt legger du en Drop Shadow til hoved hvitt rektangel, deretter gruppere disse elementene sammen. Nå kan du kopiere denne grupperingen og plassere dem 20px fra hverandre på hver side av midtstilt elementer å sørge for å justere tiden for hver ny kopi. Som en ekstra bonus jeg har tatt deg tid widgets som går av siden og redusert størrelsen til å være 235pt høy. Hvis du har begrensningen låst når du endrer størrelsen høyden widgeten vil følge etter. Dette vil ha et desimaltall bak det så det er ikke nøyaktig. Siden disse er utenfor siden gjør bruk eller masken vi opprettet tidligere for å skjule de elementene som går utenfor skjermen.

Med det vår hovedside er fullført. Sørg for å slå på bakgrunnsblandingen og test for å se hvordan det ser ut på din mobile enhet.

6. Lag Plassering Meny

Trinn 1

Nå la oss begynne å jobbe med våre menyer. Jeg fant det enkleste bare å kopiere laget med alle elementer fra hovedsiden, og velg deretter kunst kortet til venstre på hovedsiden og lime inn i dupliserte laget. Plasser den slik at bare plasseringen ikonet er synlig på høyre mest side of the art styret. Nå opprette en maske som er de samme dimensjonene av vår art bord og skjule de elementene som er off side.

Trinn 2

Siden vår generelle designen er "flat" i stedet for en gradert skygge til tyder på at hovedsiden er over menyen element vi bruker en flat svart fylt rektangel satt til 10% Opacity som er 4pt bred og i samme høyde som vår art bord.

Trinn 3

I denne menyen vil vi trenge et område for å legge til en ny plassering, samt liste av våre faste steder og brytere for å aktivere /deaktivere automatisk posisjonsbestemmelse og hvilken enhet temperaturen blir vist. La oss begynne med å lage den nye plasseringen delen.

Velg rektangelverktøyet (M) og lage et rektangel som er 640 x 100pt og justere den til toppen av kunsten styret deretter legge til en Drop Shadow.

nå aktivere avrundet rektangel verktøyet og lage et rektangel som er 8 x 32pt og fylle den med svart. Kopiere denne rektangel og roter den slik at den skjærer den forrige formen danner et "+" tegn. Velg begge rektangler og forene dem fra Pathfinder-panelet. Reduser Opacity til 25% og sentrere den vertikalt med rektangelet element vi opprettet med Drop Shadow fra før. Når sentrert vertikalt dytte den over slik at det er omtrent samme avstand fra venstre som det er fra de øvre og nedre grenser.

Til slutt velger du Type Tool (T) og skriv setningen "Legg til ny plassering ..." ved hjelp av "Mission Gothic" font sendt til "tynn" og slippe Opacity til 15%.

Trinn 4

Duplicate forrige rektangel og justere den til bunnen av den forrige deretter justere Drop Shadow.

Kopier over vår avrundet firkantet form som vi brukte for våre ikoner tidligere, og i stedet for et slag fylle den med flat svart deretter redusere Opacity til 15%. Kopier symbolet "+" vi gjorde i forrige trinn, og roter det slik at det danner en "X" og sentrer den i vår avrundet firkantet form deretter velge Minus Front alternativ fra Pathfinder-panelet.

Nå kopierer over plassering element tekst fra vår hovedside og fjern Skygge og satt skriftfargen til svart og redusere Opacity til 25%. Føl deg fri til å legge til flere forekomster, så vi kan se hvordan listen vil fylle når nye elementer legges til.

Trinn 5

La oss arbeide på brytere element for denne menyen. Dette elementet vil bli sittende fast til bunnen av denne menyen uansett hvor lenge listen over steder blir. Begynn med å lage et rektangel som er 640 x 200pt og legge til en Drop Shadow.

Med Type Tool (T), skriv ut etiketter for bryterne vi er i ferd med å gjøre. En vil være for automatisk posisjonsbestemmelse og den andre vil angi om temperaturen vises i Fahrenheit eller Celsius. Siden hovedelementet disse bryterne sitter i er 200pt høy plass.

La oss legge til en separator mellom disse to etiketter. Med Line Segment Tool (\\), lage en linje som er 476pt bred og gi den et strøk av 2pt. Dette strøk vil være svart med Opacity redusert til oppgir 10 pkt.

Trinn 6

For å lage bryterne selv vi skal gjenbruk avrundet firkantet form fra før. Kopier denne formen og endre størrelsen til 50pt og fylle den med svart. Høyreklikk denne formen og velge Transformer> Flytt ... deretter flytte den horisontalt 80pt og klikk "Kopier", ikke "OK". Du skal nå ha to avrundede firkanter ved siden av hverandre.

Velg rektangelverktøyet (M) og tegne et rektangel som er i samme høyde som våre avrundede firkanter og møter hver direkte i midten. Velg alle tre av disse elementene og forene dem i Pathfinder-panelet. Reduser Opacity av denne formen til 15% og justere det riktig ved siden av vår etikett.

Trinn 7

Lim inn i vår avrundet firkantet igjen og fyll den med hvit og justere størrelsen til å være 40 x 40pt. Juster den til venstre eller høyre side, slik at det er avstand rundt kanten stykker. Nå kan du kopiere disse former og snu dem horisontalt for å indikere det motsatte bryter staten. Deretter tilsettes i teksten for å representere bryteren staten. Gjør dette for både på og av.

Til slutt kan du kopiere dette elementet for Unit velgeren også. Og med det vår beliggenhet menyen er fullført. La oss gå videre til vår dato-menyen.

7. Legg inn dato Meny

Trinn 1

Denne datoen menyen vil vise været for de kommende dagene. La oss gjenta de første trinnene fra menyen Plassering og kopiere over hele hovedsiden lag deretter maske av de elementene som går off side og legge et rektangel for å representere menyen skyggen.

Trinn 2

nå opprette et rektangel som er 640 x 160pt og justere den til toppen av at kunsten styret og deretter gi den en Drop Shadow.

Trinn 3

Vi trenger noe å representere dag og dato så akkurat som før la oss lage en kalender-ikonet. Lag en avrundet rektangel som er 120 x 120pt og legge til en indre strøk som er 8 piksler. Nå gå til Object> Utvid Utseende konvertere slaget til en faktisk form. Med Direct Selection Tool (A) aktivert, velger de beste indre ankerpunktene og dytte dem ned 30px ved hjelp av piltastene på tastaturet. Deretter redusere Opacity til 15%.

Trinn 4

Nå kan du legge inn tekst til ikonet. Vi ønsker den øverste handling for å være den dagen i uken. Dette vil være hvit tekst. Datoen i seg selv vil være svart med Opacity falt til 15%. Begge bruker "Maven Pro" i "Medium" vekt.

Trinn 5

Til slutt legger den forventede temperatur. Skrifttypen vil være "Mission Gothic" for tallene og "Maven Pro" for graden symbol. Vi vil også legge til en "høy /lav" valg nederst til høyre på elementet.

Hvis du ønsker kan du kopiere dette elementet, og juster dag /dato for resten av uken.

Her har du tre skjerm

Husk å legg merke til avstanden mellom elementene og noen presis plassering tall du kan tenke på å gjøre det utviklere jobben enklere. Jo mer informasjon du gir jo lettere vil det være for utbygger å kode produktet å matche design. Jeg kan heller ikke understreke nok hvor viktig det er å alltid teste mens du designe slik at du vet din design vil oversette til mobilskjermen. Lykke til med din app design!