Share
De flesta mobila appar saknas den extra bit av designdetaljer som kan hjälpa dem att sticka ut från App Store-publiken. Medan det inte finns någon ersättning för att ha en begåvad formgivare polish din app pixlar i timmar i slutet, syftet med denna serie är att lära dem med begränsad Photoshop-erfarenhet och en låg budget utan hur man gör appar som lyser!
Denna serie riktar sig till utvecklaren som inte har budgeten att anställa en professionell designer. Det kommer att lära dig hur man skapar iögonfallande element med mycket begränsad Photoshop kunskap och ansträngning.
I det här inlägget kommer vi att fokusera på att ändra befintliga PSD-filer för att få det utseende du söker efter din app.
Om du är programmerare har du någonsin läst någon annans kod för att lära dig hur de utför en viss uppgift? Nästan alla programmerare gör det, och lärande design är inte annorlunda. Precis som i utvecklingsvärlden finns det många webbplatser fyllda med PSD som du kan experimentera med och lära av. Några av dessa platser tillåter dig även att ändra PSD: erna och använda dem i ditt eget arbete. Nyckelordet är ändra. Medan många av de PSD som jag hänvisar till faktiskt kan kopieras och användas kommersiellt utan modifiering, skulle jag råda emot det. Du kommer inte att lära dig så, och du kommer inte att släppa en design som är helt unik för din ansökan.
Som nämnts finns det hundratals webbplatser som erbjuder gratis PSD-er. Men om du letar efter att skapa ett verkligt projekt är tricket att hitta de webbplatser som låter dig återanvända dessa PSD i ditt eget arbete. Om jag inte bara surfar för utbildningsändamål, brukar jag bara granska webbplatser som ger både högkvalitativt arbete och flexibla användarvillkor. Nedan är mina fem favorit PSD-relaterade webbplatser:
Poängen här är enkel: Som utvecklare saknar du sannolikt den kompetens som krävs för att skapa extremt polerade applikationer på egen hand. Men du kan snabbt mashup andras mönster för att skapa din egen unika känsla med mycket lite kunskap om Photoshop.
Med hjälp av PSD "Mashup" -tekniken diskuterad ovan kommer vi att designa en anpassad UINavigationBar med en PSD från www.pixelbeam.net. Var på väg att ändra flera delar i PSD för att skapa vår egen unika känsla.
Ladda ner PSD här och öppna filen i Photoshop.
Skapa ett nytt projekt som är 640 x 88.
Använd nu Arranger Documents-knappen för att dela upp skärmen mellan båda projekten.
För den här delen av processen, se till att du har markerat Auto Select Layer. Det innebär att Photoshop automatiskt väljer lagret av det objekt du just klickat på. Detta hjälper till när du navigerar genom större PSD. Du kan stänga av det när det behövs under det här projektet.
Med hjälp av flyttverktyget väljer du den aktiva kula som visas ovan. Du kommer att märka att Photoshop automatiskt valt det laget.
Medan du fortfarande är i delat skärmläge drar du det aktiva kullagret på skärmen på din UINavigationBar. Du kommer märka att dess lager och lagerformat har kopierats till ditt UINavigationBar-projekt.
Dubbelklicka nu på miniatyren Layer. Detta kommer att föra upp färgplockaren. Härifrån kan du ändra kulans färg.
Kopiera Bullet Color # 567200 och ställ den som din förgrundsfärg.
Använd Paint Bucket Tool för att fylla ditt projekt med # 567200 färg.
Högerklicka på Active Bullet Layer. Välj Copy Layer Style.
Högerklicka på ditt UINavigationBar-lager och välj Pasta Layer-stil.
Välj bakgrunden för objektglaset. På samma sätt som steg 6 väljer Photoshop automatiskt skiktet (Auto-Select Layer måste markeras). Flytta nu laget till ditt UINavigationBar-projekt.
Musen över "Layer Layout" -lagret. Klicka och dra det till ditt UINavigationBar-lager.
Se till att alla lager utom ditt UINavigationBar-lager är osynliga.
Dubbelklicka på mönsteröverlagringslagret. Formatrutan Mönsteröverlagringslagret visas. Ta upp opaciteten ner till 8.
Om du vill integrera en anpassad UINavigationBar i ditt projekt kan du granska provkoden i detta githubprojekt.
Ta dig tid att titta igenom PSD. Du kommer snabbt inse att bra design är både svårt och tidskrävande. Samtidigt är det värt det hårda arbetet för den slutliga estetiken som uppnåtts. Om du har budgeten för en bra designer, rekommenderar jag starkt att du hittar och hyr en. Om du inte har budgeten, Mashup dina egna designelement med olika PSD. Jag rekommenderar också att studera mönster som finns på webbplatser som Creattica Mobile, Pattrns och Beautiful Pixels.
Jag hoppas att du hittar den här handledningen till hjälp. Om du skapar något bra, tweet det till mig på @williamherring.
*Förhandsgranskningsbilden för det här inlägget skapades genom att ändra Läder - En sidmall som finns här. UINavigationBar skapades genom att ändra Enkel mörk skjutreglage tema som finns här.
Accentsconagua