Share
Denna handledningsserie visar alla steg som behövs för omformning av en iPhone-applikation med Photoshop. Du kommer att lära dig många av de unika överväganden och designmönster som används när du skapar fristående appgränssnitt. Denna handledning presenteras i två delar i samarbete med Mobiletuts +, där du i framtiden kommer att kunna hitta en ökande mängd mobildesignrelaterade handledning. Läs den andra delen av denna serie och ladda ner gränssnittet PSD på Mobiletuts+.
Välkommen till den första delen av vår tutorial-serie om omformning av Spendometer iPhone-applikationen! Applikationen är en bra liten app som låter dig hålla fast vid en budget. Som draget från Apple-webbplatsen, så är det som spendometern gör:
Om du försöker hålla fast vid en budget är det en bra idé att hålla reda på allt du spenderar, men det är svårt att skriva allt i en anteckningsbok. Moneybasics Spendometer är en applikation som gör den dagliga budgeten enkel och praktisk. Spendometern gör att du kan ställa in en budget, logga in dina utgifter och se dina utgiftsrapporter för att se var och hur mycket av pengarna du har spenderat så länge i en viss vecka eller månad, allt medan du är på språng. Det har också en funktion som hjälper dig att hålla reda på dina utgifter på en natt ute.
Varje gång du köper något, helt enkelt ange det i spendometern på din telefon, och det kommer att hålla en rekord för dig. Du kan ange dina egna utgiftsgränser och välja hur dina utgifter ska rapporteras - varje vecka eller månad.
Moneybasics Spendometer kommer att ge dig det väsentliga verktyget för att säkerställa att du stannar på din ekonomi.
Det är verkligen en härlig liten applikation som uppfyller sitt syfte bra, men låt oss alla vara ärliga, det kan göra med lite TLC från ett designperspektiv. Nedan kan du se programikonen och flera skärmdumpar av programmet. Skärmbilderna togs med hjälp av en iPhone 4 - som du kan se är vissa områden pixelerade, vilket innebär att de ännu inte har uppdaterat sin applikation med högupplöst upplösning.
Det är lämpligt att veta lite om att designa för iPhone innan vi går vidare med denna handledning. Helst bör du läsa iPhone Human Interface Guidelines från Apples officiella utvecklarwebbplats.
Som med alla stora mönster, det första du bör göra är att få en grov uppfattning om vad du vill att din design ska se ut. Det bästa sättet att göra detta förstås är genom att skissera. För stora applikationer kommer många UI-designers att rita sidor och sidor som är värda av idéer, kommentarer och brainstorms. Eftersom vi redan har en struktur för den applikation vi omkonstruerar kan vi flytta med det ganska snabbt.
Nedan följer några skisser som jag har lagt ihop - det här är väldigt grovt, och bara allmänna wireframe-idéer som jag har i mitt huvud om vad jag vill att designen ska likna. Färger och stilar kan vänta tills vi kommer senare!
Den bild jag har i mitt huvud är ett mycket enkelt att använda, snyggt, modernt och texturerat gränssnitt. Något som kommer att få folk att gå "wow". Jag vill också att den ska vara väldigt minimal - appen är väldigt enkel, och därför kommer designen att vara också. Det finns inget behov av onödig rodnad.
Kom ihåg att du inte behöver följa detta handledning ord för ord - experimentera med olika saker och sätt din egen kreativitet bakom de använda teknikerna. Vi skulle gärna se dina resultat, så dela dina framsteg i kommentarfältet.
En sak innan vi börjar: Jag skriver denna handledning medan du utformar, inte efter att du avslutat designen. Jag tycker att det är viktigt att visa den kreativa processen bakom en design. De flesta handledning skrivs efter att mönster har genomförts, och därför ser du inte designerns misstag, eller hur många försök till något som tog dem att få något rätt. Varje designer gör det här, precis som alla andra jobb - människor gör misstag, lär sig av dessa misstag och förbättrar bara saker. Så, om du ser att du kanske går tillbaka på dig själv medan du läser denna handledning, beror det på att jag har bestämt mig för att något behöver ändras! Låt oss börja!
Det första steget är att ställa in ditt dokument. Vi kommer att designa för iPhone 4: s nya High Definition Retina-bildskärm, vilket innebär att designa mycket mer än vad vi tidigare gjorde med iPhone 3GS.
Öppna Photoshop, och gå till Fil> Ny ... . Nämn ditt nya dokument något som är lämpligt, till exempel "Spendometer Redesign". Ange dina egna dimensioner (det finns ingen förinställning i Photoshop för den nya skärmen) för iPhone 4 Retina-displayen, vi kommer att använda 640x960 pixlar, med en upplösning på 326ppi (pixlar per tum), vilket är den nya standarden. Du kan se mina inställningar nedan.
Vårt nästa steg är att placera några dummyformer för statusfältet (fältet med telefoninfo och tid på), navigeringsfältet (fältet under statusfältet) och verktygsfältet (fältet längst ner på skärmen).
Det bästa sättet att göra detta är att bara sätta in en existerande skärmdump av en applikation genom att gå till Arkiv> Plats.
Du kan nu använda Rektangulärt markeringsverktyg att välja dina olika delar av designen och ersätta dem med fasta former. Jag ska bara använda svart för nu. Fyll i dessa på nya lager, och byt namn på dina lager till något som passar till exempel "Navigation Bar" och "Toolbar". Vi ska skapa grundläggande former och lägga till färg och detaljer till dem senare. Du kan också ta bort majoriteten av skärmdumpen som vi klistrade in - den enda biten jag håller är statusfältet enligt nedan.
Vi har nu en tom iPhone kanvas redo för att börja utforma. Nästa sak vi vill göra är att göra några nya mappar i vårt lagerfönster. Vi behöver flera mappar för flera olika skärmar:
Applikationen själv har faktiskt några fler skärmar än det här, men jag känner mig mycket av dem inte behövs, så vi kommer att minska det dramatiskt och anpassa mer innehåll till samma skärm. Vi kommer också att sakna några skärmar som ganska mycket kommer att replikera andra skärmar - den enda skillnaden är titlar!
Skapa en ny lagermapp i fönstret Lager för var och en av de ovanstående skärmarna. Du kan göra det genom att klicka på den lilla mappikonen i lagerfönstret. Vi behöver inte placera någonting i dessa mappar än.
Jag vill slå samman snygg och modern design med en liten hint av textur. Valfri textur kommer att vara trä, denna textur är exakt (väl värt $ 2-4). När du har laddat ner några texturer, gå vidare och placera dem i ditt dokument genom att gå till Arkiv> Placera ... . Skala din textur ner så att den passar snyggt i din UI-design och slå ihop det med ditt bakgrundsskikt.
Vi vill lysa upp vår textur lite, eftersom vi inte vill att den ska vara så djärv. Skapa ett nytt lager direkt ovanför din trästrukturbakgrund och fyll den med vit med hjälp av Paint Bucket Tool. Sänk skiktets opacitet till 35% för att lägga till en vit tvätt till din bakgrund och slå sedan samman den genom att slå på Cmd + E (Ctrl + E) kombination för att applicera tvätten till vår bakgrund.
Vi ska också använda en trästruktur för vår navigeringsfält och verktygsfält. Från samma paket från GraphicRiver väljer du en av de andra texturerna och lägger den i ditt dokument. Ändra storlek på den och placera den över navigationsfältet.
När du är nöjd med en viss position klickar du på miniatyrbilden i navigeringsfältet medan du håller Cmd-Key för att välja innehåll i lager. Klicka igen på ditt nya trästrukturlag, och gå till Redigera> Kopiera att kopiera ditt val Ta bort texturlagret och klistra in ditt val till ett helt nytt lager.
Det är dags att lägga till några stylingar till vår navigeringsfält. Högerklicka på ditt nya navigeringsfält och välj Blandningsalternativ för att öppna fönstret Layer Style. Vi vill lägga till några enkla stilar till vår navigeringsfält som dramatiskt kommer att öka utseendet på vår bar.
Låt oss först och främst lägga till en droppskugga. Jag har använt en 90 graders vinkel med 25% opacitet - alla andra alternativ är inställda som standard.
För att ge våra navigeringsfält lite mer djup, kommer vi att applicera en Stil och Emboss stil. Denna stil har ett mycket dåligt namn för sig själv på grund av missbruk, men det är verkligen ett bra och mycket kraftfullt verktyg som sparar dig mycket tid. Applicera en slät innerskärning till ditt lager, med ett djup på 100%, med en storlek på 196px och mjukna på 16px. Minska upplysningslägena till 20% och skugglägena opacitet till 55%.
Genom att tillämpa dessa två enkla stilar lämnar vi något som ser ganska smart ut!
Zooma in direkt i navigeringsfältet, eftersom det är dags att lägga till en bra 1px stroke på undersidan för att öka uppmärksamheten på detaljerna. Skapa ett nytt lager ovanför navigeringsfältet och skapa sedan ett 1px bredd långt urval med hjälp av Single Row Marquee Tool. Fyll ditt val med vit.
Ändra lagrets blandningsläge till Överlagring och sänka opaciteten till 70% för att ge följande resultat.
För tillfället är det vår navigeringsfält gjort - vi kommer senare till att producera våra typsnittstyp för rubriker.
Jag har bestämt mig för att ha ett annat träverktygsfält längst ner på appen skulle vara för "trä-tung", så istället kommer vi att mörka botten ut lite och placera bara våra navigeringsikoner istället.
Välj innehållet i verktygsfältets lager och välj sedan Utsuddningsverktyg. Välj en mjuk suddgummi vid 100px och radera det övre området på ditt svarta verktygsfält medan du håller skiftnyckeln. Genom att hålla omskift-tangenten samtidigt som du gör det, kommer du att kunna radera innehåll i en rak linje istället för att ha full kontroll över vad du kan radera.
Ändra verktygsfältets blandningsläge till överlagring och sänka opaciteten till 60%. Detta ger det ett lite bränt utseende som ger oss en fin bakgrund redo att placera våra ikoner på (när vi designar dem). Nu handlar det om rätt tid att sätta våra navigeringsfält och verktygsfältskikt i sina egna skilda mappar.
Så vi är nu redo att gå vidare. Vi ska nu få vår lanseringsskärm utformad, vilket kommer att vara den enklaste skärmen i programmet eftersom det inte kommer att innehålla några navigeringsverktyg eller verktygsfält. Dölj navigeringsfältet och verktygsfältets lagermappar och skapa ett nytt (transparent) lager i mappens startskärm och kalla det "skugga".
Fyll ditt nya lager med en mörk fast färg (jag använder # 333333) med Paint Bucket Tool. Välj innehållet i statusfältet och klicka sedan på ditt nya lanseringsskärmslag och tryck på delete-knappen för att ta bort ett litet område i det grå lagret för att visa statusfältet.
Duplicera ditt lager så att du har två av samma form. På det nya lagret, gå till Redigera> Transformera> Gratis omvandling att ta upp transformationslådan på din nya form / skikt. Samtidigt som du håller Alt och Skift-tangenten samtidigt, skala ditt val nere. Om du håller skiftnyckeln kommer du att hålla formen i proportion, där som hållandet av alt-nyckeln ändrar storleken jämnt runt kanterna. Gör ett urval av din nya formaterad storlek.
Ta bort din nya form (samtidigt som du har live-valet) och ta bort valet från ditt ursprungliga lager. Du borde sluta med något som ser ut som följande skärmdump.
Gå till Filter> Blur> Gaussian Blur och använd en radie på cirka 50 pixlar för att ge din skugga en smidig och smutsig effekt.
Med hjälp av samma teknik som vi använde tidigare gör du ett urval av statusfältet och tar bort eventuell överlappande skugga från vårt skugglager.
Kopiera vårt skuggskikt igen. Ändra blandningsläge för nedre skugglager till överlagring, och dess opacitetsprocent till 100%, och byt skjuvskiktets blandningsläge till normalt och dess opacitetsprocent till 25%.
Nästa steg är att producera vår typografiska logotyp. Vi ska få det att se ut som om typen har blivit inristad i träet med hjälp av en handfull lagstilar och tekniker. Ta ditt typverktyg och layout lite text. Använd typinställningarna för att anpassa din text väl.
Spela runt med några olika typsnitt tills du känner att det ser bra ut. Jag har bestämt mig för att använda en kombination av Stencil och Helvetica.
Det är dags att få vår typografi att se ut som om den har blivit inristad i vår bakgrund. Vi kommer att göra mycket av vår typografi ser ut så här i hela applikationsdesignen, speciellt ikonerna och titlarna i navigeringsfältet.
Denna typ av effekt kräver många lagerformat. Det första vi måste göra är att ändra färgen av vår typ. Använda Eyedropper Tool välj en mörk färg från bakgrunden och använd sedan den färgen på din typografi.
Sänk din opacitet av typ av lager till 50%, och öppna sedan dina blandningsalternativ för textskikt. Den första stilen vi ska tillämpa är en inre skugga, med följande inställningar:
Nästa stil vi ska tillämpa är en mycket subtil droppskugga, med följande inställningar:
Slutligen kommer vi att lägga till en stroke i vår text, med följande inställningar (färgen jag har använt är # E6D0B3).
Ändra din typ av lager blandning läge till linjär bränning.
Vi ska göra vår inre skugga lite starkare / djärvare. Duplicera ditt typslag och ändra blandningsläge till mättnad - det gör det nästan transparent, men tillåter att alla lagerformat fortfarande visas. Öppna fönstret för lagerformat och ta bort dropshadow och stroke-stilar helt. Klicka på din inre skuggflik och ändra inställningarna till något som liknar vad du kan se nedan.
Upprepa exakt samma steg igen, den här gången med följande inställningar:
Som du kan se har vi tillämpat flera skuggor på vår typografi, utan effekt den verkliga färgen på grund av att helt enkelt ändra blandningsläge till mättnad. Den första ytterligare skuggan lägger en mjuk skugga runt varje kanter lika, medan den andra ytterligare skuggan applicerade en stark och skarp skugga till bara toppen av vår typ.
Vår lanseringsskärm ser bra ut, och det kommer att se ännu bättre ut än en gång nedskalad på den högupplösta näthinnan!
Vårt nästa steg är givetvis vår Spendometer-skärm, vilken är den första skärmen som ska visas efter att ha sett lanseringsskärmen. Använda effekter som vi just har använt i föregående steg, sätt upp din typografi och använd några fina lagerformat till din Spendometer-header i navigeringsfältet. Det är här perfekt att göra duplikat av din navigeringsfält; en för varje skärm. Jag har satt typskiktet till 90% opacitet för att låta lite textur passera, och har använt följande skikt stilar. Det finns ingen anledning att skapa ytterligare skuggor för den här typen eftersom den är mycket mindre.
Jag har bestämt mig för att navigeringsfältet högst upp i designen ser lite för mörkt, antingen det eller typografi är för lätt. För att åtgärda det ska jag lätta upp navigationsfältet lite. Det enklaste sättet att göra det här är att välja ditt navigeringsfältlager och sedan gå till Bild> Justeringar> Ljusstyrka / Kontrast. Upp din ljusstyrka till 60, och din kontrast till 10.
Sänka opaciteten hos vår 1 pixel stroke under vår navigeringsfält för att passa in bättre med den nya lättare navigeringsfältet. Jag har sänkt den till 40%.
För att låta texten i vår navigeringshuvudtext bli lite tydligare ändrar jag färgen av vår typ till ett mycket lättare val, och ställer sedan in blandningsläget för att multiplicera - kom ihåg att det handlar om experimentering - alla blandningslägen reagerar ( mycket) olika beroende på vilken färg din basform är.
Duplicera ditt textlager och sänka opaciteten på det till 40%. Det här gör att vår typ blir lite mörkare, återvänder den till det som tidigare men tillåter oss att visa mer konsistens genom att inte sänka opaciteten.
Du kan nu kopiera och klistra in mappfilen för navigeringsfliken i var och en av dina olika skärmmappar och redigera dem för att likna titeln på varje skärm, enligt nedan:
Det är rubrikrubrikerna gjort för nu - vi kan besöka dem igen senare. Som du kanske har insett, har design för mobila enheter mycket att göra med försök och fel.
Vårt nästa steg innebär att du skapar en vit bakgrund som är redo att placera flera element ovanpå den. Det innebär att vi kommer att täcka mycket av vår träbakgrund, men i allmänhet är det en mycket trevligare upplevelse på ögonen på en vit och ostrukturerad bakgrund..
Välj Rektangulärt markeringsverktyg och välj en fast storlek på 600x700px. Klicka på var du är din duk, och centrerar ditt val med piltangenterna. Det ska vara enkelt att ordna eftersom det finns exakt 20 pixlar mellan sidorna och valet på varje sida (vänster, över och höger).
Skapa ett nytt lager i din spendometermapp, och kalla det något som är lämpligt som "Vit bakgrund". Gå till Välj> Ändra> Slät och släta dina former med en radie på 5 pixlar. Fyll den med vit.
Välj Elliptisk markeringsverktyg och dra ut ett lika val. Placera den över botten enligt nedan och tryck på delete-knappen för att ta bort ett litet urval av vår vita bakgrund.
Öppna fönstret för lagerformat. Vi kommer att tillämpa ett antal effekter på vår vit bakgrund. Först och främst kommer vi att lägga till en stroke. Jag använde inställningarna nedan med färgen # 6C4C24:
Nästa kommer vi att applicera en inre skugga för att lägga lite mer djup i vår bakgrund. Inställningarna jag har använt kan ses nedan:
Den slutliga skiktstilen vi ska tillämpa är en droppskugga, med hjälp av nedanstående inställningar för att göra den vita bakgrunden lite mer från hela applikationsbakgrunden:
Minska opaciteten hos hela det vita bakgrundsskiktet till omkring 75% för att låta en liten liten bit av det träkornet visa igenom. Vårt slutresultat (nedan) ger oss en fin vit duk för att placera våra applikationselement på, vilket gör det enkelt att läsa men ändå trevligt att titta på.
Vi ska lägga till en låg opacitet, 1 pixel svart slag till botten av huvudinnehållet lagret. Duplicera ditt vita bakgrundslag och ta bort alla lagerformat. Fyll på formen med svart och trycka den ner en pixel med markörknapparna. Placera den under ditt ursprungliga vita bakgrundsskikt. Gör ett urval av ditt ursprungliga vita bakgrundslag och klicka sedan på ditt nya duplicerade lager och tryck på raderingsnyckeln. Sänk opaciteten till cirka 40%. Du borde sluta med något liknande det här:
Det är slutet på den första delen av handledningen. Det rekommenderas att du exporterar din fil från tid till annan som en högupplöst jpeg-bild och visar den på din iPhone-skärm för att se till att den ser bra ut. Så här ser min lanseringsskärm ut (vi ska testa de andra skärmarna i nästa handledning!):
Del två av denna handledning finns på Mobiletuts +, och täcker resten av applikationsdesignen. Hoppa över för att avsluta skapandet av gränssnittet!
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