skabe en mobil vejr - app grænseflade i photoshop,,,,,,, mobile app design er en af de hurtigst voksende områder inden for design - industrien.i denne forelæsning, vi vil vise dig, hvordan at udforme en mobil app design grænseflade med mange af de redskaber i adobe photoshop.vi vil begynde med viser, hvordan man at oprette et net og skabe en enkel baggrund.vi vil vise dig, hvordan at udnytte snappet til nettet af spillefilm og bruge grundlæggende maskering og vektor former for at skabe et sæt faste ikoner.endelig vil vi bruge rektangel værktøj, en tekst, og grundlæggende blanding og tilpasning af teknikker til at skabe yderligere komponenter af en vejr - app grænseflade.lad os komme i gang!,,,, 1.oprette et nyt dokument & nedsat en net, åbne photoshop og ramte, kommando /ctrl + n - at skabe et nyt dokument.sæt den bredde, 640px, og den højde, 1136px, ind i resten af de egenskaber, som vist i nedenstående billede, så klik, okay.gøre nettet (betragtning > vise > net) og kom i kvadratnet (udsigt > snap til > - nettet).for det første skal du bruge et net, 5px, så bare gå, edit > præferencer > vejledninger, nettet & skiver, og fokusere på, nettet, afsnit.kom ind, 5, i, gridline hver rubrik, og 1 i, opdeling, boks.også fastsætte nettet farve,&#a7a7a7,.når du har sat alle disse egenskaber klik, okay.ikke bliver afskrækket af alle gitteret.det vil gøre deres arbejde, og de kan let slå /det muligt ved hjælp af - /ctrl + ", tastatur genvej.du burde også åbne, info, panel (, vindue > - info) for en levende billede med størrelse og placering af deres former.,,,, 2.ændre farven på den baggrund og skabe vejr symboler, trin 1, fokusere på, lag, panel (, vindue > lag), hold den, alat, nøgle fra dit tastatur og blot to klik på den eksisterende ", baggrund, " lag unclock.sikre, at deres lag bliver udvalgt og flytte til toolbar.klik på den pågældende forgrundsviden, farve og erstatte den eksisterende farve attributter,&#bebebe,.tag den, maling spanden redskab, og ganske enkelt klik ind i dit sejl.til sidst, det skulle se ud i det følgende billede.,,, trin 2, fastsatte forgrundsviden farve på white (,&#ffffff,), vælge afrundet rektangel værktøj, fokusere på toppen, bar og fastsætte, radius på, 10px,.gå til din lærred og skaber blot en 55 x 20px afrundet rektangel, knipse på nettet vil gøre dit arbejde.sørge for, at denne hvide form bliver udvalgt og skifte til, ellipse værktøj.tjek det, tilføje, at knap fra oven, bar så blot tilføje, 30px, cirkel, som vist på det andet billede.sikre, at deres hvide vektor form fortsat er udvalgt og anvende, ellipse værktøj, tilføje, 35px, cirkel, som vist på det tredje billede.endelig, med samme redskab, tilføje, 25px, cirkel, som angivet i fjerde image.gå til den, lag - panelet, double click på vektoren form i dette skridt, og blot navn det ", cloudyicon, ".,,, trin 3, benytter, ellipse værktøj, skabe en, 25px, cirkel.sikre, at denne nye vektor form bliver udvalgt, fortsætte, ellipse værktøj, check, tilføje, at knap fra oven, bar og blot tilføje, 5px, cirkel, som vist på det andet billede.skift til den direkte udvælgelse værktøj (eller den vej udvælgelse værktøj), hold den, alat, nøgle fra dit tastatur, klik ind i det lille, 5px, cirkel, så bare trække det ned som vist i det tredje billede.,,, trin 4, hold fokus på vektoren form i det foregående trin og tilføje yderligere seks kopier af det, 5px, cirkel, som vist i følgende billeder.når du er færdig, gå til den, lag - panelet, og navnet på denne nye vektor form ", sunnyicon, ".,,, løntrin 5, reselect din ", cloudyicon, " vektor form og gentage det (- /ctrl + j).vælg en kopi og trække et par pixels til at adskille den fra den oprindelige form.hold fokus på dette eksemplar og tag afrundet rektangel værktøj.sikre, at den radius, er fastsat til, 10px, skabe, 5 x 15px, vektor form, og det er som vist på det andet billede.vælg det nye afrundet rektangel og ramte, kommando /ctrl + t (eller gå til edit > fri ændre).fokus på toppen bar ind i en,), grader vinkel, så slå ind.i den sidste ende tingene skal se ud i den tredje billede.sikre, at afrundet rektangel værktøj, stadig er aktive, skabe, 5 x 25px, vektor form, og det er som angivet i fjerde image.vælg det nye afrundet rektangel og rotere,), grader, som du gjorde med det foregående.ved hjælp af afrundet rektangel værktøj, skabe en ny, 5 x 15px, vektor form, det som vist i sjette billede så dreje det,), grader.med det samme redskab, oprettelse af en tredje, 5 x 15px, vektor form, det som vist i det ottende billede så dreje det,), grader.i slutningen thigs skal se ud i den niende image.,,, trin 6, fokusere på, lag - panelet, reeselect kopi af ", cloudyicon, " vektor form, sammen med de fire skift afrundet rektangler og ramte, kommando /ctrl + g, til gruppen.hold fokus på, lag, panel og blot navn denne nye gruppe ", rainyicon, ",,, trin 7, reselect din ", cloudyicon, " vektor form og gentage det (- /ctrl + j).vælg en kopi og trække et par pixels til at adskille den fra den oprindelige form.hold fokus på dette eksemplar, og tag den direkte udvælgelse værktøj.vælg fire anker punkter, der er fremhævet i det første billede, så bare slå, slette, knap fra dit tastatur.i den forbindelse bør se ud i det andet.reselect de ", sunnyicon, " vektor form og gentage det (- /ctrl + j).vælg en kopi, og det, som er vist i det tredje billede.,,, trin 8, hold fokus på vektoren former i det foregående trin.gå til den, lag - panelet, hold den, kommando /ctrl, nøgle fra dit tastatur og bare klik på det eksemplar af ", cloudyicon, " vektor form til at lade en udvælgelse omkring det.sikre, at det forbliver aktive og gå, udvælge > ændre > udvide.træde " 2, " i den nye vindue og klik, okay.gå til den, lag - panelet, vælges den kopi af ", sunnyicon, " vektor form, hold den, alat, nøgle fra dit tastatur og ganske enkelt klik, tilføje lag maske, button.i den sidste ende din maskerede solen skal se ud i den tredje billede.slå, kommando /ctrl + d, til at slippe af med den udvælgelse, gå til, lag - panelet, udvælge to vektor form, der udgør denne nye ikon, og gruppen (- /ctrl + g).hold fokus på, lag - panelet, og navnet på denne nye gruppe ", mostlycloudyicon, ".,,, trin 9, reselect din ", cloudyicon, " vektor form og gentage det (- /ctrl + j).vælg en kopi og trække det lidt det til venstre for at adskille den fra den oprindelige form.sikre, at denne nye vektor form er udvalgt og ramte, kommando /ctrl + t (eller gå til edit > fri ændre).fokus på toppen bar, kontrollere, mentain billedformat, indgår 50.00% i bredden (eller højde) boks, så slå ind.reselect de ", sunnyicon, " vektor form og gentage det (- /ctrl + j).vælg en kopi, og det, som er vist i det tredje billede.,,, trin 10, hold fokus på vektoren former i det foregående trin.gå til den, lag - panelet og lade et enkelt valg om, at sky.sikre, at det forbliver aktive og gå, udvælge > ændre > udvide.træde " 2, " i den nye vindue og klik, okay.gå til den, lag - panelet, reselect kopi af ", sunnyicon, " vektor form, hold den, alat, nøgle fra dit tastatur og ganske enkelt klik, tilføje lag maske, button.i den sidste ende din maskerede solen skal se ud i den tredje billede.slippe af med dette valg (- /ctrl + d), gå til den, lag - panelet, udvælge to vektor form, der udgør denne nye ikon, og gruppen (- /ctrl + g).hold fokus på, lag - panelet, og navnet på denne nye gruppe ", mostlysunnyicon, ".,,,, 3.skabe 7 dage vejrudsigt side af app, trin 1, til følgende foranstaltninger, får du brug for et net, 10px, så bare gå, redigere> præferencer> vejledninger, net og skiver og indlede, 10, i, gridline hver rubrik.sæt forgrundsviden, farve,�aeef, vælge, rektangel værktøj, skabe, 640 × 100px, vektor form, og det er præcis, som vist i følgende billede.net - og snap til net bør lette deres arbejde.,,, trin 2, forgrundsviden, farve,&#ff0000, vælge, rektangel værktøj, skabe en, 80px, square, og det er præcis, som vist i følgende billede.,,, trin 3, fokusere på, lag - panelet, og udvælge blåt rektangel og red square.gå til din lærred, tag den, flytte værktøj (v), hold den, alat, og skift, nøgler fra dit tastatur, så bare klik og trække dine udvalgte vektor former, 100px, op.tilbage til, lag - panelet, fokusere på den kopi af det blåt rektangel og blot erstatter den blå meddc63f,.til sidst, det skulle se ud i det følgende billede.,,, trin 4, bliver de blå, grøn og rød vektor former og sprede de kopier, som vist i følgende billede.drage fuld fordel af det, kom til nettet, træk og sikre, at man undgår overlapning eller huller.,,, løntrin 5, fokusere på toppen, red square.vælg din ", mostlysunnyicon, " - gruppen, og det er stort set som angivet i den første billede.gå til den, lag - panelet, lader en udvælgelse, der red square og sørge for, at deres ", mostlysunnyicon, " gruppe stadig er udvalgt.tag den, flytte værktøj (v), fokusere på toppen, bar og ganske enkelt klik, tilpasse vertikale centre, og tilpasse horisontale - knapper.i den sidste ende din ", mostlysunnyicon, " grupper bør placeres i centrum af den røde plads som vist i det tredje billede.glem ikke at slippe af med dette valg (- /ctrl + d).,,, trin 6, udvælge resten af ikoner, en efter en, og anvender de teknikker, der er nævnt i det foregående trin for at tilpasse dem som vist i det følgende billede.,,, trin 7, fokusere på, lag - panelet, vælge alle røde firkanter og simpelthen på, slette, nøgle fra dit tastatur for at fjerne dem.næste gang, du er nødt til at ændre de farver, der anvendes for de grønne og blå trekanter.vi vil inddrage en farve med hver ikon.fokus på rektangel, der ligger bag de ", sunnyicon, " vektor form og erstatte den eksisterende farve,&#ffbc53,.gå til områder, der ligger bag din ", mostlysunnyicon, " - gruppen og erstatte den eksisterende farve,&#ffda71,.fortsætte med kvadratisk eller rektangulær form, ubearbejdet, der ligger bag ", mostlycloudyicon, " - gruppen og erstatte den eksisterende farver,&#c9caa3,.gå over til rektangel, der ligger bag de ", cloudyicon, " vektor form og erstatte den eksisterende farve,&#bccccc,.endelig, udvælge rektangel, der ligger bag de ", rainyicon, " - gruppen og erstatte den eksisterende farve,&#a8b8b8,.,,, trin 8, fastsætte forgrundsviden farve på sort (,�), tag den, rektangel værktøj, skabe, 110 - x 700px, vektor form og det, som er angivet i den første billede.sørge for, at denne sort firkant bliver udvalgt, fokusere på, lag - panelet, og lavere, uklarhed, 3%,.,,, trin 9, forgrundsviden farve på white, tag den, rektangel værktøj, skabe en ny, 110 - x 700px, vektor form, og det er som vist i det første billede.sørge for, at denne hvide rektangel bliver udvalgt, fokusere på, lag - panelet, og lavere, uklarhed, til 7%,.,,, trin 10 for det følgende skridt, får du brug for et net, 5px, så bare gå, redigere> præferencer> vejledninger, net og skiver ind, 5, i, gridline hver rubrik.fokus på venstre side af den øverste, gul rektangel og vælge den horisontale type redskab (t).bare klik på din lærred og tilføje " tirsdag " stykke tekst.sørge for, at dette nye stykke tekst bliver udvalgt og åbne karakter, panel (, vindue > karakter).tag den, calibri, skrifttype, der stil, modige, størrelsen på, 35pt, og farven på hvid.gå tilbage til dit sejl - og sørge for, at deres stykke tekst placeres som vist i det første billede.tilbage til, lag - panel og double click på dit stykke tekst til at åbne den, lag - vindue.tjek, drop shadow, rubrik anføres de egenskaber, som vist i nedenstående billede, så klik, okay.hold fokus på, lag, panel, klik på din del af teksten og gå til kopi lag stil.vi vil bruge disse lag stil attributter for den tekst, der vil blive tilføjet senere.,,,,, trin 11, sørg for, at den horisontale type redskab, stadig er aktive, tilføje de resterende dag navne som vist i det følgende billede og bruge det samme, art og egenskaber.sørge for, at denne nye tekst er udvalgt, fokusere på, lag - panelet, klik på et af disse tekster og simpelthen tage, pasta, lag - stil.,,, trin 12, sørg for, at den horisontale type redskab, stadig er aktive, tilføje den temperatur, værdier, som vist i følgende billede og anvender samme karakter, attributter, der anvendes i dag navne.også tilføje, lag stil, attributter med det samme, pasta, lag - mulighed.,,, trin 13, sørg for, at den horisontale type redskab, er stadig aktiv og tilføje ". hej, " og ", lo, " dele af teksten, som vist i følgende billede.anvende samme skrifttype, stil og farve, men mindre størrelse, 14pt,.vælg alle disse stykker af tekst og tilføje den diskrete, lag stil, attributter ved, pasta, lag - mulighed.,,, punkt 14, i det følgende skridt, får du brug for et net, 1px, så bare gå, redigere> præferencer> vejledninger, net og skiver, ind, 1, i, gridline hver rubrik.sæt den forgrund farve på white, tag den, ellipse redskab, og skabe en, 20px, cirkel.sikre, at denne nye vektor form bliver udvalgt og skifte til, rektangel værktøj.tjek, udtræk, knap fra oven, bar så bare gøre en, 10 x 7px, rektangel som vist på det andet billede.tag den, slette anker punkt redskab, og klik på anker punkt, der blev fremhævet på det andet billede til let at fjerne det.tag den, direkte valg værktøj, udvælge anker punkt, der blev fremhævet i den tredje image og bare trække det, 5px, til højre.i den forbindelse bør se ud i den fjerde image.gå til den, lag - panelet, finde vektoren form i dette skridt, og det ", pil, ".,,, trin 15, reselect din ", pil, " vektor form, som vist i følgende fokusere på, lag - panelet.først ændre, blanding af mode, at bløde lys, så sænk, uklarhed, til 75%.,,, trin 16 sig (- /ctrl + j) din ", pil, " vektor form og sprede kopier, som vist i følgende billede.,,,, 4.create den dag vejrudsigt side af app, trin 1, til følgende foranstaltninger, får du brug for et net, 10px, så bare gå, redigere> præferencer> vejledninger, net og skiver og indlede, 10, i, gridline hver rubrik.sæt forgrundsviden, farve,&#ffbc53, vælge, rektangel værktøj, skabe, 320 x 400px, vektor form, og det er som vist i det følgende billede.,,, trin 2, forgrundsviden, farve,&#ffda71, vælge, rektangel værktøj, skabe, 320 x 100px, vektor form, og det er som vist i det følgende billede.sæt forgrundsviden, farve,&#ffbc53, skabe en anden, 320 x 100px, vektor form, og det er som vist i det følgende billede.sæt forgrundsviden, farve,&#c9caa3, skabe en tredje, 320 x 100px, vektor form, og det er som vist i det følgende billede.sæt forgrundsviden, farve,&#a3d1ff, skabe en fjerde, 320 x 100px, vektor form, og det er som vist i det følgende billede.,,, trin 3, fokusere på, lag, panel og åbne, lag stil, vindue til gul, vektor form i det foregående trin.aktivér, indre skygge, anføres de egenskaber, som vist i nedenstående billede og klik, okay.fokus på, lag, panel, hold den, alat, nøgle fra dit tastatur, klik på den lille, fx, ikon, der står for din gule rektangel, blot trække det i khaki - rektangel og frigive de mus knap.gentag denne teknik til gråt rektangel.i den forbindelse bør se ud i det andet.,,,,, trin 4, til følgende foranstaltninger, får du brug for et net, 5px, så bare gå, redigere> præferencer> vejledninger, net og skiver og indlede, 5, i, gridline hver rubrik.ved hjælp af den horisontale type redskab, tilføje " morgen ", " eftermiddag ", ", godaften, " og " fra den ene dag til den anden, " dele af teksten og placere dem som vist i det følgende billede.brug den, calibri, skrifttype, der stil, dristig, størrelsen på, 30pt, og farven hvid.sikre, at alle fire udkast udvælges og gå til pasta lag stil,.,,, løntrin 5, sørg for, at den horisontale type redskab, stadig er aktive, tilføje den temperatur, værdier og anvender samme karakter, attributter, der anvendes til teksten.vælg alle disse numre og gå, pasta lag stil,.,,, trin 6, sørg for, at den horisontale type redskab, er stadig aktiv og tilføje ". hej, " og ", lo, " dele af teksten, som vist i følgende billede.anvende samme skrifttype, stil og farve, men mindre størrelse, 14pt,.vælg alle disse stykker af tekst og gå, pasta, lag - stil.,,, trin 7, fokusere på, lag - panelet, reselect din ", sunnyicon, " vektor form og gentage det (- /ctrl + j).vælg en kopi, som er angivet i den første image og ramte, kommando /ctrl + t.fokus på toppen bar, kontrollere, mentain billedformat, kom ind, 200.00% i bredden (eller højde) boks, så slå ind.i den forbindelse bør se ud i det andet.,,, trin 8, ved hjælp af den horisontale type redskab, og ", melbourne, ", ", australien, ", ", sunny, " og ", 25, °, c " dele af teksten.brug den, karakter, attributter vise nedenfor og placere dem omkring som vist i det følgende billede.når du er færdig, reselect alle disse stykker af tekst og gå, pasta, lag - stil.,,, trin 9, fokusere på, lag - panelet, reselect en af dine ", pil, " vektor former og gentage det (- /ctrl + j).vælg en kopi, og det, som er vist i det følgende billede.,,,, 5.skabe bunden, mørk bar, trin 1, for de endelige foranstaltninger, har du brug for et net, 1px, så bare gå, redigere> præferencer> vejledninger, net og skiver, ind, 1, i, gridline hver rubrik.sæt forgrundsviden, farve,񎺠, vælge, rektangel værktøj, skabe, 640 × 32px, vektor form, og det er som vist i det følgende billede.,,, trin 2, ved hjælp af den horisontale type redskab, tilføje " daglige vejr - bragt til jer af: lorem ipsum vejrtjenesten, " stykke tekst, og det, som er angivet i den første billede.brug den, calibri, skrifttype, så størrelsen på, 15pt, og farven på,񻓚,.tilbage til, lag, panel og åbne, lag stil, vindue til den mørke del af teksten.tjek, drop shadow, rubrik anføres de egenskaber, som vist i nedenstående billede, klik, okay, og du er færdig.,,,,,, tillykke!du er færdig!her er hvordan det skal se ud.jeg håber du har nydt det pædagogiske og kan anvende disse teknikker i deres fremtidige projekter.,,, er, hvordan det skal se på skærmen.,,,