Begynn med å opprette en ny fil (Fil > Ny) 640 x 1136px, standard dimensjoner for en retina iPhone 5 design. Kartlegg retningslinjer; 20px på hver side av app for å hjelpe deg å justere elementer. Dokumentet skal se slik ut.

2. Lag Bakgrunn Struktur

I dette trinnet skal vi skape den grunnleggende bakgrunns struktur for programmet. Hvis du ser på design, vil du se at det er delt inn i tre områder, Top Bar, hovedinnholdet området, og Lower Detaljer området.

Trinn 1

Velg rektangelverktøyet (U) og tegne et rektangel med start fra toppen av dokumentet som er 120px høy. Bruk informasjonsvinduet (F5) for å se dimensjonene av formen.

Dette vil være den øverste linjen. Navn laget topbar BG. Endre fargen til # 1a242c.

Gå til Layers Panel (F7) og høyreklikk på laget og velge Blending Options. Velg Drop Shadow og sette en 2 piksler skygge, Vinkel 90 grader med farge # 2b3642.

Legge til en så liten skygge kan føle meningsløst, men jeg mener at det er de små detaljene som utgjør forskjellen mellom en god design og et flott design.
ditt design skal nå se slik ut.
Trinn 2

Vi vil nå opprette hovedinnholdet området. Bruke den samme prosessen som Top Bar, skape en form ved hjelp av rektangelverktøyet (U) som er 640 piksler bred og 620px høy.

Bruk fargevelgeren og plukke # 222c36. Navn laget hovedinnhold BG.

Neste gå til Layer Styles dialogen igjen og velge en skygge som er 8 piksler i avstand, en Spredning av 100%, 90 graders vinkel, med farge # 2b3642 .

Plasser hovedinnholdet bakgrunnen form rett under den øverste linjen. Sett hovedinnholdet formen 2 piksler under Top Bar laget slik at du kan se Top Bar sin skygge.

Så, hovedstrukturen bør ta form nå.

Trinn 3

den nederste linjen kan opprettes på samme måte som de andre. Lag et rektangel form plassert direkte under hovedinnholdet bakgrunnen form som er 640 piksler bred og 336px høy. Velg farge # 19222a. Navn laget Bottom BG.

Igjen, sørg for å plassere laget rett under hovedinnholdet laget slik at du kan se skyggen fra lag over. Din design bør se omtrent slik ut:

3. Top Navigation Bar &

La oss flytte inn på den øverste linjen.

Trinn 1

Åpne iOS 7 GUI PSD (iPhone) PSD fil gitt i Instruksjons eiendeler. Ta den hvite statuslinjen, og plassere den ved å dra og slippe den på toppen av lerretet. Plasser statuslinjen lag på toppen.

Trinn 2

Åpne flere ikoner PSD fil gitt i Instruksjons eiendeler. Deretter dra og slipp venstre ikon navigasjon (3 barer ikonet) fra flere ikoner PSD. Bruke 20px guide på hver side, plasser venstre ikon navigasjon i tråd med den venstre 20px padding guide.

Trinn 3

Deretter drar du ikonet innstillinger fra flere ikoner PSD, inn design og plasser den på høyre side av lerretet, igjen ved hjelp av 20px padding guide. Din Top Bar er nå ferdig.

4. Hovedområdet

Hovedinnholdet området kan se vanskelig, men hvis du ser nøye på den, er det bare en serie med sirkler. La oss fokusere på større gruppe først.

Trinn 1

Lag en sirkel som er 506px bred og 506px høy. Navn på lag Circle 1. Igjen, bruker informasjonsvinduet (F5) for å sikre at du har de riktige dimensjoner. Dette vil være bakgrunnen sirkel. Fra fargevelgeren velger # 19222a som former farge. Senter justere sirkelen og plasser den 40px under Top Bar.

Gå til Layers Panel (F7) og høyreklikk på laget og velge Blending Options. Velg Drop Shadow og sette en 1px skygge, vinkel på 90 grader med farge # 2b3642.

Dette er den samme effekten som er på Top Bar form. Har lignende små detaljene som dette hele programmet skaper konsistens og legger til perfeksjon av den ferdige design.

Trinn 2

Den neste sirkelen er å være er 436px bred 436px høy og plassert i på midten av den større sirkel. Navn på lag Circle 2. Fra fargevelgeren velger # 2b3642 som former farge.

Trinn 3

En annen sirkel blir opprettet på 385px bred og 385px høy. Fra fargevelgeren velger # 222c36 som former farge. Navn dette laget Circle 3.

Neste gå til Blending Options for sirkelen lag og velg en Indre skygge. Endre Opacity til 5%, Avstand til 30px og størrelse til 40px. Fra fargevelgeren, velger # 000000 for fargen på Indre skygge. Se under for eksakte effekten.

Som du kan se, området er i ferd med å ta form nå.

Trinn 4

Den neste sirkelen er trolig den vanskeligste en til henrette. Det er den oransje fremdriftsindikator. Lag en sirkel som er 458px bred og 458px høy og plassere den i midten av sirklene. Navn dette laget Circle 4.

