Navrhovanie aplikácie pre iPhone Bank vo Photoshope, časť 2, Vývoj webových stránok, počítačové hry a Windows
- Zdielať na Facebook-u
- Tweet
- Zdieľajte na Googli+
- Uverejniť na Tumblr
- Pripnúť
- Pridať do vrecka
- Poslať email
Toto je druhý z dvojdielnej série návodov na návrh bankovej aplikácie pre iPhone. V tejto časti série navrhneme hlavné rozloženie/obsah každej z týchto stránok: ponuku/domovskú stránku, stránku výpisu a obrazovky na pridanie účtov. Zmeškaná prvá časť? Ak sa chcete dozvedieť viac, prečítajte si ho tu.
Krok 1
Potom, kde sme skončili, zvoľte Nástroj na výber obdĺžnika. Na paneli nástrojov vyberte pevnú veľkosť z rozbaľovacej ponuky Štýl a použite nastavenie 50 x 50 pixelov. Kliknutím kdekoľvek na plátne vytvoríte výber s rozmermi 50 x 50 pixelov. Potiahnite svoj výber na okraj plátna, potom potiahnite sprievodcu z pravítka (Zobraziť> Pravítko) a pripevnite ho na svoj výber. Postup opakujte, kým na oboch stranách plátna nie sú dva vodítka.
Do stredu plátna umiestnite sprievodcu - mali by ste byť schopní zacvaknúť ho automaticky na svoje miesto.
Teraz vytiahnite vodítka a vložte ich do stredu medzi dva, ktoré sme už vytvorili.
Teraz máme veľmi jednoduchú mriežku na umiestnenie našich ikon/tlačidiel, akonáhle sme ich navrhli. Vyberte ponuku Obdĺžnikový výber a štýl a namiesto pevnej veľkosti zvoľte normálnu veľkosť. Potiahnite štvorček medzi ľavými vodidlami (podržte stlačený kláves Shift). Naplňte ju čiernou farbou.
Postup opakujte ešte dvakrát a nezabudnite vyplniť každý tvar na novej vrstve.
Duplikujte všetky tri vrstvy a umiestnite ich 50 pixelov pod vaše predchádzajúce tvary.
Pomocou pravouhlého nástroja na výber vytvorte v dolnej časti obrazovky ponuky čierny blok a premenujte vrstvu „ad“.
Krok 2
Teraz, keď je hlavná štruktúra našej domovskej obrazovky pripravená, je čas pridať všetky malé detaily, ktoré dizajn oživia. Príkazom + kliknite (Ctrl + kliknite v systéme Windows) na miniatúru prvej úrovne symbolov, aby ste ju znova vybrali. Ísť do Vyberte> Upraviť> Hladké Zadajte 4 pixely a kliknite na tlačidlo OK. Kliknite pravým tlačidlom myši a v ponuke vyberte príkaz Vybrať inverzne.
Rohy výberov odstránite stlačením klávesu Delete na klávesnici. Prejdite na Zobraziť> Odstrániť vodítka a odstráňte všetkých vodiacich prvkov.
Otvorte okno štýlu vrstvy pre svoj prvý symbol. Použite vrhnutý tieň, farebné prekrytie a ťah. Všetky nastavenia sú zobrazené na nasledujúcich snímkach obrazovky:
Duplikujte vrstvu a vyberte položky Upraviť> Transformovať> Zmenšiť. Podržanie klávesov Shift a Alt trochu zmenší váš tvar.
Otvorte okno Štýly vrstvy pre svoju novú vrstvu a vykonajte nasledujúce nastavenia týkajúce sa našich existujúcich efektov. Tieň úplne odstráňte.
Znova duplikujte vrstvu a úplne odstráňte štýly vrstiev kliknutím pravým tlačidlom myši na vrstvu a výberom položky Odstrániť štýl vrstvy z ponuky. Ísť do Filter> Šum> Pridať šum. Pridal som 10% šum a znížil krytie vrstvy na 5%.
Celý postup opakujte pre všetky svoje symboly.
krok 3
Je čas vytvoriť ikony, ktoré potom umiestnime nad naše tlačidlá. Vytvorte novú vrstvu a vyberte nástroj na výber obdĺžnika. Prvý symbol, ktorý navrhneme, je hromada mincí, ktorá predstavuje „rovnováhu“. Vytvorte malý obdĺžnik pomocou nástroja na výber a vyplňte ho čiernou farbou.
Posuňte výber o niekoľko zárezov a potom doprava - vyplňte výber čiernou farbou v rovnakej vrstve. Krok opakujte, kým niečo nebude vyzerať ako spodok.
Otvorte okno Štýly vrstvy pre svoju novú vrstvu mincí. Pridajte do svojich mincí pekne jemné zlaté gradientné prekrytie.
Teraz pridajte do svojho tvaru vrhnutý tieň a vnútorný tieň. Nastavenia, ktoré som použil, si môžete pozrieť na snímkach obrazovky nižšie.
Vyplňte všetky ostatné symboly pomocou techník, ktoré sme použili v oboch častiach tohto tutoriálu. Vytvorím tieto ikony: papierový výpis (pre bankové výpisy), obálka (pre upozornenia), mobilný telefón (pre dobíjanie telefónov), kreditná karta (pre výpisy z kreditných kariet) a silueta (pre pridanie účtu).
Krok 4
Po dokončení svojich ikon som sa rozhodol, že tieňový tieň pod našimi hlavnými bielymi tvarmi musí byť trochu tmavší. Otvorte okno Štýl vrstvy a zvýšte nepriehľadnosť tieňa na 15%. Tiež som zväčšil veľkosť tieňa z 2px na 5px.
To isté urobte pre všetky ostatné tvary tlačidiel.
Krok 5
Namiesto použitia dolného obdĺžnika pre reklamu si myslím, že by bolo trochu obohatením, keby ste namiesto toho použili jednoduchú grafiku, ktorá používateľom poskytne rýchlu predstavu o tom, či je ich rovnováha vysoká (alebo klesá). Rovnakou technikou, ktorú sme použili predtým, vytiahnite z pravítka niekoľko vodiacich línií.
Chyťte eliptický výrez a podržte stlačený kláves Shift a potiahnite malý kruh. Naplňte ju čiernou farbou na novej vrstve.
Duplikujte rovinu a umiestnite bod na ďalšie vertikálne vodítko. Krok opakujte, kým nebudete mať niečo, čo vyzerá takto:
Ísť do Zobraziť> Odstrániť sprievodcov aby sme odstránili pokyny na našom plátne. Otvorte možnosť Štýly vrstvy pre prvý blob a použite nasledujúce štýly:
Skopírujte štýly vrstiev kliknutím pravým tlačidlom myši na svoju vrstvu a výberom možnosti Kopírovať štýl vrstvy. Vyberte všetky ostatné vrstvy kruhu, kliknite pravým tlačidlom myši a vyberte príkaz Prilepiť štýl vrstvy. To by malo automaticky pridať štýly, ktoré ste práve vytvorili, do všetkých ostatných vrstiev.
Chyťte čiarový nástroj a nakreslite čiaru z jedného bodu do druhého. Urobte to pod bodovými vrstvami.
Vďaka tomu je hotová aj naša navigačná obrazovka! Uložte všetky svoje posledné vrstvy do priečinka s názvom „Navigačná obrazovka“, aby ste mali poriadok!
Krok 6
Presuňte vrstvy na okraj svojich ikon na navigačnej obrazovke a potom skryte celý priečinok. Vytvorte nový priečinok a pomenujte ho „Obrazovka pokynov“.
Vyberte nástroj Čiara a kliknutím na rozbaľovaciu ponuku na paneli nástrojov skontrolujte, či sú vybrané šípky (koniec).
Vytiahnite veľmi malú šípku, ako je uvedené nižšie:
Pravým tlačidlom myši kliknite na vrstvu šípky, vyberte možnosť „Rastrovať“ a vrstvu premenujte na „zelenú šípku“. Otvorte okno Možnosti vrstvy pre svoju šípku a potom použite tieň, vnútorný tieň, prekrytie prechodom a ťah. Všetky nastavenia sú zobrazené nižšie:
Ako ste už pravdepodobne uhádli, táto šípka bude symbolom, ktorý použijeme pre prichádzajúce transakcie (peniaze, ktoré budú vložené na užívateľský účet). Duplikujte vrstvu a presuňte ju o niekoľko medzier pomocou klávesu Shift a kurzorových klávesov. Ísť do Upraviť> Transformovať> Otočiť a podržte kláves Shift a otočte šípku tak, aby smerovala doľava.
Zmeňte názov vrstvy na červenú šípku, otvorte okno Štýl vrstvy a použite červený prechod.
Duplikujte dve šípky a umiestnite ich jednu pod druhú v náhodnom poradí.
Vyberte Nástroj na výber jedného riadku a vykonajte výber pod svojou prvou šípkou. Naplňte ju čiernou farbou na novej vrstve s názvom „Oddeľovač“.
Duplikujte vrstvu a potom ju posuňte nadol o jeden pixel stlačením klávesu nadol na kurzorových klávesách. Farebne zafarbite čiaru.
Spojením dvoch vrstiev vyberte obe. Pravým tlačidlom myši vyberte v ponuke možnosť Pripojiť vrstvy. Zmeňte nepriehľadnosť vrstvy na 15% a pomocou nástrojov Obdĺžnikový výber a Odstrániť odstráňte koniec riadkov až po vodítka.
Duplikujte vrstvu a umiestnite ju medzi ďalšie dve šípky. Krok opakujte, až kým nebude čiara medzi všetkými šípkami. Ísť do Zobraziť> Odstrániť sprievodcov.
Chyťte textový nástroj a potiahnite textové pole medzi dvoma hornými oddeľovačmi, aby ste sa uistili, že je v strede. Zadajte niečo. Použil som text „107,62 USD z názvu spoločnosti dňa 04.06.2010“. Použil som na to Helveticu, nastavenú na 4pt.
Použitím rôznych podtypov zaistite, aby boli niektoré časti vášho textu zvýraznené viac, napríklad: B. tučné písmo a kurzíva.
Duplikujte textovú vrstvu a presuňte ju až do ďalšej transakcie. Tento krok opakujte, kým nevyplníte všetky medzery.
Ak chcete, aby bol dizajn vášho návrhu realistickejší, prejdite textovými vrstvami a zmeňte číslo, názov spoločnosti a dátum.
Krok 7
Spustite obrazovku Pridať účet a dokončite ju pomocou techník, ktoré ste použili v oboch častiach tutoriálu. Ďalej uvádzame niekoľko snímok obrazovky, ktoré vytvoríte pri navrhovaní poslednej obrazovky tutoriálu.
Konečné výsledky
Štart/navigačná obrazovka:
Obrazovka s pokynmi:
Obrazovka Pridať účet: