Tutorial: Jak navrhnout chatovací IPhone UI
V tomto tutoriálu budeme navrhnout uživatelské rozhraní iPhone pro mobilní aplikaci pro fórum a chat.
Aplikace zahrnuje hrstka prvků každodenního dotykového rozhraní, jako jsou tlačítka, vstupní pole a dotyková gesta.
Budeme pokrývat různé nástroje Photoshopu, styly vrstev a samozřejmě řešit jakákoli konstrukční omezení; stejně jako vytváření designového pixelu - perfektní a krásné, aby si zasloužil místo na obrazovce iPhone.
Návrh byl sestaven pomocí programu Photoshop CS5.5, nicméně všechny poslední verze Photoshopu budou skvěle fungovat.
Požadavky na obrazovku aplikace
V tomto tutoriálu budeme právě vytvářet jednu obrazovku. Obrazovka bude hlavní obrazovkou chatu pro aplikaci založenou na chatu, podobně jako veřejná diskusní místnost, ale na telefonu. Požadavky této obrazovky jsou:
- Hlavička - to je chatová místnost, v které se právě nacházíte.
- Tlačítko zpět / zavřít / témata - pro návrat na předchozí obrazovku.
- Tlačítko pro lidi - to ukazuje, kdo je aktuálně v chatovce.
- Seznam zpráv - zprávy musí mít avatar & časové razítko.
- Způsob zobrazení profilů uživatelů a zpravodajských zpráv.
- Textové pole pro psaní zpráv.
- Tlačítko odeslání k odeslání zpráv.
Plánování, skicování a skenování
Stejně jako u jakéhokoli projektu uživatelského rozhraní je nezbytné plánování, skicování a skenování vašeho rozhraní. To docela často vylučuje nějaké hloupé myšlenky (ačkoli nemusí vypadat hloupě ve vaší hlavě!) Předtím, než uvedete digitální koncepty a mockups dohromady. To, co by mohlo vypadat jako skvělé řešení pro řešení problému ve vaší hlavě, by v konečném důsledku vůbec nefungovalo, což je důvod, proč je před zahájením projektu drátový přenos tak důležitým krokem.
Uchopte pero a vaši oblíbenou podložku a začněte skicovat.
Jak vidíte z výše uvedeného obrázku, strávil jsem jen pár minut sestavováním tří různých konceptů; obvykle tento proces trvá dny nebo někdy týdny, ale my jsme jen navrhnout jednu obrazovku a účel aplikace je jednoduchý, nákres by neměl trvat dlouho! Jsou většinou velmi podobné, ale každý má své jedinečné rozdíly, které shrnuji níže.
Skica A
Inspirován původním uživatelským rozhraním Twitteru pro iPhone, toto uživatelské rozhraní umožňuje uživatelům přejet prstem zprávu a zobrazovat další možnosti, jako je například "Zobrazit profil" a "Nahlásit uživatele" - zábavný a prostorově úsporný způsob, jak povolit větší obsah na této obrazovce. Jsem si představil, že v navigačním panelu má tlačítko nastavení, ale rozhodl jsem se řídit mým normálním pravidlem "Less Is More" - je nepravděpodobné, že uživatel přistupuje k nastavení při každém použití aplikace, takže není potřeba tady.
Skica B
Tento koncept je trochu kompaktnější, s tlačítky "Zobrazit profil" a "Nahlásit uživatele" jako statické ikony napravo od zpráv. Hrál jsem s myšlenkou, že zde nemám tlačítko "Odeslat" a namísto toho použiji tlačítko odeslání na klávesnici iOS. Rozhodl jsem se proti tomu, protože většina aplikací (včetně standardních aplikací iOS, jako jsou zprávy) má tlačítko pro odeslání klávesnice a další tlačítko pro odeslání vedle pole pro zadávání textu. Líbí se mi, aby mé rozhraní byly konzistentní s ostatními v App Store.
Skica C
Skica C je náčrt, který jsem se rozhodl vydat - namísto zpětného tlačítka máme tlačítko zavřeno. Myslím, že je zřejmé, že jakmile klepnete na tlačítko Zavřít, nebudete již součástí této konverzace (na rozdíl od aplikací pro zasílání zpráv, kam se vrátíte a můžete se vrátit, aby se stále zobrazovaly všechny předchozí zprávy). Tlačítko "Lidé" zobrazuje seznam uživatelů, kteří jsou v současné době v chatovně, a znovu jsem zopakoval myšlenku, že má snímek zobrazovat další prvky (například aplikaci Twitter), aby uživatel mohl zobrazit profil uživatele nebo je nahlásit.
S tímto hotovo, je čas přejít na něco společného ve Photoshopu!
Krok 1: Stav a navigační lišta
Než začneme s tímto krokem, musíme vytvořit náš dokument. Standardní velikost obrazovky iPhone (v rozlišení Retina) je široká 640 pixelů a vysoká 960 pixelů s rozlišením 326ppi. Mám tendenci vždy začít s bílým pozadím v mých vzorů.
Prvním krokem je vložení výchozího stavového řádku systému iOS. Stavový řádek je lišta v horní části vašeho iPhone, která vám sděluje důležité informace, jako je váš signál, nosič, čas a životnost baterie. Existují zde tři možnosti: černá lišta, černá lišta s nízkou průhledností nebo stříbrná lišta.
Chcete-li, aby váš návrh aplikace vypadal jako skutečný obchod, můžete uchopit stavový řádek z Retina iPhone GUI PSD kit najdete zde . Jednoduše stáhněte a otevřete PSD a přetáhněte požadovaný pruh na dokument PSD. Umístěte jej na horní část plátna.
Navigační panel je další na našem seznamu úkolů. Standardní navigační panel je vysoký 86 pixelů a rozkládá celou šířku vašeho iPhone (640 pixelů). Znovu můžete přetáhnout tento prvek z výše uvedené sady PSD, nebo jej můžete vytvořit ručně (můj preferovaný způsob, protože neexistují žádné připojené styly). Zvolte Nástroj pro tvar obdélníků a umístěte na plátno 640 x 86 px obdélník.
Krok 2: Tlačítka navigační lišty
S odkazem na naše drátěné rámy máme na našem navigačním panelu dvě tlačítka. Vyberte nástroj tvaru obdélníkového tvaru (nezapomeňte vždy používat tvarové nástroje pro tvary v návrhu UI, je mnohem jednodušší měnit náš dokument pro nižší rozlišení!). Použil jsem rozměry 100 x 50 pixelů s rohovým poloměrem 6 pixelů.
Umístěte tento tvar na obě levé a pravé strany navigačního panelu a umístěte je pěkně.
Krok 3: Výběr stylu
Je čas začít zvolit náš styl designu. Tato aplikace umožní lidem chatovat a setkávat se s novými lidmi a umožní lidem, aby se bavili dělat tak. Z tohoto důvodu se cítím jako zábavná, nepředvídatelná barevná schéma a typografie zde je důležitá, abych pomohla dostat tento bod napříč.
Vyberte nástroj Typ a zvolte typ písma, který odpovídá obrazu, který máte v hlavě. Vybrala jsem bublinku Arial Rounded MT Bold . Zadejte název vašeho tématu (vybral jsem si "UI Design") a zarovnejte jej na navigační liště.
Pokračování v zábavném motivu, který jsme pro aplikaci zvolili, je čas vybrat si některé barvy. Já osobně používám Milovníci barvy pomáhat inspirovat mé barvy při návrhu. V tomto konkrétním případě jsem hledal "zábavu" a během několika vteřin mi bylo představeno spousta různých možností a inspirujících palet, které mohu použít jako základ pro svůj design.
Nakonec jsem vybral jednoho z nich Hrací místnost . Je důležité myslet na to, jaké barvy budete potřebovat při výběru palety; Zjistil jsem, že vybírám něco světla, něco tmavého a něco jasného je vždy dobrý výchozí bod. Je důležité mít dobrý kontrast ve svém designu.
Krok 4: Styl navigační lišty
Nyní se vrátíme zpět do navigačního panelu a dáme mu barvu, kterou si zaslouží. Vyberte vrstvu navigačního panelu (doufám, že jste udržovali své vrstvy uspořádané!), Klikněte pravým tlačítkem myši a vyberte možnost Blending Options. Toto je domov nejmocnějších nástrojů aplikace Photoshop, pokud jde o vytvoření dokonalých návrhů rozhraní pixelů. Odtud můžete přidat stíny, přechody, vzory a stokes s možností kopírovat a vkládat tyto styly do jiných vrstev.
Nejprve přidáme do našeho baru gradient, tak klikněte na Gradient Overlay. Vybrala jsem tyrkysovou barvu jako ten, který chci použít pro svůj navigační panel. Je to jasné a plné silného úderu a náš vzhled se snadno zapamatuje. Použijte gradient úhlu 90 stupňů od světla (horní) do tmy (dole).
Nyní klikněte na panel Zdvih. Změňte velikost zdvihu na hodnotu 2 namísto standardní hodnoty 3. Tipem je vždy snažit vyhnout se lichým číslům v návrhu uživatelského rozhraní, zejména na mobilních zařízeních. To bude znamenat jen více práce pro návrháře i vývojáře, pokud jde o škálování práce (nemůžete mít polovinu 3 pixelů, protože polovina pixelu neexistuje!).
Změňte typ výplně vašeho zdvihu na přechod a ujistěte se, že tah se objeví na vnější straně vašeho tvaru. Vyberte tmavě tyrkysovou barvu pro spodní část vašeho tahu a černé pro vrchol. Vzhledem k tomu, že mrtvice je na vnější straně navigačního panelu, černá část zdvihu se nezobrazí na horní straně stavové lišty, a proto všichni uživatelé budou moci vidět tah v dolní části.
Vyberte panel Vnitřní stín a na lištu použijte 15% bílý stín s opacitou. To se objeví v horní části panelu a udělá mu krásné zvýraznění, takže se zdá, že je to 3D. Dal jsem stín vzdálenost 2px a velikost 3px.
Nyní je čas opravdu učinit náš navigační panel pop. Použitím vzorků můžeme do našeho designu přidat mnoho hloubky. Na navigačním panelu používám bílý vzor mřížky. Chcete-li použít tento vzor, můžete si zdarma stáhnout sbírku Pixely Premium .
Krok 5: Typografické stínování
Chcete-li našim typografiím určitou hloubku, otevřete panel možností prolnutí a použijte stín. Změňte úhel na hodnotu -90 (ujistěte se, že zde není zaškrtnuto políčko Použít globální styl, jinak se všechny stíny ve vašem designu změní na -90) a použijte stejnou barvu, kterou jste použili pro spodní část tahu navigačních pruhů. Dejte stín vzdálenost 2px a přeneste velikost na 0px. To dává čistý řez stín nad váš text okamžitě dělat to zajímavější.
Krok 6: Styl tlačítka na navigačním panelu
Nyní použijeme některé skvělé styly na tlačítka navigačních panelů. Chceme, aby se tato tlačítka dobře propojily s naším navigačním panelem, ale zároveň je třeba vyniknout dostatečně dobře, aby uživatel okamžitě poznal, že jsou to tlačítka. Chcete-li to udělat, použijeme více stylů vrstev, abychom jim poskytli 3D efekt.
Otevřete panel možností prolnutí a klikněte na překryvný gradient. Dejte tlačítku světlo (horní) na tmavý (spodní) přechod pomocí barev z navigačního panelu. Světlá barva byla vybrána z vrcholu mého navigačního panelu a tmavá barva byla vybrána ze spodního zdvihu navigačního pruhu.
Vyberte panel tahů a změňte velikost zdvihu na 2px s vnější polohou. Změňte typ výplně na gradient a úhel na 90 stupňů. Změňte gradientní barvy od světla (horní) na tmavou (spodní), založte barvy na barvách již používaných pro navigační lištu a tlačítka. Ihned můžete vidět, že tento tah dává vašemu tlačítku 3D vzhled, jako kdyby vycházel z navigačního panelu namísto toho, aby seděl na jeho vrcholu.
Chcete-li zmáčknout tlačítko o něco víc a udělat ještě vizuálně přitažlivější, přidáme na tlačítko tlačítko. Klepněte na vnitřní žárovku a změňte režim skládání na obrazovku. Zastrčte opacitu na 20% a ujistěte se, že šum je nastaven na 0%. Změňte výchozí žlutou zářivku na bílou a ujistěte se, že velikost je stále nastavena na výchozí hodnotu 5px. To by mělo dát vašemu tlačítku příjemnou vnitřní záře, takže tlačítko vypadá opravdu dojemné!
Nyní přidáme vnitřní stín, aby bylo naše tlačítko mírně realističtější. Změňte opacitu na 15% a vyberte barvu černé. Drop vzdálenost na 2px a velikost na 4px. Nyní změňte úhel na -90 stupňů (ujistěte se, že není zvoleno Použít globální světlo). To dává spodní část vašeho tlačítka mírný stín, který skrývá některé ze spodních vnitřních záře, které jsme právě použili. V reálném životě by tato oblast byla zastíněna, takže bylo důležité skrýt vnitřní záře.
Chcete-li dokončit styling našeho tlačítka, přidáme stín. Vyberte panel stínů a změňte barvu na bílou barvu s neprůhledností 25%. Tento stín se bude chovat jako zvýraznění pod naší mrtvicí, takže změňte vzdálenost na 4px (2px pro pokrytí oblasti mrtvice a 2px, která bude vidět pod mrtvicí).
Krok 7: Označení tlačítek
Tlačítko bez štítku je bezvýznamné, takže teď budeme trávit trochu času, než dokončíme naše tlačítka. Nejdříve klikněte pravým tlačítkem na stylizované tlačítko a vyberte možnost Styl kopírovat vrstvy. Nyní klikněte pravým tlačítkem myši na tlačítko bez stylu a vyberte možnost Paste Layer Style.
Budeme pokračovat v práci na pravém tlačítku. Toto tlačítko bude označeno jako "Lidé" a chceme použít ikonu dvou osob. V zájmu tohoto tutoriálu budu používat ikony vytvořené tvůrčím studiem Yummygum; najdete balení, které jsem použil IconSweets.com - V tutoriálu budu používat ikony z tohoto balíčku.
Pomocí stejného písma, které jste použili pro název navigační lišty, zadejte popisy tlačítek. Změňte velikost a umístěte jej na tlačítko a poté vložte svou ikonu (nebo vytvořte vlastní) do dokumentu. Umístěte tyto dvě vrstvy rovnoměrně na tlačítko. Mám rozložené mé vrstvy ven tak, že je 15px na obou stranách a tlačítko, a 10px mezi ikonou a textem. Vložte styl vrstvy z textového textu na navigační lištu na ikonu i na štítek tlačítka. Pokud potřebujete změnit velikost tlačítka, použijte Nástroj přímého výběru pro výběr 4 kotevních bodů vpravo a přetáhněte. Můžete držet klávesu směrem dolů, abyste tuto úpravu udrželi rovně.
Tento postup opakujte stisknutím tlačítka na levé straně navigačního panelu, tentokrát pomocí křížové ikony a slova "Zavřít". K přidání trochu více stylů ke svým tlačítkům jsem snížil neprůhlednost dvou tvarů pozadí na 95%, což dovoluje trochu mřížky pod ním projít.
Krok 8: Panel textových polí
Nyní je čas věnovat pozornost zbytku obrazovky. Uchopte Nástroj pro tvar obdélníků a pomocí stejných rozměrů navigačního panelu (640 x 86 pixelů) umístěte tvar na plátno. Umístěte jej v dolní části obrazovky.
Krok 9: Pozadí
Nyní budeme pracovat na pozadí našeho designu. Otevřete panel možností prolnutí vrstvy pozadí a vyberte vzorek, který chcete vyplnit. Použil jsem tmavý vzor s vertikálními liniemi procházejícími z něj Jemné vzory - Zde můžete stáhnout celý vzor, který doporučuji.
Chcete-li do vybraného vzoru přidat některé své vlastní barvy, můžete to udělat pomocí stylu barevného překrytí. Aplikoval jsem hnědou (z mé barevné palety, kterou jsem si vybral dříve) na 35%. Tato opacita je dostatečně nízká, aby se vaše struktura / vzorek ukázala ještě vysoká, aby zbarvila barvu nebo pozadí.
Nyní máme tmavé pozadí, uvidíte, kde náš navigační panel splňuje náš obrázek na pozadí, nevypadá tak dobře. Můžete to snadno vyřešit tím, že do navigačního panelu použijete stínový styl, který bude vypadat, jako by byl nad vaším pozadím.
Znovu otevřete panel možností volby pro navigační lištu a vyberete panel stínu. Zkontrolujte, zda je vybrána černá barva a změňte opacitu na 25%. Zvětšete vzdálenost 6px a velikost na 10px a klepněte na tlačítko OK. Možná budete muset experimentovat s těmito možnostmi, protože výsledky se budou lišit v závislosti na barvě a typu textury / vzoru, který jste vybrali pro pozadí.
Krok 10: Zprávy
Nyní, když máme kompletní zázemí a horní navigační panel, budeme se soustředit na to, aby byl hlavní obsah aplikace popsán. Vyberte nástroj Obdélník tvaru a umístěte obdélník na plátno. Šířka, kterou jsem použila, byla 600 pixelů, což umožnilo ukázat 20px na každé straně tvaru. Použil jsem mnohem lehčí verzi žluté barvy / barvy zbarvení z palety barev, kterou jsem vybral dříve.
Zvolte Nástroj pro tvarování obdélníkového tvaru a změňte rozměry na 80 x 80 pixelů a poloměr na 6 pixelů. Umístěte tvar (který má být použit jako tvar tvého avataru) na plátno a umístěte jej správně. Abych zachoval svůj design konzistentní, dovolil jsem 20px posadit mezi okraje mého tvaru mé zprávy a tvaru mého avataru.
Pomocí textového nástroje napište své jméno a zprávu; Používal jsem Arial Rounded MT Bold pro mé jméno a normální Arial pro mou zprávu textový formát vašeho textu tak, aby se vešel do vašeho rámečku na pozadí zprávy.
Nyní přidáme ke své zprávě nějaký styl pouze pomocí barvy; Změnil jsem barvu mého jména na tmavou tyrkysovou barvu (velmi blízko k černé barvě) a vyplavenou tyrkysovou barvu inspirovanou mým navigačním barem.
Pak jsem vložil obrázek sebe tím, že přejdu do Soubor> Místo. Jakmile jsem vložil obrázek, změnil jsem jeho velikost a umístil jej nad můj černý box, který jsme vytvořili dříve. Chcete-li ušetřit rozříznutí obrazu a také, že máte možnost později přesunout nebo změnit jeho velikost, klikněte pravým tlačítkem na něj a vyberte možnost Vytvořit masku pro ořez. To spojuje váš obrázek s avatarem do černé schránky a zobrazí pouze to, co je nad černým rámečkem. Naleznete pomocí nástroje Přesun, který můžete stále přemístit a změnit velikost tohoto obrázku.
Pomocí jiné ikony IconSweets jsem vytvořil pěkné malé časové razítko. Musel jsem snížit velikost ikony - můžete to udělat tak, že přejdete do Edit> Transform> Free Transform a změníte rozměry (buď podle pixelů nebo procenta). Použil jsem 70% v šířce i výšce, abych udržel proporce. Přidala jsem nějaký text a voila. Ujistěte se, že vyberete barvu, která je snadno čitelná, ale nezačíná na pozornost.
Krok 11: Duplicitní zprávy
Duplikujte své schránky pod sebou a zanechte 2px mezery mezi každým rámečkem pozadí. Můžete to udělat buď klepnutím a přetažením vrstev přes ikonu Nová vrstva, nebo můžete současně stisknout Cmd + Shift + šipka dolů, abyste duplikovali a posunuli vrstvy dolů.
Změňte veškerý obsah ve schránkách zpráv, jako by to byla skutečná konverzace. Pokud potřebujete změnit velikost rámečků na pozadí, použijte Nástroj přímého výběru a změňte jejich velikost pomocí kotevních bodů. To udržuje všechny hrany pěkné a ostré.
Krok 12: Styl zpráv
Tímto provedením se nyní můžeme soustředit na život. Otevřete panel možností prolnutí a vyberte panel stínů. Změňte režim míchání na normální a vyberte barvu jako bílou barvu. Zvětšete opacitu na 80% namísto standardního 75% a nastavte stín na vzdálenost 2px. Tím se skryje mezera o velikosti 2px, kterou jsme zanechali mezi každým záhlaví okna zprávy.
Zkopírujte a vložte výše uvedený styl vrstvy na všechny vrstvy pozadí zprávy. Měli byste skončit nějakým způsobem.
Krok 13: Přidání zaoblených rohů
Chcete-li, aby byl náš návrh zajímavější, a také přidat další hloubku, přidáme zaoblené rohy do dolní části našich zpráv a ukážeme jim, jako by se na papíře nahromadily další papíry.
Vyberte nástroj Zaoblený obdélník a dejte mu poloměr 10px. Změňte šířku na 600 pixelů (nebo jakoukoli šířku, kterou jste použili pro pozadí v poli zpráv) a výšku, která nepřesahuje výšku pozadí spodního okna zprávy. Zde jsem použil jasnou barvu, aby byla snadno viditelná.
Pomocí nástroje přímého výběru vyberte obsah vrstvy vektorového tvaru (zaokrouhlenou krabičku, kterou jsme právě nakreslili) a přejděte na položku Upravit> Kopírovat. Klikněte na vrstvu vektorového tvaru v dolním okně zprávy a přejděte na příkaz Úpravy> Vložit. Tím se vložíte vrstva tvaru do jiné vrstvy tvaru. Nyní můžete vymazat tvar, který jsme vybrali v předchozím kroku. Měl byste stále vidět tvar viditelný.
Otevřete možnosti prolnutí dolního pozadí zprávy a použijte stín. Změna barvy na černou, opacitu na 25%, vzdálenost 1px a velikost 3px. Tím vytvoříte pěkný jemný stín.
Duplikovat tuto vrstvu a posunout ji o 5 pixelů. Změňte vrstvu tak, aby seděla pod vaším originálem. Měli byste skončit s něčím podobným níže. Jak můžete vidět, je to jednoduchý způsob, jak vytvořit překrývající se vzhled papíru.
Opakujte krok znovu, abyste měli tři kusy papíru namísto pouhých dvou. Možná budete chtít dát spodní kus papíru o něco pozoruhodnějšího stínu.
Krok 14: Stín navigačního panelu
Pravděpodobně jste si všimli, že při navrhování našich schránek jsme skryli většinu stínů, které naši navigační lišta odnesla na naše pozadí. Chcete-li jej nahradit, můžete buď umístit zprávy pod navigační panel (možnost snadné, ale nereálné), nebo dokončit následující krok.
Vyberte nástroj Rectangular Marquee a nakreslete hubenou čáru v horní části vašich zpráv podobně jako výše. Napište ho černě na novou vrstvu.
Přejděte na Filtr> Rozmazání> Gaussovo rozostření a použijte rozmazání. To bude nyní fungovat jako stín - stačí vystřihnout všechny bity rozostření, které překrývají okraje pozadí vašeho okna zpráv.
Krok 15: Tlačítka profilů a přehledů
S odkazem na naše drátěné snímky jsme se rozhodli povolit uživatelům, aby posunuli zprávu směrem doleva a odhalili další tlačítka. V tomto případě tato tlačítka umožňují uživateli zobrazit profil plakátů zpráv nebo nahlásit poster zpráv.
Vyberte vrstvy, které tvoří jednu z vašich zpráv (volím Homer Simpsonsova zpráva) a pomocí kláves Shift a kláves se šipkami posuňte zprávu o 10px najednou vlevo. Pomocí textového nástroje napište štítky a vyberte některé ikony, které odpovídají těmto štítkům. Vybrala jsem si individuální osobu pro profil a cíl pro report (jako kdyby jste je stříleli - myslel jsem si, že to bylo docela zábavné!).
Abych tuto oblast přiblížil, přidal jsem k ikonám a textu ikonu černého stínu.
Krok 16: Panel textových polí
Panel textových polí je jedním z nejdůležitějších prvků na této obrazovce. Uživatelé potřebují, aby mohli snadno a bez záměny vkládat své zprávy (což je důvod, proč jsem odstranil skryté tlačítko odesílání v počátečních náčrtech).
Chcete-li začít, vyhledejte vrstvu pozadí a zkopírujte styly vrstev. Vložte tyto styly vrstev do vrstvy textového pole, které jsme vytvořili dříve. Otevřete možnosti prolnutí této vrstvy nahoru a vyberte panel tahů. Použijte 2px tah na vnější stranu vašeho tvaru, používejte jako barvu plnou černou barvu. Vzhledem k tomu, že mrtvice je na vnější straně a tvar se dotýká tří okrajů plátna, zobrazí se pouze zdvih na vrcholu tvaru.
Nyní vyberte kartu vnitřní stín a změňte režim skládání na normální, barvu na bílou, opacitu na 10% a vzdálenost 2px. Ujistěte se, že je úhel nastaven na výchozí světlo (90 stupňů) a klepněte na tlačítko OK. To nám dává pěkný vrchol pod naší černou mrtvicí. Při použití těchto dvou jednoduchých 2px řádků vypadá náš textový pole již dobře oddělený od zbytku pozadí, přestože má stejné pozadí!
Vyberte nástroj Zaoblený obdélník. Dej svůj nástroj vysokým poloměrem, použil jsem 50px; bude to mít velmi kulaté (kruhové) konce. Položte tvar na bar, použil jsem jako rozměry 460 x 54 pixelů. Ujistěte se, že levá strana tvaru textového pole je 20px od levé strany vašeho plátna, aby se rozložení návrhu udrželo konzistentní.
Naplňte tvar tmavou barvou (na pozadí jsem použil hnědou barvu, která byla vybrána z tmavého pixelu) a pak otevřete panel stylů vrstev. Použijte 2px bílý stín do textového pole s opacitou 10%.
Klepněte na vnitřní stínový panel a aplikujte do tvaru textového pole vnitřní stín. To mu dává mnohem větší hloubku a udělá to tak, jako by to bylo řez do pozadí tyčí. Použijte černou barvu s kombinovaným režimem násobení a opacitou 25%. Použil jsem 5px jako vzdálenost a 10px jako velikost, i když možná budete chtít experimentovat zde.
Pomocí textového nástroje a vybaveném Arial Rounded MT Bold zadejte "Napište komentář ..." a umístěte jej do textového políčka. Otevřete možnosti prolnutí pro novou textovou vrstvu a použijte stín černého stínu s neprůhledností 75%, vzdáleností 2px a velikostí 3px.
Krok 17: Tlačítko textového pole
Znovu vyberte nástroj tvaru obdélníku a za použití stejného nastavení poloměru a výše, kterou jsme dříve použili, umístěte tvar na pozadí textového pole. Změňte velikost délky tlačítka tak, aby seděla 10 pixelů z textového pole a 20 pixelů od pravého okraje plátna.
Klikněte pravým tlačítkem na novou vrstvu tvaru tlačítka a vyberte možnosti prolnutí. Vyberte panel překryvného přechodu a použijte gradient od světla (horní) do tmy (dole). Používala jsem velkolepou žlutou barvu, která byla v barevné paletě, kterou jsem vybral dříve.
Abychom udrželi náš design konzistentní, hodlám použít tlačítko, které vypadá, jako by vypadalo z pozadí, podobně jako u tlačítek na navigační liště. Tentokrát jsem namísto gradientového mozku použil plnou čerň, protože pozadí je mnohem tmavější a není naplněno sklonem. Na vnitřní stranu mého tvaru jsem použil 2px mrtvici se 100% opacitou.
Vyberte textový nástroj a zadejte na tlačítko "Odeslat". Otevřete možnosti prolnutí vaší nové textové vrstvy a použijte na text stín hnědého stínu s rozměrem 1px a velikostí 3px.
A s tím skončili jsme všichni hotovi! Rádi bychom viděli vaše výsledky, takže neváhejte a uveďte je do níže uvedené poznámky. Chcete-li vidět design v plném rozlišení, můžete to vidět tady .