Share
I denne opplæringen skal vi utforme brukergrensesnittet til et økonomisk basert iPhone-program i Photoshop. Vi vil bruke en lastebil-last av moderne teknikker for å virkelig gjøre dette designet pop! Opplæringen deles i to deler, så vær sikker på å abonnere via RSS eller E-post for å sjekke ut resten av opplæringen!
Med hvilken som helst design, bør du begynne med en skisse, selv om den er veldig grov. Vi skal utforme et grensesnitt som er egnet for en finansiell applikasjon, for eksempel en bank, hvor du kan sjekke balansen, erklæringene, etc. Vi skal bare skape et par skjermbilder av søknaden gjennom de to delene av dette opplæringsserie: Hjemmesiden, setningssiden og siden Legg til konto. Disse tre sidene vil bestå av ikoner / navigasjon, en liste og noen tekstfelter. Hvis du ønsker å lage flere sider etter opplæringen, vil de i utgangspunktet være sammensatt av de samme elementene vi skal lære å lage.
Nedenfor er en skannet i UI skisse jeg opprettet for å basere vår applikasjonsdesign på:
Vi skal designe programmet til de nyeste iPhone 4-dimensjonene, som måler 640x960 piksler ved en 326ppi-oppløsning. Åpne Photoshop og gå til Fil> Ny. Opprett det nye dokumentet ved hjelp av disse innstillingene:
Gå over til Teehan + Lax for å laste ned iPhone 4 GUI PSD (Retina Display) -pakken. Denne pakken vil tillate oss å ta tak i elementer for søknaden vår, selv om vi ikke vil bruke mange av dem, siden det meste av vårt design er svært tilpasset.
Åpne filen du nettopp lastet ned i Photoshop. I lagpanelet finner du mappen som heter "topplinje (program)." Velg denne mappen og dra den over i applikasjonsdesignet PSD.
Gå tilbake til vår GUI-elementer PSD-fil, og dra over et lag "Bar (Grey - Blue)":
Til slutt, dra over mappen "barbunn". Vi kommer til å endre disse. Hvis du leser denne opplæringen, vet du sannsynligvis allerede hvordan du skal spille med enkle former, så du burde kunne lage noe som ligner disse på grunn av uansett. Det første er å fjerne de to knappene "back" og "edit" fra topplinjen, da vi ikke trenger disse. Fjern mappene "tilbakeknapp" og "blå knapp" fra mappen "Bar (Grå - Blå)".
Vi skal begynne å fitte med våre farger nå, og basere resten av applikasjonen på fargene vi bestemmer oss for å bruke i stolpene vi allerede har. Åpne lagformatvinduet for laget med tittelen "bakgrunn" i mappen "Bar (Blå - Grå)".
Jeg skal bruke et grønt og sølvfarget skjema for min applikasjonsdesign. Fra vinduet Lagformat åpner du gradientoverlegg-delen, og åpner deretter vinduet for gradientredigering, som vist nedenfor:
Bytt fargene til en farge etter eget valg. Jeg bruker to farger i min gradient, går fra mørk (# 719100) til lys (# A1CF00).
Det neste laget, med tittelen "bunn mørk skygge", er altfor merkbar for det subtile utseendet jeg skal gå for i designet, så senk opaciteten til rundt 50%. Gjør det samme for neste lag med tittelen "topp høydepunkt".
Vi skal nå legge til noe støy i topplinjen. Velg alle 4 lagene i mappen "bar top", høyreklikk deretter og velg "Rasterize Layers".
Lag et nytt lag og kaller det "topplinjestøy", legg det over "bakgrunnslaget", som vist nedenfor:
Hold nede Cmd-tasten (eller Ctrl-tasten på Windows) og klikk på miniatyrbildet i lagpanelet ved siden av "bakgrunn" -laget. Dette bør gjøre et utvalg av din form. Klikk på "top bar noise" laget, og fyll deretter formen med hvitt.
Gå til Filter> Støy> Legg til støy, og bruk følgende innstillinger:
Etter å ha trykket på OK-knappen, må du endre lagsmedusjonsmodus til "Overlegg" og senke oppaciteten til 25%. Dette bidrar til å legge til litt detalj i vårt applikasjonsdesign. Vi bruker subtile støy som tekstur gjennom hele opplæringen, så husk å huske hvordan vi gjorde det!
Vi skal nå endre fargen på statuslinjen (den allerste linjen som viser telefonens signal osv.). Ved å bruke den samme teknikken vi tidligere brukte for å endre fargen på topplinjen, endrer du statuslinjen til en mørkegrønn gradient.
Gå gjennom de forskjellige lagene dine og endre alle statuslinjens objekter til hvitt (som batteri, tid osv.). Dette er veldig enkelt å gjøre, du må bare fjerne alle gradienter og erstatte dem med et fargeoverlegg i lagestilvinduet.
Zoom inn i topplinjen, og velg Rektangulær markørverktøy. Lag et lite, bredde langt utvalg over toppen av topplinjen, sørg for at den bare er 2px høy.
Lag et nytt lag i mappen "topplinje", sørg for at den er plassert over alle andre lag. Kaller det "toppslag" og til slutt fyll ditt valg med hvitt, senke opaciteten til det nye laget til 45%.
Det er på tide å endre teksten som for øyeblikket står "Etikett". Velg tekstverktøyet og klikk på teksten, slik at vi kan redigere det. Skriv noe som passer for din søknadside, i mitt tilfelle som er "Bankapp".
Spill rundt med skrifter og størrelser - Jeg skal bruke et skrifttegn som heter "Blue Highway" satt på 10pt.
Åpne vinduet Lagformat for teksten, og fjern innstillingene for Drop Shadow helt. Klikk på OK.
Dupliser tekstlaget, og endre fargen på den opprinnelige teksten til en mørkegrønn. Nuk den gamle teksten ned 2 piksler, og deretter til høyre 2 piksler. Senk opaciteten til 25%.
Vi skal nå jobbe på den nederste linjen. Jeg skal lage min sølv. Når man ser tilbake over skissen, blir stangen separert i to knapper. Bruk den samme prosessen vi brukte tidligere, bytt den nederste blåstangen til en sølvbar. Jeg brukte et veldig veldig lite snev av grønn i min farger for å gi den den lille ekstra oomph. Fargene jeg har brukt er # B9BFB7 og # E8EDE6.
Bruk den samme teknikken vi brukte tidligere, legg til litt støy til bunnlinjen.
Fyll din hovedbakgrunn med en lysegrå (jeg brukte # F9F9F9). Gå til Filter> Støy> Legg til støy og legg litt støy til bakgrunnen din.
Velg det rektangulære markeringsverktøyet og lag to små valg over bunnlinjen og under topplinjen. Fyll dem med svart på et nytt lag rett over hovedgrunnlaget ditt.
Gå til Filter> Uklarhet> Gaussisk uskarphet og slett dine nye figurer med rundt 15 piksler.
Endre lagets opasitet til 15%. Disse nye uskarpe former vil fungere som skygger under våre barer, som vist nedenfor:
Det er på tide å rydde opp lagene våre - dette er en viktig del av ikke bare mobil UI-design, men noe design. Et rotete lagpanel fører til en rotete hjerne, og du vil sparke deg selv når du ikke finner laget du trenger! Organiser lagene dine på en strukturert måte som fungerer for deg; gruven kan ses nedenfor:
Før du tar slutt på denne opplæringen, skal vi lage ikonene for vår nederste linje. Opprett et nytt lag, og velg det rektangulære markeringsverktøyet. Dra ut et lite utvalg mens du holder Shift-Key for å holde den firkantet. Fyll den med svart.
Flytt ditt valg til høyre ved å bruke Markør-tastene, og fyll deretter på med svart. Gjenta prosessen til du har noe som ser slik ut ...
Zoom ut igjen. Hvis du er herskerne ikke allerede vises, aktiver dem ved å gå til Se> Linjaler. Fra linjalene, dra ut guider gjennom dokumentet ditt slik at du vet hvor senteret (breddeveiene) er av hovedskjermbildet, så vel som den nederste linjen.
Bruk veiledningene til å justere meny / hjemikonet ditt - du må kanskje endre størrelsen på ikonet ditt slik at det passer fint i nederste linjen, du kan gjøre dette ved å gå til Rediger> Transform> Skala.
Åpne vinduet Lagformat for ikonet. Påfør et overlater overlegg, en dråpe skygge, en indre skygge og et slag. Alt som kan ses nedenfor:
Opprett et ikon for å representere innstillingsskjermbildet, og bruk de samme effektene på nytt.
Ta tak i det rektangulære markeringsverktøyet og gjør et vertikalt utvalg bare 1px bredt, som vist nedenfor.
Lag et nytt lag, og fyll ut valget med svart. Dupliser laget og flytt det til en piksel til høyre ved hjelp av markør-tastene. Fyll denne linjen med hvitt.
Endre blandemodus for de to lagene til Overlegg, og juster linjene dine til midten av navigeringslinjen.
Det er det for del nummer ett av denne opplæringen! Vi har opprettet hovedstrukturen og fargeskjemaet i vårt applikasjonsdesign. I den neste opplæringen vil vi skape innholdet til hjemmet, erklæringen og legge til kontoskjermer, og vil bli sittende fast i alle de små designelementene som gjør at designet kommer sammen pent.
Accentsconagua