skabe en salgsfremmende iphone app sted i photoshop,,,, i denne forelæsning, vi fortsætter denne serie om at skabe en iphone app salgsfremmende sted under vores tidligere fyrværkeri fremstillet trådnet og tilføje farve, tekstur, billeder, og virkningerne for de polske af designet i photoshop.vi skal bruge nogle interessante elementer, som en iphone image og en stilfuld aurora vektor baggrund illustration.vi afslutter med en professionel sted, design, klar til at blive kodet.lad os få det!,,,, endelige billede forpremiere, se på webstedet, design, vil vi være med til at skabe.du kan se det endelige billede forsmag under eller en fuldvoksen billede her.,,, trin 1 - dokument fælde, tag fat i "wireframe_final. psd" vi udførte i vores sidste lektion i denne serie (bygge en salgsfremmende iphone app websted trådnet med fyrværkeri).kalde det dossier til "final. psd" eller deres foretrukne navn.,, se nedenfor, hvordan importerede fil åbner ret godt i photoshop.der er et problem med teksten kasser er længere end det dokument om (andet under, meddelelse, hvor æsken er lang og fortsætter tidligere bunden i dette dokument).jeg ved ikke, en hurtig måde at ordne det.det er en særhed, jeg nævnte i den sidste lektion.hvis nogen kender en god position, så lad mig det vide.så gå igennem og skriv teksten af hvert element og genskabe en ny tekst boks og pasta teksten tilbage på plads, eller bare lade det være, som det er, også gå videre og slette "bemærker" folder, som vi ikke har brug for de notater her.,,,, trin 2 - første dominerende visuelle element, jeg ofte, at arbejde på den dominerende (og mere vigtigt) visuelle elementer af designet, og så bygge videre derfra.så, lad os komme i gang med "fremme" område, skal vi tilføje en aurora illustration på baggrund her.ian yates skrev en fantastisk illustrator forelæsning om at nordlys vektor sky tegner.der er et par fordele ved hjælp af en vektor grafisk her.den ene er, at den stylistically står med et unikt look.vi kan også anvendes til andre mellemstore branding områder., efter at have udfyldt aurora borealis vektor resten gå videre og indføre deres enestående resultat i photoshop.du kan se, at den eneste ændring, jeg gjorde, var at få design.du skal naturligvis skabe din egen, for deres arbejde.jeg er klistret illustrationen i som pixels, fordi jeg ikke er nødt til at foretage ændringer i vektor kilde fil, efter at det i, så ingen grund til at bruge en klog ting.,,, træk den vektor, maske fra vores salgsfremmende baggrund form på vores aurora borealis design.,,, det gælder vektoren maske som det fremgår af nedenstående, sørg for at den linje, som du vil have det,.,,, trin 3 - at tilføje en iphone image, der er spektakulær gratis af en iphone billede med masser af iphone gui grafik.bare downloade den iphone gui psd 3,0.åbne filen, og slæber den iphone billede i deres arbejdsprogram.dernæst skalere den og stil op med de retningslinjer, som er anført i det andet nedenfor.sørg for at få det billede, som vist.den eneste skærm del tog andet end telefonen er en gennemsigtig vinklede skærm blænding.,,,, så vi kan tilføje aurora borealis illustration til iphone.det gør de design, se lidt mere interessant.i den endelige websted en videofil, ville se godt ud her, hvilket viser en app i aktion.hent en kopi af aurora borealis illustration.du kan få en mindre udgave af det, som vi tager et mindre rum.sæt det i pixels.,, nu med illustration placeret over iphone i den stilling, du vil have det, og illustration udvalgte, gå til lag > vektor maske > afslører alt.så tag den rektangel værktøj (e) at sørge for, at den er sat til at veje i øverste venstre hjørne, og trække på din skærm.hvis du ikke får det den nøjagtige størrelse, har du brug for første gang, så slå command + t og resize rektangel vektor maske efter behov.,,, vær sikker på at beholde din lag organiseret, mens vi fortsætter med at bygge denne konstruktion.,,, trin 4 - arbejder på vores farver, vi er kommet to dominerende elementer på den side.også aurora illustration, tilføjede vi er en stor kilde til lidt farve fra at gøre denne side er farve.gå videre og double-click på default "baggrund" lag til at låse den op, hedder det "sammenhæng", og det i en ny "baggrund" mappe.,, tag maling spanden værktøj (g), skal ændre forgrundsviden farve på en mørk blålig gray (# 536475), som jeg har udvalgt fra illustration.nu ændrer de primære navigation baggrund beliggende i "hoved" folder en mørkeblå (# 212b3f), der også blev udtaget fra illustration.giv "bottom" område, baggrund, de samme blå farve i baggrunden.,, skal vi også ændre farven på nogle af vores navigation knapper på dette punkt.billedet viser, hvor vi er så langt i denne konstruktion.ændre primær navigation på baggrund farver til en lidt lettere grå blå (# 5e7285) end den side baggrund, bortset fra de nuværende side knap.vi ønsker at give den nuværende side knap indtryk af at være inde.så gør det samme farve som side (# 536475).vi vil forbedre denne meget lidt senere i læren når vi lægger på vej.,, i "secondary_nav" område, udvælge de større baggrunden bag aurora ikon, og ændrer den til en grå farve blå (# 475665), der er en smule mørkere end side baggrund.igen, vi får det til at se ufærdige.også gå videre og anvende samme lighter grå blå (# 5e7285) som det primære navigation knapper i meter lang knapper.,,, trin 5 - ændre vores tekst, farve og grundlæggende styles, kan man se, hvor mørkt med vores side design gør det klart, at det er pinligt, tid til at arbejde med tekst farver.vi designede den tekst, især med mørke til lys for modellen, men nu må vi gå frem i mørke.ændring i deres tekst til hvide.jeg vil påpege nogle få undtagelser under.også rydde enhver tekst, repositionere elementer og eksperimentere med fuld vægt som dig igennem dette.,, jeg sætter noget af teksten i myriad pro, selv i områder, der vil blive kodet og ikke billeder, jeg ofte brugt helvetica for design, som er overalt på edb - systemer.jeg har også brugt helvetica på nogle områder, som jeg ville have en lidt anderledes ud end myriad pro anvendes.- aurora navn i futura kondenseret ekstra modig, hvor den skulle bruges til branding.,, kan du se teksten i de fleste af de "hoved", "secondary_nav", "fremme" og "organ" er hvid.et par undtagelser er logoet område (som er en indikation af en art, for nu), "aurora app" tekst, som er blå (# 131828) til at stå ud, og positioner for det organ, der er den samme mørke blå.,,, er vi også nødt til at arbejde på "bottom" afsnit tekst.jeg sætter alle positioner i myriad pro dristigt på 20pt.den farve er en kvik lille skat (# 85a1bc).jeg brugte det samme blå teksten forbindelser.jeg satte resten af teksten i hvid med en mindre helvetica bold.,, "lille" er bare et par farve ændringer.forbindelsen blev ændret til en endnu bedre baby blå (# 97b8d8), undtagen for de aktive forbindelse, der er hvid og understreget.ophavsretten tekst er 12pt helvetica og forholdsvis mørk blå (# 212b3f).,,, trin 6 - med logoet design, først tage et skærmbillede af vores psd fil i det område, som vi vil bringe logo (med logoet indikation af en art tekst slukket).tænd tegner.de skærmbillede på egne lag og lås den.jeg slukkede artboard synlighed (forskydning + command + h).nu skabe et lag for deres logo og indsætte teksten "ilovemyapps", som tjener som virksomhedens navn til ministeriet.den tekst, der i cooper std sorte kursiv i 30pt, og give det en hvid fylde, som vist nedenfor.med den tekst, der er, at teksten er > skabe retningslinjer, så ungroup teksten (forskydning + command + g).også det "o", som vi skal erstatte det med et hjerte.,,,,,,, så lad os arbejde på hjertet ud.første tur på nettet (command + ") og tænd snap til nettet (forskydning + command +"), som vil gøre det muligt at drage form let.gå videre og skabe et halvt hjerte form med pennen værktøj.gå nu til objekt > omdanne > afspejler og anvende en kopi med de indstillinger, som vist nedenfor.nu kommer den indre kant af både et halvt hjerte former, så i pathfinder palet klik på fusionere, som giver os en endelig hjerte form.,,,, nu omfang hjertet form og det vist.desuden arbejdet på sammen hvert brev af teksten til det ser lige til dig.jeg vil have hele teksten skal anføres som en, men jeg med hvert ord, bare en smule for at øge læseligheden.det lyder som et ord om.nu kopi og pasta, den endelige logo er en smart genstand i photoshop.,,,, trin 7 - ved at tilføje stil til vores design, vil vi fortsat arbejde på vej ned fra top til bund, men husk på, at du er, at du kan hoppe rundt i flere forskellige områder af design, og eksperimentere med forskellige udseende og stilarter, der er stor, og føle sig fri til at gøre, som "hoved" afdeling, udvælge baggrund, så gælder det lag, styles er vist nedenfor.det er toppen af kroppen område, en lille fremhæve og en lille skygge er kastet på hovedet - området, som skubber det lidt tilbage.,,,, nu gælder det styles er anført nedenfor til vores logo.for gradient - overlay - gradient går fra gray (# c0c4c9) til lys grå (# e3e5e7).,,,,, trin 8 - tilføje stil til vores primære navigation, først skal vi arbejde med de ikke - aktive primære led baggrund styles, dvs. alle undtagen for "system" link.anvendelse af stilarter er anført nedenfor og anvende farver, se lige dig.note: jeg har, er en masse inspiration fra meta - stedet for denne del af designet.jeg elsker det arbejde, der er udført af dette selskab, tjek deres blad, mens du er der.,,, er det vigtigt at forestille sig, hvor lyskilden i dit design.vi søger en diskret belysning virkninger, som vil give denne udformning af en moderne føler, men vi er stadig nødt til at holde en lyskilde,.,, forestille sig, at der er en lyskilde, der kommer fra toppen af side skyder lige ned, og som giver os lyset retning for mange af de styles bliver vi at tilføje.selvfølgelig kan du forestille dig mere end én lyskilde, og du kan afvige fra denne ret, men at holde lyset primære lyskilde i betragtning, vil bidrage til at gøre den stil, du anvender mening og arbejde sammen visuelt.,,,,,, nu anvende styles er anført nedenfor til "hvad" led baggrund, som er vores aktive forbindelser og vil få det til at se ud, som om det er trykket ned.,,,,,, gælder følgende installationer og emboss stil til teksten i det primære navigation for at gøre den stå her lidt.virkningen på teksten er diskret, men bemærkelsesværdig.,,, trin 9 - anvendelse af stil til vores sekundære navigation, først lad os tilføje vores iphone app ikoner.for de vigtigste aurora ikon, anvender samme aurora illustration, som anvendes i pr - område.drag vektoren maske, der anvendes som en grå square i øjeblikket på en reduceret version af aurora illustration henviser til trin 2 om, hvordan man gør det.lad os tilføje lidt stil.der tilføjes følgende lag stil ikon.,,,, anvende de samme former for ydre ikon baggrund, som vi gjorde med "programmer" baggrund knap i trin 7.kontrol, klik på lag virksomhed beskrevet i "programmer" knap baggrund og udvælge kopi lag styles.så vælg den ydre baggrund, kontrol på sin lag virksomhed beskrevet og vælge pasta lag stil, som vist nedenfor.,,, trin 10 - anvendelse af stil til vores sekundære navigation fortsatte, er vi nu nødt til at tilføje nogle stil til vores anden anvendelse ikoner.det er kun indehavere vise kunden, hvor andre symboler ville gå.så jeg vil give dem en lignende udseende som aurora ikon, men ikke gøre dem stå meget ud.så lad os begynde med at fylde dem med et mønster.først skal vi gøre mønster.,, åbne en 4px af 4px nye dokument oprettet til nettet.tag blyanten redskab, der børster størrelse, 1px og male fire områder, som vist nedenfor.de mørkeste rektangel er᎜a og letteste er𽘰 denne farve.slå kommando + at udtage alle, så gå til edit > at definere mønster og navn "purple rain." ja, jeg har en t - shirt med dette mønster på det i 80 'erne i folkeskolen.,,, vælges den første indikation af en art ikon.- er det en form lag i øjeblikket.vi er nødt til at rasterize.så gå til lag > rasterize > fylde indhold, som holder vores vektor maske på plads, men rasterizes den fylde.meddelelsen er resultatet en rasterized lag med en vektor, maske, der anvendes på det hurtigt og enkelt.gå igennem og gøre det for hver indikation af en art ikon.,,,,, tag maling spanden værktøj, litra g), og i den øverste venstre hjørne vælge mønster fra ned, sørg for, at vores "purple rain" mønster er udvalgt, så klik én gang for hver indikation af en art ikon at anvende mønster.nu kontrollerer klik på aurora ikon virksomhed beskrevet og kopiere lag stil, så sæt det på hver indikation af en art anvendelse ikon.også tilpasse afstand af ansøgningen navne for at gøre plads til styles.,,,,,,, så lad os også tilpasse vores standard app butikken indikation af en art knap derovre til højre i denne afdeling.en enkel måde at gøre denne knap blanding i bedre til vores design er at ændre baggrunden farve.gå til image > tilpasninger > farve /mætning og anvende de indstillinger, som vist nedenfor, eller de af deres valg,.,,, trin 11 - anvendelse af stil til vores pr - område, lad os starte med baggrund og knapper.først skal vi anvende stil til vores store baggrund område.vælg aurora illustration og anvende følgende lag styles.det giver os et højdepunkt på toppen og en streg rundt om området.,,,, gælder den samme stil til øverste højre prisområde, baggrund, men også tilføje styles er vist nedenfor.de farver, der anvendes til lilla gradient - overlay - udtages fra aurora grafisk.farverne på gradient fra purple (# 68448f) mørkere lilla (# 320580) og derefter tilbage til midten af lilla farve (# 65428c).,,,, anvende de samme lag styles til vores vigtigste "tænder din iphone" position, som vi gjorde i trin 7.kan du kopiere og pasta laget stil fra der.anvende samme installationer og emboss stil at prisen tekst og underområde, som vi anvendte den primære navigation tekst i trin 7.du vil måske ændre opacitet af fremhæve tilstand eller skygge tilstand i skyggen, forsøg med hvad ser bedst ud til dig.også vælge den horisontale bestemmelse, som er en 1px høje form, og det er farve, sort.også anvende de indstillinger, som vist nedenfor det.,,, trin 12 - anvendelse af stil, at vores vigtigste opfordring til handling ", nu gælder følgende lag styles til vores vigtigste opfordring til handling".vi har placeret en dråbe skygge på dette, så det står i baggrunden.det er en lys farve, som vil tiltrække opmærksomhed.det er placering også tiltrækker opmærksomhed.gradient - overlay - har lignende farver til den, der anvendes for den pris, baggrund, men det har kun to farver, der anvendes i stedet, som går fra purple (# 68448f) til mørk lilla (# 320580).vi kan tilføje en pil i bare et øjeblik, så det står mere samt.,,,,,,, så tag den ellipse værktøj (u), og bruge det til at skabe en form lag, som vist nedenfor.farven er ligegyldigt, fordi styles, vil dække det alligevel.byt den knap tekst at se afbalanceret med det ekstra element.vi vil bruge denne cirkel, at downloade pil i kort tid.der gælder følgende lag stil knappen (farver til gradient - overlay - gå fra cc67e tila4f66).,,,,,,, så vi kan skabe vores pil, læg det i photoshop, og stil.,, åbne illustrator og skabe en web - dokument.tænd lyset > vise net og betragtning > snap til nettet.anvendelse af pennen værktøj til at tegne en pil af nettet.størrelsen betyder intet.nu resize til en form, der er på størrelse med større pil som vist nedenfor.gå nu til virkning > stil > runde hjørner og anvendelse i en radius af 0.139.nu kopi pil og pasta som en vektor smart objekt i photoshop.note: jeg bruger sort under en demonstration, men pilen skal være hvidt,.,,, gælder den samme stil at pilen, som vi gjorde vores logo i trin 7 og omfang til at passe til rummet.resultatet er vist i det andet nedenfor.,,,, her er, hvad vi har nu.den øverste del ser god ud.lad os gå over til liget.vi har hovedparten af lokaliteten i aften.det vil være nemmere at her.,,, trin 13 - anvendelse af stilarter til vores krop område, og der er ikke mange stilarter, der skal anvendes her, bare et par.lad os starte med titler.vi ønsker at få dem til at se takkede ved at fremhæve inderbunden karakter kanter, som er en stil, der ofte anvendes i æble lokaliteter.gælder den stil er anført nedenfor til "tornerose" afsnit tekst.også anvende de samme stil, "screenshots" og "træk" titler.med disse senere to titler, ændre uklarhed til 40% (alt andet i denne drop shadow lag stil er den samme).,,, anvende de samme lag stil til hovedpunkterne i den "træk" kolonne, som anvendes til at det er titlen.de hidtidige resultater er vist nedenfor.,,, en kopi af det horisontale regler fra "fremme" afdeling, ændre farve til blå (# 131828) og omfanget af den for at tilpasse den til område over "screenshots" titel.se, hvordan den stil er bibeholdt.,,, nu kopi samme horisontal regel og bruge flere kopier af det i den sidste kolonne i dette afsnit, som vist nedenfor.sørg for at fjerne de eksisterende unstyled horisontale regler.,,, og nu følger de samme foranstaltninger for disse indikation af en art billeder her, som du gjorde i går.anvende samme lag styles og "purple rain" baggrundsmønster fylde.det er bare en hurtig måde at gøre dette område til at se godt ud for klient undersøgelse, før du får fat i den faktiske billeder, der vil tage det senere.den endelige "organ" er vist nedenfor.,,, punkt 14 - anvende stil til bunds, første afsnit, lad os anvende samme installationer og emboss lag stil til vores afsnit her, som vi gjorde i teksten i vores primære sejlads i trin 8.nu trække fire kopier af vores stiliseret horisontal regel ned og resize som nødvendige, eller som anvender samme former og farver til eksisterende vandrette linjer, som vi gjorde for dem i "krop".,,, erstatte de resterende horisontale bestemmelser i dette afsnit med streger.du kan bruge den type redskab og dash centrale for dette.jeg brugte myriad pro på 14pt for dette.det er noget, som vil blive kodet i forskning, men vi vil sikre os, at vi kommunikerer effektivt i udformningen.,,, anvende de samme lag stil vores knapper, som vi gjorde i vores primære navigation.bare kopiere de lag, styles.vær sikker på at stylize teksten af knapper, så godt.nu træder i stedet for vores twitter fugl med en full-color udgave, som man kan downloade gratis i practika ikon pakke fra godt blad.,,, anvende følgende lag stilarter på baggrund af "bottom", og vi er færdige.,,,,,,, konklusion, der er masser af kreative websted løsninger du kan skabe med kun en håndfuld udvalgte elementer, en interessant farve, anvendelse af passende styles og opmærksomhed på diskret lys virkninger.det endelige billede er nedenfor.du kan se en større udgave her.,,