Gå til Blending Options og sette legge en 45 piksler indre strøk. Velg en gradient for slaget som per hex farger nedenfor:

Nå endre fyll av Circle 4-0%

Trinn 5

Deretter konvertere. laget til et smart objekt ved å gå til layer > Smart Object > Konverter til smart objekt.

Når laget har blitt omgjort til et smart objekt, sette en skygge på Circle fire lag. Velg farge # 000000, Opacity på 20%, Avstand fra 20px og størrelse på 80px. Se nedenfor for nærmere detaljer:

Trinn 6

Ok, neste må vi bestemme hvilken prosentandel den oransje fremdriftsindikatoren er på. Dette er laget ved hjelp av en lagmaske. I verktøylinjen, markerer det mangekantede lassoverktøyet (L)

Fra sentrum av sirkelen fire lag foreta et valg som ligner på bildet under.

Når du er fornøyd med valget, skape lagmaske ved å gå til Layer > Lagmaske > Skjul Utvalg

Trinn 7

Nå kan du velge Type Tool (T) og velg midten av sirkler området og skriv "62" med følgende attributter:

Font: Arial Svart

Størrelse: 100pt

Farge:.. #ffffff

nå sentrere teksten innenfor sirkelen

Ved siden av "62", lage en annen type lag og satt i en "%" med følgende opplysninger:

Font: Arial Regular

Størrelse: 20 pkt

Farge: # 5b6773

Plasser "%" i henhold til bildet nedenfor

Trinn 8

Rett under "62", lage en annen type lag. ved hjelp av tekstverktøyet (T). Med følgende opplysninger:

font: Arial Regular

Størrelse: 13pt

Tracking: 400

Farge. # 5b6773

så skriver du "LAST NED" med store bokstaver.

Posisjons denne type lag som per bildet nedenfor.

så vi har fremgang tyder ferdig, det skal se noe som ligner på dette:

Trinn 9

Neste opp er de to mindre sirkulære knapper. Bruke padding guide på venstre, lage en sirkel med Ellipse Tool (U), 100px bred 100px høy. Fra fargevelgeren, velger # 19222a. Navn dette laget Circle 5. Plasser denne sirkelen som per bildet nedenfor.

I løpet av denne sirkelen, opprette en mindre sirkel som er 78px bred 78px høy i diameter. Navn dette laget Circle 5a. Fra fargevelgeren velger # 2b3642.

Trinn 10

Velg begge lag, Circle 5 og Circle 5a og høyreklikk. Gå til Duplicate Lag.

Når lagene er blitt duplisert, endre navn på dem Circle 6 og Circle 6a henholdsvis og plassere dem direkte til høyre for å justere med riktig padding guide.

Fra Tilleggs ikoner PSD fil, kopiere over Pause-ikonet og plasser den sentrert i sirkelen fem lag.

Fra Free Icon Set, finn Link Ikon (andre rad, femte på tvers). Kopier ikonet til design og plasser den sentrert i Circle 6 lag.

Bruk Transform Tool (Kommando /Ctrl-T) og endre dimensjoner til 38px bred 48px høy (200% større ). Fjern eventuelle lag effekt som er på ikonet ved å høyreklikke på laget og velge Clear Layer Style. Fra fargevelgeren velger # a8afb6.

5. Nedre området

La oss gå på den nedre seksjonen. Denne delen er delt inn i tre rader.

Trinn 1

Velg rektangelverktøyet (U) og tegne et rektangel med start fra toppen av dokumentet som er 108px høy. Navn laget nedre 1.

Dobbeltklikk på laget miniatyr å endre fargen. På fargevelgeren velge farge # 19222a. Gå til Layers Panel (F7) og høyreklikk på laget og velge Blending Options. Velg Drop Shadows og sette en 1px Drop Shadow, vinkel på 90 grader med farge # 2b3642.

Duplicate Nedre ett lag og navngi det nye laget Nedre 2. Plasser rett nedenfor Nedre 1. Gjenta laget duplisering igjen og endre navn på det nye laget til Senk 3 og sted som direkte under Nedre to lag.

Trinn 2

Neste vi vil skape de små runde ikoner og innhold. Den første ikonet indikerer at brukeren laster ned en fil, så vi må bruke den oransje fremdriftsindikator som ligner på det vi gjorde for større sirkel.

Bruk venstre padding guide, skape liten sirkel 50 piksler bredt x 50 piksler høyt i Nedre ett lag området. Name it Nedre Circle 1.

Gå til Blending Options for lag og sette en 3px Ytre Stroke med fargen # eb6c4d.

Nå setter fyllet på Lower Circle 1 lag til 0%

Neste konvertere laget til et smart objekt ved å gå til layer >.; Smart Object > Konverter til smart objekt.

Ok, neste må vi bestemme hvilken prosentandel den oransje fremdriftsindikatoren er på. Dette er laget ved hjelp av en lagmaske. I verktøylinjen, markerer det mangekantede lassoverktøyet (L)

