How å utforme en iOS 7 E App i Photoshop
I denne opplæringen, vil jeg vise deg hvordan du oppretter en flat og moderne, Gmail-inspirert, iOS7 epost app i Photoshop . Vi vil begynne med å vise deg hvordan du skissere dine ideer, så får vi se hvordan du kan lage din design i Photoshop, og til slutt, hvordan å innlemme design i en iPhone mockup. La oss komme i gang!
Andre Screens
I denne opplæringen, vil vi også være å skape følgende mobil app-skjermene våre mobile e-app.
Instruksjons Eiendeler
< p> Du trenger følgende eiendeler for å fullføre denne opplæringen. Vennligst last dem før du begynner. Hvis de ikke er tilgjengelige, bør alternativer være lett å finne.
iOS7 PSD mockup
Free Icon Pack
Font Åpne Sans
Før du begynner
Trinn 1
Før hopping i Photoshop, er det best å begynne å skissere med blyant og papir. Begynne å lage konturer og grove bilder. Du trenger ikke å bekymre seg om små detaljer. Og ikke glem å søke etter referanser, mange av dem. Denne første ideen, vil vi kalle det V1, kommer fra en venn av meg, Bagus Fikri fra Fikri Studio. Her er skissen (full versjon).
Først skisse -v1, laget med papir og penn.
Trinn 2
I dette tilfellet, etter å ha sett skissen, klienten bedt om noen endringer. Etter noen e-poster, her er noen nye skisser. La oss kalle dem v2, v3, og v4.
Second skisse-v2. Fikse header og tag, legge til profilbilde og search.Third skisse-v3. Legg tappet epost tilstand, fjerne profilbildet, fikse header, og legge til e-postalternativet og checkbox.Fourth skisse-v4. Perfeksjonere v3.
1. Making Nummer Ikon
Nå som vi har avsluttet vår skisse, kan vi begynne å jobbe i Photoshop. Før vi kommer i gang, er det imidlertid viktig å merke seg at grensesnittet design krever ofte ganske mange ikoner. Du kan lage dem selv, eller du kan laste dem ned fra nettet. Hvis du ønsker å øve å lage dem selv, vil jeg vise deg hvordan du kan tegne et av ikonene som brukes i denne opplæringen (etiketten ikon). I utgangspunktet, de andre ikonene bruke de samme teknikkene. Du kan laste ned dette ikonet, samt alle de andre ikoner fra Free Icon Pack nevnt i Instruksjons Eiendeler avsnittet ovenfor
Trinn 1
Opprett ny fil (Fil >. Ny .. .). I neste dialogboks, sette Bredde og Høyde til 43 piksler. . Klikk på OK
New Dialogboksen
Trinn 2
Aktiver Avrundet rektangel Tool med Radius:. 4 px. Sette sitt Fill til blå # 1a72a5 og Stroke til Ingen. Tegn et avrundet rektangel form med størrelse 19 x 19 piksler.
Tegne en blå form for etikett ikon.
Trinn 3
Legg avrundet rektangel banen på forrige form. Denne gangen, angi størrelsen til 13 × 13. For å hjelpe deg å se bedre, jeg gjemte den forrige formen midlertidig.
Trinn 4
Hit Kommando /Ctrl-T for å forvandle banen. Rotere den 45 °.
Skal rotere, klikke og dra utenfor transformeringsramme.
Trinn 5
I CS6, det vil informere deg om at formen kommer til å bli omdannet til vanlig vei. Det betyr at du ikke lenger kan redigere sine parametere på fly fra alternativ. Bare klikk OK.
I Photoshop CC, vil formen bli endret til vanlig vei.
Nå har vi grunnleggende etiketten form.
Trinn 6
Ta en titt på banens punkt posisjon nøye. Vi ønsker å sørge for at vår ikonet er skarp.
Trinn 7
Bruk Direct Selection Tool (A) for å endre plasseringen av banen punkt manuelt.
Her er hva vi har etter justering (venstre er et ikon før justering, og høyre er etter justering). I denne situasjon, viser det seg at resultatet er ikke så viktig. Men, i andre tilfeller kan disse ekstra trinnene være viktig og kan forbedre utseendet på ikonet.
Resultat før og etter justering hvert punkt.
Trinn 8
På toppen av ikonet , legge en sirkel bane. Sette sitt modus for å trekke fra Option Bar.
Trinn 9
Hit Kommando /Ctrl-T og roter deretter ikonet 45 °. Hold Shift å hjelpe deg rotere form ved 15 ° tilvekst.
Hold Skift til å hjelpe deg med å rotere ved 15 ° tilvekst.
Trinn 10
Igjen må vi justere alle punkt stillinger ved hjelp av direkte Selection Tool.
merke banepunktene. De klikker på pixel rutenettet.
Step 11
Nedenfor kan du se ikonet før og etter justeringen.
Før justering. Legg merke til øverste delen av ikonet. Noen piksler er leaking.After justeringen. Mye bedre.
Trinn 12
Dupliser stor avrundet rektangel form ved å velge den med Sti Selection Tool. Hit Kommando /Ctrl-J. Roter det -15 °.
Trinn 13
Duplicate originalen, stor avrundet rektangel banen. Lim den over den siste banen. Sette sitt modus for å trekke.
Trinn 14
Hit Kommando /Ctrl-T og deretter endre størrelsen. Ikke glem å omplassere hvert punkt for å få en skarp utseende.
Her er resultatet i forstørrelse 100%.
Hit Kommando /Ctrl-1 for å sette Forstørrelse i Photoshop til 100%.
Trinn 15
Det siste trinnet er å eksportere dette som et ikon. Skjule bakgrunnslaget ved å klikke på øye-ikonet. Ikonet Bakgrunnen er nå gjennomsiktig
Trinn 16
Lagre ikonet for web. (Fil > Lagre for Web og enheter ...). Bruk innstillingene nedenfor:
File Type satt til PNG-8
Transparency valgt
Hvis ikonet inneholder mer farge eller gjennomsiktighet, må du kanskje velge PNG -24.
2. Forbereder lerretet
Trinn 1
Lag en ny fil (Fil > New ...). Satt sin størrelse 640 × 1 136 piksler.
Hit Kommando /Ctrl-N til raskt å åpne dialogboksen Ny-boksen.
Trinn 2
Gjør nye guider for å hjelpe oss med å sette elementene i nøyaktige posisjoner . Klikk på Vis > New Guide. Vi ønsker en horisontal guide på 15, 30, 45, 60, 580, 595. 610 og 625 piksler. For de vertikale guider, vi vil ha dem på 40 og 128 piksler.
Guide Horisontal 40 px.Horizontal guide på 128 Guide px.Vertical 15 guide px.Vertical på 580 px.
Her er førerne på venstre og høyre hjørne.
Trinn 2
Velg den øverste området med Rectangular Marquee Tool (M). Gjør et nytt lag og deretter fylle den med svart (Edit > Fyll ...)..
Du kan bruke snarveien D deretter Alt-Delete for å raskt fylle utvalg med svart
Trinn 3
ta tak i iOS 7 PSD mockup fra Teehan + Lax. Skift-dra Status bar Plasser den på toppen av design. Her er den hvite. Vi vil begynne å jobbe på spissen. Bruk linjeverktøyet til å tegne en 4 px linje på bunnen av spissen. Aktiver den type verktøy og deretter legge til Innboks For å sikre at teksten er på plass, sentrert på lerretet, tegne et rektangel med samme bredde som lerret. Velg både tekstlag og den siste rektangelet. Fra Option Bar Klikk på Juster Horisontal Center. Vi kan se at teksten nå sitter perfekt på midten av spissen. Du trenger ikke dette rektangelet lenger, og kan slette den. Tegn tre avrundede rektangel figurer. Plasser den på venstre side av hodet, i sentrum av guidene. Vi vil bruke den som innboks alternativmenyen ikonet. På høyre side, legge til en ny e-post-ikonet og tegne tre ruter . Rutene kommer til å bli brukt for individuelle post opsjons ikoner. Plasser hvert lag logisk på en gruppe lag. Velg laget og deretter traff Kommando /Ctrl-G for å sette den i en gruppe lag. Sørg for å gi en lett gjenkjennelig navn. La oss begynne å jobbe på søkelinjen. Tegn en stor grå rektangel form under overskriften. Redusere Opacity. Legg på søkeikonet, og teksten ved siden av den. Redusere Opacity, ønsker vi at det skal være litt mer subtil. Neste, vi skal begynne å jobbe på en e-post. Legg en 1 px grå linje. På venstre side, tegne en gul rektangel form, størrelse på 50 x 50 px. Aktiver Pen Tool (P). Klikk på nedre venstre hjørne av rektangelet å fjerne det. Nå har vi en trekant form. Double laget form. Legg Skygge på laget. Bruk Polygon Tool til å tegne en stjerne. Fra Option linjen, velger Star og satt sine sider til 5. Klikk og dra for å tegne en stjerne med en størrelse på 26 × 26 px. Dobbeltklikk på laget og påfør en Inner Shadow Bruk følgende innstillinger:. Her er det resultatet vi har. Aktiver Type verktøyet og deretter dra for å tegne en ny tekstboks. Legg til litt tekst som inneholder all viktig informasjon i en e-post, for eksempel avsender, tittel og innhold. Se bildene nedenfor for mer informasjon om skriftene som brukes i e-posten.. Anmeldelser Legg et lag til e-innhold. Tegn en gradient fra hvitt til svart. Sørg for at den nedre delen er filtrert. Tegn en ny avrundet rektangel form med størrelsen satt til 17 × 3 px. Hit Kommando /Ctrl-T for å søke transformasjon. Drei formen 45 °. En advarsel dialogboks vises. Bare trykk Ja for å bekrefte det. Duplicate formen ved å trykke Kommando /Ctrl-C og Kommando /Ctrl-V. Hit Kommando /Ctrl-T, og rotere den 90 °. Flytt sin posisjon nedover. Du kan se nøye på at vektorpunktene trenger noen justeringer. Aktiver Direct Selection Tool og deretter flytte punktet til den klikker på pixel. Her er pilikonet ved 100% forstørrelse. Aktiver Avrundet rektangel Tool, satt sin radius på 3 px. Tegn et avrundet rektangel form på venstre side av e-post med en størrelse på 18 × 18 px og fyll den med fargen #eaeaea. Dobbeltklikk på lag form og anvende Stroke . Bruk følgende innstillinger:.. Opprett en Indre skygge og bruke følgende innstillinger: Opprett en indre glød. Bruk følgende innstillinger: Her er boksen utseende. Inne i boksen, tegne en svart hake ikonet med Pen Tool. Dobbeltklikk på laget og påfør en Indre skygge ved hjelp av følgende innstillinger: Legg til en indre glød. Bruk følgende innstillinger: Her er resultatet. Du kan midlertidig skjule guider for bedre oversikt ved å klikke Kommando /Ctrl-H. Hit Kommando /Ctrl-H igjen for å bringe førerne tilbake. Nedenfor er resultatet på 100% forstørrelse. Tegn en enkel, farget avrundet rektangel og legge til en kode på toppen av det. Dette vil være etiketten eller tag av e-posten. Selvfølgelig vil vi trenge flere e-post prøver. Duplisere den forrige e-post. Endre tittelen til en subtil, lysere grå. Dette indikerer at e allerede er blitt lest. For ubestjernet eller unbookmarked epost, endre stjernen bakgrunnen til grå. Vi ønsker også å legge forholdene til når e-post er i avlyttet. Flytt email 130 px til høyre. Du kan gjøre dette enkelt ved å velge lagene og deretter trykke Shift-høyrepil 13 ganger. Skjule etiketten og sjekk tegn. Legg til åpne og Svar ikoner på venstre side av e-post. Legg ikonene ved siden av teksten. Sørg for å holde dem på linje med forrige ikonet (venstre ikoner meny vi lagt på trinn 3 ovenfor). Legg til et blått rektangel form og deretter legge en hvit slette ikonet over det . Dette rektangel bak ikonet vil merke det som er valgt. Legg til en annen e-post i normal stilling. Her er resultatet for innboksvisningen. Vi er ferdig med innboksvisningen. Neste er å designe lesepostvisningen. Men først må vi organisere alle lagene. Kontroller at du har satt alle lagene i grupper. Vi ønsker å legge til nye grupper som er spesifikke for dette neste del bare. Navn gruppen, lese e-post. Prosessen er svært likt det vi gjorde tidligere ved utforming innboksvisningen. Legg en header med teksten, Les Mail Tegn en tekstboks under app spissen. Legg til en e tittel som er aktiv. For sin skrift, bruke Åpne Sans Bold med størrelsen satt til 30 pt. Legg til venstre og høyre pil ikoner på begge sider. Vi har allerede laget dette ikonet i punkt 2.18. Du trenger bare å rotere den 180 ° for å få samme ikonet, men mot venstre. Ved hjelp av disse ikonene, kan en app brukeren skanne via epost. Legg til en stjerne ikonet øverst til høyre på e-post . Legg til en e tag over epost tittelen. Legg til en avsender profilbilde. Ved siden av ansiktet, legge til et navn og en tid, og noen e-postinnhold. Legg lagmaske og deretter bruke en gradient fra hvitt til svart. Den nedre delen av e-posten skal falming. Deretter vil vi legge et svar knapp på denne e-posten. Du trenger bare å kopiere epost og endre detaljer. Øverst i høyre hjørne, legge til et svar ikon. Brukeren vil klikke på dette ikonet for å svare på denne e-posten. Her er resultatet. Nå vil vi utforme menyen til høyre, som vil styre alternativer for den valgte e-posten. Lag en ny layer gruppe, og plassere de riktige meny lag i den. Tegn et hvitt rektangel form og legg den over spissen. Dobbeltklikk på laget og deretter bruke et slag. For sin farge, bruke samme farge som header bunnen grensen, # 1872a6. Her er resultatet. Dobbeltklikk på laget. I dialogboksen Lagstil, aktivere Layer Mask Skjuler Effects. Legg til en lagmaske på laget form. Velg øvre rektangel, rett ovenfor header grensen, og deretter fylle den med svart. Bruk Type Tool til å legge til "meny" inne i rektangelet. Her er det resultatet vi har. Vi er nå utforme menyen til venstre, som viser app alternativer. Gjør et nytt lag, og deretter fylle området under header med # 1972a5 og deretter redusere Opacity til 80%. Tegn en hvit rektangel form som dekker ca 60% av hoved lerret bredde. Dobbeltklikk på figuren, og påfør et strøk med innstillinger som ligner på menyen til høyre i punkt 5.2. Legg til en lagmaske ved å velge den øvre området, rett ovenfor header bunnen grensen. Fylle markeringen med svart. Sørg for at du har aktivert lagmaske Skjuler Effect i dialogboksen Lagstil. Hvis du ikke har, dobbeltklikker du på figuren for å åpne den. Legg til en meny inne i rektangelet. Nedenfor er innstillingene jeg brukte i tegn- og avsnittspanelene. Legg til et ikon ved siden av hvert menyelement. Dette menyen til høyre kan åpnes når innboksen er aktiv eller når du leser en individuell e-post. Nedenfor er venstremeny åpnes når app brukeren leser mail. I Photoshop, vi bare avsløre lese e-postgruppe lag og skjule innboksen gruppe lag. Og dette er resultatet når innboksen er aktiv. I Photoshop, trenger vi bare å skjule lese e-postgruppe og avsløre innboksen gruppen. Dette er den fullstendige resultat fra høyre meny. Vi går nå inn i siste del av design, fanen komponere bildet, der brukerne vil skrive nye e-poster. Gjør et nytt lag over alle de andre lagene, og deretter fylle den med blå, # 1872a5. Reduser lagets Opacity til 80%. Tegn en hvit rektangel form på senteret. Legg til en nær-ikonet på sitt venstre hjørne. Legg en sirkel banen i rektangel form, deretter plassere den bak ikonet. Dette vil gjøre det slik at ikonet kan sees enkelt. Dette er resultatet med guidene skjulte. Legg til tekst i skriveboksen. Se følgende bilder for innstillingene som brukes. Legg til en profil pic siden av for bedriften. Bak den, legge et blått rektangel med samme høyde som profilbilde. På toppen av det, legge til navnet eller e-postadresse. Legg til et nytt bilde om du vil. Under vedlegg, legge til et lite bilde som representerer bildefilen knyttet til e-posten. Hvis du legger ved andre typer filer, kan du endre dette til filtypen miniatyr. Tegn et pluss ikon laget av to overlappende rektangel figurer. Legg Send og et ikon ved siden av seg. Denne skrivevinduet kan åpnes når innboksen eller en enkeltperson e-post er aktiv. Nøkkelen er avslørende og skjule det aktuelle laget. Dette er resultatet når den hvite statuslinjen blir brukt. Dette er resultatet for fanen skrive . Foreløpig setter vi alle våre skjerm design i én fil. Dette gjør det effektivt fordi vi kan dele lag på tvers av alle design. For å gjøre ting enklere, kan vi bruke lagsammensetninger. Dette gir oss muligheten til raskt å skjule og avdekke lag for hver design. Kontroller at du har lag satt opp for innboksen. Åpne opp lagsammensetninger panel. Opprett en ny comps lag. Name it innboksen, aktivere Synlighet, og klikk deretter OK. Sett opp et lag for Les e-post. Lag en ny Layer Comp igjen. Denne gangen name it lese mail Sett opp lag for menyen til høyre. Som i forrige trinnene, lagre dette inn i lagsammensetninger. fortsette å jobbe dette, før vi har Layer Comp for innboksen med venstre menyen, innboksen med menyen til høyre, innboksen med kategorien komponere, lese e-post med menyen til høyre, og lese e-post med kategorien komponere. Klikk på trekantikonet for å bla til neste forrige lagsammensetning. Grab gratis flat iPhone mockup fra PixEden. Hvis du vil redigere skjermen, velger telefonen fargen du vil ha, og dobbeltklikk på smart lag SKJERMEN HER inne fargen telefon gruppe lag. Den smarte lag vil bli åpnet som en egen fil. Gå tilbake til vår app design. Aktiver innboks design, velg alle (Kommando /Ctrl-A), og deretter kopiere alle (Kommando /Ctrl-Shift-C). Lim design (Kommando /Ctrl-V). Sørg for at den er plassert over alle lag .. Lagre og lukk smart lag filen. I mockup fil, er den svarte iPhone skjerminnholdet nå automatisk oppdatert. Nå kan du gjenta denne prosessen for alle andre skjermer. I denne opplæringen, viste jeg deg hvordan å designe en Gmail-stil, iOS epost app fra begynnelse å ende. I denne prosessen, viste jeg deg hvordan du skissere dine ideer, tegne noen ikoner, designe dine skjermer, samt hvordan å innlemme dine design til en realistisk mockup. Jeg håper denne opplæringen har hjulpet deg å bedre forstå arbeidsflyten involvert i å lage en app som dette, og jeg ser frem til å se designene du lager som resultat.
gruppe lag i vår design.
Trinn 4
Skift-dra objektet og sette det i sentrum av lerretet.
3. Design innboksen
Trinn 1
på midten.
Trinn 2
Trinn 3
Option menyikon, laget fra enkle avrundede rektangel figurer.
Trinn 4
Trinn 5
Sørge for å alltid organisere deg lag, spesielt når du jobber i et team.
Trinn 6
Trinn 7
Trinn 8
Trinn 9
Trinn 10
Subtle skygge under stjernen bakgrunnen.
Step 11
Tilsett hvit stjerne over den gule trekanten.
Trinn 12 Anmeldelser
Angle satt til 90 °
Avstand satt til 1 px
Størrelse satt til 2 px.
Subtle preget effekt på stjernen.
Step 13
halvfet for e-senderen, Fet for e-tittelen, og reguler for e-innhold.
Denne fargen er for ny, uåpnet epost.
Trinn 14
Fading indikerer at det er mer å se inne i e-posten.
Trinn 15
Step 16
Trinn 17
Du kan også høyreklikke og velge Roter 90 ° CW
Step 18
Trinn 19
Trinn 20
Trinn 21
Fill Type satt til gradient fra # b4b4b4 til # d5d5d5
Angle satt til -90 ° < .no>
Trinn 22
Avstand satt til 1
Choke satt til 0
Størrelse satt til 3
Trinn 23
Opacity satt til 100%
Color satt til #ffffff
Størrelse satt til en
Trinn 24
Trinn 25
Trinn 26
Avstand satt til 1
Choke satt til 0
størrelse satt til 1
Trinn 27
Opacity satt til 30%
Color satt til #eaeaea
Størrelse satt til 5 px
Trinn 28
Trinn 29
Step 30
For allerede åpnet e-post, kan du bruke en subtil farge som lys grå.
Trinn 30
Step 31
Trinn 32
Trinn 33
Trinn 34
3. Design Les Mail
Trinn 1
Husk alltid å organisere lagene.
Trinn 1
i sentrum og en innboks-ikonet på venstre side.
Trinn 2
Trinn 3
Bruk samme pilikonet vi opprettet tidligere for design konsistens.
Trinn 4
Trinn 5
Trinn 6
Du kan bruke en sirkel form hvis du vil.
Trinn 7
Trinn 8
Trinn 9
Svar ikonet som brukes her ble laget av en pil i tilpassede former.
Step 10
5. Designe Høyre Meny
Trinn 1
Trinn 2
Trinn 3
Trinn 4
Trinn 5
Trinn 6
6. Utforme menyen til venstre
Trinn 1
Trinn 2
Trinn 3
Trinn 4
Trinn 5
Trinn 6
Trinn 7
7. Designe Compose Tab
Trinn 1
Trinn 2
Trinn 3
Trinn 4
Trinn 5
Skriftstørrelse satt til 24
Space Før avsnitt satt til 30 pt < .no>
Trinn 6
Hvis du velger en sirkulær profil pic i lese post, bør du bruke det samme her .
Trinn 7
Trinn 8
Trinn 9
Trinn 10
Trinn 11
Trinn 12
Trinn 13
8. Organisere lag med lagsammensetninger
Trinn 1
Kontroller at du har organisert lagene pent før du bruker Layer Comps.Layer satt opp for innboks design.
Trinn 2
Trinn 3
. Sørg for at du har aktivert Synlighet.
Trinn 4
Trinn 5
Trinn 6
Høyre pil-ikonet for neste lag komp og venstre pil for forrige.
9. Presenterer App Designs i en mockup
Trinn 1
Rediger svart iPhone skjerminnholdet.
Trinn 3
Kopier app design.
Trinn 4
Paste design.
Trinn 5
Update iPhone skjerminnholdet.
Konklusjon