Share
Deze tutorialserie toont alle stappen die nodig zijn voor het opnieuw ontwerpen van een iPhone-applicatie met Photoshop. Je leert veel van de unieke overwegingen en ontwerppatronen die worden gebruikt bij het maken van opvallende app-interfaces. Deze tutorial wordt in twee delen gepresenteerd in samenwerking met Mobiletuts +, waar je in de toekomst steeds meer handleidingen over mobiel ontwerpen kunt vinden. Lees het tweede deel van deze serie en download de interface PSD op Mobiletuts+.
Welkom bij het eerste deel van onze zelfstudiereeks over het opnieuw ontwerpen van de Speweleter iPhone-applicatie! De applicatie is een geweldige kleine app waarmee je je aan een budget kunt houden. Zoals getrokken van de website van Apple, is dit wat de Spendometer doet:
Als u probeert een begroting bij te houden, is het een goed idee om een overzicht te houden van alles wat u uitgeeft, maar het is hard werken om alles op te schrijven in een notitieblok. De Moneybasics Spendometer is een applicatie die dag-tot-dag budgettering eenvoudig en praktisch maakt. Met de Spendometer kunt u een budget instellen, uw uitgaven registreren en uw uitgavenrapporten bekijken om te zien waar en hoeveel geld u tot nu toe in een bepaalde week of maand hebt uitgegeven, en dat terwijl u onderweg bent. Het heeft ook een functie waarmee u uw uitgaven voor een avondje uit kunt bijhouden.
Telkens als u iets koopt, voert u het eenvoudig in de Spendometer op uw telefoon in en het bewaart een record voor u. U kunt uw eigen bestedingslimieten instellen en kiezen hoe uw uitgaven worden gerapporteerd: wekelijks of maandelijks.
De Moneybasics Spendometer biedt u de essentiële tool om ervoor te zorgen dat u op de hoogte blijft van uw financiën.
Het is echt een mooie kleine applicatie die zijn doel goed vervult, maar laten we allemaal eerlijk zijn, het zou kunnen doen met een beetje TLC vanuit een ontwerpperspectief. Hieronder ziet u het pictogram van de toepassing en verschillende schermafbeeldingen van de toepassing. De screenshots zijn gemaakt met een iPhone 4 - zoals u kunt zien, zijn sommige gebieden korrelig, wat betekent dat ze hun applicatie nog moeten bijwerken met afbeeldingen met een hoge resolutie.
Het is raadzaam om een beetje te weten over het ontwerpen voor de iPhone voordat we verder gaan met deze tutorial. Idealiter zou je de iPhone Human Interface Guidelines moeten lezen van de officiële ontwikkelaarssite van Apple.
Zoals bij alle belangrijke ontwerpen, is het eerste wat u moet doen een globaal idee krijgen van hoe uw ontwerp eruit moet zien. De beste manier om dit te doen is natuurlijk door te schetsen. Voor grote toepassingen trekken veel UI-ontwerpers pagina's en pagina's aan ideeën, annotaties en brainstormsessies - omdat we al een structuur hebben voor de toepassing die we opnieuw ontwerpen, kunnen we redelijk snel meebewegen.
Hieronder staan een paar schetsen die ik heb samengesteld - deze zijn erg ruw, en gewoon algemene wireframe-ideeën heb ik in mijn hoofd van wat ik wil dat het ontwerp lijkt. Kleuren en stijlen kunnen wachten tot we later die fase bereiken!
Het beeld dat ik in mijn hoofd heb is een zeer eenvoudig te gebruiken, slanke, moderne en gestructureerde interface. Iets dat ervoor zorgt dat mensen gaan "wauw". Ik wil ook dat het erg minimaal is - de app is heel eenvoudig, en daarom zal het ontwerp ook zijn. Er is geen onnodige rommel nodig.
Onthoud dat u deze zelfstudie niet per woord hoeft te volgen - experimenteer met verschillende dingen en plaats uw eigen creativiteit achter de gebruikte technieken. We willen graag uw resultaten zien, dus deel uw voortgang in het opmerkingenveld.
Nog iets voordat we beginnen: ik schrijf deze tutorial tijdens het ontwerpen, niet na het voltooien van het ontwerp. Ik denk dat het belangrijk is om het creatieve proces achter een ontwerp te laten zien. De meeste tutorials zijn geschreven nadat de ontwerpen zijn voltooid en daarom zie je de fouten van de ontwerper niet, of hoeveel pogingen tot iets dat het hen kostte om iets goed te krijgen. Elke ontwerper doet dit, net als elke andere taak - mensen maken fouten, leren van die fouten en verbeteren alleen dingen. Dus als je ziet dat je misschien teruggaat op jezelf tijdens het lezen van deze tutorial, komt dat omdat ik heb besloten dat er iets moet veranderen! Laten we beginnen!
De eerste stap is om uw document in te stellen. We gaan ontwerpen voor het nieuwe high-definition Retina-scherm van de iPhone 4, wat betekent ontwerpen met een veel hogere resolutie dan wat we eerder deden met de iPhone 3GS.
Open Photoshop en ga naar Bestand> Nieuw ... . Geef uw nieuwe document een naam die geschikt is, zoals 'Spendometer Redesign'. Voer uw eigen afmetingen in (er is geen pre-instelling in Photoshop voor het nieuwe scherm) voor het iPhone 4 Retina-display, we zullen 640x960 pixels gebruiken, met een resolutie van 326ppi (pixels per inch), wat de nieuwe standaard is. Je kunt mijn instellingen hieronder bekijken.
Onze volgende stap is het plaatsen van enkele dummy vormen voor de statusbalk (de balk met de info van de telefoon en de tijd aan), de navigatiebalk (de balk onder de statusbalk) en de werkbalk (de balk onderaan het scherm).
De beste manier om dit te doen is om gewoon een reeds bestaande screenshot van een applicatie in te voegen door naar te gaan Bestand> Plaats.
U kunt nu de Rechthoekig selectiekader om uw verschillende delen van het ontwerp te selecteren en vervang ze door vaste vormen. Ik ga nu gewoon zwart gebruiken. Vul deze in op nieuwe lagen en hernoem je lagen tot iets geschikts zoals "navigatiebalk" en "werkbalk". We gaan basisvormen maken en later kleur en details eraan toevoegen. U kunt ook het grootste deel van de screenshot verwijderen die we hebben geplakt. Het enige dat ik nog kan behouden is de statusbalk zoals hieronder te zien is.
We hebben nu een leeg iPhone-canvas klaar om te beginnen met ontwerpen. Het volgende dat we willen doen is een aantal nieuwe mappen maken in ons Lagen-venster. We hebben verschillende mappen nodig voor verschillende schermen:
De applicatie zelf heeft eigenlijk nog een paar schermen, maar ik ben van mening dat veel van die schermen niet nodig zijn, dus dat zullen we drastisch verminderen, meer inhoud op hetzelfde scherm. We zullen ook een aantal schermen missen die vrijwel alle andere schermen zullen repliceren - het enige verschil is titels!
Maak een nieuwe laagmap in het venster Lagen voor elk van de bovenstaande schermen. U kunt dit doen door op het pictogram van de kleine map in het lagenvenster te klikken. We hoeven nog niets in deze mappen te plaatsen.
Ik wil een strak en modern ontwerp combineren met een klein beetje textuur. De textuur van de keuze zal hout zijn, deze textuur om precies te zijn (de moeite waard de $ 2-4). Zodra je wat texturen hebt gedownload, ga je gang en plaats je ze in je document door naar Bestand> Plaats ... . Schaal je textuur naar beneden, zodat deze mooi in je UI-ontwerp past en voeg deze samen met je achtergrondlaag.
We willen onze textuur wat opfleuren, omdat we niet willen dat het zo vet is. Maak een nieuwe laag direct boven je houten textuurachtergrond en vul deze met wit met behulp van de Verfemmer gereedschap. Verlaag de dekking van de laag tot 35% om een witte was toe te voegen aan je achtergrond, en voeg de laag samen door op de Cmd + E (Ctrl + E) combinatie om de was op onze achtergrond aan te brengen.
We gaan ook een houtstructuur gebruiken voor onze navigatiebalk en werkbalk. Selecteer vanuit hetzelfde pakket van GraphicRiver een van de andere texturen en plaats deze in uw document. Wijzig het formaat en plaats het boven je navigatiebalk.
Zodra u tevreden bent met een bepaalde positie, klikt u op de miniaturen van de navigatiebalk terwijl u de knop ingedrukt houdt Cmd-Key om de inhoud van je lagen te selecteren. Klik opnieuw op uw nieuwe houtstructuurlaag en ga naar Bewerken> Kopiëren om je selectie te kopiëren. Verwijder de texture-laag en plak je selectie op een gloednieuwe laag.
Het is nu tijd om wat styling toe te voegen aan onze navigatiebalk. Klik met de rechtermuisknop op uw nieuwe laag in de navigatiebalk en selecteer Meng opties om het venster Layerstijl te openen. We willen een paar eenvoudige stijlen toevoegen aan onze navigatiebalk die het uiterlijk van onze bar drastisch zal vergroten.
Laten we eerst een slagschaduw toevoegen. Ik heb een hoek van 90 graden gebruikt met een dekking van 25% - alle andere opties zijn ingesteld op de standaardinstelling.
Om onze navigatiebalk een beetje meer diepte te geven, gaan we een Bevel en Emboss-stijl toepassen. Deze stijl heeft een zeer slechte naam vanwege misbruik, maar het is echt een geweldig en zeer krachtig hulpmiddel dat u veel tijd bespaart. Breng een gladde innerlijke afschuining op je laag aan, gebruik een diepte van 100%, met een grootte van 196 px en verzacht het niveau van 16 px. Verklein de dekking van de markeermodi naar 20% en de dekking van de schaduwmodi naar 55%.
Door deze twee eenvoudige stijlen toe te passen, blijven we achter met iets dat er behoorlijk slim uitziet!
Zoom recht in je navigatiebalk, want het is tijd om een mooie 1px-slag aan de onderkant toe te voegen om de aandacht voor detailniveaus te vergroten. Maak een nieuwe laag boven je navigatiebalk en maak vervolgens een 1px breedte lange selectie met behulp van de Single Row Marquee Tool. Vul je selectie met wit.
Wijzig de overvloeimodus van de lagen in Overlay en verlaag de dekking tot 70% om het volgende resultaat te verkrijgen.
Voor nu is dat onze navigatiebalk - we komen er later op terug om onze headers typografiestijlen te produceren.
Ik heb besloten dat het hebben van een andere houten werkbalk aan de onderkant van de app te "hout-zwaar" zou zijn, dus in plaats daarvan zullen we de onderkant iets donkerder maken, en gewoon onze navigatiepictogrammen plaatsen in plaats daarvan.
Selecteer de inhoud van de werkbalklagen en selecteer vervolgens de Wisser. Selecteer een zachte wisser bij 100 px, en terwijl u de shift-toets ingedrukt houdt, wist u het bovenste gedeelte van uw zwarte werkbalk. Door de shift-toets ingedrukt te houden, kunt u inhoud in een rechte lijn wissen in plaats van volledige controle over wat u kunt wissen.
Wijzig de overvloeimodus van de werkbalklagen in overlay en verlaag de dekking tot 60%. Dit geeft het een licht gebrand uiterlijk, waardoor we een mooie achtergrond hebben klaar om onze pictogrammen op te plaatsen (zodra we ze ontwerpen). Dit is het juiste moment om onze navigatiebalk en werkbalklagen in hun eigen afzonderlijke laagmappen te plaatsen.
Dus we zijn nu klaar om verder te gaan. We gaan nu ons startscherm ontwerpen, wat het eenvoudigste scherm in de applicatie zal zijn, omdat het geen navigatie of werkbalken zal bevatten. Verberg de navigatiebalk en de werkbalklaagmappen en maak een nieuwe (transparante) laag in uw startschermmap en noem deze "schaduw".
Vul je nieuwe laag met een donkere effen kleur (ik gebruik # 333333) met behulp van de Verfemmer gereedschap. Selecteer de inhoud van uw statusbalklaag en klik vervolgens op uw nieuwe openingsschermlaag en druk op de delete-toets om een klein gedeelte van de grijze laag te verwijderen om de statusbalk te tonen.
Dupliceer je laag zodat je twee dezelfde vorm hebt. Ga op de nieuwe laag naar Bewerken> Transformeren> Vrije transformatie om de transformatiekast op je nieuwe vorm / laag te brengen. Houd de Alt- en Shift-toets tegelijkertijd ingedrukt en schaal uw selectie naar beneden. Houd de shift-toets ingedrukt om de vorm in proportie te houden, waarbij het houden van de alt-toets de grootte gelijkelijk aan de randen zal veranderen. Maak een selectie van je nieuwe aangepaste vorm.
Verwijder je nieuwe vorm (terwijl je nog steeds de live selectie hebt) en verwijder vervolgens de selectie uit je originele laag. Je zou moeten eindigen met iets dat op de volgende screenshot lijkt.
Ga naar Filter> Blur> Gaussiaans vervagen en gebruik een straal van ongeveer 50 pixels om je schaduw een vloeiend en vlekkerig effect te geven.
Gebruik dezelfde techniek die we eerder hebben gebruikt, maak een selectie van de statusbalk en verwijder eventuele overlappende schaduw uit onze schaduwlaag.
Dupliceer onze schaduwlaag nogmaals. Wijzig de overvloeimodus van uw onderste schaduwlaag in overlay en het dekkingspercentage op 100% en wijzig de overvloeimodus van de bovenste schaduwlagen in normaal, en het dekkingspercentage op 25%.
De volgende stap is om ons typografische logo te produceren. We zullen het laten lijken alsof het type in het hout is gegraveerd door een handvol laagstijlen en technieken te gebruiken. Pak je typetool en ontwerp wat tekst. Maak gebruik van de type-instellingen om uw tekst goed uit te lijnen.
Speel met een aantal verschillende lettertypen totdat je voelt dat het er goed uitziet. Ik heb besloten om een combinatie van Stencil en Helvetica te gebruiken.
Het is nu tijd om onze typografie eruit te laten zien alsof deze in onze achtergrond is gegraveerd. We zullen veel van onze typografie er in het hele ontwerp van de applicatie zo uit laten zien, met name de pictogrammen en titels in de navigatiebalk.
Dit soort effect vraagt om veel laagstijlen. Het eerste dat we echter moeten doen is de kleur van ons type veranderen. De ... gebruiken Eyedropper Tool selecteer een donkere kleur op de achtergrond en pas die kleur vervolgens toe op uw typografie.
Verlaag de dekking van het type lagen tot 50% en open vervolgens de overvloeimogelijkheden voor tekstlagen. De eerste stijl die we gaan toepassen is een innerlijke schaduw, met behulp van de volgende instellingen:
De volgende stijl die we gaan toepassen, is een heel subtiele slagschaduw met de volgende instellingen:
Ten slotte voegen we een lijn toe aan onze tekst met behulp van de volgende instellingen (de kleur die ik heb gebruikt is # E6D0B3).
Wijzig de overvloeimodus van het type lagen in lineair branden.
We zullen onze innerlijke schaduw een beetje sterker / brutaler maken. Dupliceer je tekstlaag en verander de overvloeimodus in verzadiging - dit maakt het bijna transparant, maar laat alle laagstijlen nog steeds doorkomen. Open het venster met laagstijlen en verwijder de slagschaduw- en lijnstijlen volledig. Klik op het tabblad innerlijke schaduw en wijzig de instellingen in iets dat lijkt op wat u hieronder kunt zien.
Herhaal exact dezelfde stap opnieuw, deze keer met behulp van de volgende instellingen:
Zoals je kunt zien, hebben we nog meer schaduwen op onze typografie toegepast, zonder effect op de werkelijke kleur door eenvoudig de overvloeimodus in verzadiging te veranderen. De eerste extra schaduw zorgde voor een zachte schaduw rond elk van de randen, terwijl de tweede extra schaduw een sterke en scherpe schaduw op de bovenkant van het type aanbracht..
Ons startscherm ziet er redelijk goed uit en het ziet er nog beter uit als het op een later moment op dat hoge-resolutie netvlies-display wordt verkleind!
Onze volgende stap is natuurlijk ons Spendometer-scherm, het eerste scherm dat wordt weergegeven na het zien van het startscherm. Gebruik effecten die we zojuist in de vorige stap hebben gebruikt, stel je typografie in en pas een paar mooie laagstijlen toe op je Spendometer-koptekst in de navigatiebalk. Het is hier ideaal om duplicaten van uw navigatiebalk te maken; één voor elk scherm. Ik heb de tekstlaag ingesteld op een dekking van 90% om een klein beetje textuur door te laten en heb de volgende laagstijlen gebruikt. Het is niet nodig om extra schaduwen voor dit type te maken, omdat dit veel kleiner is.
Ik heb besloten dat de navigatiebalk aan de bovenkant van het ontwerp er iets te donker uitziet, of de typografie is te licht. Om dit op te lossen, ga ik de navigatiebalk iets opfrissen. De eenvoudigste manier om dit te doen, is door je laag op de navigatiebalk te selecteren en vervolgens naar te gaan Afbeelding> Aanpassingen> Helderheid / contrast. Verhoog uw helderheid tot 60 en uw contrast tot 10.
Verlaag de dekking van onze slag van 1 pixel onder onze navigatiebalk zodat deze beter past in de nieuwe lichtere navigatiebalk. Ik heb het verlaagd naar 40%.
Om ervoor te zorgen dat de textuur van onze navigatieheader tekst een beetje duidelijker wordt, verander ik de kleur van ons type in een veel lichtere keuze en stel dan de lagen overvloeimodus in op vermenigvuldigen - onthoud dat het allemaal over experimenteren gaat - alle overvloeimodi reageren ( heel) anders, afhankelijk van de kleur van je basisvorm.
Dupliceer je tekstlaag en verminder de dekking van deze laag tot 40%. Dit is om ons type een beetje donkerder te maken, het terug te laten keren naar hoe het was, maar ons nog steeds in staat te stellen meer textuur te laten zien zonder de dekking te verminderen.
U kunt nu de laag van uw navigatietabblad kopiëren en in elk van uw verschillende schermmappen plaatsen en ze bewerken zodat ze lijken op de titel van elk scherm, zoals hieronder te zien is:
Dat is de headertitel die we nu hebben gedaan - misschien bezoeken we ze later nog een keer. Zoals je misschien wel beseft, heeft ontwerpen voor mobiele apparaten veel te maken met vallen en opstaan.
Onze volgende stap is het opzetten van een witte achtergrond klaar om er meer elementen bovenop te plaatsen. Dit betekent dat we veel van onze houten achtergrond zullen bedekken, maar in het algemeen is het bekijken van dingen op een witte en niet-gestructureerde achtergrond meestal een veel aangenamere ervaring op de ogen..
Selecteer de Rechthoekig selectiekader en kies een vaste grootte van 600x700 px. Klik op een willekeurige plaats op uw canvas en centreer uw selectie met behulp van de pijltoetsen. Het moet gemakkelijk te regelen zijn, want er is precies 20 pixels tussen de zijkanten en de selectie aan elke kant (links, boven en rechts).
Maak een nieuwe laag in je spendometermap en noem het iets dat geschikt is, zoals "Witte achtergrond". Ga naar Selecteer> Wijzigen> Vloeiend en maak je vormen glad met een straal van 5 pixels. Vul het met wit.
Selecteer de Elliptical Marquee Tool en sleep een gelijke selectie. Plaats het op de bodem zoals hieronder te zien is en druk op de delete-toets om een kleine selectie van onze witte achtergrond te verwijderen.
Open het venster met laagstijlen. We gaan een aantal effecten toepassen op onze witte achtergrond. Allereerst gaan we een streek toevoegen. Ik heb de onderstaande instellingen gebruikt met de kleur # 6C4C24:
Vervolgens gaan we een innerlijke schaduw toepassen om een beetje meer diepte aan onze achtergrond toe te voegen. De instellingen die ik heb gebruikt, zijn hieronder te zien:
De laatste laagstijl die we gaan toepassen, is een slagschaduw, waarbij de onderstaande instellingen worden gebruikt om de witte achtergrond iets meer te laten opvallen door de hele achtergrond van de toepassing:
Verlaag de dekking van de hele witte achtergrondlaag tot ongeveer 75% om een klein beetje van die houtnerf door te laten. Ons eindresultaat (hieronder) geeft ons een mooi wit doek waarop onze toepassingselementen kunnen worden geplaatst, waardoor het gemakkelijk te lezen is en toch leuk om naar te kijken.
We gaan een laagzwakke laag van 1 pixel zwart toevoegen aan de onderkant van de hoofdinhoudslaag. Dupliceer je witte achtergrondlaag en verwijder alle laagstijlen. Vul de vorm met zwart en duw deze één pixel omlaag met behulp van de cursortoetsen. Plaats het onder je originele witte achtergrondlaag. Maak een selectie van je originele witte achtergrondlaag en klik vervolgens op je nieuwe gedupliceerde laag en druk op de delete-toets. Verlaag de dekking tot ongeveer 40%. Je zou moeten eindigen met iets soortgelijks als dit:
Dat is het einde van het eerste deel van de tutorial. Het wordt aanbevolen dat u uw bestand van tijd tot tijd exporteert als een hoge resolutie JPEG-afbeelding en deze op uw iPhones-scherm bekijkt om er zeker van te zijn dat deze er goed uitziet. Dit is hoe mijn startscherm eruit ziet (we zullen de andere schermen testen in de volgende tutorial!):
Deel twee van deze tutorial is beschikbaar op Mobiletuts + en behandelt de rest van het applicatieontwerp. Spring over om het maken van de interface te voltooien!
We zijn actief op zoek naar ontwerpers om hun mobiele ontwerpvaardigheden aan onze community bij te dragen. Neem vandaag nog contact met ons op als u geïnteresseerd bent in het schrijven van betaalde inhoud!
Accentsconagua