Share
De fleste mobilappene mangler den ekstra biten av designdetaljer som kan hjelpe dem med å skille seg ut fra App Store-publikum. Selv om det ikke er noen erstatning for å ha en talentfull designer polsk appens piksler i flere timer, er formålet med denne serien å lære de med begrenset Photoshop-opplevelse og et lavt budsjett hvordan man lager apps som skinner!
Denne serien er rettet mot utvikleren som ikke har budsjettet til å ansette en profesjonell designer. Det vil lære deg hvordan du oppretter iøynefallende elementer med svært begrenset Photoshop kunnskap og innsats.
I dette innlegget skal vi fokusere på å endre eksisterende PSD-filer for å få det utseendet du er ute etter for appen din.
Hvis du er programmerer, har du noen gang lest noen andres kode for å lære hvordan de oppnådde en bestemt oppgave? Nesten alle programmerere gjør det, og læringsdesign er ikke annerledes. Akkurat som i utviklingsverdenen er det mange nettsider fylt med PSDer som du kan eksperimentere med og lære av. Noen av disse nettstedene tillater deg selv å endre PSDene og bruke dem i ditt eget arbeid. Søkeordet er endre. Mens mange av PSDene jeg refererer til, faktisk kan kopieres og brukes kommersielt uten endring, vil jeg anbefale det. Du vil ikke lære den måten, og du vil ikke slippe et design som er helt unikt for din søknad.
Som nevnt, er det hundrevis av nettsteder som tilbyr gratis PSDer. Men hvis du ønsker å skape et virkelige prosjekt, er det lurt å finne nettstedene som lar deg gjenbruke disse PSDene i ditt eget arbeid. Med mindre jeg bare surfer på utdanningsformål, vurderer jeg vanligvis bare nettsteder som gir både høy kvalitet og fleksible bruksvilkår. Nedenfor er mine fem favoritt PSD-relaterte nettsteder:
Poenget her er enkelt: Som utvikler har du sannsynligvis mangel på ferdigheter som er nødvendige for å lage svært polerte applikasjoner på egen hånd. Men du kan raskt mashup design av andre for å skape din egen unike følelse med svært lite kunnskap om Photoshop.
Ved hjelp av PSD "Mashup" -teknikken som er diskutert ovenfor, skal vi designe en tilpasset UINavigationBar ved hjelp av en PSD fra www.pixelbeam.net. Dro til endre flere elementer i PSD for å skape vår egen unike følelse.
Last ned PSD her og åpne filen i Photoshop.
Lag et nytt prosjekt som er 640 x 88.
Bruk nå Arranger Documents-knappen til å dele skjermen mellom begge prosjektene.
For denne delen av prosessen, kontroller at du har valgt Auto-Select Layer. Dette betyr at Photoshop automatisk velger lag av elementet du nettopp har klikket på. Dette hjelper når du navigerer gjennom større PSD-er. Du kan slå den av når det trengs i løpet av dette prosjektet.
Ved hjelp av flytteverktøyet, velg det aktive punktet på bildet ovenfor. Du vil legge merke til at Photoshop automatisk valgte det laget.
Mens du fortsatt er i delt skjermmodus, dra det aktive kulelaget på skjermen til UINavigationBar. Du vil legge merke til at lag og lag stiler er kopiert til UINavigationBar-prosjektet.
Dobbeltklikk nå på miniatyrbildet Lag. Dette vil hente fargeren. Herfra kan du endre kulens farge.
Kopier Bullet Color # 567200 og sett det som forgrunnsfarge.
Bruk Paint Bucket Tool til å fylle prosjektet med # 567200 farge.
Høyreklikk på Active Bullet Layer. Velg Copy Layer Style.
Høyreklikk på UINavigationBar-laget og velg Lim inn lagstil.
Velg bakgrunnen for lysbildeområdet. I likhet med trinn 6 vil Photoshop automatisk velge laget (automatisk valg lag må kontrolleres). Flytt nå laget til UINavigationBar-prosjektet ditt.
Mus over "Lagermønster" -lagsstil. Klikk og dra den til UINavigationBar-laget.
Pass på at alle lag unntatt ditt UINavigationBar-lag er usynlige.
Dobbeltklikk på mønsteroverleggets lagstil. Mønsteroverlegget lag stil boksen vil vises. Ta opaktheten ned til 8.
Hvis du vil integrere en tilpasset UINavigationBar i prosjektet ditt, kan du se gjennom prøvekoden i dette githubprosjektet.
Ta deg tid til å se gjennom PSD. Du vil raskt innse at god design er både vanskelig og tidkrevende. Samtidig er det verdt det harde arbeidet for slutten av estetikken oppnådd. Hvis du har budsjettet for en flott designer, anbefaler jeg at du finner og ansetter en. Hvis du ikke har budsjettet, Mashup dine egne designelementer ved hjelp av forskjellige PSDer. Jeg anbefaler også å studere design som finnes på nettsteder som Creattica Mobile, Pattrns og Beautiful Pixels.
Jeg håper du finner denne opplæringen nyttig. Hvis du lager noe fantastisk, tweet det til meg på @williamherring.
*Forhåndsvisningsbildet for dette innlegget ble opprettet ved å endre Leatherly - One Page Template som finnes her. UINavigationBar ble opprettet ved å endre Enkel mørk skyveknapp tema som kan bli funnet her.
Accentsconagua