IPhone Bank alkalmazás megtervezése a Photoshop 2. rész kód webhelyfejlesztés, számítógépes játékok és
- Megosztani Facebookon
- Csipog
- Megosztás a Google-on+
- Tétel a Tumblr-be
- Tűzd ki
- Hozzáadás a Pocket-hez
- Küldjön e-mailt
Ez a második egy kétrészes oktatósorozatban az iPhone banki alkalmazás tervezéséről. A sorozat ezen részében meg fogjuk tervezni ezen oldalak fő elrendezését/tartalmát: a menüt/kezdőlapot, a kimutatási oldalt és a képernyőket a fiókok hozzáadásához. Elmaradt az első rész? Tartsa naprakésznek, ha itt olvassa el.
1. lépés
Ezután ott, ahol abbahagytuk, válassza a Téglalap kiválasztó eszközt. Az eszköztáron válassza ki a rögzített méretet a Stílus legördülő menüből, és használja az 50 x 50 képpontos beállításokat. Kattintson a vásznon bárhová 50 x 50 képpontos kijelölés létrehozásához. Húzza a kijelölést a vászon szélére, majd húzza az útmutatót a vonalzóról (Nézet> Vonalzó), és illessze a kijelöléshez. Ismételje meg a folyamatot, amíg a vászon két oldalán két iránymutatás van.
Helyezzen egy vezetőt a vászon közepére - képesnek kell lennie arra, hogy automatikusan a helyére rögzítse.
Most húzza ki a vezetőket, és tegye középre a már létrehozott kettő közé.
Most már nagyon egyszerű rács van az ikonok/gombok elhelyezésére, miután megterveztük őket. Válassza a Téglalap alakú kijelölő eszköz és a stílus menüt, és a rögzített méret helyett válassza a normál méretet. Húzza ki a négyzetet a bal vezetők között (tartsa lenyomva a Shift billentyűt). Töltse ki feketével.
Ismételje meg a folyamatot még kétszer, ügyelve arra, hogy minden alakzatot új rétegben töltsön ki.
Ismételje meg mind a három réteget, és helyezze el őket 50 képponttal az előző alakzatok alá.
A téglalap alakú kijelölő eszközzel hozzon létre egy fekete tömböt a menüképernyő alján, és nevezze át a réteget "ad" -nak.
2. lépés
Most, hogy elkészült a kezdőképernyőnk fő felépítése, itt az ideje, hogy hozzáadjuk azokat az apró részleteket, amelyek életre hívják a dizájnt. Parancs + kattintás (Ctrl + kattintás Windows-on) az első szimbólumszint indexképére az újbóli kiválasztáshoz. Menj Válassza a> Módosítás> Sima lehetőséget Adjon meg 4 pixelt, majd kattintson az OK gombra. Kattintson a jobb gombbal, és válassza a menü Inverz kiválasztása parancsát.
Nyomja meg a Törlés gombot a billentyűzeten a választások sarkainak eltávolításához. Az összes útmutató eltávolításához válassza a Nézet> Útmutatók törlése menüpontot.
Nyissa meg az első szimbólum rétegstílus ablakát. Alkalmazzon egy árnyékot, színátfedést és húzást. Minden beállítás látható a következő képernyőképeken:
Másolja le a réteget, és válassza a Szerkesztés> Átalakítás> Méretezés lehetőséget. A Shift és az Alt billentyűk lenyomva tartása kissé csökkenti az alakját.
Nyissa meg az új réteg Rétegstílusok ablakát, és végezze el a következő beállításokat a meglévő effektjeinken. Távolítsa el teljesen az árnyékot.
Ismételje meg a fóliát, és teljesen távolítsa el a fazonstílusokat: kattintson a jobb gombbal a fóliára, és válassza a menü Stílus törlése parancsát. Menj Szűrő> Zaj> Zaj hozzáadása. 10% -os zajt adtam hozzá, és 5% -ra csökkentettem a réteg átlátszatlanságát.
Ismételje meg az összes szimbólum teljes folyamatát.
3. lépés
Itt az ideje, hogy létrehozzuk azokat az ikonokat, amelyeket aztán a gombjainkra helyezünk. Hozzon létre egy új réteget, és válassza a téglalap kiválasztó eszközt. Az első szimbólum, amelyet megtervezünk, egy halom érme, amely az "egyensúlyt" képviseli. Hozzon létre egy kis téglalapot a kiválasztó eszközzel, és töltse ki feketével.
Mozgassa a választékot néhány résszel, majd jobbra - töltse ki a kijelölést feketével ugyanazon a rétegen. Ismételje meg a lépést, amíg valami úgy néz ki, mint az alja.
Nyissa meg az új érmeréteg Rétegstílusok ablakát. Adjon hozzá egy nagyon finom arany színátmenetes fedvényt az érmékhez.
Most adj hozzá egy árnyékot és egy belső árnyékot az alakodhoz. Az alábbi képernyőképeken láthatja az általam használt beállításokat.
Töltse ki az összes többi szimbólumot az oktatóanyag mindkét részében használt technikákkal. A következő ikonokat hozom létre: papír kivonat (bankszámlakivonatokhoz), boríték (értesítésekhez), mobiltelefon (telefonos feltöltésekhez), hitelkártya (hitelkártya-kimutatásokhoz) és egy sziluett (fiók hozzáadásához).
4. lépés
Miután befejeztem az ikonjaimat, úgy döntöttem, hogy a fő fehér formáink alatt lévő árnyéknak kissé sötétebbnek kell lennie. Nyissa meg a Rétegstílus ablakot, és növelje az árnyék átlátszatlanságát 15% -ra. Emellett az árnyék méretét 2 képpontról 5 képpontra növeltem.
Tegye ugyanezt az összes többi gombalak esetében is.
5. lépés
Ahelyett, hogy az alsó téglalapot használnánk egy hirdetéshez, azt gondolom, hogy egy kis gazdagítás lenne, ha egyszerű grafikát használna, amely gyors képet ad a felhasználóknak arról, hogy magas-e az egyensúlyuk (vagy csökken-e). Ugyanazzal a technikával, amelyet korábban használtunk, húzzon ki néhány vonalat a vonalzóról.
Fogja meg az elliptikus sátor eszközt, és húzza ki egy kis kört, miközben lenyomva tartja a Shift billentyűt. Töltsön be fekete színt egy új rétegre.
Ismételje meg a síkot, és helyezzen egy pontot a következő függőleges vezetőre. Ismételje meg a lépést, amíg van valami, ami így néz ki:
Menj Nézet> Útmutatók törlése hogy eltávolítsuk az irányelveket a vásznunkról. Nyissa meg a Rétegstílusok beállítást az első blobhoz, és alkalmazza a következő stílusokat:
Másolja a rétegstílusokat úgy, hogy jobb gombbal rákattint a fóliára, és kiválasztja a Rétegstílus másolása lehetőséget. Jelölje ki az összes többi körréteget, kattintson a jobb gombbal, és válassza a Rétegstílus beillesztése lehetőséget. Ennek automatikusan hozzá kell adnia az imént létrehozott stílusokat az összes többi réteghez.
Fogja meg a vonalas eszközt, és rajzoljon egy vonalat egyik pontról a másikra. Tedd ezt a pontrétegeid alatt.
Ezzel elkészült a navigációs képernyőnk is! Helyezze az összes utolsó rétegét egy "Navigációs képernyő" nevű mappába, hogy rendben legyenek a dolgok!
6. lépés
Húzza a rétegeket az ikonok szélére a navigációs képernyőn, majd rejtse el a teljes mappát. Hozzon létre egy új mappát, és nevezze el "Instruction Screen" névnek.
Válassza ki a Vonal eszközt, és kattintson az eszköztár legördülő menüjére, hogy megbizonyosodjon arról, hogy a nyílhegyek (vég) vannak-e kiválasztva.
Húzza ki egy nagyon kicsi nyíl, mint az alábbiak:
Kattintson a jobb gombbal a nyíl rétegre, válassza a "Raszterizálás" lehetőséget, és nevezze át a réteget "zöld nyílra". Nyissa meg a nyíl Rétegbeállítások ablakát, majd alkalmazzon egy árnyékot, egy belső árnyékot, egy színátmenet fedvényt és egy körvonalat. Az összes beállítás látható alább:
Mint valószínűleg már sejtette, ez a nyíl lesz az a szimbólum, amelyet a bejövő tranzakcióknál használunk (a felhasználói számlára befizetett pénz). Másolja le a réteget, és mozgassa néhány szóközzel a Shift és a kurzor billentyűk segítségével. Menj Szerkesztés> Átalakítás> Forgatás és tartsa lenyomva a Shift billentyűt, és forgassa a nyíl balra mutató pontját.
Módosítsa a réteg nevét piros nyílra, nyissa meg a Rétegstílus ablakot, és alkalmazzon piros színátmenetet.
Ismételje meg a két nyilat, és tegye őket egymás alá véletlenszerű sorrendben.
Válassza ki a Single Row Selection Tool alkalmazást, és végezzen kiválasztást az első nyíl alatt. Töltse ki feketével egy új "Separator" nevű rétegen.
Másolja le a réteget, majd mozgassa egy pixelrel lefelé a kurzor billentyűkön található lefelé gomb megnyomásával. Színezze a vonalat fehérre.
Egyesítse a két réteget mindkettő kiválasztásával. Kattintson a jobb gombbal, és válassza a menü Csatlakozás rétegekhez parancsát. Módosítsa a réteg átlátszatlanságát 15% -ra, és a Téglalap alakú sátor eszköz és a Törlés gombbal vágja le a sorok végét az irányelveknek megfelelően.
Másolja le a réteget, és helyezze a következő két nyíl közé. Ismételje meg a lépést, amíg az összes nyíl között nem lesz egy vonal. Menj Nézet> Útmutatók törlése.
Fogja meg a szöveges eszközt, és húzza ki a szövegmezőt a felső két elválasztó között, hogy megbizonyosodjon arról, hogy az középen van. Írjon be valamit. A "107,62 USD cégnévtől 2010.06.04-én" szöveget használtam. Ehhez a Helveticát használtam, 4pt-re állítva.
Győződjön meg arról, hogy a szövege bizonyos részei nagyobb hangsúlyt kapnak különböző altípusok használatával, például: B. félkövér és dőlt.
Másolja le a szövegréteget, és helyezze át a következő tranzakcióig. Ismételje meg ezt a lépést, amíg ki nem tölti az összes hiányosságot.
Annak érdekében, hogy a tervezése valósághűbb legyen, menjen át a szövegrétegeken, és változtassa meg a számot, a cég nevét és a dátumot.
7. lépés
Indítsa el a Fiók hozzáadása képernyőt, és töltse ki az oktatóanyag mindkét részében használt technikákkal. Az alábbiakban bemutat néhány képernyőképet, amelyeket a bemutató utolsó képernyőjének megtervezésekor készít.
Végeredmények
Kezdő/navigációs képernyő:
Utasítás képernyő:
Fiók hozzáadása képernyő: