Share
Det här är den andra av en tvådelad tutorial-serie om att återställa en iPhone-applikation med Photoshop. Behöver du komma ikapp? Läs del ett på PSDTuts +! Vi kommer att täcka resten av programmets användargränssnittskonstruktion i denna handledning, med stor uppmärksamhet åt de små och känsliga detaljerna, som typografi, knappdesign och textfält som gör den övergripande designen pop.
Vi avslutade den tidigare handledningen med vår lanseringssida färdigställd, liksom den huvudsakliga bakgrunden för våra skärmar och sidhuvud / navigeringsfältet för varje skärm.
När du har öppnat ditt dokument i Photoshop kommer vi att gå direkt till jobbet på våra ikoner. I den tidigare handledningen har vi redan ställt in bakgrunden, verktygsfältet och textbakgrunden (där vi ska placera vår text, knappar och allt annat). Vi vill ha fyra olika ikoner, som alla representerar samma sak i den ursprungliga applikationen. De fyra ikonerna är:
För att skapa våra ikoner ska vi använda några linjalguider för att se till att de är lika stora. Gå till Visa> Linjaler om de inte redan finns på din skärm. Dra ut ett par guider från linjalerna och sätt dem bredvid vår vita bakgrund.
Välj Rektangulärt markeringsverktyg och skapa ett faststorleksval på 100x75px. Klicka någonstans på din duk och placera markeringen bredvid din vänstra guide i verktygsfältet.
Dra ut en annan guide från linjalen och gör den slut direkt i slutet av ditt val (det ska automatiskt snäppa).
Upprepa steget, dra en guide till toppen och botten av valet.
Fortsätt upprepa detta steg tills vi har fyra olika rektanglar bestående av guider.
Dessa former kommer att användas för att placera våra ikoner. Orsaken till att de är bredare än än de är långa är att vi också placerar ikonernas titel under den. Vi kommer att centrera varje enskild ikon och textelement i vårt nät.
Med samma teknik som vi just använt lägger du till några fler guider så vi vet var du ska placera våra ikoner och text, enligt nedan:
Även om det ser förvirrande ut, när vi börjar utforma ut ikoner och sätter in vår text kommer sakerna att se mycket enklare ut.
Nu har vi satt upp våra guider, vi kan faktiskt börja utforma våra ikoner och text. Jag ska börja med texten. Ta tag i Textverktyg och välj en ren, lättläst teckensnitt. Texten kommer att bli väldigt liten, så det måste vara rent! Jag ska använda Helvetica för hela min kaross typsnitt. Fyll i de luckor du har skapat för din text och se till att du placerar dina textrutor i verktygsfältet.
Jag rekommenderar att du anpassar din text manuellt med hjälp av piltangenterna som Photoshops inbyggda (text) anpassningsalternativ kan ibland vara lite av och det är viktigt att dessa korta titlar centreras väl. När du har lagt in din text måste vi lägga till några stilar för den. Öppna fönstret Layer Styles (Blending Options) och kontrollera att förhandsvisningssymbolen är markerad.
Den första stilen vi ska tillämpa är en enkel färgöverläggning. Jag använder färgen # 955425, en medium brun nyans som jag tog från applikationsrubrikens titel.
Nästa stil att lägga till är en enkel 1 pixel stroke med # E5C39B färg. Se till att stroke appliceras på utsidan av din text och inte på insidan.
För att göra texten lättare att läsa och passa in i vår trästil mer, kommer vi att applicera en inre skuggstil. Ställ opaciteten i din stil till 65%, och ditt avstånd och storlek till 2px. Jag har vinkat min inre skugga på 45 grader.
När du har tillämpat stilar men klickat på OK-knappen, måste vi tillämpa samma stilar på våra andra ikonrubriker. För att göra det, välj ditt "Going Out" textlag och gå sedan till Högerklicka> Kopiera lagstil. Markera dina andra textlagrar samtidigt genom att hålla ned skiftknappen och gå sedan till Högerklicka> Klistra in lagstil att tillämpa samma stil på dina andra titlar.
Med ikonrubrikerna nu färdiga är det dags att skapa några enkla ikoner. För att skapa våra ikoner ska vi använda de olika Markeringsverktyg. Den första ikonen vi ska producera är rapportikonen, eftersom det här blir det enklaste! Skapa ett nytt lager och kalla det "Reports Icon."
Vi vill att ikonen ska sitta snyggt i vår fyrkantiga guide som vi skapade för den. Välj Rektangulärt markeringsverktyg och gör ett litet urval inom din ruta, enligt nedan:
Fyll markeringen med svart och vrid sedan valet ner några pixlar och upprepa processen. Fortsätt att göra detta tills du har en fin rad svarta former.
Gör ett nytt val, den här gången går horisontellt istället för vertikalt.
Ta bort raderingsnyckeln för att ta bort de onödiga områdena i raderna som vi just skapat. Detta skapar en ikon som enkelt representerar en lista eller rapporttypsdokument. Klistra in din lagerstil som vi just skapat på ikonen.
Innan du flyttar till andra ikoner dra ut en ny guide från linjalen och placera den direkt under vår nya ikon, enligt nedan:
För vår inställningsikon kommer vi att skapa en enkel nyckelnyckel. Skapa ett nytt lager och kalla det "Inställningsikon". Välj Polygonal Lasso Tool och samtidigt som du håller skiftnyckeln skapar du en halv nyckelform enligt nedan:
Fyll formen med svart och duplicera sedan lagret.
Gå till Redigera> Transformera> Flip Vertical att vända på dubbletangsformen. Gå till Redigera> Gratis omvandling och samtidigt som du håller skiftnyckeln roterar du den andra nyckeln halvvägs.
Använd markörtangenterna, nudge din nyckelform tillsammans, och lägg sedan ihop de två skarvskikten.
Flytta, rotera och skala din nyckel till dess det ser bra ut och använd sedan din kopierade lagerstil (er) till den.
Använda liknande tekniker, skapa egna "spendometer" och "gå ut" ikoner. Du kan ta bort dina guider efteråt genom att gå till Visa> Rensa guider.
Välj enskilt varje av dina fyra ikoner och sänka opaciteten hos dem ner till cirka 80%. Detta gör det möjligt för vissa träkorn att visa sig och ge den övergripande navigeringsverktygsfältet lite mer djupgående.
Välj varje enskild en av dina ikoner och ikonrubriker och duplicera dem. Slå samman dem alla tillsammans genom att gå till Lag> Sammanfoga ner. Öppna upp alternativet Layer Style (Blandningsalternativ) för det nya sammanslagna lagret och ta bort alla förutom färgöverlagring. Ändra överläggets färg till vit och klicka på OK.
Placera det nya lagrets vita lagret under alla andra ikonerna och ikonens titellager, och använd sedan markörknapparna, dämpa ditt lager nedåt en pixel. Sänk skiktets opacitet till cirka 20%. Det här är en mycket subtil förändring, men allt lägger till kvaliteten på appens slutliga utseende.
Med navigationsikonen klar och dammad är det dags att gå vidare till huvudinnehållet. Som nämnts i den första delen av handledningen är mycket av skärmarna ganska lika (bara olika titlar), så vi kommer att koncentrera oss på några av skärmarna:
Vi ska börja med Spendometer-skärmen. Välj din Textverktyg och använd samma typsnitt som du använde för dina ikontitlar, skriv "Spendera pengar igen? Hur mycket den här gången?" högst upp i din vita låda. Min teckenstorlek var inställd på 4pt. Se till att du skapar den här nya textrutan i din mapp för spendometerlager.
Öppna fönstret Layer Style (fönstret Blandningsalternativ) för ditt nästa textlager. Applicera en färgöverlagringsstil med färgen # 613111 (en mörkbrun). Lägg också till en Drop Shadow med standardinställningarna med en 15% opacitet.
Nästa uppgift är att skapa vår textinmatningsfält och vår knapp. Välj Rektangulärt markeringsverktyg och skapa en fast storlek på 550x100 pixlar. Klicka på duken och centrera ditt val. Skapa ett nytt lager och kalla det "Money Entry." Gå till Välj> Ändra> Slät och skriv in en radie av 5px och klicka på OK.
Fyll ditt val med svart. Innan du avmarkerar din form, gå till Välj> Ändra> Kontrakt och kontrakt din form med 10 pixlar. Skapa ett nytt lager och kalla det "Money entry field", fyll i ditt nya sortiment med svart.
Välj ditt "Money entry" -lagret och öppna fönstret Blandningsalternativ. Applicera en färgöverlägg med färgen # E4DCD5. Vi ska också lägga till en mycket subtil Inre Skugga, med hjälp av alternativen nedan:
Minska opaciteten hos skiktet som vi just arbetat med till cirka 50%. Öppna fönstret Blandningsalternativ för ditt lager som heter "Money entry field". Applicera en ren vit färgöverlägg i textfältet och en 1px stroke med färgen # C0B8B0.
Duplicera de två formerna vi just gjorda och nudge dem ner. Byt namn på dem till "Spent Background" och "Spent Button." Öppna fönstret Blandningsalternativ för ditt lager som heter "Spent Button." Ta bort alla aktuella alternativ och använd ett överlagringsöverlägg. Jag ska använda gröna färger som går från # 50911B till # A0D327. När du är nöjd med din övergångsöverlagring, tryck på OK-knappen.
Vi ska lägga till några fler detaljer till vår knapp, men som vi kommer att vara väldigt exakta med dem och uppmärksamma alla små detaljer kommer vi att göra det manuellt. Välj innehållet i ditt knapplager.
Skapa ett nytt lager ovanför din knapp och kalla det "Knappens yttre stroke". Gå till Redigera> Slag och applicera en 1px stroke med någon färg på utsidan av ditt val.
Öppna uppslagsfönstret Blädderalternativ och använd en standardgradient med färger som går från # 30580F till # 86BD23.
Upprepa de sista stegen igen, men den här gången använder du en 1px-stroke på insidan av ditt val och använder en gradient som sträcker sig från # 53941B till # E2E8D4.
Välj Textverktyg och dra ut en textruta över dig-knappen. Skriv "SPEND IT" i din textruta. Jag använde Helvetica bold på 8 poäng (storlek). Justera din text till mitten av din knapp.
Applicera en övertoningsöverläggning till din text, från en mycket ljusgrå (jag använde #EBEBEB) till vit (#FFFFFF). Vi vill också tillämpa en inre skugga med hjälp av inställningarna som ses nedan:
Gör ett urval av din ursprungliga knappform och skapa sedan ett nytt lager över alla dina andra knapplager. Kalla det "Knappljud". Fyll ditt val med vit och gå sedan till Filter> Buller> Lägg till Buller. Lägg till cirka 25% buller och klicka sedan på OK.
Byt skiktets blandningsläge till Soft Light och sänka skiktets opacitet till cirka 50%. Detta lägger till en fin subtil bit textur på vår knapp. Nu har vi gjort det, vi är alla färdiga med vår knappdesign! Ett snabbt, enkelt och effektivt sätt att få knappen att se ut som den har tryckts på är att enkelt vända knappen runt 180 grader, så att den mörkare gröna är överst i stället för botten.
I den ursprungliga applikationsdesignen fanns separata skärmar för spendometerstatistiken (sidan som visar hur mycket du har spenderat och hur mycket du har kvar att spendera) och den sida som vi just har utformat. Jag anser att det är onödigt att ha två skärmar men så kommer det att minska den till bara den och lägga all annan information på samma skärm som den vi just har konstruerat.
Den information som vi behöver visa under vår knapp är enligt följande:
Efter att ha ökat storleken på min "Spendera pengar igen? Hur mycket den här gången?" text, jag kommer att gå vidare till "statistiken" under knappen. Dra ut några guider på din duk enligt nedan:
Ta tag i Textverktyg och dra ut en textruta i ditt återstående utrymme på skärmen. Skriv din första titel ("Aktuell utgiftskurs") och använd sedan samma stil som vi använde för "Spendera pengar igen?" text till din nya typ.
Upprepa steget två gånger igen med de andra statstitlarna.
Sänk de tre typerna av opacitet till ca 90% för att göra dem lite lätta än vår andra text. Detta gör inte en stor skillnad men skiljer dem lite. Duplicera ditt "Current Spend Rate" -lagret och dra det över till din högra kolumn. Ändra texten till "$ XX.XX per dag". Öka storleken på typsnittet lite, och justera det till mitten av kolumnen med markörknapparna.
Upprepa steget igen så att du slutar med något som liknar skärmdumpen nedan:
För att avsluta denna statistik kommer vi att lägga till en fin och subtil 2px streckad kant. Skapa ett nytt lager och kalla det "Stroked Border White". Välj din Single Row Marquee Tool och gör ett urval mellan din "Spender It" -knapp och "Current Spend Rate" -titeln. Fyll markeringen med en färg som är något mörkare än bakgrunden - jag använder # E1D9D3.
Duplicera skiktet och byt namn på det "Stroked Border Black" och nudge det ned en pixel så att den nya linjen är direkt under din gamla. Välj lagens innehåll och fyll det med en färg som är något mörkare än den vi just använde - jag använde # A59C93.
Som du kan se från skärmdumpen ovan, är gränsen / separatorn överlappande områden vi inte vill ha den till. Välj "Stroked Border Black" -laget och tryck på Cmd + E kombination för att slå samman den till det vita slagslagret. Byt namn på skiktet till "Separator". Välj Rektangulärt markeringsverktyg och gör ett urval på vänster sida av din skärm.
Slå Radera-Key för att ta bort den onödiga separatorn. Flytta ditt val över till höger och upprepa processen.
Använd markörtangenterna, skjut upp din separator upp / ner för att se till att den är centrerad mellan knappens botten och toppen av texten - min är exakt 30px under min knapp och 30px ovanför min text. Minska opaciteten hos ditt separatorlager till cirka 50%. Jag bestämde mig sedan för att vända den så att den ljusare färgen på botten som jag tyckte det såg bättre ut.
Upprepa processen flera gånger tills det finns en separator under varje textrad - ett snabbt sätt att göra detta är att bara duplicera varje föregående lager och sedan nudga ner den rätta mängden. Jag har också nudged hela statistikmappen ner så att den sitter i mitten mellan knappen och botten av vårt vita bakgrundsområde.
Lägg till några finjusteringar, till exempel att ändra färgerna på våra figurer som är kvar att spendera. Jag justerade också mina siffror till höger.
Efter att ha lagt till lite dummy text till vårt pengar textfält har vi avslutat vår första skärmdesign! Knappen här är tydligt blickfångaren, med den djärva gröna lutningen och uppmärksamheten på små detaljer som de vita och svarta stroke.
Resten av våra sidor (enligt ovan) kommer att använda en kombination av de tekniker som vi redan har använt under de föregående stegen i denna handledning och i del ett. Sätt de tekniker du lärt dig att använda för att producera resten av applikationsdesignen själv.
Nedan följer skärmdumparna i den ursprungliga designen bredvid mig, omdefinierat användargränssnitt som du har läst för att skapa dig själv.
Så där har vi det, vårt slutliga resultat av denna ganska långa tvådelade handledning gjorde oss ganska bra! Skicka länkar till ditt resultat i kommentarfältet nedan - vi skulle gärna se dem!
Vi söker aktivt efter designers för att bidra med sina mobila designfärdigheter till vårt samhälle. Kontakta oss idag om du är intresserad av att skriva betalt innehåll!
Accentsconagua