Share
In deze zelfstudie gaan we de gebruikersinterface van een financiële iPhone-applicatie ontwerpen in Photoshop. We zullen een lading moderne technieken gebruiken om dit ontwerp echt tot leven te brengen! De tutorial zal in twee delen worden gesplitst, dus abonneer je via RSS of e-mail om de rest van de tutorial te bekijken!
Bij elk ontwerp moet je beginnen met een schets, zelfs als het echt ruw is. We gaan een interface ontwerpen die geschikt is voor een financiële toepassing, zoals een bank, waar je je saldo, verklaringen, enz. Kunt controleren. We gaan alleen een paar schermen van de applicatie maken in de twee delen van deze zelfstudiereeks: de startpagina, de instructiepagina en de accountpagina voor toevoegen. Deze drie pagina's zullen bestaan uit pictogrammen / navigatie, een lijst en enkele tekstvelden. Als u na de zelfstudie meer pagina's wilt maken, zullen deze in feite uit dezelfde elementen bestaan die we zullen leren creëren.
Hieronder is een scan gemaakt in UI-schets die ik heb gemaakt om ons applicatieontwerp te baseren op:
We gaan de applicatie ontwerpen volgens de nieuwste iPhone 4-dimensies, die 640x960 pixels meten bij een resolutie van 326ppi. Open Photoshop en ga naar Bestand> Nieuw. Maak het nieuwe document met behulp van deze instellingen:
Ga naar Teehan + Lax om het iPhone 4 GUI PSD (Retina Display) -pakket te downloaden. Met dit pakket kunnen we elementen voor onze toepassing vastgrijpen, hoewel we er niet veel van zullen gebruiken, omdat de meeste van onze ontwerpen sterk op maat zijn gemaakt.
Open het bestand dat u zojuist hebt gedownload in Photoshop. Zoek in het deelvenster Lagen de map met de naam "topbalk (toepassing)". Selecteer deze map en sleep deze naar uw toepassingsontwerp PSD.
Ga terug naar ons PSD-bestand en sleep over de laag "Bar (grijs - blauw)":
Sleep tot slot de map "onderaan". We gaan deze zeer modificeren. Als je deze tutorial aan het lezen bent, weet je waarschijnlijk al hoe je met eenvoudige vormen moet spelen, dus je zou sowieso iets soortgelijks kunnen maken. Het eerste is om de twee knoppen "terug" en "bewerken" uit onze bovenste balk te verwijderen, omdat we deze niet nodig hebben. Verwijder de mappen "terugknop" en "blauwe knop" uit de map "Bar (grijs - blauw)".
We beginnen nu met onze kleuren te spelen en baseren de rest van de applicatie op de kleuren die we willen gebruiken in de bars die we al hebben. Open het venster met laagstijlen voor de laag met de titel "achtergrond" in de map "Bar (Blauw - Grijs)".
Ik ga een groen en zilverkleurenschema gebruiken voor mijn applicatieontwerp. Open in het venster met laagstijlen de overlaysectie over het verloop en open vervolgens het venster met de gradienteditor, zoals hieronder te zien is:
Verander de kleuren in een kleur naar keuze. Ik gebruik twee kleuren in mijn verloop, gaande van donker (# 719100) naar licht (# A1CF00).
De volgende laag met de titel 'onderste donkere schaduw' is veel te merkbaar voor de subtiele look waar ik in mijn ontwerp voor ga gaan, dus verminder de dekking tot ongeveer 50%. Doe hetzelfde voor de volgende laag met de titel 'tophoogtepunt'.
We gaan nu wat lawaai toevoegen aan onze bovenste balk. Selecteer alle 4 de lagen in onze map "bar top", klik met de rechtermuisknop en selecteer "Lagen rasteriseren".
Maak een nieuwe laag en noem het "topbarruis", plaats het boven je "achtergrond" laag, zoals hieronder te zien:
Houd de Cmd-toets (of Ctrl-toets op Windows) ingedrukt en klik op de miniatuur in uw lagenpaneel naast uw "achtergrond" -laag. Dit zou een selectie van je vorm moeten maken. Klik op je laag "bovenste balkruis" en vul de vorm met wit.
Ga naar Filter> Ruis> Ruis toevoegen, en gebruik de volgende instellingen:
Nadat u op de knop OK hebt gedrukt, wijzigt u de overvloeimodus voor lagen in 'Overlay' en verlaagt u de dekking tot 25%. Dit helpt om een klein beetje detail toe te voegen aan ons applicatieontwerp. We zullen subtiele ruis gebruiken als textuur tijdens de tutorial, dus vergeet niet te onthouden hoe we dat hebben gedaan!
We gaan nu de kleur van onze statusbalk wijzigen (de bovenste balk die het telefoonsignaal weergeeft, enzovoort). Gebruik dezelfde techniek die we eerder hebben gebruikt om de kleur van de bovenste balk te wijzigen, verander uw statusbalk naar een donkergroen kleurverloop.
Doorloop uw verschillende lagen en verander alle statusbalkobjecten naar wit (zoals de batterij, tijd, enz.). Dit is heel eenvoudig, u hoeft alleen maar alle verlopen te verwijderen en ze te vervangen door een kleuroverlay in het laagstijlvenster.
Zoom in op je bovenste balk en selecteer de rechthoekige selectiekader. Maak een kleine, breedte-lange selectie over de bovenkant van je bovenste balk, zorg ervoor dat deze slechts 2 px hoog is.
Maak een nieuwe laag in je map "bovenste balk" en zorg ervoor dat deze boven alle andere lagen wordt geplaatst. Noem het 'top stroke' en vul tenslotte je selectie met wit, waardoor de dekking van de nieuwe laag daalt naar 45%.
Het is tijd om de tekst te veranderen die momenteel "Label" leest. Selecteer het tekstgereedschap en klik op de tekst, zodat we deze kunnen bewerken. Typ iets dat geschikt is voor uw applicatie-idee, in mijn geval is dit "Bankapp".
Speel rond met lettertypen en formaten - ik ga een lettertype gebruiken genaamd "Blue Highway" ingesteld op 10pt.
Open het venster met laagstijlen voor uw tekst en verwijder de Slagschaduw-instellingen volledig. Klik OK.
Dupliceer je tekstlaag en verander de kleur van je originele tekst naar donkergroen. Schuif de oude tekst 2 pixels omlaag en vervolgens 2 pixels naar rechts. Verlaag de dekking tot 25%.
We gaan nu aan de onderste balk werken. Ik ga mijn zilver maken. Terugkijkend op de schets, zal de balk worden gescheiden in twee knoppen. Gebruik hetzelfde proces dat we eerder hebben gebruikt, verander je onderste blauwe balk in een zilveren balk. Ik gebruikte een heel klein beetje groen in mijn kleuren om het dat beetje extra te geven. De kleuren die ik heb gebruikt zijn # B9BFB7 en # E8EDE6.
Gebruik dezelfde techniek die we eerder hebben gebruikt, voeg wat ruis toe aan uw onderste balk.
Vul je hoofdachtergrond met een lichtgrijs (ik gebruikte # F9F9F9). Ga naar Filter> Ruis> Ruis toevoegen en voeg wat ruis toe aan je achtergrond.
Selecteer het rechthoekige selectiekader en maak twee kleine selecties boven je onderste balk en onder je bovenste balk. Vul ze met zwart op een nieuwe laag direct boven je hoofd achtergrondlaag.
Ga naar Filter> Blur> Gaussiaans vervagen en vervaag je nieuwe vormen met ongeveer 15 pixels.
Zet de laagdekking op 15%. Deze nieuwe wazige vormen zullen fungeren als schaduwen onder onze balken, zoals hieronder te zien:
Het is tijd om onze lagen op te ruimen - dit is een essentieel onderdeel van niet alleen het ontwerp van mobiele UI's, maar ook elk ontwerp. Een rommelige laagpaneel leidt naar een rommelige hersenen, en je zult jezelf schoppen als je de laag die je nodig hebt niet kunt vinden! Organiseer uw lagen op een gestructureerde manier die voor u werkt; de mijne is hieronder te zien:
Voordat we klaar zijn met deze tutorial, gaan we de pictogrammen voor onze onderste balk maken. Maak een nieuwe laag en selecteer het gereedschap Rechthoekige selectiekader. Sleep een kleine selectie weg terwijl je de Shift-toets ingedrukt houdt om het vierkant te houden. Vul het met zwart.
Verplaats uw selectie naar rechts met behulp van de cursortoetsen en vul opnieuw met zwart. Herhaal het proces tot je iets hebt dat er zo uitziet ...
Zoom terug uit. Als je linialen nog niet worden weergegeven, schakel je ze in door naar te gaan Weergave> Linialen. Sleep vanuit de linialen de hulplijnen door uw document zodat u weet waar het midden (in de breedterichting) van het hoofdscherm staat, evenals de onderste balk.
Gebruik de hulplijnen om uw menu / startpictogram op één lijn te brengen. U moet mogelijk het formaat van uw pictogram aanpassen zodat het goed past in de balk onderaan, u kunt dit doen door naar Bewerken> Transformeren> Schalen.
Open het venster met laagstijlen voor het pictogram. Een verloopoverlay, een slagschaduw, een binnenschaduw en een streek toepassen. Dit alles is hieronder te zien:
Maak een pictogram om het instellingenscherm weer te geven en pas dezelfde effecten opnieuw toe.
Pak het rechthoekige selectiekader en maak een verticale selectie van slechts 1 px breed, zoals hieronder te zien is.
Maak een nieuwe laag en vul de selectie met zwart. Dupliceer de laag en verplaats deze een pixel naar rechts met je cursortoetsen. Vul deze regel met wit.
Wijzig de overvloeimodus van de twee lagen in Overlay en lijn uw lijnen uit met het midden van uw navigatiebalk.
Dat is het voor onderdeel nummer een van deze tutorial! We hebben de hoofdstructuur en het kleurenschema van ons applicatieontwerp gemaakt. In de volgende tutorial zullen we de inhoud voor de startpagina, de verklaring en de accountschermen voor accounts maken en zullen we vastlopen in alle kleine ontwerpelementen die het ontwerp mooi samen zullen brengen..
Accentsconagua