, hvordan man kan udforme en six 7 e - mail - app i photoshop,,,,,,, i denne lektion, jeg vil vise dig, hvordan der kan skabes en fast og moderne gmail inspireret, ios7 e - mail - app i photoshop.vi vil begynde med viser, hvordan man skitserer deres idéer, så vil vi se, hvordan at skabe dit design i photoshop, og endelig, hvordan at indarbejde deres design i en iphone model.lad os komme i gang!,, yderligere skærme, i denne forelæsning, vil vi også skabe følgende mobile app skærme for deres e - mail - app.,,,,,,,,,,,,,, tutor aktiver, får du brug for følgende aktiver med henblik på at afslutte denne forelæsning.jeg henter dem, før du begynder.hvis de ikke er tilgængelige alternativer skal være let at finde.,,, flad iphone 5 model, ios7 psd model, fri ikon, pack, skrifttype åbne sans,,, før du starter, trin 1, sammen med photoshop, - - er det bedst at begynde at tegne med papir og blyant.få linjer og hård billeder.ingen grund til at bekymre sig om små detaljer.og glem ikke at finde henvisninger, mange af dem.den oprindelige idé, vi kalder det v1, kommer fra en af mine venner, bagus fikri fra fikri studie.her er planen (fuldstændig udgave).,,,, første skitse – v1, lavet af papir og pen.,,, trin 2, i dette tilfælde, efter at have set den skitse, klienten bad om nogle ændringer.efter et par e - mails, her er nogle nye tegninger.lad os kalde dem v2 og v3 og v4.,,,, anden sketch – v2.om fastsættelse af hoved og mærke, tilføje profil billede og søgning.,,,,, tredje skitse – v3.tilføj aflyttet e - mail - tilstand, fjerne billedet af hovedet, og tilsætning af e - mail - mulighed og afkrydsningsfelt.,,,,, fjerde skitse – v4.udvikling af v3.,,, 1.at mærke ikon, nu, hvor vi har færdiggjort vores skitse, kan vi begynde at arbejde i photoshop.før vi begynder, er det imidlertid vigtigt at bemærke, at grænseflade design ofte kræver en hel del ikoner.du kan skabe dem selv, eller du kan downloade dem på nettet.hvis du vil gøre dem selv til praksis, vil jeg vise dig, hvordan at drage et af de symboler, der anvendes i denne forelæsning (etiketten ikon).den anden ikoner anvender de samme metoder.du kan downloade et ikon, samt alle de andre billeder fra den frie ikon - pakning, der er nævnt i ovenstående afsnit, tutor aktiver,.,, trin 1, skabe nye fil (, fil > nye...).i næste dialog kasse, bredde og højde, at 43 pixels.klik, ok,.,,,, nye fil dialog kasse.,,, trin 2, aktivere afrundet rektangel værktøj med radius: 4 px,.der fyldes op til den blå,
a72a5 og slagtilfælde, ingen.trække en afrundet rektangel form med størrelse, den 19. × 19 pixels,.,,,, udarbejde en blå form for mærkning, ikon.,,, trin 3, tilsættes afrundet rektangel vej på tidligere form.denne gang, sæt den størrelse, den 13. × 13.for at hjælpe dig med at se bedre, jeg midlertidigt gemte tidligere form.,,,,, trin 4, slå, kommando /control-t, til at ændre kurs.drej den, 45 °,.,,,, at rotere, klik og drag uden omdannelse tegnkasse.,,, løntrin 5, i cs6, det vil oplyse dem om, at den form, vil blive omdannet til normale vej.det betyder, at du ikke længere kan ændre dens parametre, på et fly fra mulighed bar.bare klik, ok,.,,,, i photoshop, cc, form, vil blive ændret til normale vej.,,, og nu har vi grundlæggende etiket form.,,,,, trin 6, se på den vej, er punkt holdning nøje.vi ønsker at sikre, at vores stjerne er frisk.,,,,, trin 7, anvendes, direkte valg værktøj (a), manuelt at ændre holdning, for den vej,.,,,,,,,,,,, her er, hvad vi har efter justering (venstre er ikon, før tilpasning, og lige efter tilpasning).i denne situation viser det sig, at resultatet ikke er så vigtig.men i andre tilfælde er disse ekstra skridt kunne være vigtigt og kan forbedre udseendet af deres ikon.,,,,, at resultatet før og efter tilpasning af hvert punkt.,,, trin 8, på toppen af ikon, tilføje en cirkel på vej.dets tilstand, trækkes fra den mulighed bar,.,,,,, trin 9, slå, kommando /control-t, og så dreje ikon, 45 °,.hold vagt, for at hjælpe dig skifte form på 15 ° (.,,,,,,, hold vagt til at hjælpe dig med at skifte mellem kl. 15 ° (.,,, trin 10, igen, er vi nødt til at tilpasse alle punkt holdninger ved hjælp af den direkte udvælgelse værktøj,.,,,, meddelelse vej nr.de kom til pixel - nettet.,,,,,, trin 11 nedenfor, kan du se den ikon før og efter den justering,.,,,,, før justering.meddelelse øverste del af ikon.en pixel er utæt.,,,,, efter justering.meget bedre,.,,, trin 12, to store afrundede form ved at vælge den ved hjælp af rektangel, vej udvælgelse værktøj.slå, kommando /control-j,.drej den, – 15 °,.,,,,, trin 13, gentager den oprindelige, store afrundede rektangel vej.sæt det over den sidste vej.dets tilstand, træk,.,,,,, punkt 14, slå, kommando /control-t, og så resize.glem ikke at repositionere hvert punkt, for at få en frisk udseende.,,,,, det her er resultatet i forstørrelse, 100%,.,,,, -, kommando /control-1, at fastsætte, forstørrelse, i photoshop, 100%,.,,, trin 15, det sidste skridt er eksport som et ikon.gem den, baggrund, lag ved at klikke på øjet ikon.ikonet baggrund er gennemsigtige.,,,,, trin 16, redde ikon for web (, fil > undtagen web - og anordninger,...).brug de indstillinger nedenfor:,,,, fil type, der, png-8,,,, gennemsigtighed, der er udvalgt,,,,,, hvis din ikon indeholder mere farve eller gennemsigtighed, kan det være nødvendigt at udtage png-24.,,, 2.forberedelse af lærred, trin 1, foretage en ny fil (, fil > nye...).dets størrelse, 640 × 1136 pixels,.,,,, -, kommando /control-n, til hurtigt at indlede den nye fil dialog kasse.,,, trin 2, få nye retningslinjer for at hjælpe med de elementer i præcise holdninger.klik, betragtning > nye guide.vi vil have en horisontal vejledning til 15, 30, 45, 60, 580, 595.610 og 625 pixels.til den vertikale vejledninger, vi ønsker dem på 40 og 128 pixels.,,,, horisontal vejledning på 40 varer,.,,,,, horisontal vejledning på 128 px,.,,,,, vertikal vejledning på 15 varer,.,,,,, vertikal vejledning på 580 varer,.,,, her er de vejledninger på venstre og højre hjørne.,,,,,,,, trin 2, udvælge, den øverste område ved hjælp af rektangulær markise værktøj (m).et nyt lag, og fyld den med sort (, edit > udfylde...),.,,,,, du kan bruge genvej, d, alat slette, til hurtigt at fylde udvælgelse med sort,.,,, trin 3, tag den programmerbare 7 psd model fra teehan + lax.skift trække, status bar, gruppe lag i vores design.,,,,, trin 4, og det på toppen af konstruktionen.,,,, skift trække objekt, og læg det i midten af lærred.,,, her er den hvide.,,,,, 3.design indbakke, trin 1, vil vi begynde at arbejde på hovedet.brug den, linje redskab, til at trække et, 4 px, linje på bunden af hovedet.aktivér type redskab og så tilføje, indbakke, dets center.,,,,, trin 2, for at sikre, at teksten er på plads, centreret om bord, tegne et rektangel med samme bredde som lærred.vælg både tekst lag og sidste rektangel.fra mulighed bar, klik, tilpasse horisontale center,.,,,,, kan vi se, at den tekst, der nu sidder perfekt på midten af hovedet.du får ikke brug for dette rektangel mere og kan slette det.,,,,, trin 3, drage tre afrundet rektangel former.- på venstre side af hovedet, i midten af vejledninger.vi vil bruge den som indbakke muligheder menu ikon.,,,, valgmulighed menu ikon, fremstillet af simple afrundet rektangel former.,,, trin 4, på den højre side, tilføje en ny mail ikon og drage tre pladser.pladserne skal anvendes til individuel post mulighed ikoner.,,,,, løntrin 5,, hvor hvert lag logisk på en gruppe lag.udvælge lag og rammer, kommando /control-g, til at sætte det ind i en gruppe lag.sørg for at give en let genkendelig navn.,,,, sørg for altid at organisere de lag, især når man arbejder i et team.,,, trin 6, lad os komme i gang med at finde bar.gøre et stort gråt rektangel form under overskriften.reducere sin, uklarhed,.,,,,, trin 7, tilsættes eftersøgningen ikon og tekst til det næste.reducere sin, uklarhed, og vi ønsker, at det skal være lidt mere diskret.,,,,, trin 8, næste, kan vi begynde at arbejde på en e - mail.tilføje en, 1 px gray, linje.på venstre side, udarbejde en gul rektangel, form, størrelse, 50 × 50 px,.,,,,, trin 9, aktiver, pen værktøj (p).klik på den nederste venstre hjørne af rektangel til at fjerne det.,,,,, og nu har vi en trekant form.,,,,, trin 10, dobbelt lag form.tilføje, drop shadow, på lag.,,,,,,, diskret skygge under star - baggrund.,,, trin 11, anvendes den, polygon redskab, til at trække en stjerne.fra mulighed bar, udvælge stjerne og dets, sider, til 5.klik ikke at trække en stjerne med en størrelse af 26. × 26 px,.,,,, tilføje white star over den gule trekant.,,, trin 12, double click laget og anvende en indre skygge,.,, anvendes følgende indstillinger:,,,, vinkel, der til 90 °,,,, afstand, fastsat til 1 px,,,,,,, størrelse, fastsat til 2 px,.,,,,,, her er det resultat, vi har.,,,, diskret, mønsterpræget virkning på stjerne.,,, trin 13, aktiver, type redskab og så ikke at udarbejde en ny tekst boks.tilføje en tekst, der indeholder alle de vigtige oplysninger i en e - mail, som afsender, titel og indhold.tilføje tid oplysninger på højre side af e - mail,.,,,,, se nedenfor for yderligere detaljer om skrifttyper, der anvendes i den e - mail -.,,,, skrifttype, der skal åbne sans,.,,, semibold, e - mail - afsender, modige, e - mail - afsnit, og reguler, e - mail - indhold.,,,,, denne farve er for nye uåbnede, e - mail -.,,, punkt 14, tilføje endnu et lag til e - mail - indhold.trække en stigning fra, hvid, sort.sørg for den nedre del, er ved at forsvinde.,,,, forsvinder, viser, at der er mere at se på e - mail.,,, gå 15, udarbejde en ny rundet rektangel form med minimumsstørrelse, 17 × 3 px,.,,,,, trin 16, slå, kommando /control-t, at anvende forvandling.skifte form, 45 °,.,,,,, en advarsel dialog boks vil blive vist.- ja, til at bekræfte det.,,,,, skridt 17, dobbelt form ved at slå, kommando /control-c og kommando /control-v,.slå, kommando /control-t, og drej den, 90 °,.,,,, du kan også højre klik og vælge, roterer 90 ° cw,,,, skridt 18, flytte sin holdning i nedadgående retning.kan du se nøje, at vektoren punkter har brug for nogle justeringer,.,,,,, skridt 19, aktiver, direkte valg værktøj, og så sig det, indtil den klikker på pixel.,,,,,,,, her er pilen ikon, 100%, forstørrelse,.,,,,, gå 20, aktivere afrundet rektangel værktøj, dens radius, 3 px,.trække en afrundet rektangel form på venstre side af den e - mail - med en størrelse på 18 × 18 px, og fyld den med den farve,&#eaeaea,.,,,,, gå 21, double click laget form og anvendelse, slagtilfælde,.der anvendes følgende indstillinger:,,,,,,, størrelse, fastsat til 1,,,, - type, der gradient fra&#b4b4b4, til&#d5d5d5,.,,, vinkel, der - 90 °,.,,,,,, skridt 22, skabe et indre skygge og anvende følgende indstillinger:,,,, afstand, fastsat til 1,,,, kvæle, sat til 0,,,,,,, størrelse, fastsat til 3,,,,,,, gå 23, skabe en indre glød.der anvendes følgende indstillinger:,,,,,,, - uklarhed, sat til 100%,,,, farve, der,&#ffffff,,,,,,, størrelse, fastsat til 1,,,,,,, skridt 24, her er checken rubrik udseende.,,,,, skridt 25, i æsken, tegne et sort flueben ikon ved hjælp af pen værktøj,.,,,,, gå 26, double click laget og anvende en indre skygge ved anvendelse af følgende indstillinger:,,,, afstand, fastsat til 1,,,, kvæle, sat til 0,,,, størrelse, fastsat til 1,,,,,,, skridt 27, tilføje en indre glød.der anvendes følgende indstillinger:,,,,,,, - uklarhed, der er fastsat til 30%,,,, farve, der,&#eaeaea,,,,,,, størrelse, fastsat til 5 px,,,,,,, skridt 28, her er resultatet.du kan midlertidigt skjule vejledninger til bedre ved at klikke, kommando /control-h,.slå, kommando /control-h, igen at bringe de vejledninger,.,,,,, nedenfor, er det resultat, der er 100% forstørrelse,.,,,,, skridt, 29, trækning på en enkel, farvede afrundet rektangel og tilføje et mærke på toppen af det.dette vil være den etiket eller et af e - mail,.,,,,, gå 30, vil vi naturligvis har brug for mere e - mail - prøver.to tidligere e - mail.ændre titlen til en subtile, lettere gray.dette viser, at den e - mail - allerede er blevet læst.for unstarred eller unbookmarked e - mail, ændre den stjerne baggrund for grå.,,,, for allerede åbnet e - mail, brug en subtile farve som lys grå.,,, gå 30, ønsker vi også at tilføje betingelserne for, når den e - mail - er aflyttet.flyt den e - mail, 130 forsyning, til højre.du kan gøre det her let ved at udvælge lag og så slå, skift ikke pil, 13 gange.gemme etiketten og flueben ikon.,,,,, skridt 31, tilføje, åbne, og svar, ikoner på venstre side af e - mail.tilføje ikoner næste til teksten.sørg for at holde dem i overensstemmelse med tidligere ikon (venstre menu ikoner vi tilføjede i, trin 3, ovenfor).,,,,, trin 32, tilføje et blåt rektangel form og så tilføje en hvid slette ikon over det.dette rektangel bag ikonen vil markere det som valgt.,,,,, skridt 33, tilføjer endnu en e - mail i normal stilling.,,,,, skridt 34, her er resultatet for indbakke synspunkt.,,,,, 3.design læse post, trin 1, vi er færdige med indbakke synspunkt.det næste er at læse posten synspunkt.men først, er vi nødt til at organisere alle lag.vær sikker på, at du har sat alle lag i grupper.vi ønsker at tilføje nye grupper, er specifikke for den næste del.navn gruppen, læser e - mail,.,,,, husk altid at organisere deres lag.,,, trin 1, er processen meget tæt på det, vi har gjort tidligere, da udformningen af indbakke synspunkt.tilføje en overskrift med teksten, læs post, i midten og en indbakke ikon på venstre side.,,,,, trin 2, gøre en tekst boks under app header.der tilsættes en e - mail - afsnit, der i øjeblikket er aktive.for den skrifttype, anvendelse, åbne uden fri, med den minimumsstørrelse, 30 pkt.,.,,,,, trin 3, tilsættes til venstre og højre - pil ikoner på begge sider.vi har udformet dette ikon i punkt 2.18.du skal bare dreje det, 180 °, at få samme ikon, men mod venstre.ved hjælp af disse symboler, en app bruger kan skanne e - mails.,,,, anvende de samme pil ikon, skabte vi tidligere design sammenhæng.,,, trin 4, tilføjer en stjerne ikon på øverste højre hjørne af e - mail,.,,,,, løntrin 5, tilføje en e - mail - over e - mail - afsnit.,,,,, trin 6, tilføje en afsender profil billede.,,,,, du kan bruge en cirkel, form, hvis du vil.,,, trin 7, ved siden af ansigtet, tilføje et navn og en tid, - - og en e - mail indhold.,,,,, trin 8, tilføje lag maske og så anvende en stigning fra hvid til sort.den nedre del af e - mail - bør være svagere.,,,,, trin 9, næste, vi giver svar på denne e - mail.du er simpelthen nødt til at gentage - og ændre dens detaljer.i øverste højre hjørne, tilføje et svar ikon.brugerne vil klik et ikon for at besvare denne e - mail.,,,, det svar, der her blev gjort fra ikon - en pil i skik former.,,, trin 10, her er resultatet.,,,,, 5.design menu, trin 1, nu vil vi udforme den menu, som vil kontrollere muligheder for de udvalgte e - mail.lave et nyt lag - gruppen og en menu lag i det.trække en hvide rektangel form og placere det over hovedet.,,,,, trin 2, double click det lag, og derefter anvende et slagtilfælde.for dens farve, anvendelse af samme farve som overskrift nederste grænse,ݐa6,.,,,,, det her er resultatet.,,,,, trin 3, double click laget.i, lag stil, dialog kasse, aktiver, lag maske gemmer virkninger,.,,,,, trin 4, tilføjer et lag på lag - form.vælg den øvre rektangel, lige over hovedet grænse, og fyld den med sort.,,,,, løntrin 5, anvendes, type redskab, at tilføje "menu" inden for det rektangel,.,,,,, trin 6, her er det resultat, vi har.,,,,, 6.design venstre menu, trin 1, er vi nu, at venstre menu, som viser den app muligheder.lave et nyt lag, og fyld område under overskriften med,޴a5, og derefter reducere sin, uklarhed, til 80%,.,,,,, trin 2, opstiller en hvide rektangel form, der dækker omkring 60% af de vigtigste lærred bredde.dobbeltklik form og anvende et slagtilfælde med indstillinger svarende til den rigtige menu, afsnit 5.2,.,,,,,,,, trin 3, tilføje en lag - udvælge det øverste område, lige over hovedet nederste grænse.fyld udvælgelse med sort.sørg for at du har aktiveret lag maske gemmer virkning i, lag stil, dialog kasse.hvis du ikke har, double click form til at åbne den,.,,,,, trin 4, tilføjer en menu inden for det rektangel,.,,,,, løntrin 5, under de indstillinger, jeg brugte i, karakter og, stk, paneler.,,,,, trin 6. tilføj et ikon, ved hver menupunkt.,,,,, trin 7, er denne ret menu kan åbnes, når indbakke er aktive, eller når du læser en individuel e - mail.under den venstre menu er åbnet, mens app bruger læser mail.i photoshop, afslører vi blot det, læse e - mail, gruppe lag og skjule, indbakke, gruppe lag.,,,,, og det er resultatet, når den telefon er aktive.i photoshop, vi er bare nødt til at skjule det, læser e - mail -, gruppe - og afsløre, indbakke, gruppe.,,,,, det er den fulde resultat fra menuen.,,,,, 7.udformning af komponere regning, trin 1, er vi nu ind i den sidste del af konstruktionen, komponere regning, hvor brugerne vil skrive nye e - mails.et nyt lag, frem for alle andre lag, og fyld den med blå,ݐa5,.,,,,, trin 2, reducere lag er, uklarhed, til 80%,.,,,,, trin 3, trækker det hvide rektangel form i midten.,,,, trin 4, tilføjer en tæt ikon i venstre hjørne.tilføje en cirkel vej til rektangel form, så det bag ikon.det vil gøre det så ikon let kan se.,,,,, det er resultatet af de vejledninger, skjult.,,,,, løntrin 5, tilsættes tekst i komponere kasse.se følgende billeder til de anvendte indstillinger,.,,,, skrifttype, type, at åbne uden regelmæssig,,,, skriftstørrelse, fastsat til 24,,,, rummet før afsnit, fastsat til 30 pkt.,,,,,,,,,, trin 6, tilføje en profilbillede næste,,.,,,, hvis du vælger et cirkulære profilbillede i læse post, bør de anvende det samme her.,,, trin 7, bag det, tilføje et blåt rektangel med samme højde som profil billede.på toppen af det, tilføje navnet eller e - mail - adresse.,,,,, trin 8, tilføje endnu et billede, hvis du vil.,,,,, trin 9, i henhold til tillæg, tilføje en lille billede for billede fil, der er knyttet til den e - mail.hvis du lægger andre typer af filer, du kan ændre det til fil type virksomhed beskrevet.,,,,, trin 10, tegne et plus ikon fra to overlappende rektangel former.,,,,, trin 11, tilføje, at sende, og et ikon, til det næste.,,,,, trin 12 dette udgør vindue, kan åbnes, når indbakke eller en individuel e - mail er aktiv.nøglen er at afsløre og gemmer sig passende lag.,,,,, trin 13, dette er resultatet, når den hvide status bar anvendes.,,,,, det er resultatet for komponere regning.,,,,, 8.tilrettelæggelse af lag med lag comps,,, trin 1, i øjeblikket, vi sætter alle vores skærm design i en fil.dette gør det effektivt, fordi vi kan dele lag på tværs af alle mønstre.for at gøre tingene nemmere, vi kan bruge, lag ting.det giver os mulighed for hurtigt at skjule og afsløre lag for hvert design, sørg for, at du har lag, der er fastsat for indbakke.åbne, lag comps, panel.skabe en ny computer lag.navn, telefon,, aktiver, synlighed og klik, ok,.,,,, sørg for at have organiseret din lag pænt med lag comps,.,,,,, lag, der er fastsat for indbakke design.,,, trin 2, oprette et lag, læse posten.,,,,, trin 3, gøre et nyt lag comp, igen.denne gang, hedder det, at læse posten.sørg for at du har aktiveret, synlighed,.,,,,, trin 4, nedsat lag for lige menuen.,,,,, løntrin 5, som i de tidligere foranstaltninger, medmindre det i lag comps,,.,,,,, trin 6, bliv ved med at arbejde, indtil vi har, lag comp, for indbakke med venstre menu, indbakke med ret menu, indbakke med komponere regning, læs post med ret menu, og læs post med komponere regning.klik trekanten ikon at rulle til næste tidligere lag comp.,,,,,,, ikke pil ikon for næste lag comp og forlod pil for foregående.,,, 9.fremlæggelsen af app design i en model, trin 1, tag fri fast iphone model fra pixeden.at redigere den skærm, farve, du vil vælge den telefon og double click smart - lag, din skærm her, i den farve er mobil gruppe lag.den kloge lag vil blive åbnet som en separat fil.,,,, så sort iphone skærm indhold.,,, trin 3, vende tilbage til vores app design.aktivér indbakke design, udvælgelse af alle (- /control-a,), og en kopi af alle (- /control-shift-c,.,,,, - app design.,,, trin 4, pasta design (- /control-v,).sørg for, at det er hævet over enhver lag...,,,, pasta design.,,, løntrin 5, redde og tæt på intelligent lag fil.i model fil, den sorte iphone skærm indhold er nu ajourføres automatisk.kan du gentage denne proces for alle dine andre skærme.,,,, ajourføre iphone skærm indhold.,,, konklusion i denne lektion, jeg viste dig, hvordan at udforme en gmail stil, programmerbare e - mail - app fra start til slut.i denne proces, jeg viste dig, hvordan at skitsere deres idéer, drage nogle billeder, design, dine skærme, samt at integrere deres design i en realistisk model.jeg håber, at denne forelæsning har hjulpet dig bedre forstå arbejdsgang, der er involveret i at skabe et program som dette, og jeg ser frem til at se de design, du skaber som følge.,,,,,,,,,,,,,,,,