Share
Dit is de tweede van een tweedelige tutorialserie over het hersluiten van een iPhone-applicatie met Photoshop. Noodzaak om bij te praten? Lees deel één op PSDTuts +! In deze zelfstudie behandelen we de rest van het UI-ontwerp van de toepassing, waarbij we nauwlettend letten op de kleine en delicate details, zoals typografie, knopontwerp en tekstinvoervelden, waardoor het algehele ontwerp.
We hebben de vorige zelfstudie afgerond met de voltooide pagina van onze applicatie-startpagina, evenals de hoofdachtergrond voor onze schermen en de kop- / navigatiebalk voor elk scherm.
Nadat u uw document in Photoshop heeft geopend, gaan we meteen aan de slag met onze pictogrammen. In de vorige zelfstudie hebben we al de achtergrond, het werkbalkgebied en de tekstachtergrond ingesteld (waar we onze tekst, knoppen en al het andere zullen plaatsen). We willen vier verschillende pictogrammen, die allemaal hetzelfde zullen vertegenwoordigen in de oorspronkelijke applicatie. De vier pictogrammen zijn:
Om onze pictogrammen te maken, gebruiken we een paar liniaalhulplijnen om ervoor te zorgen dat ze allemaal hetzelfde formaat hebben. Ga naar Weergave> Linialen als ze nog niet op je scherm staan. Sleep een aantal hulplijnen uit de linialen en plaats deze naast onze witte achtergrond.
Selecteer de Rechthoekig selectiekader en maak een selectie van vaste grootte van 100x75px. Klik ergens op je canvas en plaats de selectie naast je linkergids in het werkbalkgebied.
Sleep een andere hulplijn uit de liniaal en zorg ervoor dat deze direct eindigt aan het einde van uw selectie (deze zou automatisch moeten klikken).
Herhaal de stap en sleep een gids naar de boven- en onderkant van de selectie.
Blijf deze stap herhalen totdat we vier verschillende rechthoeken hebben die zijn samengesteld uit hulplijnen.
Deze vormen worden gebruikt om onze pictogrammen in te plaatsen. De reden dat ze breder zijn dan dat ze groot zijn, is omdat we ook de titel van de pictogrammen eronder plaatsen. We zullen elk afzonderlijk pictogram en elk tekstelement binnen ons raster centreren.
Gebruik dezelfde techniek die we zojuist hebben gebruikt, voeg nog een paar hulplijnen toe, zodat we weten waar we onze pictogrammen en tekst moeten plaatsen, zoals hieronder te zien is:
Hoewel het er verwarrend uitziet, zullen de dingen er een stuk eenvoudiger uitzien zodra we beginnen met het ontwerpen van pictogrammen en het invoegen van onze tekst.
Nu we onze gidsen hebben opgesteld, kunnen we beginnen met het ontwerpen van onze pictogrammen en tekst. Ik ga beginnen met de tekst. Grijp de Text Tool en selecteer een schoon, gemakkelijk te lezen lettertype. De tekst zal heel klein zijn, dus het moet schoon zijn! Ik ga Helvetica gebruiken voor mijn hele lichaam. Vul de openingen in die u voor uw tekst hebt gemaakt en zorg ervoor dat u uw tekstvakken in uw werkbalkmap plaatst.
Ik raad aan om je tekst handmatig uit te lijnen door de cursortoetsen te gebruiken omdat de ingebouwde opties voor uitlijnen van Photoshops (tekst) soms een beetje uit staan, en het is belangrijk dat deze korte titels goed gecentreerd zijn. Nadat u uw tekst hebt geplaatst, moeten we er enkele stijlen aan toevoegen. Open het venster Laagstijlen (overvloeiopties) en controleer of het voorbeeldpictogram is aangevinkt.
De eerste stijl die we gaan toepassen, is een eenvoudige kleuroverlay. Ik gebruik de kleur # 955425, een donkerbruine tint die ik uit de koptitel van de applicatie heb gehaald.
De volgende stijl die u wilt toevoegen, is een eenvoudige slag van 1 pixel met de # E5C39B-kleur. Zorg ervoor dat de lijn wordt toegepast op de buitenkant van uw tekst en niet op de binnenkant.
Om de tekst leesbaarder te maken en beter bij onze houten stijl te passen, passen we een innerlijke schaduwstijl toe. Zet de dekking van je stijl op 65% en je afstand en grootte op 2px. Ik heb mijn innerlijke schaduw onder een hoek van 45 graden geplaatst.
Nadat u de stijlen hebt toegepast maar op de knop OK hebt geklikt, moeten we dezelfde stijlen toepassen op onze andere pictogramtitels. Hiertoe selecteert u de tekstlaag "Uitgaan" en gaat u naar Klik met de rechtermuisknop> Laagstijl kopiëren. Selecteer alle andere tekstlagen allemaal tegelijkertijd door de Shift-toets ingedrukt te houden en ga vervolgens naar Klik met de rechtermuisknop> Laagstijl plakken om dezelfde stijl toe te passen op uw andere titels.
Nu de pictogramtitels allemaal zijn voltooid, is het tijd om enkele eenvoudige pictogrammen te maken. Om onze pictogrammen te maken, gaan we de verschillende gebruiken Selectiekader gereedschap. Het eerste pictogram dat we gaan produceren, is het rapportpictogram, omdat dit het gemakkelijkst is! Maak een nieuwe laag en noem deze "Rapportenpictogram".
We willen dat het pictogram mooi zit in onze vierkante gids die we ervoor hebben gemaakt. Selecteer de Rechthoekig selectiekader en maak een kleine selectie in je vierkant, zoals hieronder te zien:
Vul de selectie met zwart en duw de selectie een paar pixels lager en herhaal het proces. Blijf dit doen tot je een mooie rij zwarte vormen hebt.
Maak een nieuwe selectie, deze keer horizontaal, in plaats van verticaal.
Druk op de delete-toets om de overbodige delen van de rijen te verwijderen die we zojuist hebben gemaakt. Hiermee wordt een pictogram gemaakt dat gemakkelijk een document met een lijst- of rapporttype kan voorstellen. Plak je laagstijl die we zojuist hebben gemaakt op het pictogram.
Voordat u naar een ander pictogram gaat, sleept u een nieuwe hulplijn uit de liniaal en plaatst u deze direct onder ons nieuwe pictogram, zoals hieronder te zien is:
Voor ons instellingenpictogram gaan we een eenvoudig steeksleutelpictogram maken. Maak een nieuwe laag en noem deze "Instellingen pictogram". Selecteer de Veelhoekige lasso-tool en terwijl u de shift-toets ingedrukt houdt, maakt u een halve sleutelvorm zoals hieronder te zien is:
Vul de vorm met zwart en dupliceer de laag.
Ga naar Bewerken> Transformeren> Verticaal omdraaien om de gedupliceerde sleutelvorm om te draaien. Ga naar Bewerken> Vrije transformatie en terwijl u de Shift-toets ingedrukt houdt, draait u uw tweede moersleutel half rond.
Gebruik de cursortoetsen om de vorm van de sleutel samen te duwen en vervolgens de twee sleutellagen samen te voegen.
Verplaats, roteer en schaal uw sleutel totdat deze er goed uitziet en pas de gekopieerde laagstijl (en) daarop toe.
Gebruik vergelijkbare technieken om uw eigen pictogrammen voor "spendometer" en "uitgaan" te maken. Je kunt je gidsen achteraf verwijderen door naar Beeld> Wis hulplijnen.
Selecteer elk van uw vier pictogrammen afzonderlijk en verminder de dekking van deze tot ongeveer 80%. Hierdoor wordt een deel van de houtnerf zichtbaar en krijgt de algemene navigatiebalk een beetje meer diepte.
Selecteer elk van uw pictogrammen en pictogramtitels en dupliceer ze. Voeg ze allemaal samen door naar Laag> Omlaag samenvoegen. Open de Laagstijlopties (overvloeiopties) voor uw nieuwe samengevoegde laag en verwijder ze allemaal behalve Kleuroverlay. Wijzig de kleur van de overlay in wit en klik op OK.
Plaats je nieuwe witte laag onder alle andere pictogram- en pictogramtitellagen en duw met de cursortoetsen je laag één pixel naar beneden. Verlaag de dekking van de laag tot ongeveer 20%. Dit is een heel subtiele verandering, maar alles draagt bij aan de kwaliteit van de laatste look van de apps.
Met de navigatiepictogrammen gereed en afgestoft, wordt het tijd om door te gaan naar het hoofdgedeelte van de inhoud. Zoals vermeld in het eerste deel van de tutorial, zijn veel van de schermen redelijk vergelijkbaar (alleen verschillende titels), dus we concentreren ons op slechts enkele schermen:
We beginnen met het Spendometer-scherm. Selecteer uw Text Tool en gebruik hetzelfde letterbeeld dat je hebt gebruikt voor je pictogramtitels, typ 'Geld uitgeven?' Hoeveel keer deze keer? ' aan de bovenkant van je witte doos. Mijn lettergrootte was ingesteld op 4pt. Zorg ervoor dat je dit nieuwe tekstvak in je spityeter-lagenmap maakt.
Open het venster Laagstijl (venster Mengopties) voor uw volgende tekstlaag. Een kleuroverlay-stijl toepassen met de kleur # 613111 (een donkerbruine kleur). Voeg ook een Slagschaduw toe met de standaardinstellingen met een dekking van 15%.
De volgende taak is om ons tekstinvoervak en onze knop te maken. Selecteer de Rechthoekig selectiekader en maak een vaste grootte van 550x100 pixels. Klik op het canvas en centreer je selectie. Maak een nieuwe laag en noem deze "Money Entry." Ga naar Selecteer> Wijzigen> Vloeiend en voer een straal van 5 px in en klik op OK.
Vul je selectie met zwart. Voordat je je vorm opheft, ga je naar Selecteer> Wijzigen> Contract en contracteer je vorm met 10 pixels. Maak een nieuwe laag en noem deze "Money Entry Field," vul je nieuwe selectie met zwart.
Selecteer uw "Money Entry" -laag en open het venster Blending Options. Pas een kleuroverlay toe met de kleur # E4DCD5. We gaan ook een zeer subtiele innerlijke schaduw toevoegen, met behulp van de onderstaande opties:
Verlaag de dekking van de laag waaraan we zojuist hebben gewerkt tot ongeveer 50%. Open het venster Mengopties voor uw laag genaamd "Geldinvoerveld". Pas een puur witte kleurenoverlay toe op het tekstveld en een 1px-streek met de kleur # C0B8B0.
Dupliceer de twee vormen die we zojuist hebben gemaakt en duw ze naar beneden. Hernoem ze naar "Bestede achtergrond" en "Bestede knop". Open het venster Overvloeimogelijkheden voor uw laag met de naam 'Besteed Knop'. Verwijder alle huidige opties en pas een verloopoverlay toe. Ik ga groene kleuren gebruiken van # 50911B tot # A0D327. Zodra je tevreden bent met je verloopoverlay, druk je op de OK-knop.
We zullen nog een paar extra's toevoegen aan onze knop, maar omdat we heel precies met hen zullen zijn en aandacht zullen schenken aan alle kleine details die we handmatig gaan doen. Selecteer de inhoud van je knoppenlaag.
Maak een nieuwe laag boven je knop en noem het "Knop buitenste lijn". Ga naar Bewerken> Lijn en breng een 1px-streek aan met elke kleur buiten de selectie.
Open het venster Overvloeimogelijkheden van streeplagen en pas een standaardgradiënt toe met kleuren gaande van # 30580F tot # 86BD23.
Herhaal de laatste paar stappen opnieuw, maar deze keer met een slag van 1 px aan de binnenkant van je selectie en met een verloop van # 53941B tot # E2E8D4.
Selecteer de Text Tool en sleep een tekstvak over je knop. Type "BESTE IT" in uw tekstvak. Ik gebruikte de Helvetica Bold-set op 8 punten (maat). Lijn uw tekst uit met het midden van uw knop.
Pas een verloopoverlay toe op je tekst, gaande van een heel licht grijs (ik gebruikte #EBEBEB) naar wit (#FFFFFF). We willen ook een innerlijke schaduw toepassen met de onderstaande instellingen:
Maak een selectie van je originele knopvorm en maak vervolgens een nieuwe laag boven al je andere knooplagen. Noem het "Knopgeluid". Vul je selectie met wit en ga naar Filter> Ruis> Ruis toevoegen. Voeg ongeveer 25% ruis toe en klik vervolgens op OK.
Wijzig de overvloeimodus van lagen in Zacht licht en verminder de dekking van de laag tot ongeveer 50%. Dit voegt een leuk subtiel stukje textuur toe aan onze knop. Nu hebben we dat gedaan, we zijn allemaal klaar met ons knopontwerp! Een snelle, eenvoudige en effectieve manier om de knop eruit te laten zien alsof deze is ingedrukt, is door de knop eenvoudig 180 graden rond te draaien, zodat het donkerdere groen bovenaan staat in plaats van de onderkant.
In het oorspronkelijke ontwerp van de applicatie waren er afzonderlijke schermen voor de spendometer-statistieken (de pagina die aangeeft hoeveel u hebt uitgegeven en hoeveel u nog te besteden heeft) en de pagina die we zojuist hebben ontworpen. Ik heb het gevoel dat het niet nodig is om twee schermen te hebben, dus ga het terugbrengen naar de enige en zet al die andere informatie op hetzelfde scherm als degene die we zojuist hebben ontworpen.
De informatie die we moeten weergeven onder onze knop is als volgt:
Na het opnieuw vergroten van mijn "Uitgavengeld? Hoeveel deze keer?" tekst, ga ik verder met de "stats" onder de knop. Sleep een paar hulplijnen naar je canvas zoals hieronder te zien is:
Grijp de Text Tool en sleep een tekstvak in je resterende ruimte op je scherm. Typ je eerste titel ("Huidige uitbetalingspercentage") en pas dan dezelfde stijl toe die we gebruikten voor het "Geld uitgeven?" tekst naar uw nieuwe type.
Herhaal de stap nogmaals twee keer met behulp van de andere statitels.
Verlaag de dekking van de drie typen lagen tot ongeveer 90% zodat ze net iets lichter zijn dan onze andere tekst. Dit maakt geen groot verschil, maar onderscheidt ze wel een beetje. Dupliceer de laag 'Huidige uitkeringspercentage' en duw deze naar je rechterkolom. Verander de tekst in "$ XX.XX per dag". Vergroot het lettertype iets en lijn het uit met het midden van de kolom met behulp van de cursortoetsen.
Herhaal de stap opnieuw, zodat je eindigt met iets dat lijkt op het screenshot hieronder:
Om deze statistieken af te maken, voegen we een mooie en subtiele 2px-gestreepte rand toe. Maak een nieuwe laag en noem deze "Stroked Border White". Selecteer uw Single Row Marquee Tool en maak een keuze tussen je "Spend It" -knop en de titel "Current Spend Rate". Vul de selectie met een kleur die iets donkerder is dan de achtergrond - ik gebruik # E1D9D3.
Dupliceer de laag en hernoem deze "Stroked Border Black", en schuif hem een pixel omlaag zodat de nieuwe regel direct onder je oude komt. Selecteer de inhoud van de lagen en vul deze met een kleur die iets donkerder is dan degene die we net gebruikten - ik gebruikte # A59C93.
Zoals je kunt zien aan de hand van de bovenstaande schermafbeelding, overlappen onze border / separator gebieden die we niet willen. Selecteer de laag "Stroked Border Black" en druk op de Cmd + E combinatie om het samen te voegen tot de witte streeklaag. Hernoem de laag naar "Separator". Selecteer de Rechthoekig selectiekader en maak een selectie aan de linkerkant van je scherm.
Druk op de Delete-toets om het onnodige scheidingsteken te verwijderen. Verplaats uw selectie naar de rechterkant en herhaal het proces.
Gebruik de cursortoetsen om uw scheidingsteken omhoog / omlaag te duwen om ervoor te zorgen dat het gecentreerd is tussen de onderkant van de knop en de bovenkant van uw tekst - de mijne is precies 30 px onder mijn knop en 30 px boven mijn tekst. Verlaag de dekking van uw scheidingstekenslaag tot ongeveer 50%. Ik heb toen besloten om het om te draaien zodat de lichtere kleur op de bodem als ik vond dat dit er beter uitzag.
Herhaal het proces nog een paar keer totdat er een scheidingsteken onder elke regel tekst is. Een snelle manier om dit te doen, is door gewoon elke vorige laag te dupliceren en deze vervolgens op de juiste hoeveelheid neer te zetten. Ik heb ook de map met hele statistieken naar beneden gedrukt, zodat deze in het midden tussen de knop en de onderkant van ons witte achtergrondgebied zit.
Voeg wat afwerkingen toe, zoals het wijzigen van de kleuren van onze cijfers die nog moeten worden uitgegeven. Ik heb ook mijn figuren naar rechts uitgelijnd.
Na het toevoegen van wat dummy-tekst aan ons geldtekstveld hebben we ons eerste schermontwerp voltooid! De knop is hier duidelijk de blikvanger, met zijn gedurfde groene verloop en aandacht voor kleine details zoals de witte en zwarte lijnen.
De rest van onze pagina's (zoals hierboven vermeld) gebruiken een combinatie van de technieken die we al hebben gebruikt in de vorige stappen in deze zelfstudie en in deel één. Zet de technieken die je hebt geleerd om te gebruiken om de rest van het ontwerp van de applicatie zelf te maken.
Hieronder ziet u de schermafbeeldingen van het oorspronkelijke ontwerp naast de opnieuw ontworpen gebruikersinterface van de toepassing die u zelf hebt leren maken.
Dus, daar hebben we het, onze uiteindelijke uitkomst van deze redelijk lange tweedelige tutorial heeft ons redelijk goed gemaakt! Plaats links naar je uitkomst in de reacties hieronder - we zouden ze graag willen zien!
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