Fra sentrum av Nedre Circle 1 lag foreta et valg som ligner på bildet under.

Når du er fornøyd med valget skape lagmaske ved å gå til Layer > Lagmaske > Skjul Utvalg. Fra gratis ikonsett følger med, finn skyikonet med pil ned (sjette rad, femte på tvers). Kopier ikonet til design og plasser den sentrert i Nedre Circle 1 lag.

Slett alle lag effekt som er på ikonet ved å høyreklikke på laget og velge Clear Layer Style. Fra fargevelgeren velger # db664a. Det skal se omtrent slik ut:

Trinn 3

Til høyre for nedlastingsindikatoren vi kommer til å legge litt tekst. Så velger du Type Tool (T) og klikk ca 30px til høyre for lag Nedre Circle 1. Med følgende detaljer:

Font: Arial Regular

Størrelse: 12 pkt

Farge. # 5b6773

Deretter skriver SISTE LAST NED i hovedstedene

Trinn 4

Deretter velger du Type Tool (T ), og klikk til høyre padding guide. Høyre justere teksten ved å velge nedenfor ikonet i avsnittet vinduet (Vindu > avsnitt)

Med følgende detaljer, type "55,1 fra 81MB"

Font. Arial Svart

Størrelse: 20 pkt

Farge: # a8afb6

Neste gå tilbake og marker "av" og "MB" og gi dem følgende informasjon:


Font: Arial Regular

Font Size: 12pt

Farge: # 5b6773

det kan ta litt innsats med teksten. mellomrom for å sikre at teksten sitter riktig. Så når det er gjort din Nedre 1 lag skal se slik ut:

Trinn 5

I Nedre 2, må vi gå inn tilsvarende opplysninger. Bruke venstre padding guide, skape liten sirkel 50 piksler bredt og 50 piksler høy i Nedre to lag området. Name it Nedre Circle 2. Gå til Blending Options for lag og sette en 3px ytre strøk med fargen # eb6c4d.

Nå setter fyllet på Lower Circle to lag til 0%. Igjen, Fra gratis ikonsett også levert, finn skyen ikonet med pil opp (sjette rad, fjerde tvers). Kopier ikonet til design og plasser den sentrert i Nedre Circle to lag.

Slett alle lag effekt som er på ikonet ved å høyreklikke på laget og velge Clear Layer Style. Fra fargevelgeren velger # 3c4651

Trinn 6

Til høyre for nedlastingsindikatoren vi kommer til å legge litt tekst. Så velger du Type Tool (T) og klikk ca 30px til høyre for lag Nedre Circle 2. Skriv "SISTE UPLOADS" i store bokstaver med følgende opplysninger:

font: Arial Regular

Font Size: 12pt

Farge: # 5b6773

Trinn 7

Neste rett og slett lage en kopi av teksten "55,1 av 89MB" ved å høyreklikke på lag i Layer Window og kommer til å Duplicate Layer

Dra det nye laget til Senk 2 og endre teksten til "127.4GB"

Font..: Arial Svart

Størrelse: 20 pkt

Farge: # a8afb6

For GB, bruker du følgende egenskaper:.

Font: Arial Regular

Størrelse: 12pt

Farge: # 5b6773

Når du er ferdig raden skal se slik ut

Trinn 8
.

den siste raden, Nedre 3, skal bruke samme struktur som Nedre 2. Vi må gjenta den samme prosessen som vi gjorde for innholdet i Nedre 2.

så, ved hjelp av venstre padding guide oppretter liten sirkel 50 piksler bredt og 50 piksler høy i Nedre to lag området. Name it Nedre Circle 3. Gå til Blending Options for lag og sette en 3px ytre strøk med fargen # eb6c4d.

Nå setter fyllet på Lower Circle 3 lag til 0%.
< p> Igjen, Fra gratis ikonsett også levert, finn vanlig sky-ikonet (sjette rad, tredje tvers). Kopier ikonet til design og plasser den sentrert i nedre sirkel 3 lag.

Trinn 9

Til høyre for nedlastingsindikatoren, skal vi sette inn litt tekst. Så velger du Type Tool (T) og klikk ca 30px til høyre for lag Nedre Circle 2. Type "plass brukt" i store bokstaver ved hjelp av følgende informasjon:

Font: Arial Regular

Font: Størrelse: 12pt

Farge: # 5b6773

Trinn 10

til slutt, lage en kopi av teksten "127.4GB" fra Nedre to ved å høyreklikke på lag i Layer Window og kommer til å Duplicate Layer.

Dra det nye laget til Senk 3 og endre teksten til "46.9GB".

Font: Arial Svart

Størrelse:

Farge. # a8afb6

GB til å være i:

Font: Arial Regular

Størrelse: 12pt

Farge: # 5b6773

Konklusjon

i denne opplæringen jeg har vist deg hvordan du bruke lagmasker, smarte objekter, og diverse andre teknikker for å hjelpe deg å lage en iPhone applikasjon design i Photoshop. Jeg håper du har lært noe av det hele, og kan bruke disse teknikkene for å lage en app design av din egen.