Share
Dit is de tweede in een tweedelige tutorialserie over het ontwerpen van een applicatie voor iPhone-bankieren. In dit deel van de serie ontwerpen we de hoofdindeling / inhoud van elk van deze pagina's: het menu / de startpagina, de instructiepagina en de schermen voor het toevoegen van accounts. Deel 1 gemist? Ga op snelheid door het hier te lezen.
In het vervolg van waar we gebleven waren, selecteer je het Rechthoekige selectiekader. Selecteer vanuit de werkbalktop vaste grootte in het vervolgkeuzemenu Stijl en gebruik instellingen van 50 x 50 pixels. Klik ergens op je canvas om een selectie van 50 x 50 pixels te maken. Sleep uw selectie naar de rand van uw canvas en sleep een hulplijn van uw liniaal (Beeld> Liniaal) en zet deze tegen uw selectie. Herhaal het proces totdat u twee hulplijnen aan beide zijden van uw canvas hebt.
Plaats een hulplijn in het midden van je canvas - je zou het automatisch moeten kunnen klikken.
Versleep nu hulplijnen en maak ze centraal tussen de twee die we al hebben gemaakt, zoals hieronder:
We hebben nu een heel eenvoudig raster klaar om onze icoon / knoppen te plaatsen zodra we ze hebben ontworpen. Selecteer het gereedschap Rechthoekig selectiekader en het stijlmenu, selecteer normaal in plaats van vaste grootte. Versleep een vierkant (houd de Shift-toets ingedrukt om het vierkant te houden) tussen onze linkergeleiders. Vul het met zwart.
Herhaal het proces nog twee keer, zorg ervoor dat elke vorm op een nieuwe laag wordt ingevuld.
Dupliceer alle drie de lagen en plaats ze 50 pixels onder je vorige vormen.
Gebruik het gereedschap Rechthoekige selectiekader om een effen zwart blok onder aan het menuscherm te maken en de laag te hernoemen naar 'advertentie'.
Met de hoofdstructuur van ons beginscherm is het tijd om al die kleine details toe te voegen die het ontwerp tot leven brengen. Cmd + klik (Ctrl + klik op Windows) op de miniatuurminiatuur van je eerste pictogram om deze opnieuw te selecteren. Ga naar Selecteer> Wijzigen> Vloeiend en voer 4 pixels in en klik vervolgens op OK. Klik met de rechtermuisknop en selecteer Inverse selecteren in het menu.
Druk op de Delete-toets op je toetsenbord om de hoeken van je selectie te verwijderen. Ga naar Beeld> Wis hulplijnen om al uw handleidingen te verwijderen.
Open het venster met laagstijlen voor uw eerste pictogram. Een slagschaduw, een kleuroverlay en een streek toepassen. Alle instellingen zijn te zien in de onderstaande schermafbeeldingen:
Dupliceer je laag en ga naar Bewerken> Transformeren> Schalen. Houd je Shift-toets en Alt-toets ingedrukt, schaal je vorm een beetje naar beneden.
Open het venster met laagstijlen voor je nieuwe laag en pas de volgende instellingen toe op onze bestaande effecten en verwijder de slagschaduw volledig ...
Dupliceer de laag nog een keer en verwijder de laagstijlen volledig door met de rechtermuisknop op de laag te klikken en de stijl van de laaglaag in het menu te selecteren. Ga naar Filter> Ruis> Ruis toevoegen. Ik voegde 10% ruis toe en verlaagde de laagdekking naar 5%.
Herhaal het hele proces voor al uw pictogrammen.
Het is tijd om de pictogrammen te maken die we dan boven op onze knoppen plaatsen. Maak een nieuwe laag en selecteer de Rechthoekige selectiekader. Het eerste pictogram dat we gaan ontwerpen, is een stapel munten die 'balans' vertegenwoordigt. Maak een kleine rechthoek met het selectiekader en vul het met zwart.
Schuif je selectie een paar keer omhoog en vervolgens naar rechts - vul deze selectie met zwart op dezelfde laag. Blijf de stap herhalen totdat je iets hebt dat er als volgt uitziet.
Open het venster met laagstijlen voor je nieuwe laag munten. Voeg een vrij subtiele gouden verlooplaag toe aan je munten.
Voeg nu een slagschaduw en een innerlijke schaduw toe aan je vorm, je kunt de instellingen zien die ik in de onderstaande schermafbeeldingen heb gebruikt.
Gebruik technieken die we in beide delen van deze tutorial hebben gebruikt, voltooi alle andere iconen. Ik ga de volgende pictogrammen maken: Papieren verklaring (voor verklaringen), Envelop (voor meldingen), Mobiele telefoon (voor top-ups van de telefoon), Creditcard (voor creditcardafschriften) en een silhouet (voor account toevoegen).
Nadat ik mijn pictogrammen heb voltooid, heb ik besloten dat de slagschaduw onder onze witte hoofdvormen een beetje donkerder moet worden. Open het laagstijlvenster en vergroot de dekking van de schaduw tot 15%. Ik heb ook de grootte van de schaduw vergroot van 2px naar 5px.
Doe hetzelfde voor al je andere knopvormen.
In plaats van de onderste rechthoek voor een advertentie te gebruiken, denk ik dat het een geweldige kleine toevoeging is om een eenvoudige grafiek op zijn plaats te hebben, zodat gebruikers snel kunnen zien of hun rekeningsaldo omhoog of omlaag is. Gebruik dezelfde techniek die we eerder hebben gebruikt, sleep enkele hulplijnen uit de liniaal.
Grijp de Elliptical Marquee Tool en sleep een kleine cirkel terwijl je de Shift-Key ingedrukt houdt om i16t rond te houden. Vul het met zwart op een nieuwe laag.
Dupliceer de laag en plaats één stip op de volgende verticale gids. Herhaal de stap totdat je iets hebt dat er zo uitziet:
Ga naar Beeld> Wis hulplijnen om de hulplijnen op ons canvas te verwijderen. Open de laagstijlopties voor uw eerste blob en pas de volgende stijlen toe:
Kopieer de laagstijlen door met de rechtermuisknop op uw laag te klikken en Laagstijl kopiëren te selecteren. Selecteer al uw andere cirkellagen, klik met de rechtermuisknop en selecteer Laagstijl plakken. Dit zou de stijlen die u zojuist hebt gemaakt automatisch moeten toevoegen aan al uw andere lagen.
Pak het lijngereedschap en sleep een lijn van de ene stip naar de andere. Doe dit onder je puntlagen.
Met dat gedaan, zo is ons navigatiescherm! Zet al je recente lagen in een map met de naam "Navigatiescherm" om dingen netjes en opgeruimd te houden!
Sleep lagen naar de rand van uw pictogrammen op uw navigatiescherm en verberg vervolgens de hele map. Maak een nieuwe map en noem deze "Statement-scherm."
Selecteer het lijngereedschap en klik in de werkbalk op het vervolgkeuzemenu en zorg ervoor dat pijlpunten (einde) is geselecteerd.
Sleep een heel klein pijltje, zoals hieronder:
Klik met de rechtermuisknop op de pijlenlaag, selecteer rasteriseren en hernoem de laag vervolgens in 'groene pijl'. Open het laagoptiesvenster voor je pijl en pas vervolgens een slagschaduw, innerlijke schaduw, verloopoverlay en lijn toe. Alle instellingen zijn hieronder te zien:
Zoals je waarschijnlijk al geraden hebt, zal deze pijl het pictogram zijn dat we gebruiken voor inkomende transacties (geld betaald in de gebruikersaccount). Dupliceer de laag en duw deze een paar spaties open met de Shift-toets en cursortoetsen. Ga naar Bewerken> Transformeren> Roteren en terwijl u de Shift-toets ingedrukt houdt, draait u de pijl zodat deze naar links wijst.
Wijzig de naam van de laag in de rode pijl en open het lagenstijlvenster en pas er een rood verloop op toe.
Blijf de twee pijlen dupliceren en plaats ze onder elkaar in een willekeurige volgorde.
Selecteer het gereedschap Selectiegereedschap enkele rij en maak een selectie onder uw eerste pijl, vul deze met zwart op een nieuwe laag met de naam "scheidingsteken".
Dupliceer de laag en verplaats deze één pixel naar beneden door op de pijl omlaag op je cursortoetsen te drukken. Kleurt de lijn opnieuw in wit.
Voeg de twee lagen samen door ze beide te selecteren, klik met de rechtermuisknop en selecteer Lagen samenvoegen in het menu. Zet de laagdekking op 15% en snijd het einde van de lijnen af tot aan de richtlijnen met behulp van het Rechthoekige selectiekader en de Delete-toets.
Dupliceer de laag en plaats deze tussen de volgende twee pijlen. Blijf de stap herhalen totdat je een lijn tussen alle pijlen hebt. Ga naar Beeld> Wis hulplijnen.
Pak het tekstgereedschap en sleep een tekstvak tussen uw bovenste twee scheidingslijnen door en zorg ervoor dat het centraal staat. Typ iets in. Ik heb de tekst "$ 107.62 van bedrijfsnaam op 04/06/2010." Ik heb hiervoor Helvetica gebruikt, ingesteld op 4pt.
Zorg ervoor dat bepaalde delen van uw tekst meer opvallen door verschillende sublettertypen te gebruiken, zoals vet en cursief.
Dupliceer de tekstlaag en verplaats deze naar de volgende transactie - blijf deze stap herhalen totdat u alle openingen hebt opgevuld.
Om uw ontwerpmodel realistischer te laten lijken, gaat u door uw tekstlagen en wijzigt u het bedrag, de bedrijfsnaam en datums.
Gebruik technieken die u al in beide delen van de zelfstudie hebt gebruikt, start en voltooi het scherm voor het toevoegen van accounts. Hieronder worden verschillende screenshots genomen tijdens het ontwerpen van het laatste scherm van de tutorial.
Home / Navigatie Scherm:
Statement scherm:
Accountscherm toevoegen:
Accentsconagua